<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
# the-sub-and-sup-elements

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
sup

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见

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