需用HTML的标签实现化学分子式下标，如H2O；多个下标须分别包裹；嵌入段落需保持语义清晰；可配合CSS调整字体与对齐；同时确保无障碍支持和语义正确性。
如果您需要在网页中正确显示化学分子式，如水（H₂O）或二氧化碳（CO₂），则必须使用 HTML 的下标标签来确保数字准确位于元素符号右下方。以下是实现该效果的具体方法：
一、使用 <sub> 标签包裹下标数字
<sub> 标签专用于定义下标文本，浏览器会将其渲染为比正常文本略小、且基线对齐于当前行文字下方的样式，符合化学式书写规范。
1、在 HTML 文件的 <body> 区域内编写化学式内容。
2、将元素符号后的数字用 <sub> 和 </sub> 包裹，例如 H<sub>2</sub>O。
立即学习“前端免费学习笔记（深入）”；
3、保存文件并在浏览器中打开，观察 H₂O 是否正确显示为带下标“2”的水分子式。
二、组合多个 <sub> 实现复杂化学式
当化学式包含多个下标位置（如硫酸 H₂SO₄ 或葡萄糖 C₆H₁₂O₆）时，需对每个需下标的数字单独应用 <sub> 标签，不可合并处理。
1、写出完整化学式字符串，如 "H2SO4"。
2、将所有阿拉伯数字替换为 <sub>数字</sub>，得到 "H<sub>2</sub>SO<sub>4</sub>"。
3、对于含多位数的下标（如 12），必须整体包裹：H<sub>12</sub>，而非 H<sub>1</sub><sub>2</sub>。
三、嵌入段落中保持语义清晰
在说明性文字中插入化学式时，应确保 <sub> 标签处于普通段落结构内，避免破坏文档流，同时维持可读性与可访问性。
1、使用 <p> 标签包裹整段解释文字。
2、在句子中定位化学式位置，例如：“水的化学式是 H<sub>2</sub>O。”
3、确认浏览器渲染后，H<sub>2</sub>O 与其他文字行高协调，无错位或截断现象。
四、配合 CSS 控制字体大小与行距
默认情况下 <sub> 的字号约为父级的 83%，若需统一视觉比例或适配特殊排版需求，可通过内联 style 属性微调。
1、为 <sub> 添加内联样式：<sub style="font-size: 0.75em;">2</sub>。
2、若影响整行垂直居中，可补充 vertical-align: baseline; 以稳定对齐基准线。
3、测试不同字号值（如 0.7em、0.8em）在目标浏览器中的实际渲染效果。
五、验证语义正确性与无障碍支持
使用 <sub> 不仅关乎视觉呈现，更承担语义表达功能；屏幕阅读器会识别其为下标内容，有助于科学内容的无障碍传达。
1、检查 HTML 源码中是否仅对真正意义的下标（如原子个数、电荷数）使用 <sub>。
2、避免将纯装饰性数字（如编号、页码）误用 <sub>，应改用普通文本加 CSS 样式。
3、运行无障碍检测工具，确认 H<sub>2</sub>O 被正确朗读为“H 下标 2 O”而非“H 2 O”。
