化学式与数学符号需严格使用和标签：h2o、so42−（电荷用unicode减号），顺序为先后；嵌套无效，复杂公式应改用mathml或katex。
化学式里怎么写 H2O 和 SO42−
必须用 <sub></sub> 包氢原子个数、氧原子个数，用 <sup></sup> 包电荷数——顺序不能颠倒，且电荷符号要用 Unicode 减号 −（U+2212），不是 ASCII 连字符 -。
常见错误：SO<sub>4</sub><sup>2-</sup> 渲染为 “SO₄²-”，视觉上像“减号”但语义错乱；正确写法是 SO<sub>4</sub><sup>2−</sup>。浏览器默认不校验字符编码，但屏幕阅读器和学术数据库会依赖准确的 Unicode 表达。
-
H<sub>2</sub>O合法，H<sub>2</sub>O<sub>2</sub>也合法（过氧化氢） -
CO<sub>2</sub>正确，CO2（无标签）丢失化学语义，SEO 和无障碍支持弱 - 离子电荷必须紧贴元素/基团右侧：
Na<sup>+</sup>✅，<sup>+</sup>Na❌（语义断裂）
数学幂次与下标索引：x2、an、log10x 怎么写才对
<sup></sup> 和 <sub></sub> 在数学中只表达单层位置关系，不参与运算解析。它们的渲染顺序就是 HTML 的书写顺序：先 <sub></sub> 再 <sup></sup> 才能得到 xᵢ² 这类复合效果。
错误写法：x<sup>2</sup><sub>i</sub> 渲染为 “x²i”，不是数学意义上的 “xᵢ²”；正确写法是 x<sub>i</sub><sup>2</sup>。
-
log<sub>2</sub>(8) = 3✅（底数 2 是下标，括号和等号是普通文本） -
log<sub>2(8)</sub> = 3❌（把 “2(8)” 整体当底数，语义错误） -
a<sub>n+1</sub>✅（整个表达式是下标），但a<sub>n</sub>+1是 “aₙ + 1”，不是 “aₙ₊₁” - 复合幂如
a<sup>n+1</sup>必须完整包裹，拆成a<sup>n</sup>+1就变成 “aⁿ + 1”
为什么 <sub><sup>2</sup></sub> 会失效
嵌套 <sub></sub> 和 <sup></sup> 虽语法合法，但浏览器解析时会扁平化结构，W3C 验证器报错，屏幕阅读器可能跳过或误读。更关键的是，它破坏了数学语义层级——比如 <sub><sup>2</sup></sub> 想表达“下标里的上标”，实际既不是标准化学式，也不是通用数学记号。
真实场景中几乎不需要这种嵌套。需要多级标记（如 aₙ₊₁²）时，<sub></sub>/<sup></sup> 已超出能力边界，应切换到 MathML 或 KaTeX。
- 富文本编辑器常自动剥离嵌套标签，保存后只剩外层
<sub></sub>或<sup></sup> -
<pre class="brush:php;toolbar:false;"></pre>或等宽字体环境里，<sub></sub>垂直偏移容易错位，建议改用 CSSfont-variant-position: sub; - 脚注编号必须配
id和引用锚点，单写<sup>1</sup>不具备可跳转性
什么时候该放弃 <sub></sub>/<sup></sup> 改用 MathML 或 KaTeX
只要公式含分式、根号、求和号 ∑、积分 ∫、括号自动缩放，或需上下标精确定位（如 ai2 要求 “i” 在右下、“2” 在右上），<sub></sub>/<sup></sup> 就不再适用。
它们本质是语义标签，不是排版引擎。强行用它们拼复杂公式，结果往往是：视觉错位、语义污染、复制粘贴失真、无障碍支持归零。
- MathML 提供完整语义树，KaTeX 输出可配置
aria-label，二者都支持响应式缩放 - 简单单位（m2）、索引（xn）、电荷（Ca2+）仍推荐原生标签——轻量、语义清、无需 JS
- Markdown 中直接写
H<sub>2</sub>O安全有效，但别指望靠它撑起整篇《微积分讲义》
<sub></sub> 和 <sup></sup> 看似省事，实则埋下语义断裂、渲染不可控、无障碍失效三重隐患。真正要解决的不是“怎么让它看起来像公式”，而是“怎么让机器和人都能准确理解它”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
