html5教程-i, b, em, strong元素在HTML5中的新语义

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

&nbs p;

.entry blockquote p {padding:0; margin:.5em 0;}code .tag{color:blue;}code .atn{color:purple;}code .atv{color:green;}

一、普通的开头

HTML 5中的语义那是相当劳力伤神的一件事啊。顾名思意，一知 半 解情况下使用HT ML 5的语义化标签，多半会进入“不合理使用标签”的深色名单。我们都是对自己有要求的人，虽然很烦，很折腾，我们还是有必要花大量的功夫去理解每个HTML5标签的真正语义。

不过 嘛，这HTML5虽然势如破竹，但是，要真正一统天下还需时日。所以，HTML4还不是很 了解 的青年们，不必急于追随潮流，什么HTML5啊之类的，就当是浮 云 ， 知道 有几只 眼睛 几条腿就行了。因此，对于这类青年，那些专门讲HTML5的 文章 ，基本上可以当作流风之回雪。本文有些特殊，是对比HTML4，HTML5几个 标签元素 的。因此，不管你是哪个级别的青年，本文内容都算是有看头的。

很多HTML4中的标签元素在HTML5中被赋予了很多新的语义，这就像是给前朝遗孤赐予个什么官爵之类。本文就将讲述 i , b , em , strong 元素被HTML5包装成什么样子。

二、概要

<i> & # 8211; 原本只是倾斜，现在用来体现一种“交替的 声音 ”，通俗将就是普通段落文字中文艺的或2B的文字。像是外语（例如我经常写文章时混搭一些英文或 日语 ）、 科技 术 语（如超氧化物歧化酶SOD）或是用做排版的 斜体 文字。
(W3C:Markup, W hat WG) <b> – 原本就是 加粗 ，现在表示“文体突出”文字，通俗将就是普通段落文字中突出不安分的文字。像是文档概要中的关键字，评论中的产品名。 或者 代表强调的排版方式。(W3C:Markup, WHATWG) <em> – 原本表示强调，现在指有 压力 的强调。(W3C:Markup, WHATWG) <strong> – 原本表示更强强调，现指相当 重要 ，基本上都是一样的。(W3C:Markup, WHATWG)

三、详细

<i> 和 <b> 都是文字样式元素，没有任何语义，就是用来控制文字的长相的，因此又称为表象元素，是一度不推荐使用的标签。如今，这两个元素有了语义，但是，它们的样式又能被 CSS 改变 。像是 <b> 元素，并不是非得是加粗。正因如此， 推荐使用类名来表示其含义 以便日后可以轻松改变其样式。

i元素
下面是W3C草案引用：

The i element re PR esents a span of text in an alternate voice or mood, or otherwise offset From the normal prose (content whose typ ical typographic presentation is IT alicized).

W3C s PE cification

我们 不用 管上面 abc 说的 是什么 ，直接看下面的例子。
正如概要提到的，语义化的 <i> 元素可以用来表示：外文单词、生物分类、科技术语、船名、剧本舞台方位、乐谱、三个代表思想或手写文字。

下面 开始 示例。

一段剧本，引用如下：

尔康：紫薇，快走，快离开，容嬷嬷要来了！！

紫薇依依不舍离开尔康的房间……

尔康： 好了，终于把粘人的紫薇给弄走了，接下来就是二人独处的大好时光了！

尔康：琪琪，你可以从衣柜里出来了。

上面就使用了 <i class = "voiceover" > 来表示话外音，以反映尔康内心少女般的情怀。

还是剧本节选，引用如下：

永琪：尔康，不要，不要啊， やめて (雅蠛蝶)！

使用 <i lang = "ja-latn" > やめて </i> 来 表明 “不同语言”。

皇阿玛：紫薇，这是使用天山雪域 红景天 熬的粥，你有没有听过“相宜本草，红景天幼白 系列 ，以红，养白”。来，多 吃 点！

使用 <i class = "taxonomy" > 红景天 </i> 表示分类名。

<i> 的使用是最为淡定的——像 <em> 为压力强调文字， <strong> 为重要文字， <cite> 为引用或文献目录， < DF n> 为定义单词， < VAR > 为数学变量。记住，在使用 <i> 的使用，最好使用 class 属性让人知道为什么这个元素要被使用。对了，上面语言 lang 属性元素可以使用 [lang="ja-latn"] 选择器进行样式定义。

b元素
W3C草案引用如下：

The <b> element represents a span of text offset f rom its surrounding content without conveying any extra importance; for ex am ple, keywo rds in a document abstract, product names in a rev iew, or other spans of text whose typical typographic presentation is bold text.

W3C specification

<b> 和 <i> 一直都是一路货色。在我看来，虽然在HTML5中这两个元素被赋予的语义，但是却是下等人的感觉，专干一般人不干的杂活。

上面第一个例子中的人名（尔康），就是使用的 <b> 标签， <b class = "character" > 尔康 </i> 用来表示 人物 。

<b> 元素该在什么地方使用呢？就是下面这些元素都不适合的时候：表重要的 <strong> ，表强调的 <em> ，表标题的 < h1 >–<h6> ，表高亮或标记文本的 < ;m ark> 等。

<b> 元素就像是三国杀五谷丰登中最后一位拿牌的人, sign~~

em元素
W3C草案引用如下：

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

W3C specification

em元素过去就是强调的 意思 。在HTML5中的释义总有一个名为”stress”的单词伴随左右。”stress”其实也是强调的意思，我为了有所区分，就 翻译 成本 意“压力”的意思。用在语句某个单词上来改变句子的侧重。举例说明：

紫薇晕倒……

皇阿玛：立即给我传 太医 。

上面皇阿玛台词中，强调的是“太医”(太医被em标签包裹)，要传的是太医，不是紫薇的心上人尔康。

紫薇晕倒……

皇阿玛： 立即 给我传太医。

而这里，“立即”被 em 包裹，说明强调的是时间的及时性，耽误1分钟我都要 你们 的脑袋。

strong元素
W3C草案引用如下：

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

W3C specification

这个元素真没什么好说的，HTML4跟HTML5有什么差异吗？我是没看出来。我们可以嵌套使用 <strong> 和 <em> 元素来表示相对重要性。

四、爱奇艺的结尾

虽然HTML5中以前的一些表象元素 i , b 都语义化了，但是，有人 觉得 这是个糟糕的想法，无论是提供者还是 开发者 都没有这么多蛋疼的闲功夫去确认i或是b标签的语义，HTML4中 em , strong 表意， i , b 表形并没有什么让人 不可接受 的。

等，老外对此可谓观点多多。时间关系，我就不一一叙述了。

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！  html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！

总结

以上是 为你收集整理的 html5教程-i, b, em, strong元素在HTML5中的新语义 全部内容，希望文章能够帮你解决 html5教程-i, b, em, strong元素在HTML5中的新语义 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-i, b, em, strong元素在HTML5中的新语义的详细内容...