sub和sup是语义化标签，仅用于化学式下标（如H₂O）、数学上标（如x²）等有明确语义的场景，不可滥用作排版工具；错误使用会导致对齐失真、屏幕阅读器误读及渲染错乱。
sub和sup标签的基本行为与适用边界
sub 和 sup 是语义化内联标签，浏览器默认渲染为缩小、偏移的字体，但它们**不是排版工具，而是语义标记**。化学式如 H₂O、SO₄²⁻ 或数学式如 x²、log₁₀ 中的下标/上标，只有在语义上确属“下标”或“上标”时才该用 sub/sup。比如 CO₂ 中的 “2” 表示原子个数，是典型下标；而 E=mc² 中的 “2” 是幂次，属于上标。若只是视觉上想“把字调小+挪位置”，比如自定义单位 m−3·s−1，也勉强可用——但遇到负号、分数、多层嵌套（如 abc）就容易错乱。
常见错误现象包括：
- 连续嵌套
sub和sup时基线偏移累积，导致对齐失真 - 在行内混用
sub/sup与普通文本时，行高撑大或文字截断 - 屏幕阅读器会按语义朗读“下标2”“上标负1”，可能干扰理解（如读作“SO 下标 4 上标 2 减”而非“SO4 2减”）
化学公式中下标数字的正确写法
化学式中的数字绝大多数是下标，且通常紧贴元素符号右侧。使用 sub 时需注意：数字不能单独脱离元素符号包裹，也不能把整个分子式塞进一个 sub 里。
正确写法示例：
<p>水：H<code>sub</code>2</code>O</p>
<p>硫酸根：SO<code>sub</code>4</code><code>sup</code>2−</code></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
关键细节：
- 离子电荷的“−”必须用 Unicode 减号（U+2212）或 −，不能用连字符
-，否则会被误判为连接符或断行点 - 像 PO₄³⁻ 这种带多位电荷的，应写作
PO<code>sub</code>4</code><code>sup</code>3−</code></li> <li>避免 <code><sub>CO2</sub>
——这会让整个“CO2”变下标，违背化学含义
数学上标中幂次与函数名的区分处理
sup 适合幂次（x²、eiπ）、对数底数（logsub10）、导数标记（f′、f″），但**不适用于函数名本身**。例如 sin²x 应写为 sin<code>sup2x，而不是把 “sin” 包进 sup。
易踩坑点：
- log₁₀ 要用
log<code>sub10，不是<sup>log</sup><sub>10</sub> - 复合上标如 an+1 必须保持运算符完整：
a<code>supn+1，不可拆成a<code>supn+1 - 微分符号 ′ 是独立 Unicode 字符（U+2032），应直接输入或用 ′，不要用
sup模拟
当 sub/sup 不够用时的替代方案
纯 HTML 的 sub/sup 缺乏对齐控制、字号缩放比例和垂直偏移微调能力。遇到以下情况建议换方案：
- 需要上下标同时存在且对齐（如 ixj）→ 改用 CSS 的
vertical-align + font-size 组合
- 含分数、根号、求和符号等复杂结构 → 必须用 MathML 或 KaTeX / MathJax 渲染
- 需打印或 PDF 导出时保证精度 → 避免依赖浏览器默认
sub/sup 渲染，改用 SVG 或 LaTeX 后端
vertical-align + font-size 组合sub/sup 渲染，改用 SVG 或 LaTeX 后端最常被忽略的是：CSS 可以覆盖 sub/sup 的默认行为，比如重置 line-height 防止段落撑高，或统一 font-size: 75% 提升一致性。但这会削弱语义，得在可访问性与视觉控制之间权衡。
