strong 和 em 分别表示“高重要性”与“语气强调”，非单纯加粗斜体；b 和 i 是无语义的视觉标签，适用于关键词、术语等场景。
strong 和 em 不是“加粗 vs 斜体”，而是“重要性 vs 语气”的语义分工
HTML5 中 <strong></strong> 和 <em></em> 都会触发浏览器默认的加粗/斜体样式，但它们根本不是为“怎么显示”而生的——是为“怎么被理解”而设计的。搜索引擎、屏幕阅读器、无障碍工具依赖这些标签判断内容权重和逻辑关系，而不是你写的 CSS 是否生效。
-
<strong></strong>表示内容具有高重要性、紧急性或严肃性（比如警告、法律条款关键句、价格变动） -
<em></em>表示句子中语气上的强调或语义转折（比如“我真的没看到通知”，重音在“真的”） - 两者都可嵌套，但嵌套层级超过两层就容易让辅助技术困惑，不建议滥用
什么时候该用 strong？看这 3 个典型场景
别凭“看起来要加粗”就选 <strong></strong>。真正该用它的，是那些删掉会影响信息完整性和用户决策的内容。
- 表单错误提示：
<span class="error">邮箱格式<em>不正确</em>，请检查</span>→ 错误本身是事实，但“不正确”才是需强化的关键判断，应改为<strong>不正确</strong> - 价格对比：
原价<del>199</del>，现价<strong>99</strong>元—— “99” 是决策锚点，不是视觉装饰 - 安全警告：
<p>请勿在公共网络下<code><strong>输入银行卡密码</strong>—— 这里强调的是风险等级，不是排版需求
em 容易被误用成“随便斜体”，其实它有明确语气边界
<em></em> 不是 <i></i> 的语义替代品。它必须服务于句子内部的重音逻辑，一旦脱离上下文就失去意义。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
他说：“这<em>绝对</em>不能发出去。”（“绝对”承载语气转折） - ❌ 错误：
产品名：<em>Pixel 9</em>—— 这属于命名惯例，该用<i></i>或 CSS 控制字体样式 - ❌ 错误：
功能亮点：<em>AI降噪</em>、<em>超广角</em>—— 这是罗列，无语气起伏，用<span></span>+ class 更合适
b 和 i 不是“过时标签”，而是“无语义视觉开关”
很多人以为 HTML5 把 <b></b> 和 <i></i> 删了，其实它们被重新定义为纯表现型标签：只说“这里要加粗/斜体”，不说“为什么”。它们合法、可用，但用途非常窄。
-
<b></b>适合关键词高亮（如摘要首句中的名词）、产品名、UI 文本标签（比如按钮上写“确认删除”） -
<i></i>适合技术术语（DOM）、外语短语（bon voyage）、船名（Titanic）、思想/梦境内容（如果时间能倒流…） - ⚠️ 注意：
<b></b>和<i></i>在 SSR 或某些 SSR 框架中可能被误判为语义标签，若页面需强无障碍支持，优先用<span></span>+ CSS
<strong></strong> 可能变成 <em></em>，甚至该删掉所有强调标签。别信“默认样式一致就随便换着用”，机器读得懂，人不一定读得清。 
