下标格式化 HTML

在编写 HTML 代码时，我们经常需要在文本中插入下标，例如表示元素的化学式或数学公式中的下标等。本文将介绍如何在 HTML 中使用下标，并提供几种常用的下标格式化方式。

使用下标标签

HTML 提供了 <sub> 标签来表示下标。我们只需将需要下标的文本放在该标签中即可，例如：

H<sub>2</sub>O

将会显示为：

H₂O

同样的，下标中也可以包含多个字符：

SO<sub>4</sub><sup>2-</sup>

将会显示为：

SO₄^2-

需要注意的是，下标标签只能用于文字和数字，不支持使用其他 HTML 元素。

使用 CSS 样式

除了使用下标标签，我们还可以通过 CSS 样式来格式化下标。下面是两种常用的下标样式：

上标下降

我们可以通过让元素的下边框上移来实现上标下降的效果：

.subscript {
  font-size: 0.6em;
  position: relative;
  bottom: 0.5ex;
}

将需要下标的文本放在一个带有 .subscript 类名的 <span> 标签中，即可实现上标下降的效果：

H<span class="subscript">2</span>O

将会显示为：

H2O

字体缩小

我们也可以通过缩小下标文本的字体大小来实现下标效果：

.subscript {
  font-size: 0.8em;
}

同样的，将需要下标的文本放在一个带有 .subscript 类名的 <span> 标签中即可：

SO<span class="subscript">4</span><sup>2-</sup>

将会显示为：

SO4^2-

总结

使用下标标签或 CSS 样式都可以实现在 HTML 中使用下标的效果。对于简单的下标文本，使用标签更为方便，而对于复杂的下标样式，使用 CSS 样式比较灵活。