语义优先级决定嵌套顺序：应将<em>置于<strong>内层，因语气强调依附于内容重要性；W3C建议顺序为<strong>→<em>→其他行内标签，避免多层嵌套影响可访问性。
嵌套时 和 谁该包在里层？
语义优先级决定嵌套顺序：<strong> 表示「重要性」，<em> 表示「强调语气」，两者语义不同但常共存。浏览器渲染时，<strong> 默认加粗，<em> 默认斜体；若同时需要加粗+斜体，应把 <em> 放在 <strong> 内部——因为「语气强调」是依附于「内容重要性」之上的局部修饰。
错误写法：<em><strong>重点词</strong></em>（语义倒置：先语气再重要，逻辑不通）
正确写法：<strong><em>重点词</em></strong>
- W3C 明确建议嵌套顺序为
<strong>→<em>→ 其他行内标签 -
<b>和<i>是纯样式标签，不参与语义嵌套判断，但可与<strong>/<em>混用（不推荐） - 嵌套超过两层（如
<strong><em><u>...）会导致可访问性工具解析混乱，屏幕阅读器可能跳过中间层语义
为什么 <u> 和 <ins> 不能随便换着用？
<u> 是视觉标记，<ins> 是语义标记——前者只说「这段文字要加下划线」，后者明确传达「这是新插入的内容」。搜索引擎、无障碍 API、甚至某些 CMS 的结构化提取都会依赖 <ins> 的语义，而忽略 <u>。
立即学习“前端免费学习笔记（深入）”；
常见误用场景：
- 价格变动标注写成
<u>$199</u> $149→ 应改用<del>$199</del> <ins>$149</ins> - 拼写纠错用
<u>recieve</u>→ 实际应配合<span spellcheck="false">或 ARIA 属性，<u>本身不携带纠错语义 -
<u>在现代 CSS 中默认被禁用（Chrome 85+），需手动重置text-decoration: underline才能显示
<del> 和 <s> 渲染一样，但 DOM 行为有差异
视觉上两者都加删除线，但 <del> 是语义化标签（表示内容被「删除但保留在文档中」），<s> 表示「不再准确或不相关」（比如过期优惠、失效条款）。这种区别会影响 SEO 索引权重和辅助技术行为。
- 搜索引擎会降低
<s>包裹内容的关键词权重，但对<del>保持中立 - 屏幕阅读器对
<del>通常读作「已删除：xxx」，对<s>可能跳过或仅提示「已废弃」 - JavaScript 操作时，
document.querySelector('del')和document.querySelector('s')返回不同节点类型，虽然都属HTMLModElement，但属性支持略有差异（如cite和datetime在<del>中更常用）
嵌套 <sub>/<sup> 时容易忽略的排版陷阱
<sub> 和 <sup> 是严格行内标签，不能包含块级元素，也不能被 <p> 或 <div> 直接包裹（会触发隐式闭合）。更隐蔽的问题是：它们默认 baseline 对齐，但字体大小缩放比例未标准化，不同浏览器渲染高度偏差可达 2–3px。
- 化学式
H<sub>2</sub>O在 Firefox 中下标偏低，在 Safari 中偏高——需统一用 CSS 控制：sub { vertical-align: sub; font-size: .8em; } - 数学公式中连续嵌套（如
x<sup>2<sub>0</sub></sup>）会导致 baseline 错乱，应避免，改用 MathML 或 CSS transform -
<sub>内部不能再嵌<sub>或<sup>（HTML 规范禁止），否则解析器会自动截断
<b> 替代 <strong> 看似省事，但等于主动放弃机器可读性——这点在 SSR 渲染或爬虫抓取时立刻暴露。 
