<em>: 强调元素

试一试

<p>Get out of bed <em>now</em>!</p>

<p>We <em>had</em> to do something about it.</p>

<p>This is <em>not</em> a drill!</p>

em {
  /* Add your styles here */
}

属性

此元素仅包含全局属性。

用法说明

<em> 元素用于表示与其周围文本相比具有语音重音的词语，这通常限于句子中的一个或多个词，并且会影响句子本身的含义。

通常，此元素会以斜体显示。但是，不应使用它来应用斜体样式；请为此目的使用 CSS font-style 属性。使用 <cite> 元素标记作品的标题（书籍、戏剧、歌曲等）。使用 <i> 元素标记具有不同语调或情绪的文本，这涵盖了斜体许多常见情况，例如科学名称或外语单词。使用 <strong> 元素标记比周围文本更重要的文本。

<i> 与 <em> 对比

有些开发者可能会对多个元素看似产生相似视觉结果感到困惑。<em> 和 <i> 是一个常见的例子，因为它们都将文本斜体化。有什么区别？应该使用哪个？

默认情况下，视觉效果是相同的。但是，语义含义不同。<em> 元素表示对其内容的语音重音，而 <i> 元素表示与正常散文分开的文本，例如外语单词、虚构角色思想，或当文本引用单词的定义而不是其语义含义时。（作品标题，例如书籍或电影名称，应使用 <cite>。）

这意味着正确的用法取决于具体情况。两者都不是纯粹用于装饰目的，那是 CSS 样式的工作。

<em> 的示例可以是

<p>Just <em>do</em> it already!</p>
<p>We <em>had</em> to do something about it.</p>

阅读文本的人或软件会以口语重音来发音斜体字。

<i> 的示例可以是

<p>The word <i>the</i> is an article.</p>
<p>The <i>Queen Mary</i> sailed last night.</p>

这里，“Queen Mary”这个词并没有额外的强调或重要性。它只是表明所讨论的对象不是一位名叫 Mary 的女王，而是一艘名为“Queen Mary”的船。

示例

在此示例中，<em> 元素用于突出两个配料列表之间的隐含或明确的对比。

<p>
  Ice cream is made with milk, sweetener, and cream. Frozen custard, on the
  other hand, is made of milk, cream, sweetener, and <em>egg yolks</em>.
</p>

结果

技术摘要

规范

浏览器兼容性

另见

• <i>