sub和sup是语义标签，仅在内容具明确下标/上标语义时必须使用，如化学式H₂O、数学幂次x²、脚注编号¹、商标符号™；纯视觉需求应交由CSS实现，以保障可访问性与语义正确性。
sub 和 sup 不是用来“做效果”的工具，而是用来标记语义的——只有内容本身是下标或上标时才该用。乱用会导致读屏器误读、复制粘贴失真、CSS 重置后失效。
什么时候必须用 sub 和 sup？
只在以下场景中使用，否则就是语义污染：
- 化学式原子个数：
H<sub>2</sub>O、SO<sub>4</sub><sup>2−</sup>（注意电荷用 Unicode 减号 U+2212，不是 ASCII-） - 数学幂次或索引：
x<sup>2</sup>、a<sub>n</sub>、log<sub>10</sub>x - 脚注编号：
参见文献<sup>3</sup>（不加括号、不加点） - 商标符号：
TM<sup>™</sup>（™是符号，不是年份）
别写 ©<sup>2025</sup> 或 <sub>用户协议</sub>——年份和说明文字没有下标/上标语义，读屏器会念成“版权 上标 二零二五”，干扰理解。
sub/sup 渲染失效的真正原因
它们默认就生效，所谓“没效果”几乎全是外部干扰：
立即学习“前端免费学习笔记（深入）”；
- 全局 CSS 重置了
vertical-align：比如 Normalize.css 或 Ant Design 的 reset 会设sup, sub { vertical-align: baseline; }，直接覆盖浏览器原生行为 - 父容器设置了
line-height: 1或font-size: 0，导致子元素缩放被压制 - 富文本编辑器或 CMS 的 XSS 过滤没放开
<sup></sup>/<sub></sub>，保存后标签被删 - 手动给
<sup></sup>加style="vertical-align: super"——多此一举，还可能和行高冲突
查是否失效最直接的方法：打开开发者工具，看 computed 样式里 vertical-align 是不是 super 或 sub，而不是 baseline。
数学公式里 sub/sup 能不能撑全场？
不能。它们只适合单层、无运算、顺序固定的结构：
- ✅ 可以：
a<sup>n</sup> + b<sup>m</sup>、x<sub>i</sub><sup>2</sup>（注意顺序：先<sub></sub>再<sup></sup>，渲染为 xᵢ²） - ❌ 不行：
<sub><sup>2</sup></sub>（非法嵌套）、x<sup>2</sup><sub>i</sub>（渲染成 x²i，不是 xᵢ²） - ❌ 完全无法表达：分数、根号、求和号
∑、积分∫、矩阵、自动缩放括号
复合幂次如 a<sup>n+1</sup> 必须写完整；拆成 a<sup>n</sup>+1 就变成 “aⁿ + 1”。
安全微调显示效果的唯一方式
想改得顺眼，又不破坏语义和可访问性：
- 统一字号用相对单位：
sup, sub { font-size: 0.75em; }，别写死12px - 避免碰
vertical-align：它已由浏览器设为super/sub，再覆盖容易错位；如需对齐 SVG 图标，改用display: inline-flex; align-items: baseline;包裹 - 并排多个上下标（如
SO<sub>4</sub><sup>2−</sup>）时加line-height: 0防止撑开段落 - 中文混排时，
sub/sup内数字可能因字体 fallback 显得过小，可加font-variant: normal强制标准数字字形
最常被忽略的一点：sub 和 sup 的语义优先级高于视觉——哪怕渲染看起来“不够美”，只要语义对了，对屏幕阅读器、SEO、导出工具（如 LaTeX 转换）才是真正的支持。
