22. 上标 sup 与下标 sub

本节目标：学会用上标和下标标签正确显示数学指数和化学分子式。

sup：上标

 把文字变成上标，显示在正常文字的右上角，字号会变小。

<p>E = mc<sup>2</sup></p>
<p>x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>

显示效果：指数部分缩小并上浮到右上方。

 把文字变成下标，显示在正常文字的右下角。

<p>H<sub>2</sub>O 是水的化学式。</p>
<p>CO<sub>2</sub> 是二氧化碳。</p>

显示效果：数字缩小并下沉到右下方。

指数：

<p>2<sup>10</sup> = 1024</p>
<p>a<sup>n</sup> × a<sup>m</sup> = a<sup>n+m</sup></p>

脚注编号：

<p>这句话需要进一步解释<sup>[1]</sup>。</p>

分子式：

<p>硫酸的化学式是 H<sub>2</sub>SO<sub>4</sub>。</p>
<p>葡萄糖：C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>

离子电荷：

<p>钠离子：Na<sup>+</sup></p>
<p>氯离子：Cl<sup>-</sup></p>
<p>硫酸根：SO<sub>4</sub><sup>2-</sup></p>

上标和下标可以嵌套：

<p>2<sup>3<sup>2</sup></sup></p>

不过实际开发中很少需要这么复杂的嵌套。

浏览器会给  和  应用默认样式，但有时效果不够理想：

sup {
  font-size: 0.75em;
  vertical-align: super;
}

sub {
  font-size: 0.75em;
  vertical-align: sub;
}

如果你发现上标和下标的位置或大小不满意，可以用 CSS 调整。

上标和下标只用于语义需要的场景。如果你只是想调整文字位置，用 CSS 的 vertical-align。

<!-- 错误：只想让数字上浮 -->
<p>价格：99<sup>.99</sup>元</p>

<!-- 正确：用 CSS 控制位置 -->
<p>价格：99<span class="superscript">.99</span>元</p>

.superscript {
  vertical-align: super;
  font-size: 0.8em;
}