<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` 或将基线提高 50% 的 `vertical-align: 50%` 来实现。

<sup> 的适用场景包括（但不限于）:

• 显示指数，例如“x³”。对于这些情况，尤其是更复杂的情况，可以考虑使用 MathML。请参见下方 示例 中的 指数。
• 显示 上标字母，在某些语言中用于渲染特定缩写。例如，在法语中，“mademoiselle”可以缩写为“M^lle”；这是一个可接受的用法。请参见 上标字母 了解示例。
• 表示序数词，例如用“4^th”代替“fourth”。请参见 序数词 了解示例。

示例

指数

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

<p>
  One of the most common equations in all of physics is <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>
  The ordinal number "fifth" can be abbreviated in various languages as follows:
</p>
<ul>
  <li>English: 5<sup>th</sup></li>
  <li>French: 5<sup>ème</sup></li>
</ul>

结果

技术摘要

规范

浏览器兼容性

另见

• 用于生成下标的 <sub> HTML 元素。请注意，您不能同时使用 `sub` 和 `sup`：您需要使用 MathML 来为元素的化学符号生成上标和下标，分别表示其原子序数和质量数。
• <msub>、<msup> 和 <msubsup> MathML 元素。
• CSS 的 vertical-align 属性。