HTML 中的 sup 与 sub 标签区别详解：前端排版与公式/脚注场景的正确用法
sup 与 sub 标签分别代表上标与下标，用来在文本中表达数学幂、单位指数、化学式等语义。使用 语义标签，屏幕阅读器可以更好地解读信息，搜索引擎也能更精准地理解页面内容，从而提升页面的可访问性与可检索性。
在默认情况下，sup 的文本会向上提升并略微变小，sub 的文本会向下压低，保持同一基线的文本流动性。这种差异来自浏览器对内联元素的默认渲染规则，垂直对齐和字号缩放共同决定最终的视觉效果。
为了实现稳定的排版，推荐将 上标/下标与内容语义绑定，并通过 CSS 控制大小和位置，而不是大量使用额外的标记或字体堆叠来实现视觉效果。这有助于提高跨设备的一致性和无障碍性。
1. sup 与 sub 的语义与基本用法
在文档中，sup 常用于表示指数、幂、单位符号等，具有明确的 数学与化学语义，便于读者快速理解“更高层级的数值表示”。
另一个常见场景是脚注标记，使用 sup 来承载序号，以指向文末或页面末尾的注释内容，从而保持正文的阅读流畅性。
sub 常用于化学式中的下标、文本中的次级标记等场景，具有明确的 化学与编号语义，便于科学文本的规范表示。
p>爱因斯坦方程: E = mc<sup>2</sup>2. 前端排版中的垂直对齐与浏览器渲染
浏览器将 sup 与 sub 作为内联元素来处理，默认的对齐基线通常是 baseline，上标会提升并缩小字体， 下标会降低。这个行为会影响整行文本的垂直高度及行距，因此在复杂布局中需要注意。
要实现跨浏览器的一致排版，通常通过 CSS 控制它们的对齐和字号，例如使用 vertical-align 和 font-size 的组合来微调视觉效果。
在高度自定义的排版场景中，建议避免仅凭 HTML 结构来定位文本，而是通过 独立的 CSS 样式 控制上标/下标的位置，以提升可维护性与一致性。
/* 常用的对齐示例 */
sup { vertical-align: super; font-size: 0.8em; }
sub { vertical-align: sub; font-size: 0.8em; }<p>化学式示例：H<sub>2</sub>O</p>3. 公式与脚注场景的正确用法
在公式表示中，sup 经常用于表示指数、幂、单位的次方，如 E = mc<sup>2</sup>，通过语义化的标签承载数值与运算信息，便于阅读与解析。
在脚注或注释引用的场景，sup 常用于标记引用序号，后续通常在网页的注释区或文末呈现对应的解释内容。通过这种做法，正文保持简洁，而读者仍能获得完整信息。
下面的示例演示在同一段落中结合 sup 与注释文本的实现方式，并强调在适当的位置放置注释区域以增强可访问性与结构性。
<p>该结论来自多项研究<sup>1</sup>，具体见注释<sup>1</sup>。</p><p id="footnote-1" >1. 这是脚注内容的详细说明，包含对论文数据的解释和来源。</p>/* 脚注与上标的可访问性辅助样式（示意） */
.footnote { font-size: 0.8em; color: #555; }
