语义化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