如何在HTML中编写化学方程式及特定离子？

一、原生HTML标签实现基础化学符号 #

HTML自带的 <sub>（下标）和 <sup>（上标）标签就能满足大部分基础化学方程式、离子符号的排版需求：

• 下标（如化学式中的原子个数）：用 <sub> 包裹内容，例如水的化学式：<p>H<sub>2</sub>O</p>，显示为 H₂O
• 上标（如离子电荷数、化合价）：用 <sup> 包裹内容，例如硫酸根离子：<p>SO<sub>4</sub><sup>2-</sup></p>，显示为 SO₄²⁻；氢离子：<p>H<sup>+</sup></p>，显示为 H⁺

二、针对你的公式代码优化 #

你提供的代码存在标签使用不当（空的 <sub>）、公式结构不清晰的问题，以下是优化后的版本，同时补充了合理的公式逻辑（推测你想表达漂白液稀释比例的计算）：

<p>
  ([漂白液中氯的百分比] ÷ [所需氯的百分比]) − 1 = 每份漂白液需搭配的总水量份数
</p>
<!-- 更规范的化学符号排版版本 -->
<p>
  (<sup>%</sup>Cl<sub>漂白液</sub> ÷ <sup>%</sup>Cl<sub>目标</sub>) − 1 = 每份漂白液对应水量份数
</p>

三、复杂化学结构的进阶方案 #

如果需要编写环状有机物这类复杂化学结构式，原生HTML标签难以实现，可使用MathML或专门的化学排版工具，但前者需注意浏览器兼容性，后者需引入对应脚本。不过对于大部分基础方程式和离子，<sub>+<sup>的组合完全够用。

内容的提问来源于stack exchange，提问作者user19704437