HTML - sub 标签



HTML <sub> 标签定义应呈现为下标的内联内容。下标通常以较低的基线和较小的字体显示。下标文本通常用于化学式,如 H20,写成 H2O。

<sub>元素应用于印刷原因,即调整文本的位置以符合印刷规则或标准,而不是为了呈现或外观。

语法  


<sub>.....</sub>

属性

<sub> 标签支持 HTML 的 全局属性事件属性。下面还列出了特定属性:

<sub> 标签示例

下面的示例将说明<sub> 标签的用法,在哪里、何时以及如何使用它来创建下标内容。

使用 sub 标签创建下标元素

在句子之间创建一个下标文本,可以让你了解子标签的作用。在以下示例中,我们将创建一个 HTML 文档,并使用 <sub> 标签以下标形式显示文本。


<!DOCTYPE html>
<html>
<body>
	 <h1>The sub tag</h1>
	 <p> This is normal para </p>
	 <p> this is <sub> subscript </sub> para </p>
</body>
</html>

<sub> 标签表示化学式

大多数情况下,我们使用 sub 标签来表示化学式、数学方程式,其中可以使用 <sub> 标签 和 <sup> 标签。这里我们使用<sub> 标签 来创建一个下标元素。我们正在创建一个 HTML 文档并使用 <sub> 标签来显示化学式。


<!DOCTYPE html>
<html>
<body>
	 <h1>The sub tag</h1>
	 <p> 
			Almost every developer's favorite molecule is C 
			<sub>8</sub>H <sub>10</sub>N <sub>4</sub>O <sub>2</sub>, 
			which is commonly known as "caffeine." </p>
</body>
</html>

使用 CSS 设置<sub> 的样式

我们可以根据需要设置<sub> 标签的样式,要创建一个下标元素,我们使用 <sub> 标签,可以在 CSS 中选择该标签来设置该元素的样式。下面是一个示例,我们将使用 <sub> 标签来显示数学变量下标(例如沿同一轴的距离)。


<!DOCTYPE html>
<html>
<head>
	 <style>
			sub {
				 color: red;
			}
	 </style>
</head>
<body>
	 <h1>The sub tag</h1>
	 <p> 
			The horizontal coordinates' positions 
			along the X-axis are represented as 
			<var>x <sub>1</sub> </var> … <var>x <sub>n</sub> </var>. 
	 </p>
</body>
</html>

支持的浏览器

浏览器 Chrome Edge Firefox Safari Opera
<sub>  Yes Yes Yes Yes Yes