在HTML开发中，上下标效果是非常常见的排版需求，比如化学分子式H₂O、数学公式x²、脚注标注等场景都需要用到上下标。HTML专门提供了sup和sub两个标签来实现这类效果，不需要额外写复杂的CSS样式就能快速完成排版。
sup和sub标签的基础定义
sup标签用于定义上标文本，标签内的内容会以比周围文字更小的字号显示在基线之上；sub标签用于定义下标文本，标签内的内容会以更小的字号显示在基线之下。这两个标签都是行内元素，不会单独占一行，适合嵌入在段落文本中使用。
具体使用示例
1. 上标sup标签的使用
上标最常见的场景是数学平方、立方计算，还有脚注标注，下面是具体的代码示例：
<!-- 数学平方示例 --> <p>正方形的面积公式为：S = a<sup>2</sup></p> <!-- 脚注标注示例 --> <p>本文参考了相关技术规范<sup>[1]</sup></p>
2. 下标sub标签的使用
下标多用于化学分子式、数学变量下标等场景，示例代码如下：
<!-- 化学分子式示例 --> <p>水的化学分子式为：H<sub>2</sub>O</p> <!-- 数学变量下标示例 --> <p>数列的第n项可以表示为：a<sub>n</sub></p>
3. 混合使用上下标
有些场景需要同时用到上下标，比如化学中的同位素表示，示例代码如下：
<p>碳14的同位素表示为：<sup>14</sup>C</p> <p>硫酸亚铁的化学式为：Fe<sub>2</sub>(SO<sub>4</sub>)<sub>3</sub></p>
使用注意事项
- sup和sub标签仅用于有语义的上下标内容，不要为了调整文字位置随意使用这两个标签，避免影响页面语义和可访问性。
- 如果需要调整上下标的字号大小或者垂直位置，可以通过CSS的font-size和vertical-align属性自定义样式，不要修改标签本身的语义。
- 标签必须正确闭合，避免嵌套错误导致页面排版异常。
浏览器兼容性
sup和sub标签是HTML早期就支持的标签，所有主流浏览器包括Chrome、Firefox、Safari、Edge等都完全兼容，不需要担心兼容性问题，可以放心使用。