HTML 格式化

HTML 文本格式化

格式化文本有助于传达含义和结构。

示例：粗体文本, 重要文本, 斜体文本, 强调文本, H₂O, E=mc²

语义化元素 vs. 表现性元素

HTML 提供了用于格式化文本的元素。区分表现性元素（仅改变外观）和语义化元素（为文本添加含义）非常重要。

虽然某些元素在浏览器中默认看起来可能一样（例如 ** 和 **），但使用语义化元素对于以下方面至关重要：

• 可访问性：屏幕阅读器使用语义含义来为视障用户解释页面。
• SEO：搜索引擎使用语义来理解内容的结构和重要性。
• 可维护性：语义化 HTML 更易于理解，并且可以使用 CSS 进行一致的样式设置。

现代最佳实践倾向于在使用有明确含义的地方使用语义化元素。仅当没有特定的语义含义，只是为了风格上的区别时，才使用表现性元素。大多数视觉样式应由 CSS 处理。

常用格式化元素

** (粗体) vs. ** (重要强调)

** 元素表示在风格上与普通文本区分开的文本（例如关键词、产品名称），但不传达额外的重要性。它通常呈现为粗体。

<p>This is normal text. **This text is bold** but not necessarily more important.</p>

** 元素表示强烈的重要性、严肃性或紧迫性。它通常也呈现为粗体。

<p>This is normal text. **Warning:** Do not proceed without caution.</p>

<i> (斜体) vs. <em> (强调)

<i> 元素表示不同语态或情绪的文本，例如技术术语、外来短语、想法或分类学名称。它通常呈现为斜体。

<p>The Latin phrase <i>carpe diem</i> means "seize the day".</p>

<em> 元素表示对单词或短语的强调，影响句子的含义。它通常也呈现为斜体。

<p>You <em>must</em> complete the assignment by Friday.</p>

指导原则	当含义合适时使用 ** 和 <em>。仅为风格上的区分（不涉及重要性或强调）时使用 ** 和 <i>。

<small> (较小文本)

<small> 元素表示旁注或小号文本，例如版权声明或法律免责声明。它通常以较小的字体大小呈现。

<p>This is the main content.</p>
<p><small>Copyright &copy; 2024 Example Corp.</small></p>

<mark> (标记/高亮文本)

<mark> 元素表示由于在特定上下文中具有相关性而被标记或高亮的文本，用于引用或标注目的。它通常以黄色背景呈现。

<p>Search results often <mark>highlight</mark> the search terms.</p>

<del> (删除文本)

<del> 元素表示已删除或移除的文本。它通常呈现为带有删除线的文本。

<p>Price: <del>$19.99</del> $9.99</p>

<ins> (插入文本)

<ins> 元素表示已插入或添加的文本。它通常呈现为带有下划线的文本。

<p>My favorite <ins>color</ins> is blue.</p>

<sub> (下标)

<sub> 元素定义下标文本，它比周围文本小且低（例如，化学式）。

<p>The chemical formula for water is H<sub>2</sub>O.</p>

<sup> (上标)

<sup> 元素定义上标文本，它比周围文本小且高（例如，指数、脚注）。

<p>Einstein's famous equation: E = mc<sup>2</sup>.</p>

HTML 文本格式化元素总结

标签	语义含义 / 典型呈现
**	风格上区分的文本 (粗体)
**	强烈重要性 (粗体)
	不同语态/情绪 (斜体)
	强调 (斜体)
	旁注/小号文本 (较小)
	高亮/标记文本
	删除文本 (删除线)
	插入文本 (下划线)
	下标
	上标

请记住，只要可能，尽量使用 CSS 进行纯粹的视觉样式设置。