必须用和精准包裹语义化数字：h2o中2表氢原子数，ca(oh)2中2表oh基团数，so42−中4为氧原子数、2−为电荷数，c6h12o6中各下标专属对应元素。

<sup></sup> 和 <sub></sub> 必须按语义精准包裹数字，不能图省事全包或漏包——H₂O 写成 H_2O 或 H₂O₁ 都会错失原子数含义，读屏器和搜索引擎也会误读。

化学分子式里哪些数字必须用 <sub></sub>

只对表示原子个数的数字使用 <sub></sub>，括号、符号、电荷数各自独立处理：

• H₂O：氢原子数为 2，氧无下标，不写 H₂O₁
• Ca(OH)₂：括号外的 2 表示两个 OH 基团，括号本身不能进 <sub></sub>，否则变成 Ca_(OH)2（语义错误+渲染错位）
• SO₄²⁻：原子数 4 用 <sub></sub>，电荷数 2− 用 <sup></sup>，且减号必须是 Unicode U+2212（−），不是 ASCII 连字符（-）
• C₆H₁₂O₆：每个元素的原子数单独包裹，不能合并成 C₆H₁₂O₆ —— 虽然结果一样，但语义上 12 是 H 的专属下标，不可省略标签

<sup></sup> 在化学式中只用于电荷、价态等真正上标语义

别把 <sup></sup> 当“小一号字”来用。它在化学中仅限以下几种合法场景：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 离子电荷：Na⁺、SO₄²⁻、Fe³⁺
• 氧化态：Fe^IIICl₃（注意罗马数字是上标，不是变量）
• 同位素质量数：¹⁴C、²H（质量数在左上角，必须用 <sup></sup>）
• 错误用法：©²⁰²⁵（年份不是上标）、CO₂³（这不是 CO₂₃，而是混淆了 CO₂ 和 CO₃²⁻）

嵌套与顺序：先下标再上标，不允许多层 <sup></sup> 套用

HTML 允许 <sub></sub> 和 <sup></sup> 相邻，但顺序影响渲染结果；浏览器不支持 <sup><sup>2</sup></sup> 这类嵌套：

• 正确：x_i² → 渲染为 xᵢ²（先下标后上标）
• 错误：x²_i → 渲染为 x²i（上标优先占位，i 跑到右边）
• 错误：ⁿ⁺¹ → 多数编辑器或 CMS 会扁平化为 ⁿ⁺¹，但语义已模糊；应直接写 ⁿ⁺¹
• 复合电荷如 SO₄²⁻ 中，<sub></sub> 和 <sup></sup> 是兄弟关系，不是父子嵌套

样式失效时先查这三处，而不是加 CSS 强制覆盖

多数“上下标没效果”问题跟浏览器兼容性无关，而是被外部规则悄悄干掉了：

• 全局 CSS 重置了 vertical-align：比如 Normalize.css 或 antd 默认设 sup, sub { vertical-align: baseline; }，直接废掉原生行为
• 父容器 line-height: 1 或 font-size: 0：导致子元素缩放比例失效，<sub></sub> 文字被压扁或消失
• 富文本编辑器或 CMS XSS 过滤未放开 <sup></sup>/<sub></sub> 标签：保存后标签被删，只剩裸数字
• 不建议手动加 style="vertical-align: super"——多此一举，还可能和行高冲突；真要微调，用 sup { margin-bottom: -0.15em; } 更稳

最易被忽略的是 Unicode 字符边界：比如 2− 中的减号必须是 U+2212（−），不是 U+002D（-）。复制粘贴时容易带错，一错整个电荷语义就崩了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！