必须用于有明确数学或化学语义的场景：如H₂O中的“2”表原子个数、x²中的“2”表幂次、SO₄²⁻中的“2−”表电荷；CSS模拟会丢失语义，导致屏幕阅读器误读、SEO降权及MathML导出失败。
什么时候必须用 <sub> 和 <sup> 而不是 CSS
只有内容本身具有明确数学或化学语义时才该用：<sub> 表示原子个数（如 H<sub>2O）、序列索引（a<sub>n）；<sup> 表示幂次（x<sup>2）、电荷（SO<sub>4<sup>2−）。用 vertical-align: super 或 transform: translateY() 会丢失语义，屏幕阅读器读作 “x 2”，而非 “x 平方”。
嵌套 <sub> 和 <sup> 的边界在哪
它们可以相邻使用（如 SO<sub>4<sup>2−），但不能互相包裹：<sub><sup>x</sup></sub> 是非法 HTML，浏览器可能容错渲染，但校验失败，MathML 导出工具直接忽略。多级结构（如 a<sub>i<sup>j）视觉上是 “aᵢʲ”，但实际渲染顺序取决于标签书写顺序 —— 写成 a<sub>i<sup>j 渲染为 “aᵢj”，不是复合上标。真需要这种效果，应改用 MathML 或 KaTeX。
为什么 <sub> 和 <sup> 在页面里“看不见”或位置错乱
常见原因有三个：
- 全局 CSS 重置了
vertical-align，比如 Normalize.css 或某些 UI 框架写了sup, sub { vertical-align: baseline; }，直接覆盖原生偏移 - 父容器
line-height过小（如1.0），导致上标被截顶、下标被切底；建议设为line-height: 1.3或更高 - 富文本编辑器或 CMS 后端 XSS 过滤未放行
<sub>/<sup>，保存后标签被清空，只剩纯文本 “2”
数学公式里只靠 <sub>/<sup> 会出什么问题
简单幂次（x<sup>2）、单层脚标（x<sub>i）没问题，但以下场景必然崩：
- 分数：无法表达
<sup>a</sup><sub>b</sub> 这种上下对齐结构 - 根号、求和号、积分限：HTML 原生无对应语义标签
- 负号与上标混排：SO
<sub>4<sup>2− 中的 “−” 若用减号-，可能被误读为连字符；应优先用 Unicode 上标负号⁻（U+207B）或实体⁻
真正难处理的是语义和排版的双重约束——<sub> 和 <sup> 写进去容易，但要它在所有上下文（CSS、辅助技术、PDF 导出、移动端缩放）里都保持正确，得一路盯住每一层干扰源。
