和是语义化内联标签，分别表示下标和上标，浏览器默认缩小字号约83%并垂直偏移基线，保持行高稳定，适用于化学式、数学公式等有明确语义的场景。
sub和sup标签的语义与默认渲染行为
HTML中的 <sub></sub> 和 <sup></sup> 是内联语义化标签，不是样式工具——它们明确表示“下标”和“上标”内容，比如化学式 H2O、数学表达式 x2 + y2。浏览器默认会缩小字号并垂直偏移，但偏移量和缩放比例各浏览器略有差异（Chrome 约 60% 字号 + 垂直下移；Firefox 偏移略大）。不要指望它们和 LaTeX 或 Word 的排版完全一致。
什么时候该用sub/sup，而不是CSS实现
优先用 <sub></sub>/<sup></sup> 的场景很明确：内容本身具有下标/上标语义。例如：
- 化学分子式：
<span>H<sub>2</sub>O</span>（不是<span class="sub">2</span>） - 数学幂次：
<p>E = mc<sup>2</sup></p> - 脚注编号：
<p>这是正文内容<sup>1</sup></p> <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><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>（配合<footer></footer>或 ARIA 更规范）
如果只是视觉上“想看起来像上标”，但无语义（比如装饰性角标、UI图标小标签），应该用 CSS 的 vertical-align + font-size 控制，避免滥用语义标签干扰可访问性。
常见兼容性与可访问性陷阱
这些标签本身兼容性极好（IE6+ 都支持），但问题常出在辅助技术处理上：
- 屏幕阅读器通常不会读出“下标”“上标”状态，仅朗读文本内容（如“H2O”而非“H下标2O”），对化学或数学理解可能造成歧义
- 部分旧版 JAWS 或 NVDA 需要开启“详细模式”才提示位置信息；更稳妥的做法是补充
aria-label，例如：<sub aria-label="下标 2">2</sub> - 在响应式布局中，
<sub></sub>/<sup></sup>的默认缩放可能让小字号在移动端难以辨认，建议用媒体查询微调：sub, sup { font-size: 0.75em; }而不是依赖默认值 - 避免嵌套使用：
<sup>a<sub>b</sub></sup>语义混乱，且多数浏览器渲染不可靠
需要精确控制时，CSS替代方案怎么写
当默认偏移/字号不满足设计需求（比如 UI 中要求上标与基线严格对齐、或字号固定为 12px），必须用 CSS 替代：
- 基础替代写法：
span.sup { vertical-align: super; font-size: 0.7em; }—— 注意vertical-align: super是相对当前行高的偏移，不如vertical-align: 0.5em可控 - 更稳定的做法是脱离文档流：
span.sup { display: inline-block; vertical-align: top; font-size: 12px; margin-bottom: 0.2em; } - 若需适配深色模式或字体变化，建议用
rem或em单位，避免写死px - 切记：用 CSS 实现时，仍应保留语义，比如加
role="superscript"或aria-hidden="true"配合说明文字，否则可访问性会降级
真正难的不是怎么写出来，而是判断该不该用——语义错位比样式不准更难修复。
