通过HTML5规范搞定i、em、b、strong元素的区别

2020-04-24 19:53:07易采站长站整理

em 元素代表对其内容的强调。突出强调的位置会改变语句本身的意义。因此,元素构成内容的一个部分。用这种方式表示强调的程度依赖于是何种语言。

举例(类似汉语里面重读某个词表示不同含义):

// 这是一句不带任何强调的句子
<p>Cats are cute animals.</p>

// em 包围 Cats,强调猫是种可爱的动物,而不是狗或者其他动物
<p><em>Cats</em> are cute animals.</p>

// em 包围 are,代表句子所说是事实,来反驳那些说猫不可爱的人
<p>Cats <em>are</em> cute animals.</p>

// em 包围 cute,强调猫是一种可爱的动物,而不是有人说的刻薄、讨厌的动物
<p>Cats are <em>cute</em> animals.</p>

// 这里强调猫是动物,而不是植物
<p>Cats are cute <em>animals</em>.</p>

规范末尾note:

The em element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.

译文:

em不是一个普通的斜体标签。有时为了部分文本由于不同的语态或语气需有别于段落的其他部分,这是i标签更为合适。em标签不是为了表明重要性,如果是出于这个目的,strong标签更为合适。

b介绍

规范描述:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

译文:

b 元素代表侧重实用目的而不带有任何额外重要性也不暗示不同语态或语气的一段文本,比如一段文本摘要中的关键词、一段审查中的产品名称、文本驱动软件中的可执行语句或者一篇文章的导语。

举例:

// 下面的 b 元素起到突出关键词的作用,但不具备强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

// 下面的 b 元素让被包围的词特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

// 下面的 b 元素标注了文章的导语
<article>
<h2>Kittens 'adopted' by pet rabbit</h2>