em和strong是语义标签而非样式标签：em表示语气强调，strong表示内容重要性，其语义不随CSS样式改变而变化，影响屏幕阅读器、SEO及无障碍访问。
em 和 strong 不是“斜体 vs 加粗”的视觉开关
它们根本不是为控制显示样式而存在的。浏览器默认把 em 渲染成斜体、strong 渲染成加粗，这只是用户代理样式表（UA stylesheet）的临时约定。真正起作用的是标签名本身携带的语义：DOM 中的 em 节点会被屏幕阅读器识别为「语气强调」，触发语调变化（比如升调、拖长）；strong 则被识别为「高重要性内容」，通常加重朗读+增加停顿。
你完全可以用 CSS 把 strong 设成 font-weight: normal，它依然是“重要内容”；同理，把 em 设成加粗，也不等于它变重要了——语义不会因样式改变而迁移。
- 搜索引擎解析时，
strong内容可能获得更高关键词权重；em更倾向被识别为修饰性短语 - 语音合成引擎未来可据此做差异化处理（如紧急警告用更急促语速）
- SSR 或某些无障碍工具链中，
b/i可能被误判为语义标签，而strong/em的意图明确
什么时候该用 strong 而不是 b
看内容删掉后是否影响用户决策或信息完整性。如果是，就该用 strong。
- 表单错误提示：
<p>邮箱格式<strong>不正确</strong>，请检查</p>（“不正确”是关键判断，不是装饰） - 价格锚点：
现价<strong>99</strong>元（这是用户比价、下单的核心依据） - 安全警告：
<p>请勿在公共网络下<code><strong>输入银行卡密码</strong> - 法律条款中的强制义务句：“乙方
<strong>必须</strong>于7日内响应”
反例：<p>本产品基于<b>React</b>开发</p>——“React”是技术术语，非强调重要性，用 <b></b> 或 <i></i> 更合适。
什么时候该用 em 而不是 i
em 必须服务于句子内部的语气逻辑，脱离上下文就失效；i 是纯格式需求，比如船名、拉丁学名、外语短语。
- ✅ 正确：
<p>你<em>真的</em>确定要删除全部数据？</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a> <p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（“真的”承载质疑语气，重音位置改变句意） - ✅ 正确：
<p>该菌种学名为 <i>Escherichia coli</i>。</p>（斜体是生物学惯例，无强调意图） - ❌ 错误：
<p>核心功能：<em>AI降噪</em></p>（罗列项，无语气起伏，建议用 class + CSS） - ❌ 错误：
<p>点击<em>确认</em>按钮继续</p>（“确认”是操作指令，属重要性范畴，应改用<strong></strong>）
嵌套、CSS 覆盖与常见踩坑
em 和 strong 可以互相嵌套，但层级超过两层会让屏幕阅读器困惑。例如：<strong>请立即备份</strong>，尤其是<strong><em>数据库配置文件</em></strong>——外层强调紧迫性，内层强调具体对象，层次清晰。
别混用语义与样式：
- 禁止写
<strong style="font-style: italic">文本</strong>：破坏语义，难维护 - 避免用 CSS 模拟语义：
<span class="important">文本</span>不会被屏幕阅读器识别为强调，除非额外加role="alert"或aria-live - 不要用
i或b替代em/strong来“省事”，那等于主动放弃可访问性、SEO 和结构表达力
最易被忽略的一点：很多团队在 SSR 渲染或静态站点生成时，会把 strong 当作“加粗开关”来用，结果在无障碍测试中暴露问题——语义缺失无法靠后期 CSS 补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
