<sup>-上标文本

<sup>标签的基本概念

<sup>是HTML中用于定义上标文本的标签，它会使包含的文本以较小的字号显示在基线之上。这个标签在数学公式、化学式、脚注编号等场景中非常实用。

<p>水的化学式是H<sup>2</sup>O。</p>

语法和浏览器支持

<sup>标签是双标签，需要闭合。所有主流浏览器都完全支持这个标签，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera
• Internet Explorer

<sup>上标内容</sup>

典型应用场景

数学表达式

在数学公式中表示幂运算：

<p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>

化学方程式

表示化学式中原子的数量：

<p>二氧化碳的化学式：CO<sup>2</sup></p>
<p>硫酸的化学式：H<sup>2</sup>SO<sup>4</sup></p>

日期序数

表示日期的序数后缀：

<p>会议定于6月15<sup>th</sup>举行。</p>

脚注标记

在学术写作中标记参考文献：

<p>研究表明<sup>[1]</sup>这种方法是有效的。</p>

CSS样式控制

虽然<sup>有默认样式，但可以通过CSS自定义：

<style>
  sup {
    font-size: 0.7em;
    vertical-align: super;
    line-height: 0;
    color: #e74c3c;
  }
</style>
<p>示例文本<sup>自定义样式</sup></p>

与<sub>标签的区别

<sub>用于下标，位置与<sup>相反：

<p>H<sub>2</sub>O vs E=mc<sup>2</sup></p>

嵌套使用

可以与其他HTML标签嵌套使用：

<p>
  <strong>重要</strong>公式：x<sup><em>n</em></sup> + y<sup><em>n</em></sup>
</p>

响应式设计考虑

在移动端可能需要调整上标大小：

@media (max-width: 600px) {
  sup {
    font-size: 0.6em;
  }
}

可访问性注意事项

屏幕阅读器通常会正常读出<sup>内容，但对于数学表达式，建议使用MathML：

<math>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

实际案例

复杂公式

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

多级上标

<p>
  递归表示：f(x)<sup>g(x)<sup>h(x)</sup></sup>
</p>

结合CSS动画

<style>
  .bounce-sup {
    display: inline-block;
    animation: bounce 0.5s infinite alternate;
  }
  @keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
  }
</style>
<p>注意看这个上标<sup class="bounce-sup">!</sup></p>

浏览器默认样式

大多数浏览器默认应用以下样式：

sup {
  vertical-align: super;
  font-size: smaller;
}

与其他技术的结合

在SVG中使用

<svg height="100" width="200">
  <text x="10" y="20">E=mc<tspan baseline-shift="super" font-size="smaller">2</tspan></text>
</svg>

在Canvas中模拟

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '16px Arial';
ctx.fillText('E=mc', 10, 50);
ctx.font = '10px Arial';
ctx.fillText('2', 45, 40);

性能考量

过度使用<sup>标签不会明显影响性能，但在极高频更新的动态内容中，减少DOM操作总是有益的。

历史版本支持

HTML2.0就开始支持<sup>标签，HTML5继续保持这个标签，没有语法变化。

替代方案比较

虽然可以用CSS实现类似效果：

<span style="vertical-align: super; font-size: smaller;">上标</span>

但语义上不如<sup>标签明确。