strong 表示内容级重要性，b 仅表示视觉突出；em 标记语气强调，i 标记非主叙述流术语；语义由标签名决定，css 不影响其可访问性与 seo 作用。
strong 和 b 的语义断层在哪
strong 表示内容级重要性，b 仅表示“视觉上要突出”，二者在读屏行为、SEO 解析、自动化测试中表现完全不同。浏览器默认都加粗，但 strong 触发屏幕阅读器降调+加重停顿，b 则被当作普通文本平读。
- 错误现象：
<b>警告：数据将永久删除</b>—— 屏幕阅读器不改变语速或音调，“警告”二字失去紧迫感 - 正确写法：
<strong>警告：数据将永久删除</strong>—— NVDA/VoiceOver 会明显放慢语速并加重“警告” - SEO 影响：Google 把
strong内容纳入段落核心关键词权重计算；b几乎不参与语义索引 - axe 工具扫描时，
b包裹操作指令会被标为color-contrast风险——因它被归类为“装饰性内容”，其颜色对比度不强制校验
em 和 i 的语气分界线怎么划
em 是“说话时抬音调”的标记，i 是“这词不属于主叙述流”的标记。不是看它斜不斜，而是问：去掉斜体后，句子的语气或逻辑是否被削弱？
- 必须用
em的场景：<em>必须</em>保存后再退出（“必须”是动作边界）、这<em>显然</em>不是个好主意（反讽锚点） - 只能用
i的场景：<i>Homo sapiens</i>（学名）、参见 RFC <i>9110</i>（标准编号）、她说了句 <i>je ne sais pas</i>（未翻译外文） - 禁用
i的高频误用：<i>点击此处上传</i>—— “此处”是操作焦点，应改用em或strong；<i>API</i>在中文文档中已是通用术语，无需额外语义隔离
嵌套时语义会叠加吗
em 嵌套有真实语义强度递进，i 嵌套纯属冗余。主流读屏器（NVDA、VoiceOver）对双层 em 会延长停顿或升调，但两层 i 和一层没区别。
-
<em>你<em>绝对</em>不能删库</em>：外层强调禁令整体，内层强化程度副词，读屏器分层处理 -
<i><i>café</i></i>：无任何语义增益，只多了一层 DOM 节点，可访问性工具视同单层i - React/Vue 中写错不会报错，但
eslint-plugin-jsx-a11y会直接标jsx-a11y/no-distracting-elements
CSS 覆盖样式后语义还有效吗
有效。辅助技术和爬虫只读标签名，不看最终渲染效果。你可以把 em 设成红色加粗、把 i 设成正常字体，它们的语义角色不变。
-
em { font-style: normal; color: red; font-weight: bold; }—— 读屏器仍会重读，SEO 仍计入权重 -
i { font-style: normal; }—— 它还是“外来词/术语”标记，只是看起来不斜了 - 危险操作：
<em>注意</em>+ CSS 强制取消斜体 —— 视觉无提示，但读屏仍加重，可能造成认知偏差 - 更安全做法：真不需要强调，就别用
em；纯视觉需求，用span+font-style: italic
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
