【大白话前端 06】HTML文本强调标签

新手写网页，为了让字变粗，随手就是一个 <b>，为了倾斜就是一个 <i>。但这在现代前端开发中是一个巨大的坑。

在 HTML 的早期，没有 CSS，标签确实是用来控制样式的。但随着标准演进，HTML 只负责声明“语义（这是什么）”，长什么样全部交给了 CSS。如果你还在用标签来做“纯视觉展示”，不仅会破坏代码规范，还会导致屏幕阅读器（视障用户工具）和搜索引擎（SEO）无法正确识别网页的重点。

💡 核心定律：永远不要为了改变字体样式（加粗、斜体）去使用 HTML 标签。如果你只想改变外观，请使用 CSS。

一、语气强调：<em> (Emphasis)

<em> 用于改变句子的重音位置，从而改变句子的确切含义。默认表现为斜体。

就像我们日常说话，加重不同的字，意思就截然不同：

• 原句：我没有说他偷了钱。
• 强调“我”：<em>我</em>没有说他偷了钱。（潜台词：可能是别人说的。）
• 强调“偷”：我没有说他<em>偷</em>了钱。（潜台词：他可能是借的。）

二、重要性强调：<strong>

<strong> 用于标记极其重要、严重警告的信息。默认表现为加粗。

屏幕阅读器遇到 <strong> 时，会明显加重语气朗读，提醒用户这部分绝对不能忽略。

<!-- ✅ 正确做法：必须重视的安全警告 -->
<p>这个液体<strong>有剧毒</strong>，千万别碰！</p>

<!-- ✅ 正确做法：重要信息嵌套语气强调，双层重音 -->
<p>这个液体<strong>有剧毒——喝了会<em>死</em></strong>！</p>

三、被降级的“视觉/语境”标签：<i>、<b>、<u>

这三个标签曾经代表纯样式的斜体、加粗和下划线。在 HTML5 中，它们被赋予了新的、更微弱的语义，不再代表重点或强调。

1. <i>：语境切换 (Idiomatic Text)

不再是单纯斜体，而是表示这段文本属于另一种语境，与周围的文字区分开来。
适用场景：外文单词、科学学名、人物内心的想法。

<!-- ✅ 正确做法：标记外文语境 -->
<p>菜单上有<i lang="fr">soupe à l'oignon</i>（法语：洋葱汤）。</p>
<!-- ❌ 错误示范：为了强调语气使用 i -->
<p>我<i>真的很开心</i>。</p>

2. <b>：单纯视觉突出 (Bring Attention To)

不再是重要警告，而是表示需要视觉上醒目，但不具备任何额外的重要权重。
适用场景：文档里的关键词、产品名、摘要里的导读词。

<!-- ✅ 正确做法：普通的关键词高亮 -->
<p>我买了新电脑：<b>MacBook Air M2</b>。</p>
<!-- ❌ 错误示范：把警告信息写成 b（读屏软件会像读废话一样读过去） -->
<p>前方施工，<b>请绕行</b>！</p>

3. <u>：特殊异常标记 (Unarticulated Annotation)

不再是普通的下划线，而是用于指出文本中存在某种非正常的特殊情况。
适用场景：拼写错误的单词。

⚠️ 注意事项：在网页中，带下划线的文字约定俗成代表“超链接”。除非是标记拼写错误，否则绝对不要使用 <u> 或者给普通文字加下划线，这会误导用户认为这是一个可点击的链接。

<!-- ❌ 错误示范：为了强调随便加下划线，用户点击没反应被气死 -->
<p>今天超市的鸡蛋<u>全部免费送</u>！</p>

<!-- ✅ 正确做法：用来标示“错别字”这种非正常文本，并配合 CSS 改成红色波浪线 -->
<p>我昨天<u style="text-decoration: wavy red underline;">网</u>记带伞了（注：作者打错字了，原意是“忘”）。</p>

效果：

四、已被废弃的“纯样式标签”

以下标签因为百分之百只有样式、毫无语义，已经被 HTML 标准彻底废弃。现在开发中严禁使用。

五、总结与下一步

📝 速记总结：

• <strong> = 真的非常重要（必须警惕/重视）。
• <em> = 改变句子的重音位置（从而改变含义）。
• <b> / <i> = 仅仅需要视觉高亮或标明特殊语境，但不改变重要性。
• 想改样式（变大、加粗），一律使用 CSS。

到目前为止，我们一直在死抠“单段文字”的细节：用 h1 写标题，用 p 写段落，用 strong 抓重点。

但是，如果在网页上遇到“一大串同类信息”该怎么排版？比如，教用户做菜的 10 个步骤，或是电商网站顶部的 5 个导航按钮？难道就是敲 10 个段落标签然后再手动标上 1. 2. 3. 吗？

当然不是。在下一章《07. HTML的 3 种列表：ul、ol、dl》中，我们将讲解如何用最纯粹的机器语言，去管理网页里的“步骤逻辑”和“并列数据”。