CSS3-03 样式 2_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:18:50
原创
1285人浏览过

前言

在上一篇的博客中,阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。但是总觉得,这些东西好像是 HTML 元素的包装样式,真正的要点是 HTML 元素(即:盒模型的内容)的样式。不知大家是怎么理解的,欢迎在评论中讨论。接下来,就来看看 HTML 元素都有哪些样式吧!大家都知道 HTML 元素是由标签(如:<p>)定义的,而标签是具有语意的,其本省包含着一定的格式。标签指定的 html 元素的格式,在这里请允许我称其为 html 样式;而对于 css 定义的 html 元素的样式,称其为 css 样式。
登录后复制
html 样式

  • 概述

    HTML 元素的重要内容是文本(当然也有图像、音频、视频等)。在 HTML 中内置了很多用来格式化文本的标签,这些标签定义的元素内容具有一定的格式,比如说:加粗、倾斜等。
    登录后复制
  • 文本格式化
  • 样式标签
  • :着重文本

    <p><em>强调文本</em>(<em>标签)</p>
    登录后复制

  • :斜体字

    <p><i>斜体文本</i>(<i>标签)</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p>
    登录后复制

  • :加重语气

    <p><strong>加重语气文本</strong>(<strong>标签)</p>
    登录后复制

  • :粗体文本

    <p><b>粗体文本</b>(<b>标签)</p>
    登录后复制

  • :小号字

    <p><small>小号字文本</small>(<small>标签)</p>
    登录后复制

  • :上标字

    <p>上标文本<sup>上标</sup>(<sup>标签)</p>
    登录后复制

  • :下标字

    <p>下标文本<sub>下标</sub>(<sub>标签)</p>
    登录后复制

  • :插入字

    <p><ins>插入的文本</ins>(<ins>标签)</p>
    登录后复制

  • :删除字

    <p><del>删除的文本文本</del>(<del>标签)</p>
    登录后复制

  • 效果图

  • 计算机输出

  • 样式标签
  • :计算机代码
  •     while (true) { }
    登录后复制

  • :键盘码

    <kbd>    control + e</kbd>
    登录后复制

  • :计算机代码样本

    <samp>Hello World!</samp>
    登录后复制

  • :变量

    <var>variable</var>
    登录后复制

  • :预格式文本</p>     <p class="sycode">      <pre class="precsshui"><pre class="brush:php;toolbar:false">    I        like            HTML
    登录后复制

  • 示例
  • 代码

            CSS 样式 2    
    var <var>variable</var> = true;if (<var>variable</var>) {    print("Hello World!");} else {    // do nothing}
    登录后复制
    程序运行结果: <samp>Hello World!</samp>

  • HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号