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>2O</p> <p>硫酸根：SO<code>sub</code>4<code>sup</code>2−</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
关键细节：
- 离子电荷的“−”必须用 Unicode 减号（U+2212）或 −，不能用连字符
-，否则会被误判为连接符或断行点 - 像 PO₄³⁻ 这种带多位电荷的，应写作
PO<code>sub</code>4<code>sup</code>3−
- 避免
CO2——这会让整个“CO2”变下标，违背化学含义
数学上标中幂次与函数名的区分处理
sup 适合幂次（x²、eiπ）、对数底数（logsub10）、导数标记（f′、f″），但**不适用于函数名本身**。例如 sin²x 应写为 sinsup2x，而不是把 “sin” 包进 sup。
sup2易踩坑点：
- log₁₀ 要用
log，不是sub10log10 - 复合上标如 an+1 必须保持运算符完整：
a，不可拆成supn+1a+1supn - 微分符号 ′ 是独立 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% 提升一致性。但这会削弱语义，得在可访问性与视觉控制之间权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
