面试题：HTML 中，b 与 strong 标签的区别是什么？

<b> 和 <strong> 标签在默认的视觉呈现上非常相似，通常都会将文本显示为粗体（bold）。然而，与 <i> 和 <em> 的区别类似，它们在 语义（Semantics）和用途 上有着根本的不同。理解这一点是编写语义化、可访问性强的 HTML 代码的关键。

核心区别

• <b> 标签：表示语义上的粗体。
  • 用途：用于将文本加粗以引起注意，但这种加粗不表示文本的重要性、紧急性或强调。它关注的是视觉上的突出或惯例。
  • 语义：弱。它不传达“这个文本很重要”或“需要特别关注”的信息。
  • 可访问性：屏幕阅读器通常不会特别处理 <b> 标签，只是正常朗读文本。
• <strong> 标签：表示强烈的强调。
  • 用途：用于标记非常重要、紧急或具有强烈情感色彩的文本内容。它表示这部分内容在语气上是重读的、关键的，或者具有警告、危险的含义。
  • 语义：强。它明确传达了“这部分内容有极高的重要性或严重性”。
  • 可访问性：屏幕阅读器在读到 <strong> 标签时，通常会用更重的语气、更慢的速度或更严肃的语调来朗读，以体现其重要性或紧急性。

---

使用场景示例

<b> 标签的典型用法（基于视觉或惯例的粗体）

1. 关键词或术语的首次出现（仅作视觉提示）： 本文将介绍<b>光合作用</b>的基本原理。
   • 解释：这里用粗体只是为了在视觉上标示这是一个新术语，但并没有特别强调其“重要性”或“紧急性”。
2. 文章或故事中的人物对话（区分于叙述）： 他<b>大声喊道</b>：“快跑！”
   • 解释：将“大声喊道”加粗是为了在视觉上区分动作描述和对话内容，是一种排版技巧。
3. 产品列表中的产品名称： <b>iPhone 15 Pro</b> - 6.1英寸显示屏，A17芯片
   • 解释：产品名称加粗是为了在列表中更醒目，但并不一定表示它“非常重要”或“紧急”。
4. 广告或宣传材料中的吸引眼球的词：限时优惠！<b>免费</b>试用30天！
   • 解释：为了吸引用户注意而加粗，但“免费”这个词本身的重要性程度可能不如警告信息。

<strong> 标签的典型用法（需要强烈强调的内容）

1. 表达重要性、警告或危险： <strong>警告</strong>：此区域高压危险，请勿靠近！
   • 解释：这是关乎安全的严重警告，必须用 <strong> 来传达其紧急性和重要性。
2. 突出关键决策或后果： 如果你未能按时提交，<strong>你的申请将被自动取消</strong>。
   • 解释：这句话的后果非常严重，需要用 <strong> 来强调其严重性。
3. 表达强烈的感情或语气： 我<strong>绝对</strong>不能接受这个条件！
   • 解释：“绝对”表达了非常强烈的拒绝态度，需要用 <strong> 来体现这种语气。
4. 法律或合同条款中的关键部分：用户<strong>不得</strong>将本服务用于非法目的。
   • 解释：这是明确的禁止性规定，具有法律约束力，必须强调。

---

为什么语义化如此重要？（与 <em> vs <i> 相同）

1. 可访问性 (Accessibility)：这是核心原因。屏幕阅读器依赖语义来理解内容。使用 <strong> 而不是 <b>，能让视障用户通过听觉感知到文本的严重性或重要性。使用 <b> 则会丢失这种关键的语义信息。
2. SEO (搜索引擎优化)：语义清晰的 HTML 有助于搜索引擎更好地理解页面内容的层次和重点。
3. 代码可维护性：语义化的代码更清晰。开发者能立刻明白 <strong> 是为了表达重要性，而 <b> 只是为了视觉效果。
4. 样式与内容分离：HTML 负责语义，CSS 负责样式。即使未来设计要求 <strong> 不再是粗体（比如用红色或加下划线），你只需修改 CSS，而 HTML 的语义（重要性）依然保持不变。

总结

特性	<b>	<strong>
主要目的	外观/惯例 (视觉上突出)	语义/强烈强调 (重要、紧急)
语义强度	弱	强
可访问性	屏幕阅读器通常忽略其特殊性	屏幕阅读器会加重语气以示重要性
CSS 样式	默认为 font-weight: bold;	默认为 font-weight: bold;
选择依据	“这部分文本看起来应该粗体”	“这部分文本听起来非常重要”

简单记忆法则：

• 如果你想表达“听起来应该非常严肃或重要”，用 <strong>。
• 如果你想表达“看起来应该更醒目”（如标题、关键词），用 <b>。

最佳实践：在现代 Web 开发中，应优先使用 <strong> 来表达重要性或警告。只有在明确表示一种无重要性含义的视觉突出或排版惯例时，才使用 <b>。如果只是为了粗体效果而没有语义，更好的做法是使用 CSS (font-weight: bold;) 并结合一个语义化的类名。