sup和sub是语义标签，仅用于化学式（H₂O）、数学幂次（x²）、脚注编号（文献³）等有明确语义的场景；误用会导致读屏器误读、SEO降权及渲染失效。
sup 和 sub 必须用于有明确语义的场景
不是“想让字变小偏上/下”就用 sup 或 sub——它们是语义标签，不是排版开关。浏览器默认渲染效果只是附带结果，核心价值在于向屏幕阅读器、搜索引擎和导出工具传递“这是指数”“这是原子个数”这类结构信息。
必须用的典型场景包括：
- 化学式：
H<sub>2</sub>O、Ca(OH)<sub>2</sub>、SO<sub>4</sub><sup>2−</sup>（注意电荷用 Unicode 减号 U+2212） - 数学幂次与索引：
x<sup>2</sup>、a<sub>n</sub>、log<sub>10</sub>x - 脚注编号：
参见文献<sup>3</sup>（不加括号，不加点） - 商标符号：
TM<sup>™</sup>、© 2025<sup>®</sup>（年份本身不能上标，但 ® 必须紧贴主体）
误用例子：©<sup>2025</sup> 会让读屏器念成“版权 上标 二零二五”，干扰理解；<sub>用户协议</sub> 做小字说明，既无语义，又破坏可访问性。
嵌套顺序和层级有硬性限制
sub 和 sup 允许合法共存，但顺序错一位，渲染就全乱。浏览器按 HTML 树顺序解析，不是按视觉位置推算。
立即学习“前端免费学习笔记（深入）”；
正确写法：
-
x<sub>i</sub><sup>2</sup>→ 渲染为 xᵢ²（先下标再上标） -
<sup>14</sup>C→ 碳-14，质量数在左上角 -
SO<sub>4</sub><sup>2−</sup>→ 硫酸根离子，基团先写完整，再整体加电荷
错误写法：
-
x<sup>2</sup><sub>i</sub>→ 渲染成 x²i，不是 xᵢ² -
<sub>H<sup>+</sup></sub>→ H⁺ 本身无下标，“+”是电荷上标，应直接写H<sup>+</sup> -
<sup><sup>2</sup></sup>或<sub><sup>2</sup></sub>→ 非法嵌套，HTML 不允许，部分浏览器容错但语义丢失
渲染“看不见”大概率是 CSS 覆盖了 vertical-align
浏览器原生对 sup 和 sub 的定义包含 vertical-align: super 和 vertical-align: sub，以及约 75% 的字号缩放。但几乎所有 UI 框架或重置样式（如 Normalize.css、Ant Design）都会加一句：
sup, sub { vertical-align: baseline; }
这就直接废掉了上下标的位置偏移。常见干扰源还有：
- 父容器设置了
line-height: 1或font-size: 0，导致子元素缩放被压制 - 手动给
sup加style="vertical-align: super"—— 多此一举，还可能和行高冲突 - 富文本编辑器或 CMS 的 XSS 过滤没放开
<sup>/<sub>，保存后标签被删
安全微调方式：
- 统一字号：
sup, sub { font-size: 0.75em; }（别写死12px） - 避免碰
vertical-align：它已由 UA stylesheet 设定，覆盖易错位 - 和 SVG 图标并排时抬得太高？改用
display: inline-flex; align-items: baseline;包裹整个组合
数学公式里别硬扛，该切 MathML 或 KaTeX 就切
sup/sub 只能处理单层、无运算、顺序固定的结构。一旦涉及多级、对齐、大小自适应或运算符，就超出能力范围。
能做的：
a<sup>n</sup> + b<sup>m</sup> = c<sup>k</sup>-
10<sup>−3</sup>（负号必须整体进sup，用 Unicode “−”） v<sup>2</sup>/r
不能做的：
- 分数：
<math><mfrac><mi>a</mi><mi>b</mi></mfrac></math>或\frac{a}{b}（KaTeX） - 根号、求和号 ∑、积分 ∫、矩阵
- 自动缩放括号：
(x^2 + y^2)^{1/2}在 KaTeX 中可渲染为带适配括号的公式
真正难搞的是混合场景：比如 CO<sub>2</sub><sup>−</sup> 要紧凑排版又不能丢语义——这时别硬调 CSS，优先确认是否真需 HTML 原生方案；复杂公式早该切到 <math> 或 KaTeX。
