sub和sup是语义标签而非排版工具，仅在内容具明确下标/上标语义时必须使用，如化学式h₂o、数学幂次x²、脚注编号¹、版权符号™；纯视觉需求应交由css实现，以保障可访问性与语义正确性。
sub 和 sup 是语义标签，不是排版开关——用错地方会破坏可访问性、让屏幕阅读器读出“下标二”“上标零二四”，而不是“H2O”或“2024年”。
什么时候必须用 sub 和 sup？
只在内容本身具有明确下标/上标语义时才该用，浏览器和辅助技术靠这个判断结构含义：
- 化学式中的原子个数：H
<sub>2</sub>O、SO<sub>4</sub><sup>2−</sup> - 数学幂次或对数底数：x
<sup>2</sup>、log<sub>10</sub>x - 脚注编号（纯数字，不加括号）：正文
<sup>1</sup>，对应页脚<div id="fn1"></div> - 商标或版权符号：TM
<sup>™</sup>、© 2025
别把年份写成 <sup>2024</sup>，也别给“用户协议”加 <sub></sub> 做小字说明——这些没语义，纯属视觉需求。
数学公式里 sub/sup 能不能撑全场？
简单幂次可以，比如 a<sup>n</sup> + b<sup>m</sup>；但一碰到复合结构就失效：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<sub><sup>2</sup></sub>是非法嵌套，HTML 不允许 - x
<sup>2</sup><sub>i</sub>渲染为 “x²i”，不是 “xᵢ²” —— 顺序决定位置，无法倒置 - 分数、根号、求和号（∑）、积分（∫）完全无法表达
真要写严谨数学公式，得用 <math></math>（MathML）或 KaTeX/TeX 渲染；sub/sup 只适合孤立、单层、非运算型标记。
怎么微调显示效果？别硬改默认行为
浏览器对 sub 和 sup 的默认渲染不一致（Chrome 缩到约 60%，Firefox 偏移略大），但直接覆盖 UA 样式容易翻车：
- 优先用
vertical-align: super/vertical-align: sub，而非top或transform—— 后者破坏基线对齐，混排时文字可能错位 - 调整字号建议用相对单位：
font-size: 0.75em，避免固定像素值在缩放时失真 - 若并排多个上下标（如 SO
<sub>4</sub><sup>2−</sup>），加line-height: 0防止撑开段落 - 中文混排时，
sub/sup内的数字可能因字体 fallback 显得过小，可加font-variant: normal强制使用标准数字字形
最常被忽略的一点：用开发者工具检查 computed 样式，确认 vertical-align 真的是 super 或 sub，而不是被父级 CSS 意外重置了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
