HTML中上标与下标的设置方法：sup和sub标签详解
在网页内容排版中，经常会遇到需要显示上标或者下标的场景，比如数学公式中的平方、化学分子式的元素计数、脚注标注等。HTML提供了两个专门的标签来处理这类需求，分别是<sup>标签和<sub>标签，下面详细介绍它们的用法和特性。
一、sup标签：设置上标内容
<sup>标签用于定义上标文本，浏览器默认会将标签内的内容以比周围文字更小的字号显示，并且位置会向上偏移，通常用来展示平方、立方、脚注编号等内容。
1. sup标签的基本语法
<sup>标签是双标签，需要成对使用，基本语法结构如下：
<sup>上标内容</sup>
2. sup标签使用示例
比如展示数学公式中的平方运算，或者脚注标注，可以参考以下代码：
<p>正方形的面积公式为：面积 = 边长<sup>2</sup></p> <p>这是一段需要添加脚注的文本<sup>[1]</sup></p> <p>脚注[1]：相关内容参考自https://www.ipipp.com的HTML教程</p>
上述代码在浏览器中渲染后，数字2和[1]都会以上标的形式显示在对应文字的右上方，字号比正文更小。
二、sub标签：设置下标内容
<sub>标签用于定义下标文本，浏览器默认会将标签内的内容以比周围文字更小的字号显示，并且位置会向下偏移，通常用来展示化学分子式中的元素下标、数学公式中的下标变量等内容。
1. sub标签的基本语法
<sub>标签同样是双标签，需要成对使用，基本语法结构如下：
<sub>下标内容</sub>
2. sub标签使用示例
比如展示水的化学分子式，或者数学公式中的下标变量，可以参考以下代码：
<p>水的化学分子式为H<sub>2</sub>O</p> <p>数列的第n项可以表示为a<sub>n</sub></p> <p>更多化学分子式示例可以访问https://www.ipipp.com查询</p>
上述代码在浏览器中渲染后，数字2和字母n都会以下标的形式显示在对应文字的右下方，字号比正文更小。
三、sup和sub标签的特性与注意事项
两个标签都是行内元素，不会单独占据一行，会和其他行内元素在同一行显示。
标签内的内容默认字号是周围文字的75%左右，具体显示效果会因浏览器的默认样式略有差异。
如果需要调整上标或下标的样式，比如字号、颜色、偏移距离等，可以通过CSS来控制，不要直接修改标签的默认属性。
这两个标签仅用于语义上的上标和下标标记，不要用来实现单纯的文字偏移效果，避免影响网页的可访问性，比如屏幕阅读器会正确识别
<sup>和<sub>标签的内容语义。
四、结合CSS自定义样式示例
如果默认的样式不符合需求，可以通过CSS来调整上标和下标的显示效果，示例代码如下：
<style>
.custom-sup {
font-size: 12px;
color: #ff0000;
vertical-align: super;
}
.custom-sub {
font-size: 12px;
color: #0000ff;
vertical-align: sub;
}
</style>
<p>自定义上标示例：x<sup class="custom-sup">2</sup></p>
<p>自定义下标示例：H<sub class="custom-sub">2</sub>SO<sub class="custom-sub">4</sub></p>上述代码通过自定义CSS类，将上标设置为红色、下标设置为蓝色，同时固定了字号为12px，实现了更灵活的样式控制。
总的来说，<sup>和<sub>标签是HTML中处理上标和下标场景的标准方式，语义清晰，兼容性好，在需要展示上标或下标内容时，优先使用这两个标签，再结合CSS调整样式即可满足大部分排版需求。