必须用<sup>和<sub>标签处理语义明确的上下标，如化学式H2O、数学幂次x2、脚注3、离子电荷SO42−；误用如©2025会破坏可访问性。
直接用 <sup> 和 <sub> 标签就行，不需要等编辑器支持特殊按钮或插件——只要 HTML 能渲染，它们就生效。
什么时候必须用 <sup> 和 <sub> 而不是 CSS
语义明确的场景才该用：化学式（H<sub>2</sub>O）、数学幂次（x<sup>2</sup>）、脚注编号（见文献<sup>3</sup>）、离子电荷（SO<sub>4</sub><sup>2-</sup>）。这些内容被屏幕阅读器读作“H 下标 2 O”“x 上标 2”，而 vertical-align: super 不触发任何语义播报。
- 误用典型：
©<sup>2025</sup>—— 年份不是上标，读屏器会念成“版权 上标 二零二五” - 单位如
cm<sup>3</sup>有争议：若强调“立方厘米”整体是单位，建议用 CSS；若按标准写法（如 ISO 80000）要求指数位置，则用<sup> - Markdown 编辑器（Typora、Obsidian、VS Code 插件）原生支持内嵌 HTML，直接写
<sub>2</sub>即可，不用开 LaTeX 模式
<sup> 和 <sub> 嵌套失效的常见原因
它们默认就工作，但容易被样式意外覆盖：
- 全局 CSS 重置（如 Normalize.css）把
vertical-align强制设为baseline，直接废掉上下标位置 - 父容器设置了
line-height: 1或font-size: 0，导致子元素缩放和偏移失效 - 手动给
<sup>加style="vertical-align: super"—— 多此一举，还可能和行高冲突 - 在
<pre>或等宽字体环境里，默认偏移常错位，此时应改用font-variant-position: super
怎么安全微调 <sup> 和 <sub> 的显示效果
可以改，但别碰 vertical-align 值本身；优先用比例单位控制缩放和偏移：
立即学习“前端免费学习笔记（深入）”；
- 统一字号：
sup, sub { font-size: 0.75em; }（避免写死 px，适配深色模式/缩放） - 微调上移量：
sup { margin-bottom: -0.15em; }（比vertical-align: 0.2em更稳，不破坏基线） - 移动端可读性差？加媒体查询：
@media (max-width: 480px) { sup, sub { font-size: 0.85em; } } - 复杂混合排版（如
CO<sub>2</sub><sup>−</sup>）要兼顾紧凑与语义时，别硬调 CSS —— 先确认是否真需 HTML 原生方案；复杂公式早该切到 MathML 或 KaTeX
真正难搞的是语义边界：比如 “m³” 是单位符号还是数学幂？不同标准有不同要求，不能只看渲染像不像。
