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

posted @ 2014-12-18 22:17  ^_^肥仔John  阅读(4423)  评论(0编辑  收藏  举报