CODING FACTORY

HTML 教程 / 文本语义：强调、引用、缩写与代码

HTML
创建时间 2026-11-03 最后修改 2026-11-03

HTML 文本元素说明一段文字为什么需要特殊标记，而不仅仅是改变它的外观。使用 em 表示强调，strong 表示重要性，q 和 blockquote 用于引用，abbr 用于缩写，code 用于代码。

强调与重要性：em 和 strong

使用 em 来突出显示句子中的一个单词。如果内容本身具有特殊意义，例如警告，请使用 strong。浏览器通常会以斜体或加粗显示这些元素，但它们的含义并不是由这些样式定义的。

<p>请在刷新浏览器<em>之前</em>保存文件。</p>

<p><strong>不要分享您的密码。</strong></p>

第一句话强调动作的顺序；第二句话标记警告。如果您只需要视觉呈现，请使用 CSS，而不要添加没有对应意义的语义元素。

简短引用和块引用：q 和 blockquote

在句子中引用短语时使用 q，而在形成独立块的引用中使用 blockquote。以下句子仅用于演示这些元素。

<p>指示是 <q>保存您的更改</q>.</p>

<blockquote>
  <p>在撰写内容之前规划文档的结构。</p>
</blockquote>

浏览器可以为 q 提供引号，因此不要在其周围加上第二对引号。对于真实引用，请核对措辞并在可见文本中标注来源。blockquote 上的 cite 属性不会自动向读者显示来源。

使用 abbr 来解释缩略语

abbr 表示缩写。在文本中首次提到一个未知术语时，请将其完整写出；读者不应必须将鼠标悬停在 title 属性上才能了解其含义。

<p>超文本标记语言 (<abbr title="超文本标记语言">HTML</abbr>) 定义网页的结构。</p>

在相同上下文中，不必在每次后续使用时都重复完整术语。

代码和用户输入：code 和 kbd

对于作为代码讨论的小代码片段或文件名，请使用 code。对于用户需要提供的键或其他输入，请使用 kbd。使用字面代码括号时，请遵循 HTML 语法 中的字符转义规则。

<p>保存 <code>index.html</code> 时，请按 <kbd>Ctrl</kbd>+<kbd>S</kbd>。</p>

对于需要保留缩进的多行代码，可以将 code 元素 放入 pre 中。本课程的代码块使用 pre 和 code，并带有用于语法高亮的语言类。

比较完整文档中的语义

将此完整文档保存为 UTF-8 的 text-semantics.html。引用是一个虚构的指令，用于展示该元素。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文本语义练习</title>
</head>
<body>
  <h1>一个简短的指令</h1>
  <p>在保存文件<em>之后</em>检查结果。</p>
  <p><strong>保存原始文件。</strong></p>
  <p>一个虚构的指示指出 <q>保存您的更改</q>.</p>
  <p>本文件使用超文本标记语言（<abbr title="超文本标记语言">HTML</abbr>).</p>
  <p>按 <kbd>Ctrl</kbd>+<kbd>S</kbd> 保存。</p>
  <pre><code>&lt;p&gt;示例句子&lt;/p&gt;</code></pre>
</body>
</html>
  1. 通过阅读周围的文本来识别强调、警告、引用和缩写。
  2. 确保最终的 <p> 被显示为代码，而不是解释为段落。
  3. 暂时将 strong 替换为 span，比较后再恢复为 strong，以表达该信息的重要性。这会将元素的含义与其标准显示进行比较。

MDN 的代码参考解释了用于显示代码的元素。

选择与含义相符的元素

  • 使用 em 表示强调，使用 strong 表示重要性。
  • 使用 q 表示行内引用，使用 blockquote 表示独立引用。
  • 使用 abbr 表示缩写，并在可读文本中解释未知术语。
  • 用 code 区分代码，用 kbd 区分用户输入。

请参见 MDN 上的 HTML 元素参考 以了解允许的内容和每个元素的详细语法。在 无障碍的基本原则：标题、链接、图像和键盘 中，意义与表现之间的区分同样适用。

HTML
同分类其他文章