强调和重要性

什么是强调和重要性？

在人类语言中，我们经常强调某些词语来改变句子的含义，并且我们经常希望以某种方式标记某些词语为重要或不同。HTML 提供了各种语义元素，允许我们使用这些效果来标记文本内容，在本节中，我们将介绍其中一些最常用的元素。

强调

当我们想在口语中加入强调时，我们会强调某些词语，巧妙地改变我们所说的话的含义。同样，在书面语中，我们倾向于通过将词语设置为斜体来强调它们。例如，以下两个句子具有不同的含义。

我很高兴你没有迟到。

我很高兴你没有迟到。

第一句话听起来像是真心松了一口气，因为对方没有迟到。相比之下，第二句话，将“高兴”和“迟到”这两个词都设为斜体，听起来像是在讽刺或被动攻击，表达了对对方稍微迟到的不满。

在 HTML 中，我们使用 <em>（emphasis，强调）元素来标记此类实例。除了使文档更具可读性外，屏幕阅读器也能识别它们，并且可以配置为以不同的语调朗读它们。浏览器默认将其样式设置为斜体，但您不应仅为获得斜体样式而使用此标签。要实现此目的，您可以使用 <span> 元素和一些 CSS，或者可能使用 <i> 元素（见下文）。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

重要性强调

为了强调重要的词语，我们在口语中倾向于强调它们，在书面语中则设置为粗体。例如

这种液体剧毒。

我指望你了。不要迟到！

在 HTML 中，我们使用 <strong>（strong importance，重要性强调）元素来标记此类实例。除了使文档更有用之外，屏幕阅读器也能识别它们，并且可以配置为以不同的语调朗读它们。浏览器默认将其样式设置为粗体文本，但您不应仅为获得粗体样式而使用此标签。要实现此目的，您可以使用 <span> 元素和一些 CSS，或者可能使用 <b> 元素（见下文）。

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

如果需要，您可以将 strong 和 em 嵌套在一起

<p>This liquid is <strong>highly toxic</strong> — if you drink it, <strong>you may <em>die</em></strong>.</p>

让我们来实践强调和重要性

在本节中，我们希望您实践强调和重要性

1. 单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。
2. 在主标题中，为“Emphasis”（强调）一词加上强调，为“importance”（重要性）一词加上重要性强调。
3. 在第一个段落中，为咖啡机名称加上重要性强调，并强调描述咖啡的形容词。
4. 在第二个段落中，为温度描述（“冷”）和您应该采取的行动（“穿暖和以避免生病”）加上重要性强调。为“生病”加上额外的标记，使其既被强调又被认为是重要的。

如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。

h1 {
  font-weight: normal;
}

<h1>Emphasis and importance</h1>

<p>
  My new coffee machine is called The Percolator 2000. It produces the most
  sublime and wonderful brew.
</p>

<p>
  In the dead of winter, it will be cold. You should wrap up warm to avoid
  falling ill.
</p>

<h1><em>Emphasis</em> and <strong>importance</strong></h1>

<p>
  My new coffee machine is called <strong>The Percolator 2000</strong>. It
  produces the most <em>sublime</em> and <em>wonderful</em> brew.
</p>

<p>
  In the dead of winter, it will be <strong>cold</strong>. You should
  <strong>wrap up warm to avoid <em>falling ill</em></strong
  >.
</p>

斜体、粗体、下划线……

到目前为止我们讨论的元素都具有明确的语义。<b>、<i> 和 <u> 的情况则稍微复杂一些。它们最初是为了在 CSS 支持较差或根本不支持的时代，人们能够编写粗体、斜体或下划线文本而出现的。像这类只影响表现而不影响语义的元素，被称为表现元素，并且不应再使用，因为正如我们之前所见，语义对于可访问性、SEO 等至关重要。

HTML5 为 <b>、<i> 和 <u> 重新定义了新的、有些令人困惑的语义角色。

您可以记住的最好规则是：只有在没有更合适的元素来传达传统上由粗体、斜体或下划线传达的含义时，才适合使用 <b>、<i> 或 <u>；而且通常都有更合适的元素。考虑 <strong>、<em>、<mark> 或 <span> 是否更合适。

始终保持可访问性的思维。斜体的概念对于使用屏幕阅读器的人或使用拉丁字母以外的文字系统的人来说帮助不大。

• <i> 用于传达传统上由斜体传达的含义：外来词、分类名称、技术术语、想法……
• <b> 用于传达传统上由粗体传达的含义：关键词、产品名称、导语句……
• <u> 用于传达传统上由下划线传达的含义：专有名词、拼写错误……

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) is the most common
  hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>Someday I'll learn how to <u class="spelling-error">spel</u> better.</p>

<!-- term being defined when used in a definition -->
<dl>
  <dt>Semantic HTML</dt>
  <dd>
    Use the elements based on their <b>semantic</b> meaning, not their
    appearance.
  </dd>
</dl>

总结

暂时我们完成了对强调和重要性的探讨。接下来我们将继续学习如何在 HTML 中表示列表。

• 上一页
• 概述：使用 HTML 构造内容
• 下一页