应优先使用语义化标签：em 表示语气强调，i 仅用于船名、外语等无强调含义的斜体；strong 表示强重要性，b 仅用于无语义的视觉加粗。误用将损害可访问性、seo 与维护性。
别用 b 和 i 做强调，除非你明确知道自己在放弃语义——这是可访问性、SEO 和长期维护的硬成本。
为什么 screen reader 会读出 em 却跳过 i
因为 em 是语义标签，代表「语气强调」：它改变句子含义（比如 “I didn’t say he stole it” 和 “I didn’t say he stole it” 意思完全不同）。屏幕阅读器会通过语调变化来传达这种差异。i 只是视觉斜体，规范里明确定义为「不同语气/身份的文本」，比如船名 <i>Titanic</i>、拉丁术语 <i lang="la">et al.</i>、外语短语 <i lang="fr">au revoir</i>。用 i 包裹“重点词”，等于告诉辅助技术：“这不重要，只是换个字体”。
strong 不是“更粗的 b”，而是“必须被注意的内容”
strong 表示内容具有强重要性，不是视觉强度。浏览器默认加粗，但关键在语义层：搜索引擎可能赋予更高权重；无障碍工具会加重语气或暂停停顿；未来 CSS 或语音合成引擎可据此做差异化处理。b 的定位很窄：仅用于「无语义的视觉加粗」，比如文档摘要里的关键词、用户评论中的产品名、发票金额等需要突出但不改变句意的场景。误用 b 替代 strong，等于主动剥离内容的结构信息。
常见误用场景与替换建议
以下情况应立即检查并修正：
- 用
<b>警告</b>标注错误提示 → 改为<strong>警告</strong>（这是用户必须立刻注意的关键信息） - 用
<i>核心功能</i>描述产品卖点 → 改为<em>核心功能</em>（如果强调语气）或直接用<strong></strong>（如果强调重要性） - 用
<b><i>代码块</i></b>实现粗斜体 → 应用 CSS：font-weight: bold; font-style: italic，HTML 留给语义 - 新闻标题中用
<b>突发</b>：…→<strong>突发</strong>更准确；若仅为版式装饰（如报头“晚报”字样），才考虑b
CSS 覆盖不了语义缺失
你可以用 CSS 让 strong 不加粗、让 b 变成红色虚线，但无法让 b 获得 strong 的语义权重。辅助技术、爬虫、翻译工具、甚至未来基于 DOM 语义的 AI 解析都依赖这些标签的真实含义。一个 <strong>404</strong> 比 <b>404</b> 更可能被错误监控系统识别为关键异常信号——这不是玄学，是规范落地后的实际链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
