HTML sup 语法
在 HTML 中，sup 标签用于实现文本的上标效果。
语法：
<sup>上标文本</sup>说明：
sup，是 “superscripted（上标）” 的缩写。
提示: sup 标签用于实现文本的上标效果，而 sub 标签用于实现文本的下标效果。
HTML sup 摘要
| 属于 | HTML 上标 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML sup 示例
接下来，我们通过一个简单的例子来讲解一下 HTML sup 标签是如何使用的。
示例 1：sup 表示 “数学公式”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>页面效果如下图所示。
分析：
如果你想要将某个数字或文字变成上标效果，只要把这个数字或文字放在 <sup></sup> 标签内就可以了。
示例 2：sup 表示 “脚注” 或 “引用”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>HTML<sup>[1]</sup></p>
</body>
</html>页面效果如下图所示。
分析：
除了可以表示数学公式中的 “上标”，sup 标签经常用于表示 “脚注” 或 “引用”。
最后需要提一下：在默认情况下，sup 标签可能会导致当前行的行高（line-height）变得不均匀。在实际开发中，我们可以通过以下 CSS 代码来解决这个问题，以确保行高保持一致：
sup {
font-size: 75%; /* 缩小字体 */
line-height: 0; /* 消除行高影响 */
position: relative;
vertical-align: baseline;
top: -0.5em; /* 利用定位调整位置 */
}