1. sup 与 sub 的基本概念与区别
定义与语义
在 HTML 中，sup（上标）与 sub（下标） 是两种用于排版的内联标签，旨在以不同的垂直位置呈现文本。上标将文本抬高到基线之上，常用于单位平方、幂次、脚注编号等场景；下标将文本放置在基线以下，常见于化学式中的分子式、化学元素的标记等。
从语义角度看，sup 与 sub 传达的是排版含义而非纯粹的视觉效果，因此它们对屏幕阅读器等辅助技术也具有一定的可访问性价值。正确使用可以帮助读者理解公式、脚注与化学式的结构关系。
外观与默认样式
浏览器对 <sup> 与 <sub> 有预设的字体缩放和垂直对齐。默认字体通常比主体文本更小，并且相对于基线有一定的抬高或降低。
在排版中，遵循这类标签的语义，可以让文档在不同设备上保持一致的结构感。若要保持一致性，优先使用原生标签，避免直接改用仅外观的样式替代。
可访问性与可维护性
使用 <sup> 与 <sub> 时，屏幕阅读器会解释为“上标”或“下标”，这有助于无障碍用户理解公式和脚注。若仅通过 CSS 调整外观而不保留语义，可能削弱可访问性。
因此，保持对语义的依赖并辅以必要的可视化调整，是实现可维护、高质量文档的关键。仍应在需要时保留原生标签的结构，而非完全替换成仅样式化的 span 或其他标签。
H<sup>2</sup>O
CO<sub>2</sub> 是二氧化碳，下标 2 表示分子中原子个数 -->
2. 应用场景与正确用法
文本中的实际应用
在化学、物理、数学等领域，上标与下标是不可或缺的排版元素。例如化学式、幂次、脚注标志等都需要以 sup 或 sub 的形式呈现，以便读者快速识别结构信息。
常见场景包括：化学公式中的分子式、数学表达式中的幂次、以及 文档中的脚注标记。在这些场景中，保留语义结构有助于搜索引擎索引与无障碍工具的正确解释。
示例与扩展用法
下面的示例展示了在同一段落内同时使用上标和下标的常见情形。你可以把它们直接嵌入段落中，以提升可读性。
<p>这是一个混合示例：化学式<span>H<sup>2</sup>O</span>，<span>CO<sub>2</sub></span>是常见的化合物。</p>/* 通过 CSS 提升外观同时保留语义 */
sup { font-size: 0.8em; vertical-align: middle; }
sub { font-size: 0.8em; vertical-align: bottom; }如果需要对外观进行统一控制，可以在 CSS 层面提供全局样式，而不改变文档的语义结构。建议在 CSS 中统一调整，避免在 HTML 中大量重复使用内联样式。
使用要点与最佳实践
要点包括：保持语义、正确嵌套、避免嵌套过深，以及在需要时结合语义标签（如 <span> 配合 aria-label）以确保可访问性。对于复杂公式，可以考虑数学标记语言（如 MathML）或图片替代文本来确保高保真呈现，但在简单的化学式和脚注场景中，sup 与 sub 的原生用法通常已经足够。
进阶示例：结合标记与引用
在文档中有时需要对脚注或引用进行标记，此时上标通常用于引用编号，而下标则较少在引用场景中使用。以下示例展示一个文中脚注的典型实现思路：在正文中使用 sup 来标注脚注编号，并在文末提供对应的注释文本。
<p>这是需要脚注的句子。<sup>1</sup></p>
<hr />
<p id="footnote-1">1. 这里是脚注的具体说明。</p>关于可访问性和机器可读性
确保上标和下标在可视化与语义之间保持一致，有助于屏幕阅读器更好地解释文档结构。如果页面包含大量公式，考虑辅助性工具或替代文本以提升无障碍体验。
总结排版策略
在实际开发中，优先使用 <sup> 与 <sub> 来表达上标和下标，并通过 外部样式表 调整大小和对齐。不要过度依赖内联样式，以便后续维护和 SEO 优化。
