HTML sub 标签 - 绿叶网

HTML sub 语法

在 HTML 中，sub 标签用于实现文本的下标效果。

语法：

<sub>下标文本</sub>

说明：

sub，是 “subscripted（下标）” 的缩写。

提示: sub 标签用于实现文本的下标效果，而 sup 标签用于实现文本的上标效果。

HTML sub 摘要

属于	HTML 下标
使用频率	低
兼容性	查看
官方文档	查看
MDN	查看

HTML sub 示例

接下来，我们通过一个简单的例子来讲解一下 HTML sub 标签是如何使用的。

示例：sub 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>H<sub>2</sub>SO<sub>4</sub>是硫酸分子</p>
</body>
</html>

页面效果如下图所示。

HTML sub标签示例

分析：

如果你想要将某个数字或文字变成下标效果，只要把这个数字或文字放在 <sub></sub> 标签内就可以了。

与 sup 标签一样，在默认情况下，sub 标签可能会导致当前行的行高（line-height）变得不均匀。在实际开发中，我们可以通过以下 CSS 代码来解决这个问题，以确保行高保持一致：

sub {
    font-size: 75%;      /* 缩小字体 */
    line-height: 0;      /* 消除行高影响 */
    position: relative; 
    vertical-align: baseline;
    bottom: -0.5em;         /* 利用定位调整位置 */
}