<em> 表示语气强调，屏幕阅读器变调；<i> 仅视觉倾斜，用于外文词、船名等语义中性场景，二者不可混用。
别直接用 <b> 和 <i> 代替 <strong> 与 <em> —— 语义错位会悄悄影响 SEO、可访问性和维护成本。
为什么 <strong> 和 <b> 不能混用？
两者都让文字加粗，但浏览器渲染效果一致 ≠ 语义等价。屏幕阅读器遇到 <strong> 会加重语气并暂停，而 <b> 只是“视觉上突出”，无语音提示。
-
<strong>：表示内容有强重要性（比如警告、关键条款） -
<b>：仅需视觉加粗但无强调含义（如产品名、关键词高亮、中文标题中的人名） - 搜索引擎会把
<strong>内容权重略调高；<b>几乎不参与语义分析 - 在纯 CSS 禁用场景下，
<strong>仍可能被辅助技术识别为强调，<b>则彻底退化为普通文本
<em> 和 <i> 的核心区别在哪？
它们都倾斜显示，但触发逻辑完全不同：<em> 是“语气强调”，<i> 是“非默认语调或类型”。
-
<em>：用于改变句子重心（如“不是这个按钮，是右边那个”）—— 屏幕阅读器会变调 -
<i>：适用于外文术语（<i>et al.</i>）、船名（<i>Titanic</i>）、科技术语（<i>E = mc²</i>）等需要区分语境的场合 - 误用
<i>替代<em>会导致语音输出失去节奏感，用户可能听不出重点 - W3C 明确建议：除非有明确的语义理由，否则优先用 CSS
font-style: italic控制样式，而非依赖标签
<del>、<s> 和 <ins> 怎么选？
三者都带删除线或下划线，但用途严格分层：
立即学习“前端免费学习笔记（深入）”；
-
<del>：表示内容已被移除但仍有参考价值（如合同修订稿中删掉的条款），支持datetime属性记录时间 -
<s>：表示内容不再准确或不适用（如过期价格“¥299”），不鼓励添加时间戳，语义更弱 -
<ins>：对应<del>，表示新增内容，同样支持datetime，常与<del>成对出现 - 别用
<s>标记错误信息——它不传达“错误”，只传达“失效”；真正要标错，该用<span class="error">+ CSS
其他易踩坑的文本标签组合
这些标签看着简单，嵌套或滥用时容易破坏结构或触发意外行为：
-
<small>不是“小字号”的万能替代，它专指边注、版权、法律声明等附属内容，不该用来做按钮文字缩放 -
<mark>默认黄色背景，但若未重置样式，在深色主题下可能不可读；且它不表示“高亮搜索结果”这种动态行为，而是文档固有重点 -
<sub>和<sup>必须成对出现在行内文本中，放在段落末尾或单独成行会导致基线错乱，渲染异常 -
<u>在 Chrome 89+ 默认带下划线但无链接语义，易被误认为可点击；W3C 已不推荐使用，应改用text-decoration: underline
语义标签不是装饰品，浏览器、爬虫、读屏软件都在认真读它们。写错一个 <b> 可能当下看不出问题，但三个月后接手的人改无障碍模式时，会花两小时才定位到这个隐性缺陷。
