PHP小码农

Appearance

sub 与 sup ​

<sub> 和 <sup> 分别用于表示下标（subscript）和上标（superscript）。它们在化学公式、数学表达式、注释标记等场景中非常常见。

前置知识

阅读本节前，建议先了解：s 删除线

基础概念 ​

<sub>（subscript）将文本显示为下标，位置低于正常文本基线。<sup>（superscript）将文本显示为上标，位置高于正常文本基线。两者都是行内元素，用于表示特定含义的上下标文本。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>sub 与 sup 示例</title>
</head>
<body>
  <!-- 化学公式 -->
  <p>水的化学式：H<sub>2</sub>O</p>

  <!-- 数学表达式 -->
  <p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>

  <!-- 脚注标记 -->
  <p>据调查报告显示<sup>[1]</sup>，该地区的年均温度在上升。</p>
</body>
</html>

详细说明 ​

sub 与 sup 的默认样式 ​

标签默认样式（Chrome）
<sub>font-size: smaller; vertical-align: sub
<sup>font-size: smaller; vertical-align: super

sub 的典型用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>sub 下标示例</title>
</head>
<body>
  <h1>sub 下标用法</h1>

  <!-- 化学式 -->
  <p>二氧化碳：CO<sub>2</sub></p>
  <p>硫酸：H<sub>2</sub>SO<sub>4</sub></p>

  <!-- 变量下标 -->
  <p>第一个元素为 x<sub>1</sub>，第二个为 x<sub>2</sub>。</p>

  <!-- 基数/位数 -->
  <p>二进制第 10<sub>2</sub> 位。</p>
</body>
</html>

sup 的典型用法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>sup 上标示例</title>
</head>
<body>
  <h1>sup 上标用法</h1>

  <!-- 数学幂运算 -->
  <p>2<sup>10</sup> = 1024</p>
  <p>e<sup>ix</sup> = cos(x) + i sin(x)</p>

  <!-- 脚注引用 -->
  <p>万维网由蒂姆·伯纳斯-李于 1989 年发明<sup>[1]</sup>。</p>

  <!-- 版权/商标 -->
  <p>Copyright &copy; 2025<sup>&reg;</sup></p>

  <!-- 度数标记 -->
  <p>水的沸点为 100<sup>o</sup>C。</p>
</body>
</html>

sub 与 sup 不能嵌套 ​

html
<!-- 错误：sub 和 sup 不能相互嵌套 -->
<p>x<sub>1<sup>2</sup></sub></p>

<!-- 正确：分别标记 -->
<p>x<sub>1</sub><sup>2</sup></p>

实战示例 ​

化学方程式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>化学方程式</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .equation { font-size: 1.25rem; padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>常见化学方程式</h1>

  <p class="equation">2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O</p>
  <p class="equation">CaCO<sub>3</sub> → CaO + CO<sub>2</sub>↑</p>
  <p class="equation">Fe<sub>2</sub>O<sub>3</sub> + 3CO → 2Fe + 3CO<sub>2</sub></p>
</body>
</html>

数学公式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>数学公式</title>
</head>
<body>
  <h1>数学公式</h1>

  <p>二次方程求根公式：</p>
  <p>x = (-b ± √(b<sup>2</sup> - 4ac)) / 2a</p>

  <p>欧拉公式：</p>
  <p>e<sup>i&pi;</sup> + 1 = 0</p>
</body>
</html>

注意事项 ​

  • <sub> 和 <sup> 不能互相嵌套
  • 不要用 CSS 模拟上下标（如 vertical-align + font-size），应直接使用语义标签
  • 如果内容不是真正的上下标含义，不要使用这些标签

最佳实践 ​

  1. 用于真正的上下标语义：化学公式、数学表达式、脚注引用等
  2. 不要用于视觉排版：如果只是想让文字变小或偏移，应使用 CSS
  3. 配对使用：确保开闭标签正确配对

下一节

继续学习：code 与 kbd 与 samp

参考链接 ​