和仅用于数学幂次、化学式、脚注编号等有明确语义的场景，纯视觉效果须用css；滥用会导致语义污染，且受css重置、行高、过滤等影响易失效。
<sup></sup> 和 <sub></sub> 是语义标签，不是排版开关——写错地方比不写更糟。它们只在内容本身具有明确数学或化学含义时才该用，比如幂次、原子个数、脚注编号；纯视觉需求必须交给 CSS。
什么时候必须用 <sup></sup> 和 <sub></sub>
只有这些场景才需要原生标签，否则就是语义污染：
- 化学式：
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>、© 2025（年份本身不能上标，但 © 符号的法律效力要求 ™ 或 ® 必须紧贴主体）
<sup></sup> 和 <sub></sub> 渲染失效的常见原因
它们默认就生效，但实际项目里“看不见效果”几乎全是外部干扰：
- 全局 CSS 重置了
vertical-align：比如 Normalize.css 或 Ant Design 的 reset 会设sup, sub { vertical-align: baseline; }，直接覆盖浏览器原生的super/sub - 父容器设置了
line-height: 1或font-size: 0，导致子元素缩放被压制 - 手动给
<sup></sup>加style="vertical-align: super"——多此一举，还可能和行高冲突 - 富文本编辑器或 CMS 的 XSS 过滤没放开
<sup></sup>/<sub></sub>，保存后标签被删
数学公式里 <sup></sup>/<sub></sub> 的能力边界
别指望靠它们撑起完整公式。能做的仅限单层、无运算、顺序固定的结构：
- ✅ 可以：
a<sup>n</sup> + b<sup>m</sup>、x<sub>i</sub><sup>2</sup>（注意顺序：先下标再上标，渲染为 xᵢ²） - ❌ 不行：
<sub><sup>2</sup></sub>（非法嵌套）、x<sup>2</sup><sub>i</sub>（渲染成 x²i，不是 xᵢ²） - ❌ 完全无法表达：分数、根号、求和号 ∑、积分 ∫、矩阵、括号自动缩放
- ⚠️ 复合幂次如
a<sup>n+1</sup>必须写完整：n+1不能拆开，否则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;包裹 - 移动端可读性差？加媒体查询：
@media (max-width: 480px) { sup, sub { font-size: 0.85em; } } - 中文混排时数字过小？加
font-variant: normal;强制使用标准数字字形 - 并排多个上下标（如
SO<sub>4</sub><sup>2−</sup>）？加line-height: 0;防止段落被撑开
真正难处理的从来不是怎么写 <sup>2</sup>，而是确保它在 PDF 导出、屏幕阅读器、富文本过滤、响应式缩放中都不被吞掉、不变形、不误读——语义一旦写进 HTML，就得一路护送到最终渲染层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
