HTML不仅是构建网页结构的骨架，更是传递信息语义的载体。在网页排版中，文本格式化和关键词强调不仅影响视觉呈现，更关乎SEO（搜索引擎优化）和网页的无障碍访问（可访问性）。本文将系统梳理HTML中常用的文本格式化标签，并重点解析强调关键词的7种核心写法。
一、常见的HTML文本格式化标签
HTML提供了丰富的文本格式化标签，它们大致可以分为以下几类：
粗体与斜体：<b>（粗体）、<i>（斜体）
语义强调：<strong>（重要文本）、<em>（着重文本）
标记与删除：<mark>（高亮标记）、<del>（删除线）、<ins>（插入/下划线）
上下标与缩小：<sub>（下标）、<sup>（上标）、<small>（小号字体）
代码与引用：<code>（代码片段）、<pre>（预格式化文本）、<blockquote>（块级引用）、<q>（行内引用）
二、强调关键词的7种写法
在网页内容中，我们经常需要突出某些关键词。不同的标签虽然可能达到相似的视觉效果，但其背后的语义逻辑却大相径庭。以下是强调关键词的7种常见写法：
1. 使用 <strong> 标签（语义化加粗）
<strong> 标签表示内容的“重要性”、“严重性”或“紧迫性”。它是SEO中最推荐的强调标签，搜索引擎会给予该标签内的内容更高的权重。
<p>请务必在截止日期前 <strong>提交报告</strong>，否则将扣除绩效。</p>
2. 使用 <b> 标签（视觉加粗）
<b> 标签仅用于引起视觉上的注意，不带任何额外的语义强调（如摘要中的关键词、产品名称等）。如果不希望搜索引擎将其视为内容重点，仅想加粗显示，可以使用此标签。
<p>本次评测的产品是 <b>超能净水器</b>，它的过滤效果非常出色。</p>
3. 使用 <em> 标签（语义化强调/斜体）
<em> 标签代表“强调”，用于改变句子的语气。默认情况下，浏览器会将其渲染为斜体。屏幕阅读器在遇到 <em> 标签时会改变语调，因此它对无障碍阅读非常重要。
<p>我 <em>真的</em> 不是那个意思！</p>
4. 使用 <i> 标签（视觉斜体）
<i> 标签用于表示不同于正常文本的文本，例如专业术语、外文词汇或思想活动。它没有强调的语义，仅仅是视觉上的区分。
<p>在心理学中，这种状态被称为 <i>Cognitive Dissonance</i>（认知失调）。</p>
5. 使用 <mark> 标签（文本高亮）
这是HTML5新增的标签，默认带有黄色背景高亮效果。它专门用于标记与当前用户上下文相关的文本，比如搜索结果中的关键字高亮。
<p>搜索结果：本文主要介绍 <mark>HTML格式化</mark> 的相关知识。</p>
6. 使用 <u> 标签（下划线强调）
<u> 标签默认会给文本添加下划线。在HTML5中，它被重新定义为“未表达清楚的注释”。但在实际应用中，如果配合CSS修改样式，也可以作为一种视觉强调手段。需要注意的是，由于超链接默认也有下划线，使用 <u> 可能会引起用户误解，需谨慎使用。
<p>请检查这份文档中的 <u style="text-decoration: red underline;">拼写错误</u>。</p>
7. 使用 <span> 结合CSS自定义样式
当以上语义标签都无法满足设计需求时，可以使用行内容器 <span> 配合CSS进行完全自定义的强调样式（如改变颜色、加粗、背景色、字号等）。这种方式最灵活，但本身不带任何语义。
<p>全场商品低至 <span style="color: red; font-weight: bold; font-size: 20px;">3折</span> 起！</p>
三、总结与最佳实践
在网页开发中，选择哪种方式强调关键词，应遵循“语义优先”的原则：
如果内容确实非常重要，影响句子含义，首选
<strong>；如果是为了语气上的强调，选择
<em>；如果是搜索匹配或上下文关联高亮，选择
<mark>；如果仅仅是视觉排版需要，没有特殊语义，使用
<b>、<i>或<span>+CSS。
正确使用语义化标签，不仅能让代码更具可读性，还能帮助搜索引擎更好地理解页面重点，同时为视障人士提供更友好的网页体验。