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强调的是重要性,不会改变句意。
新闻热点
疑难解答