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