和仅用于语义明确的场景：化学式原子数（h2o）、数学脚标（an）、幂次（x2）、电荷（so42−）、脚注编号（3）；纯视觉需求须用css，复杂公式需mathml或katex。
sub 和 sup 标签不是数学排版工具，它们只做语义标记——能用，但仅限单字符或短符号；想靠它写复杂公式，很快会卡在顺序、嵌套、对齐上。
什么时候必须用 sub 和 sup，而不是 CSS
只有内容本身具备明确下标/上标语义时才该用：sub 用于化学原子数（如 Hsub2O）、数学脚标（asubn）；sup 用于幂次（xsup2）、电荷（SOsub4sup2−）、脚注编号（参见sup3）。如果只是“让字小一点+往上飘”，比如单位 cmsup3，其实更适合用 vertical-align: super; font-size: 0.75em; —— 因为立方厘米是整体单位，数字“3”单独上标并无语义。
- 屏幕阅读器读
sup1 是“上标一”，读vertical-align模拟的是“一”，无障碍体验差很多 - 复制
H<sub>2</sub>O到支持 Unicode 的编辑器，可能转成 H₂O；CSS 模拟只会粘贴成 H2O - SEO 和结构化数据提取依赖语义，
sub/sup能被爬虫识别为化学式/数学成分，CSS 不行
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加style="vertical-align: super"——多此一举，还容易和行高冲突
数学上下标顺序错乱怎么修
浏览器按标签出现顺序渲染，顺序即位置。写错顺序，结果就完全不对：
-
x<sub>i</sub><sup>2</sup>→ 正确渲染为 xᵢ²（先下标再上标） -
x<sup>2</sup><sub>i</sub>→ 渲染为 x²ᵢ（先上标再下标，“i”跑到了“2”的右下角） -
a<sub>n+1</sub>合法（整个字符串是下标），但a<sub>n</sub>+1错误（加号不是下标） - 电荷符号如 “2−” 必须整个包进
sup：SOsub4sup2−，不能拆成sup2−（− 会掉回基线）
哪些场景必须换 MathML 或 KaTeX
sub/sup 遇到这些情况就该收手：
- 含分数、根号、求和号 ∑、积分 ∫ —— 它们根本无法表达
- 需要自动缩放响应式字体（比如页面放大时公式仍清晰）
- 要语音导航支持：MathML 提供完整语义树，KaTeX 可配
aria-label，而sub只能读作“下标二” - 复合结构如 an+12，视觉上需“n+1”整体下标、“2”独立上标，
sub/sup无法精确定位
真正容易被忽略的点是：哪怕只是 log<sub>10</sub>x，如果后面紧跟括号（log<sub>10</sub>(x)），也得确保括号不被误包进 sub——语义断裂比样式丑更致命。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
