zoukankan      html  css  js  c++  java
  • 语义化HTML:i、b、em和strong标签

    一、前言                          

      在HTML4.1中i和b作为表象标签分别表示斜体和粗体样式,而强调样式与内容分离的XHTML中则出现样式效果相同的em和strong表义标签,此时我们会建议避免使用i和b标签,应该改用em和strong标签。

      但在HTML5对i和b赋予新的语义,本文将再一次认识它们!

    二、元素语义                        

      1. i标签

      W3C草案:

    The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose (content whose typical typographic presentation is italicized).W3C specification

      语义化的 <i>元素 可以用来表示:外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。建议通过class特性标识具体语义,若为表示外文单词则采用lang特性标识具体的语言种类。示例:

      滑板介绍

      滑板的基本动作名为豚跳(ollie)

    <h3>滑板介绍</h3>
    <p>
    滑板的基本动作名为<i class="skateboard">豚跳</i>(<i lang="en_us">ollie</i>)
    </p>

     2. b标签

       W3C草案:

    The <b> element represents a span of text offset from its surrounding content without conveying any extra importance; for example, keywords in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold text.
    W3C specification

      语义化的 <b>元素 用于表示:局部范围内不重要但需要突出的内容,如概要中的关键字、评论中的名词等。建议通过class特性标识具体语义。示例:

      滑板构造概要

      滑板由轮子板面磨砂纸支架(truck)组成。

    <h3>滑板构造概要</h3>
    <p>
    滑板由<b class="compent">轮子</b>、<b class="component">板面</b>、<b class="component">磨砂纸</b>和<b class="component">支架</b>(<i lang="en_us>"truck</i>)组成。
    </p>

      3. em标签

        W3C草案:

    The em element represents a span of text with emphatic stress.

    W3C specification

       语义化的 <em>元素 表示:局部范围内强调的内容,用于改变句子或段落的侧重点。注意其作用范围为局部,也就是阅读到某段落或句子时才会注意到。示例:

       ollie教学

       后脚踏板的同时前脚提起,并向斜前方跳起。

       后脚踏板的同时前脚提起,并向斜前方跳起

       第一句强调 前脚提起,第二句强调 向斜前方跳起。

      4. strong标签

        W3C草案:

    The strong element represents a span of text with strong importance.

    W3C specification

        语义化的<strong>元素表示:全部范围内强调的内容,随意无序扫描全文时能突出的关键内容。

    三、总结                          

      理解语义化HTML确实不易啊,继续努力吧!

      尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4172771.html ^_^肥仔John 

    四、参考                          

    http://www.zhangxinxu.com/wordpress/2011/11/i-b-em-strong-html5-%E8%AF%AD%E4%B9%89/

    http://www.blueidea.com/tech/web/2008/6342.asp

    http://www.lixuepeng.com/post/1906.html

  • 相关阅读:
    AtCoder Grand Contest 015 题解
    AtCoder Grand Contest 014 题解
    AtCoder Grand Contest 013 题解
    AtCoder Grand Contest 012 题解
    AtCoder Grand Contest 011 题解
    AtCoder Grand Contest 010 题解
    AtCoder Grand Contest 009 题解
    NOIP2017 Day2 题解
    博客园主题备份
    多项式全家桶
  • 原文地址:https://www.cnblogs.com/fsjohnhuang/p/4172771.html
Copyright © 2011-2022 走看看