化学式中下标用<sub>、上标用<sup>：原子个数（H₂）、同位素质量数（¹⁴C）用<sub>或<sup>依位置而定；电荷（Ca²⁺）、氧化态（Feᴵᴵᴵ）、自由基（·OH）一律用<sup>，嵌套需独立包裹，不可语义混淆。
sub 和 sup 在化学式里到底该用哪个
写化学式时，下标（如 H2O 的 “2”）必须用 <sub>，上标（如电荷数 OH− 的 “−”）必须用 <sup>。不能反过来，也不能用 CSS 伪类或 font-size 模拟——语义错误会导致屏幕阅读器误读、SEO 失效，且在某些邮件客户端或旧版浏览器中渲染异常。
常见错误：离子电荷写成 sub 而不是 sup
比如把 Ca2+ 写成 Ca2+，看起来位置差不多，但实际含义完全不同：<sub>2+</sub> 被解析为“钙的第 2+ 个同位素”，而 <sup>2+</sup> 才表示“带两个正电荷的钙离子”。
- 电荷符号（+, −, ±）、氧化态（如 FeIII）、自由基点（·OH）一律用
<sup> - 原子个数（H2、SO4）、同位素质量数（14C）用
<sub>或<sup>取决于位置：质量数在左上角，用<sup>；原子个数在右下角，用<sub> - 多个字符电荷（如 2−）建议写成
<sup>2−</sup>，不要拆成<sup>2</sup><sup>−</sup>，否则可能产生间隙
嵌套使用：比如带电荷的多原子离子
像 SO42− 这类，<sub> 和 <sup> 必须独立包裹对应内容，不能交叉或省略标签。正确写法是：<span>SO</span><sub>4</sub><sup>2−</sup>。
- 不要写成
<sub>SO<sub>4</sub><sup>2−</sup></sub>（嵌套错误，语义混乱） - 避免用
<span style="vertical-align: sub">替代<sub>，CSS 不保证语义和可访问性 - 若需控制上下标间距，用 CSS 的
line-height或vertical-align微调，但不可移除原生标签
兼容性与工具链注意事项
所有现代浏览器都支持 <sub> 和 <sup>，但部分 Markdown 解析器（如 GitHub Flavored Markdown）默认不解析它们，需要显式启用 HTML 支持或改用扩展语法（如 Pandoc 的 tex_math_dollars）。
立即学习“前端免费学习笔记（深入）”；
- 在 Vue/React 中直接写
<sub>2</sub>没问题，但若从富文本编辑器粘贴，需检查是否被转义为<sub></sub> - Word 或 LibreOffice 导出 HTML 时常把上下标转为 span + style，这类代码需手动替换为语义化标签
- LaTeX 用户注意：
_和^在 MathJax 中渲染效果好，但纯 HTML 页面必须用<sub>/<sup>，二者不可混用
<sub> 标签，可能让“CO”变成“C O”（一氧化碳 vs 碳和氧元素），尤其在自动化解析或学术数据库导入时，错一位标签，数据就失效。 
