<sup>:上标元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <sup> 元素定义仅出于排版目的而显示为上标的行内文本。上标通常以较小的文本在高出基线的位置呈现。

尝试一下

属性

该元素仅包含全局属性

使用说明

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

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

适当的 <sup> 用例包括(但不限于):

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

示例

指数

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

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

结果

上标字母

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

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

结果

序数

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

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

结果

技术概要

内容分类 流式内容短语内容、可感知内容。
允许的内容 短语内容
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
隐式 ARIA 角色 superscript
允许的 ARIA 角色 任意
DOM 接口 HTMLElement

规范

Specification
HTML Standard
# the-sub-and-sup-elements

浏览器兼容性

BCD tables only load in the browser

参见

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