sup和sub标签的区别是什么？
在HTML中，<sup>和<sub>标签都用于修改文本的垂直对齐方式，使文本呈现为上标或下标，但它们的显示效果和语义用途有着本质的区别：
<sup> 标签（Superscript）：定义上标文本。上标文本将会显示在当前文本流的基线之上，并且字体通常比周围的标准文本更小。它常用于数学公式中的指数（如2的平方）、脚注序号、版权声明等。
<sub> 标签（Subscript）：定义下标文本。下标文本将会显示在当前文本流的基线之下，同样字体较小。它常用于化学方程式中的原子数（如水的化学式）、数学变量下标等。
简单来说，<sup> 是“往上提”，而 <sub> 是“往下降”。
上下标怎么添加？
添加上下标非常简单，只需将需要设置为上标或下标的文本内容包裹在相应的标签中即可。
1. 添加上标（<sup>）
以下是一个数学公式和版权声明的示例，展示如何使用 <sup> 标签添加上标：
<p>爱因斯坦的质能方程：E = mc<sup>2</sup></p> <p>Copyright © 2023 版权所有<sup>®</sup></p>
2. 添加下标（<sub>）
以下是一个化学方程式的示例，展示如何使用 <sub> 标签添加下标：
<p>水的化学式：H<sub>2</sub>O</p> <p>硫酸的化学式：H<sub>2</sub>SO<sub>4</sub></p>
3. 上下标结合使用
在某些复杂的学术表达中，可能需要同时使用上标和下标，只需按逻辑顺序嵌套或并列使用即可：
<p>数学序列中的变量表示：X<sub>i</sub><sup>2</sup> + Y<sub>i</sub><sup>2</sup> = Z<sub>i</sub><sup>2</sup></p>
上下标在链接与引用中的实际应用
在网页排版中，上标经常被用来做文章的脚注或参考文献引用，并且可以结合超链接使用，让读者点击上标即可跳转到参考资料页面。例如：
<p>根据最新的研究报告<sup><a href="https://www.ipipp.com/reference/1" target="_blank">[1]</a></sup>，该技术已取得重大突破。</p>
进阶：使用CSS优化上下标样式
虽然浏览器默认会给 <sup> 和 <sub> 添加缩小字号和垂直偏移的样式，但在某些严格的排版规范下，默认的偏移量可能会干扰行距，导致段落排版不够美观。我们可以通过CSS的 vertical-align 和 font-size 属性来进行更精细的控制。
sup {
vertical-align: super;
font-size: 0.75em;
line-height: 0;
}
sub {
vertical-align: sub;
font-size: 0.75em;
line-height: 0;
}在上述CSS代码中，vertical-align: super 和 vertical-align: sub 明确指定了对齐方式，font-size: 0.75em 让上下标文字变为标准文字的75%大小，而 line-height: 0 则能有效防止上下标撑大所在行的行高，保持段落排版的紧凑和整齐。
总结
<sup> 和 <sub> 是HTML中非常实用的文本语义化标签。<sup> 让文字往上走，<sub> 让文字往下走。合理使用这两个标签，不仅能让网页内容（如公式、化学式、脚注）显示更专业，也能为搜索引擎和屏幕阅读器提供更准确的语义信息，提升网站的无障碍访问体验。