化学式书写规则为：正价元素或金属在前、负价或非金属在后；原子数目用右下角下标表示；含原子团且个数大于1时须加括号并标下标；电荷数为右上角上标，不可与下标混淆。

直接用 <sub> 和 <sup> 标签就能写，但关键在语义准确、顺序正确、不嵌套、括号处理得当——否则看起来像，读出来错，打印出来乱。

化学式：下标只包数字，括号外的下标放括号后

原子个数是下标，电荷是上标，两者不能混。括号表示基团，下标属于整个括号内容，不是括号里的某个元素。

• H₂O：氢原子数为 2，O 不带下标，不写 H₂O₁
• Ca(OH)₂：两个 OH 基团，括号必须保留在 _{外；写成 Ca(OH)2 会让括号变小变低，语义错误}
• SO₄²⁻：先写硫酸根下标 4，再写电荷上标 2−；“2−”必须整体包裹在 ^{中，不能拆成 2−}
• Na⁺、Cl⁻：电荷符号和数字同级上标，减号推荐用 Unicode “−”（U+2212），不是短横 “-”

数学公式：顺序决定位置，别靠嵌套硬凑

浏览器按标签出现顺序叠加定位： _{先贴变量基线， ^{再基于当前结果上抬。顺序一错，上下标就跑偏。}}

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• x_i² 渲染为 xᵢ²（i 是下标，整体平方），符合 x_i^2
• x²_i 则变成 x²ᵢ（先上标再下标，i 跑到 2 的右下角），完全不符合数学习惯
• a_n+1 表示第 n+1 项，整个 “n+1” 是下标；若只是 a_n + 1，就该分开写，不加 sub
• 避免 _^… 或 _^…：HTML5 虽允许，但无语义支撑，渲染不可控，校验工具常报错

哪些情况不能硬撑，该换专业方案

_{和 ^{是语义标签，不是排版引擎。一旦涉及自动缩放、对齐、分数、根号或复杂结构，就得让位。}}

立即学习“前端免费学习笔记（深入）”；

• 需要 e^x 中的 x 更小、更贴近 e？sub/sup 做不到，得用 MathJax 或 KaTeX
• 出现 ^1/2、^∑、√、∫、 等？纯 HTML 标签无法正确表达语义和视觉
• 要导出 PDF 或打印高质量文档？多数工具对 sub/sup 的 vertical-align 支持不稳定，建议用 MathML + MathJax 渲染后导出
• 目标用户含视障人士？屏幕阅读器会把 SO₄²⁻ 读作 “S O 下标 4 上标 2 减”，不如 MathML 的 …2 可配置朗读逻辑

兼容性与样式微调要点

标签本身全浏览器支持，但默认样式容易被 CSS 重置覆盖，尤其在富文本编辑器或组件库中。

• 检查是否全局设置了 sup, sub { vertical-align: baseline; }——这是上下标“消失”的最常见原因
• 避免手动写 style="vertical-align: super"，它易与 line-height 冲突；稳妥做法是加轻量样式：sup, sub { font-size: 0.75em; line-height: 0; }
• 父容器若设了 line-height: 1 或 font-size: 0，会压制 sub/sup 的缩放，需单独重置
• Markdown 编辑器（Typora、Obsidian、VS Code）普遍支持内嵌 HTML，写 H<sub>2</sub>O 比 LaTeX 的 H_{2}O 更快更直观