CSS 上标 - HTML

HTML 中的上标可以通过 CSS 样式来表示。上标通常在科学文献、数学和化学公式中使用，以显示指数、角标和化学元素。

HTML 上标标签

HTML 提供了 <sup> 标签，用于显示上标，例如：

<p>3<sup>2</sup> = 9</p>

这将在网页上显示为：

3² = 9

CSS 样式

为了进一步美化上标的外观，我们可以使用 CSS 样式。

字体大小和位置

使用 font-size 属性可以控制上标的字体大小，通常情况下上标的字体大小应该小于正常文本的字体大小。使用 vertical-align 属性可以控制上标的垂直位置。通常情况下上标应该比正常文本高出一些。

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

多个上标

如果有多个上标，可以将它们放在 <sup> 标签中，并使用 sub 属性来控制它们的相对位置。

<p>H<sub>2</sub>O<sup>+</sup></p>

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

这将在网页上显示为：

H₂O⁺

示例

下面是一个完整的例子，展示如何使用 CSS 样式美化上标。

<p>The formula for water is H<sub>2</sub>O<sup>+</sup>.</p>

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

这将在网页上显示为：

The formula for water is H₂O⁺.

结论

CSS 样式可以让上标更美观，如果需要在网页中展示指数、角标和化学元素等内容，上标是一个很好的选择。