日期:2014-01-23 浏览次数:20819 次
em 和 strong 的区别,可以从三个层次上来谈。
首先看 HTML 4.01 中的说明:
EM: Indicates emphasis.
STRONG: Indicates stronger emphasis.
em 表示强调,strong 表示更强烈的强调。言简意赅,表明了 em 和 strong 的命名来历。并且在浏览器中,em 默认用斜体表示,strong 用粗体表示。这是第一个层次上的区别。
第二个层次上,在 Emphasis in context versus overall highlighting 和 em vs. strong 这两篇文章中,做了很好的总结:
em 用来局部强调,strong 则是全局强调。从视觉上考虑,em 的强调是有顺序的,阅读到某处时,才会留意到。strong 的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果,因此也就成了 em 和 strong 的默认款式。
感觉上面曾经解释得很清楚了?我们再来看看第三个层次上的区别。HTML5 草案 中做了详尽解释:
em 表示内容的着重点(stress emphasis),strong 表示内容的重要性(strong importance),strong 不会改变所在句子的语意,em 则会改变所在句子的语义。并且举了一个非常好的例子:
<p><em>Cats</em> are cute animals.</p>
强调猫,讨论的是哪种动物聪明可爱。
<p>Cats <em>are</em> cute animals.</p>
强调是,讨论的是猫是不是聪明可爱。
<p>Cats are <em>cute</em> animals.</p>
强调聪明可爱,讨论的是猫究竟是聪明可爱呢还是愚笨讨厌。
<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>
strong 表示的是重要性上的强调,不会惹起句子意思的变化。最后留意 em 和 strong 都可以有多重,比如可以用两个 strong 来表示内容很重要。
可以看出,第二个层次上所说的局部强调和全局强调是不够精确的。em 和 strong 区别的玄妙处,在 HTML5 草案里才得到淋漓尽致的阐释。推荐大家有时间的时候,细心阅读 HTML5 草案。有很多元素的语义,都阐释得非常清楚,对于我们如何在最恰当的地方使用最恰当的标签,非常具有价值。
最后,在 前端与民工 一文的回复中,以及收到的邮件里,很遗憾的没有发现有谁知道第三个层次上的区别。因此预备的礼品(我还真预备了10份),很落寞的发不出去了。不过这篇文章仅是个引子,接下来预备用一系列文章来探讨HTML中元素的语义。礼品的承诺继续无效,留给下一个话题:
请阐述dl的语义,并列举至少5种使用场景。
可以查阅材料,将结果贴在回复里,或邮件发送给我都可以,礼物无限,前10个答对的必送。
补充:和一些朋友又讨论了下,最后我的看法是:
em 是句意强调,加与不加会惹起语义变化。
strong 是重要性强调,和局部还是全局无关,局部强调用strong也可以,strong强调的是重要性,不会改变句意。