Web学习网站

Appearance

<sub> 标签 ​

<sub> 标签用于定义下标文本。它表示文本应显示在基线以下，通常用于化学公式、数学表达式等。

概述 ​

<sub> 标签是 HTML 中的语义化标签，用于标识应显示在基线以下的文本内容。浏览器会将 <sub> 标签中的文本渲染为下标形式。

语法 ​

html
<sub>下标文本</sub>

基本用法 ​

化学公式 ​

html
<p>水的化学式是 H<sub>2</sub>O</p>

数学表达式 ​

html
<p>二氧化碳的分子式是 CO<sub>2</sub></p>

实际示例 ​

化学公式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>sub 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    .chemical-formula {
      font-size: 1.2em;
      margin: 1rem 0;
      padding: 1rem;
      background-color: #f8f9fa;
      border-radius: 5px;
    }
    
    .math-expression {
      font-size: 1.2em;
      margin: 1rem 0;
      padding: 1rem;
      background-color: #e8f4fd;
      border-radius: 5px;
    }
    
    sub {
      font-size: 0.8em;
    }
  </style>
</head>
<body>
  <h1>化学与数学中的下标</h1>
  
  <div class="chemical-formula">
    <h2>常见化学公式</h2>
    <p>水：H<sub>2</sub>O</p>
    <p>二氧化碳：CO<sub>2</sub></p>
    <p>硫酸：H<sub>2</sub>SO<sub>4</sub></p>
    <p>葡萄糖：C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p>
    <p>氨：NH<sub>3</sub></p>
  </div>
  
  <div class="math-expression">
    <h2>数学表达式</h2>
    <p>对数：log<sub>2</sub>8 = 3</p>
    <p>对数：log<sub>10</sub>100 = 2</p>
    <p>自然对数：ln<sub>e</sub>x = 1</p>
  </div>
</body>
</html>

数学公式 ​

html
<section>
  <h2>数学公式示例</h2>
  
  <article>
    <h3>对数公式</h3>
    <p>log<sub>a</sub>(mn) = log<sub>a</sub>m + log<sub>a</sub>n</p>
    <p>log<sub>a</sub>(m/n) = log<sub>a</sub>m - log<sub>a</sub>n</p>
    <p>log<sub>a</sub>m<sup>n</sup> = n log<sub>a</sub>m</p>
  </article>
  
  <article>
    <h3>化学反应方程式</h3>
    <p>2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O</p>
    <p>CH<sub>4</sub> + 2O<sub>2</sub> → CO<sub>2</sub> + 2H<sub>2</sub>O</p>
    <p>C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> + 6O<sub>2</sub> → 6CO<sub>2</sub> + 6H<sub>2</sub>O</p>
  </article>
</section>

与相关标签的区别 ​

与 <sup> 标签的区别 ​

html
<!-- sub 标签：表示下标 -->
<p>化学式：H<sub>2</sub>O</p>

<!-- sup 标签：表示上标 -->
<p>数学公式：E = mc<sup>2</sup></p>

与 CSS 样式下标的区别 ​

html
<!-- sub 标签：具有语义含义 -->
<p>化学式：H<sub>2</sub>O</p>

<!-- CSS 样式：仅视觉效果 -->
<p>化学式：H<span style="vertical-align: sub; font-size: 0.8em;">2</span>O</p>

样式化 ​

自定义下标样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 sub 样式 */
    sub {
      vertical-align: sub;
      font-size: smaller;
    }
    
    /* 小下标 */
    .small-sub {
      vertical-align: sub;
      font-size: 0.6em;
    }
    
    /* 紧凑下标 */
    .compact-sub {
      vertical-align: -0.3em;
      font-size: 0.7em;
      line-height: 0;
    }
    
    /* 彩色下标 */
    .color-sub {
      vertical-align: sub;
      font-size: 0.8em;
      color: #007bff;
    }
    
    /* 带边框的下标 */
    .bordered-sub {
      vertical-align: sub;
      font-size: 0.7em;
      background-color: #f8f9fa;
      border: 1px solid #dee2e6;
      border-radius: 3px;
      padding: 0 2px;
    }
  </style>
</head>
<body>
  <p>默认下标：H<sub>2</sub>O</p>
  
  <p>小下标：H<sub class="small-sub">2</sub>O</p>
  
  <p>紧凑下标：H<sub class="compact-sub">2</sub>O</p>
  
  <p>彩色下标：H<sub class="color-sub">2</sub>O</p>
  
  <p>带边框下标：H<sub class="bordered-sub">2</sub>O</p>
</body>
</html>

在不同语境中的使用 ​

学术论文 ​

html
<article>
  <h1>科学研究论文</h1>
  
  <p>在实验中，我们测量了 H<sub>2</sub>O 的沸点为 100°C。</p>
  
  <p>反应速率方程为：r = k[A]<sub>m</sub>[B]<sub>n</sub></p>
  
  <p>根据 Arrhenius 方程：k = Ae<sup>-Ea/RT</sup></p>
  
  <p>其中 T 为绝对温度，单位为 K（开尔文）。</p>
</article>

脚注标记 ​

html
<section>
  <h2>文章内容</h2>
  
  <p>根据最新研究<sub>1</sub>，人工智能技术发展迅速。</p>
  
  <p>专家预测<sub>2</sub>，未来十年将有更多突破。</p>
  
  <h3>脚注</h3>
  <p><sub>1</sub> 《人工智能发展报告2023》，科技出版社</p>
  <p><sub>2</sub> 《未来科技趋势预测》，未来出版社</p>
</section>

无障碍访问 ​

屏幕阅读器支持 ​

html
<p>化学式：<span aria-label="H 2 O">H<sub>2</sub>O</span></p>

最佳实践 ​

  1. 语义化使用：只在表示下标内容时使用 <sub> 标签
  2. 适用场景：常用于化学公式、数学表达式、脚注标记等
  3. 样式化：通过 CSS 为下标文本提供合适的样式
  4. 可读性：确保下标文本仍然具有良好的可读性
  5. 配合使用：常与 <sup> 标签配合使用

浏览器兼容性 ​

<sub> 标签在所有浏览器中都得到完美支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

  1. <sub> 标签是内联元素
  2. 浏览器默认将其文本显示在基线以下
  3. 主要用于表示下标内容
  4. 字体大小通常比正常文本小
  5. 可以通过 CSS 自定义下标的外观

相关标签 ​