如何在 HTML 中写上标
把要升高的文字包在 <sup> 中。浏览器会把它显示得更小，并升到这一行的上方。与它搭配的 <sub> 则把文字显示得更小并降低：
<sup> 和 <sub> 都是行内元素，可以包含其他行内元素，所以 2<sup>n+1</sup> 或 x<sub><i>i</i></sub> 也没问题。
常见用法
| 你想要 | 写法 | 效果 |
|---|---|---|
| 指数 | 10<sup>3</sup> | 10 的 3 次方 |
| 英文序数 | 2<sup>nd</sup> | 字母升高的 2nd |
| 脚注标记 | text<sup><a href="#n1">1</a></sup> | 一个升高的、可点击的 1 |
| 化学式 | C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> | 葡萄糖 |
| 索引或底数 | x<sub>1</sub>、log<sub>2</sub> | 降低的 1 和 2 |
| 商标 | Brand<sup>TM</sup> 或 Brand™ | 升高的 TM |
当位置本身是含义的一部分时，就使用这两个标签：m<sup>2</sup> 和 m2 是不同的东西。如果文字只是样式上要小一点（标签、徽标），请改用 CSS。
用 sup 制作脚注
脚注标记是一个上标链接，指向页面底部的注释。给每条注释一个 id，再让链接指向它：
点击数字跳到对应的注释，点击“Back”返回。去掉这个小链接的下划线能让段落保持整洁，而链接的颜色仍然表明它可以点击。
保持行距均匀
默认情况下，<sup> 或 <sub> 可能会让它所在的行比周围的行更高，于是一个带有几个指数的段落看起来行距不均。给它们设置 line-height: 0 就能解决：
灰色框更高，因为第二行和第四行被撑开了。在绿色框中，每一行的高度都相同。把这条规则加进你的基础样式表，一劳永逸。
Unicode 字符与 MathML
对于少数常见情况，有现成的字符可用：²（²）、³（³）、¹（¹）、™（™）和 ½（½）。它们不需要标签，也不会影响行高，但只有部分数字和字母有这样的字符。小字生成器列出了 Unicode 中所有的上标字母。
对于真正的公式（分数、根号、指数的指数），请使用 MathML，当前的浏览器都能原生渲染它：
<msup> 接收一个底数和一个指数；<msub> 对下标做同样的事。如果只是句子中的单个指数，用 <sup> 更简单。
常见错误
- 用
<sup>把文字变小。它还会把文字升高，并告诉读者这是上标。小字请用font-size。 - 行距不均匀。加上
sup, sub { line-height: 0; }。 - 在正式文字中写
x^2或H2O。请使用x<sup>2</sup>和H<sub>2</sub>O，让内容读起来正确。 - 脚注标记太小，难以点按。在手机上，单个升高的数字是一个很小的点击目标。给
sup a加一点内边距，或者把注释放在文字附近。
常见问题
如何在 HTML 中写上标？
把要升高的文字包在 <sup> 中：x<sup>2</sup> 显示 x 的平方，1<sup>st</sup> 显示一个英文序数。浏览器会把它画得更小，并升到基线以上。
如何在 HTML 中写下标？
使用 <sub>：水写作 H<sub>2</sub>O，索引写作 x<sub>1</sub>。它会被画得更小，并降到基线以下。
如何在 HTML 中写 x 的平方？
可以写 x<sup>2</sup>，也可以用现成的字符 x²，这个字符也能写成实体 ²。平方和立方用字符就行；<sup> 则适用于任何指数，比如 2<sup>n+1</sup>。
为什么 <sup> 会让行距不均匀？
升高的文字会让它所在的行比段落中的其他行更高。用 sup, sub { line-height: 0; } 就能修复，它让上标和下标不再增加行的高度。
可以用 CSS 代替 <sup> 吗？
vertical-align: super 加上更小的 font-size 看起来一样，但 <sup> 和 <sub> 带有含义：“m2”和“m<sup>2</sup>”是不同的值。当升高或降低的位置本身是内容的一部分时，就使用这两个标签。
