<sub>:下标元素

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 <sub> 元素用于指定应显示为下标的行内文本,这完全是出于排版的原因。下标通常使用较小的文本以较低的基线显示。

尝试一下

属性

这个元素仅仅包含全局属性

使用说明

<sub> 元素只能用于排版原因,即改变文本的位置以符合排版惯例或标准,而不能仅用于呈现或外观目的。

例如,如果一家公司的 wordmark 中使用了改变的基线,那么使用 <sub> 对公司名称进行样式调整就不合适;相反,应该使用 CSS。例如,可以使用 vertical-align 属性,并声明 vertical-align: sub;或使用 vertical-align: -25%,以更精确地控制基线移动。

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

  • 标记脚注编号。参见脚注编号以了解示例。
  • 标注数学变量编号中的下标(当然,也可以考虑使用 MathML 公式来标注)。参见变量下标
  • 表示化学式中某一元素的原子数(如每个开发者最好的朋友,C8H10N4O2,也称为“咖啡因”)。参见化学式

示例

脚注编号

传统上,脚注使用渲染为下标的数字标注。这是 <sub> 的一种常见用例:

html
<p>
  根据 Nakamura、Johnson 和 Mason 的计算<sub>1</sub>,这将导致两个粒子完全湮灭。
</p>

结果

变量下标

在数学中,与同一概念(如沿同一坐标轴的距离)相关的变量族使用相同的变量名和后面的下标来表示。例如:

html
<p>
  沿 X 轴的水平坐标的位置表示为 <var>x<sub>1</sub></var><var>x<sub>n</sub></var></p>

结果

化学式

在书写化学式(如 H20)时,所述分子中特定元素的原子数用下标数字表示;就水而言,下标“2”表示分子中有两个氢原子。

另外一个示例:

html
<p>
  几乎每个开发人员最喜欢的分子都是
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>,它通常被称为“咖啡因”。
</p>

结果

技术概要

内容分类 流式内容短语内容、可感知内容。
允许的内容 短语内容
标签省略 不允许,开始标签和结束标签都是必需的。
允许的父元素 任何接受短语内容的元素。
隐式 ARIA 角色 subscript
允许的 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
sub

Legend

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

Full support
Full support

参见

  • <sup> HTML 元素,用于生成上标。请注意,不能同时使用 supsub:需要使用 MathML,在元素化学符号旁边的下标上方生成上标,代表元素的原子序数和核序数。
  • <msub><msup><msubsup> MathML 元素。
  • CSS vertical-align 属性