必须用和精准包裹语义化数字：H2O中2表氢原子数，Ca(OH)2中2表OH基团数，SO42−中4为氧原子数、2−为电荷数，C6H12O6中各下标专属对应元素。
<sup> 和 <sub> 必须按语义精准包裹数字，不能图省事全包或漏包——H2O 写成 H2O 或 H2O1 都会错失原子数含义，读屏器和搜索引擎也会误读。
化学分子式里哪些数字必须用 <sub>
只对表示原子个数的数字使用 <sub>，括号、符号、电荷数各自独立处理：
- H2O：氢原子数为 2，氧无下标，不写 H2O1
- Ca(OH)2：括号外的
2表示两个 OH 基团，括号本身不能进<sub>，否则变成 Ca(OH)2（语义错误+渲染错位） - SO42−：原子数
4用<sub>，电荷数2−用<sup>，且减号必须是 Unicode U+2212（−），不是 ASCII 连字符（-） - C6H12O6：每个元素的原子数单独包裹，不能合并成 C6H12O6 —— 虽然结果一样，但语义上 12 是 H 的专属下标，不可省略标签
<sup> 在化学式中只用于电荷、价态等真正上标语义
别把 <sup> 当“小一号字”来用。它在化学中仅限以下几种合法场景：
- 离子电荷：Na+、SO42−、Fe3+
- 氧化态：FeIIICl3（注意罗马数字是上标，不是变量）
- 同位素质量数：14C、2H（质量数在左上角，必须用
<sup>） - 错误用法：©2025（年份不是上标）、CO23（这不是 CO₂₃，而是混淆了 CO₂ 和 CO₃²⁻）
嵌套与顺序：先下标再上标，不允许多层 <sup> 套用
HTML 允许 <sub> 和 <sup> 相邻，但顺序影响渲染结果；浏览器不支持 <sup><sup>2</sup></sup> 这类嵌套：
立即学习“前端免费学习笔记（深入）”；
- 正确：xi2 → 渲染为 xᵢ²（先下标后上标）
- 错误：x2i → 渲染为 x²i（上标优先占位，i 跑到右边）
- 错误：n+1 → 多数编辑器或 CMS 会扁平化为 n+1，但语义已模糊；应直接写 n+1
- 复合电荷如 SO42− 中，
<sub>和<sup>是兄弟关系，不是父子嵌套
样式失效时先查这三处，而不是加 CSS 强制覆盖
多数“上下标没效果”问题跟浏览器兼容性无关，而是被外部规则悄悄干掉了：
- 全局 CSS 重置了
vertical-align：比如 Normalize.css 或 antd 默认设sup, sub { vertical-align: baseline; }，直接废掉原生行为 - 父容器
line-height: 1或font-size: 0：导致子元素缩放比例失效，<sub>文字被压扁或消失 - 富文本编辑器或 CMS XSS 过滤未放开
<sup>/<sub>标签：保存后标签被删，只剩裸数字 - 不建议手动加
style="vertical-align: super"——多此一举，还可能和行高冲突；真要微调，用sup { margin-bottom: -0.15em; }更稳
最易被忽略的是 Unicode 字符边界：比如 2− 中的减号必须是 U+2212（−），不是 U+002D（-）。复制粘贴时容易带错，一错整个电荷语义就崩了。
