sub和sup是语义标签而非排版开关，仅在化学式原子个数、数学幂次与索引、脚注编号、离子电荷、商标符号等具明确上下标语义时必须使用；滥用或误用会破坏可访问性与语义结构。
直接说结论：sub 和 sup 不是排版开关，而是语义标签——写错地方比不用更糟，尤其在化学式、数学幂次、脚注编号这些场景里，必须用，但不能拿来调大小、改位置。
什么时候必须用 sub 和 sup？
只在内容本身携带明确的下标/上标语义时才该用，浏览器和辅助技术靠这个判断结构：
- 化学式原子个数：H
sub2O、Ca(OH)sub2（括号外下标必须套在括号后） - 离子电荷：SO
sub4sup2−（“2−”整体进sup，减号用 U+2212 “−”，不是 ASCII “-”） - 数学幂次与索引：x
sup2、asubn、logsub10x（底数 10 是下标，不是上标） - 脚注编号：正文
sup1，对应页脚用id="fn1"关联，不加括号、不加点 - 商标符号：TM
sup™、©sup®（年份© 2025不能上标，但 ® 必须紧贴主体）
sub/sup 渲染失效的三个高频原因
它们默认就生效，但项目里“看不见效果”几乎全是外部干扰：
- 全局 CSS 重置了
vertical-align：Normalize.css 或 Ant Design 等框架常设sup, sub { vertical-align: baseline; }，直接覆盖原生super/sub - 父容器
line-height过小或font-size: 0：压制子元素缩放，导致上下标“缩没了” - CMS 或富文本编辑器 XSS 过滤没放开
<sup></sup>/<sub></sub>：保存后标签被删，只剩裸文本
查是否失效，打开开发者工具看 computed 样式——确认 vertical-align 真的是 super 或 sub，而不是被意外重置。
顺序、嵌套与数学表达式的边界
sub 和 sup 的渲染顺序由 HTML 标签出现顺序决定，这点极易翻车：
- SO
sub4sup2− → SO₄²⁻（正确）；反过来 SOsup2−sub4 → SO²⁻₄（错乱） - a
subisupn+1 → aᵢⁿ⁺¹（先下标再上标）；asupn+1subi → aⁿ⁺¹ᵢ（i 跑到整个幂次右下） - 禁止嵌套：
<sub><sup>2</sup></sub>是非法结构，校验工具报错，渲染不可控 - 复合结构撑不住：分数、根号、∑、∫、自动缩放括号——这些一出现，就得切 MathML 或 KaTeX
最常被忽略的不是怎么写 sup，而是它一旦写进 HTML，就得一路护送到最终渲染层：CSS 别吞掉、工具别过滤掉、屏幕阅读器得读对——语义写了，就得负责到底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
