sub和sup是语义标签而非排版工具，仅在内容具明确下标/上标语义时必须使用，如化学式H₂O、数学幂次x²、脚注编号¹、版权符号™；纯视觉需求应交由CSS实现，以保障可访问性与语义正确性。
sub 和 sup 是语义标签，不是排版开关——用错地方会破坏可访问性、让屏幕阅读器读出“下标二”“上标零二四”，而不是“H2O”或“2024年”。
什么时候必须用 sub 和 sup？
只在内容本身具有明确下标/上标语义时才该用，浏览器和辅助技术靠这个判断结构含义：
- 化学式中的原子个数：H
<sub>2</sub>O、SO<sub>4</sub><sup>2−</sup> - 数学幂次或对数底数：x
<sup>2</sup>、log<sub>10</sub>x - 脚注编号（纯数字，不加括号）：正文
<sup>1</sup>，对应页脚<div id="fn1"></div> - 商标或版权符号：TM
<sup>™</sup>、© 2025
别把年份写成 <sup>2024</sup>，也别给“用户协议”加 <sub> 做小字说明——这些没语义，纯属视觉需求。
数学公式里 sub/sup 能不能撑全场？
简单幂次可以，比如 a<sup>n</sup> + b<sup>m</sup>；但一碰到复合结构就失效：
立即学习“前端免费学习笔记（深入）”；
-
<sub><sup>2</sup></sub>是非法嵌套，HTML 不允许 - x
<sup>2</sup><sub>i</sub>渲染为 “x²i”，不是 “xᵢ²” —— 顺序决定位置，无法倒置 - 分数、根号、求和号（∑）、积分（∫）完全无法表达
真要写严谨数学公式，得用 <math>（MathML）或 KaTeX/TeX 渲染；sub/sup 只适合孤立、单层、非运算型标记。
怎么微调显示效果？别硬改默认行为
浏览器对 sub 和 sup 的默认渲染不一致（Chrome 缩到约 60%，Firefox 偏移略大），但直接覆盖 UA 样式容易翻车：
- 优先用
vertical-align: super/vertical-align: sub，而非top或transform—— 后者破坏基线对齐，混排时文字可能错位 - 调整字号建议用相对单位：
font-size: 0.75em，避免固定像素值在缩放时失真 - 若并排多个上下标（如 SO
<sub>4</sub><sup>2−</sup>），加line-height: 0防止撑开段落 - 中文混排时，
sub/sup内的数字可能因字体 fallback 显得过小，可加font-variant: normal强制使用标准数字字形
最常被忽略的一点：用开发者工具检查 computed 样式，确认 vertical-align 真的是 super 或 sub，而不是被父级 CSS 意外重置了。
