HTML 文本格式化

HTML 提供了多种标签来格式化文本，允许你强调某些词语、表明重要性，或者仅仅改变文本的外观。这些标签有助于创建结构良好且易读的内容。

在本章节中，我们将探索 <b>、<strong>、<i>、<em>、<small> 和 <mark> 标签，了解它们的用途以及如何有效地使用它们。我们还会讨论那些长得虽然像、但含义不同的标签之间的区别（语义差异），以及何时该选哪一个。

1. HTML <b> 标签：粗体文本 (Bold Text)

<b> 标签用于将文本加粗。这是一种在段落中吸引眼球、突出特定词语的简单方法。

注意： <b> 标签主要是一个表现层（Presentational）元素。这意味着它只改变文本的外观，而不包含任何实际的含义（语义）。

1.1 <b> 标签示例

<p>这是一个 <b>粗体</b> 单词。</p>

在这个例子中，“粗体”这个词在浏览器中会以加粗字体显示。

1.2 何时使用 <b>？

当你想要让文本在视觉上突出，但并不想暗示它有特殊重要性时，使用 <b> 标签。

例如，你可能用它来高亮产品描述中的关键词，或者格式化一列清单。

示例：高亮关键词
想象一下你在为一款新咖啡机写产品描述：

<p>我们的新款咖啡机具有 <b>12杯容量</b>，<b>可编程计时器</b>，以及 <b>不锈钢外观</b>。</p>

在这里，<b> 标签用来高亮咖啡机的关键特性，让潜在客户一眼就能扫视到重点。

2. HTML <strong> 标签：非常重要 (Strong Importance)

<strong> 标签也用于将文本加粗。但与 <b> 标签不同，它传达了语义（Semantic meaning）。它表示被包裹的文本是重要的、严肃的或紧急的。

屏幕阅读器（盲人使用的辅助技术）和其他辅助工具可能会以不同的方式解读 <strong> 标签，例如用更重的语气读出这些文字。

2.1 <strong> 标签示例

<p><strong>警告！</strong> 此操作无法撤销。</p>

在这个例子中，“警告！”一词会显示为粗体，而且屏幕阅读器可能会用更响亮或更紧急的语调朗读它。

2.2 何时使用 <strong>？

当你想要强调那些对理解内容至关重要的文本时，使用 <strong> 标签。这包括警告、重要指令或核心结论。

示例：重要指令 考虑一组家具组装说明：

<ol>
  <li>将腿安装到底座上。</li>
  <li><strong>重要提示：</strong> 确保螺丝已拧紧。</li>
  <li>将桌面放置在底座上。</li>
</ol>

这里 <strong> 标签突出了拧紧螺丝的重要性，以防止后续出现问题。

3.HTML <i> 标签：斜体文本 (Italic Text)

<i> 标签用于将文本显示为斜体。和 <b> 标签类似，它主要是一个表现层元素（只管样子）。它通常用于表示不同的语调或情绪，比如心里的想法、技术术语或外语单词。

3.1 <i> 标签示例

<p>太阳的拉丁语单词是 <i>sol</i>。</p>

在这个例子中，单词 "sol" 会以斜体显示。

3.2 何时使用 <i>？

在以下情况使用 <i> 标签：

• 技术术语或行话
• 外语单词或短语
• 作品标题（例如：书名、电影名或歌名）
• 角色的内心独白或想法

示例： 书名

<p>我最喜欢的书是 <i>指环王</i>。</p>

这里，<i> 标签被用来标示书名。

4. HTML <em> 标签：强调文本 (Emphasized Text)

<em> 标签用于强调文本。在大多数浏览器中，它通常显示为斜体，但像 <strong> 一样，它带有语义。它表示被包裹的文本应该被重读或给予特别关注。

4.1 <em> 标签示例

<p>我 <em>真的</em> 需要完成这个项目。</p>

在这个例子中，“真的”这个词会显示为斜体，屏幕阅读器读到这里时可能会稍微提高音调。

4.2 何时使用 <em>？

当你想要强调某个单词或短语，从而改变句子的含义或突出其重要性时，使用 <em> 标签。

示例：改变含义
看看下面这两个句子：

1. "I am going to the store."（我要去商店。）
2. "I am going to the store."（我是要去商店。）

第二个句子中强调了 "am"（是），暗示了也许别人不去，或者之前有人怀疑说话者到底去不去。

5. HTML <small> 标签：小号文本 (Small Text)

<small> 标签用于让文本比周围的文字更小。它通常用于旁注、免责声明或法律通告。

5.1 <small> 标签示例

<p>本产品不适合3岁以下儿童使用。<small>详情请参阅完整的安全指南。</small></p>

在这个例子中，“详情请参阅完整的安全指南”这段文字会比段落中的其他文字看起来更小。

5.2 何时使用 <small>？

在以下情况使用 <small> 标签：

• 法律免责声明
• 版权声明
• 旁注或注释
• 附属细则（Fine print）

示例：版权声明

<p>© 2023 My Company. <small>All rights reserved.</small></p>

这里，<small> 标签表明版权声明属于次要信息。

6.HTML <mark> 标签：高亮文本 (Highlighted Text)

<mark> 标签用于高亮显示文本，通常带有黄色背景。它非常适合用来吸引用户注意文档中与当前任务或搜索查询相关的特定部分。

6.1 <mark> 标签示例

<p><mark>独立宣言</mark> 是美国的基础文件。</p>

在这个例子中，“独立宣言”这个短语会被高亮显示（通常是黄色背景）。

6.2 何时使用 <mark>？

在以下情况使用 <mark> 标签：

• 高亮显示搜索结果中的搜索词
• 吸引注意文档的特定部分
• 标示文档的更改或更新

示例：搜索结果
想象用户在你的网站上搜索“HTML 标签”。你可以使用 <mark> 标签在搜索结果中高亮这些词：

<p>本文讨论了各种 <mark>HTML 标签</mark> 及其用途。你将了解用于格式化文本、创建链接和嵌入图像的 <mark>标签</mark>。</p>

7. 标签对比参考