应使用<sub>和<sup>标签标记语义化上下标：化学式中原子个数、数学中幂次或索引必须准确包裹，避免CSS模拟，确保可访问性与专业性。
直接用 <sub> 和 <sup> 标签，别套 CSS 模拟——它们不是视觉开关，而是语义标记。化学式里的数字表示原子个数，数学中的上标是幂次或索引，这些信息必须让浏览器、搜索引擎和读屏软件准确识别。
化学分子式：每个下标数字单独包裹
下标必须严格对应原子数量，不能合并或遗漏。例如：
- H2O：氢原子数为 2，氧无下标，不写 H2O1
- Ca(OH)2：括号外的 2 表示两个 OH 基团，不是 O2H2
- C6H12O6：12 是整体下标，写成 C6H12O6，而非 H12
数学幂运算：上标只用于真正具有指数语义的部分
幂次、序数、单位升幂等才用 <sup>；加减乘除、字母变量本身不参与上下标。例如：
- x2 + y2：正确，两个独立平方项
- an+1：仅当整个 “n+1” 是序列下标时才合法；若只是 an + 1，就该分开写
- (A + B)2：括号整体作为底数，上标属于整个表达式，语义清晰
避开常见语义陷阱
误用会破坏可访问性与专业性：
立即学习“前端免费学习笔记（深入）”；
- ©2025 是错的——年份不是上标语义，应写作 © 2025
- CO23 不合法——这是 CO₂₃，不是 CO₂ 和 CO₃ 的混合，应根据实际分子式判断
- 不用
vertical-align: super替代<sup>：CSS 只改样式，不传语义，读屏器会念成 “x 2”，而非 “x 平方”
兼容性与渲染微调
标签本身 IE6 起全支持，但默认样式可能被 CSS 重置干扰：
- 检查是否全局设置了
sup, sub { vertical-align: baseline }，这会让上下标失效 - 如需统一缩放，可加轻量样式：
sup, sub { font-size: 0.75em; line-height: 0; } - PDF 导出工具（如 wkhtmltopdf）可能忽略偏移，关键文档建议额外标注说明
