Web学习网站

Appearance

<sup> 标签 ​

<sup> 标签用于定义上标文本。它表示文本应显示在基线以上，通常用于数学公式、指数、脚注引用等。

概述 ​

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

语法 ​

html
<sup>上标文本</sup>

基本用法 ​

数学公式 ​

html
<p>爱因斯坦质能方程：E = mc<sup>2</sup></p>

脚注引用 ​

html
<p>这是正文内容<sup>1</sup>。</p>

实际示例 ​

数学公式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>sup 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    .math-formula {
      font-size: 1.2em;
      margin: 1rem 0;
      padding: 1rem;
      background-color: #e8f4fd;
      border-radius: 5px;
    }
    
    .footnotes {
      margin-top: 2rem;
      padding-top: 1rem;
      border-top: 1px solid #dee2e6;
    }
    
    sup {
      font-size: 0.8em;
    }
  </style>
</head>
<body>
  <h1>数学与引用中的上标</h1>
  
  <div class="math-formula">
    <h2>常见数学公式</h2>
    <p>质能方程：E = mc<sup>2</sup></p>
    <p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
    <p>二次方程：x = (-b ± √(b<sup>2</sup> - 4ac)) / 2a</p>
    <p>指数运算：2<sup>3</sup> = 8</p>
    <p>对数：log<sub>2</sub>8 = 3</p>
  </div>
  
  <div class="content">
    <h2>学术文章示例</h2>
    <p>根据研究数据显示<sup>1</sup>，人工智能技术在过去十年中发展迅速。</p>
    <p>专家预测<sup>2</sup>，未来将有更多突破性进展。</p>
    <p>这一结论得到了多方验证<sup>3,4</sup>。</p>
  </div>
  
  <div class="footnotes">
    <h3>脚注</h3>
    <p><sup>1</sup> 《人工智能发展报告2023》，科技出版社</p>
    <p><sup>2</sup> 《未来科技趋势预测》，未来出版社</p>
    <p><sup>3</sup> 《技术革新研究》，研究出版社</p>
    <p><sup>4</sup> 《创新科技杂志》，2023年第5期</p>
  </div>
</body>
</html>

学术引用 ​

html
<section>
  <h2>研究论文</h2>
  
  <article>
    <h3>引言</h3>
    <p>近年来，深度学习技术取得了显著进展<sup>1</sup>。</p>
    <p>卷积神经网络在图像识别领域表现优异<sup>2</sup>。</p>
    <p>循环神经网络在自然语言处理中广泛应用<sup>3</sup>。</p>
  </article>
  
  <article>
    <h3>数学推导</h3>
    <p>激活函数定义为：f(x) = 1 / (1 + e<sup>-x</sup>)</p>
    <p>损失函数为：L = (1/2) Σ(y - ŷ)<sup>2</sup></p>
    <p>梯度计算：∂L/∂w = ∂L/∂ŷ × ∂ŷ/∂w</p>
  </article>
</section>

与相关标签的区别 ​

与 <sub> 标签的区别 ​

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

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

与 CSS 样式上标的区别 ​

html
<!-- sup 标签：具有语义含义 -->
<p>数学公式：E = mc<sup>2</sup></p>

<!-- CSS 样式：仅视觉效果 -->
<p>数学公式：E = mc<span style="vertical-align: super; font-size: 0.8em;">2</span></p>

样式化 ​

自定义上标样式 ​

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

在不同语境中的使用 ​

序数词标记 ​

html
<section>
  <h2>历史事件</h2>
  <p>这是 21<sup>st</sup> 世纪的重要发展。</p>
  <p>第 1<sup>st</sup> 次工业革命改变了世界。</p>
  <p>第 2<sup>nd</sup> 次工业革命带来了电气化。</p>
  <p>第 3<sup>rd</sup> 次工业革命开启了信息化时代。</p>
</section>

单位表示 ​

html
<section>
  <h2>物理量表示</h2>
  <p>面积：10 m<sup>2</sup></p>
  <p>体积：5 m<sup>3</sup></p>
  <p>频率：100 Hz = 100 s<sup>-1</sup></p>
  <p>加速度：9.8 m/s<sup>2</sup></p>
</section>

无障碍访问 ​

屏幕阅读器支持 ​

html
<p>数学公式：<span aria-label="E 等于 m c 平方">E = mc<sup>2</sup></span></p>

最佳实践 ​

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

浏览器兼容性 ​

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

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

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

相关标签 ​