<sup>：上标元素

尝试一下

<p>
  The <em>Pythagorean theorem</em> is often expressed as the following equation:
</p>

<p>
  <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var>
</p>

p {
  font:
    1rem "Fira Sans",
    sans-serif;
}

属性

该元素仅包含全局属性。

使用说明

<sup> 元素应该只用于排版目的，也就是改变文本的位置以符合印刷习惯或标准，而不能仅用于呈现或外观的目的。

例如，要为企业或产品的字体商标添加抬高基线的样式，应该使用 CSS（很可能是 vertical-align）而不是 <sup>。可以使用 vertical-align: super 或者 vertical-align: 50% 来将基线上移 50%。

适当的 <sup> 用例包括（但不限于）：

• 显示指数，例如“x³â€ã€‚对于这种情况，尤其是在更复杂的情况下，考虑使用 MathML。请参阅下面的示例中的指数。
• 显示上标字母，在某些语言中用于呈现某些缩写词。例如，在法语中，单词“mademoiselle”可以缩写为“M^lle”；这是可接受的用例。请参阅示例上标字母。
• 表示序数，例如用“4^th”来代替“fourth”。请参阅示例序数。

示例

指数

指数，或者说是数字的幂，是上标文本最常见的用法之一。例如：

<p>
  物理学中最常见的方程之一：<var>E</var>=<var>m</var><var>c</var><sup>2</sup>。
</p>

结果

上标字母

从技术上讲，上标字母与上标不是同一回事。但是，在 HTML 中使用 <sup> 来呈现上标字母是很常见的。一种最常见的上标字母用法是在法语中呈现某些缩写词：

<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>

结果

序数

序数，例如英语中的“fourth”或西班牙语中的“quinto”，可以使用数字和以上标形式呈现的特定于语言的文本缩写来表示：

<p>序数词“fifth”在不同语言中的缩写如下：</p>
<ul>
  <li>英语：5<sup>th</sup></li>
  <li>法语：5<sup>ème</sup></li>
</ul>

结果

技术概要

规范

浏览器兼容性

参见

• HTML <sub> 元素会产生下标。注意，你不能同时使用它们，你需要使用 MathML 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。
• MathML 元素：<msub>、<msup> 和 <msubsup>。
• CSS vertical-align 属性。