使用和标签可分别创建上标和下标，适用于数学公式、化学式等场景，如x²和h₂o，提升内容语义与可访问性。
在HTML中，如果想让文字显示为上标或下标，可以使用 和 标签。这两个标签分别用于定义上标文本（superscript）和下标文本（subscript），常用于数学公式、化学式、版权符号等场景。
1. 上标文本： 标签
标签会将包裹的文本显示为上标，也就是字体变小并移到基线以上。常见于幂次、版权信息等。
例如：
<p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>版权所有 © 2025<sup>TM</sup></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2046" title="免费语音克隆"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680030960517.png" alt="免费语音克隆" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2046" title="免费语音克隆">免费语音克隆</a>
<p>这是一个提供免费语音克隆服务的平台，用户只需上传或录制一段 5 秒以上的清晰语音样本，平台即可生成与用户声音高度一致的 AI 语音克隆。</p>
</div>
<a href="/ai/2046" title="免费语音克隆" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
显示效果：
x² + y² = z²
版权所有 © 2025™
2. 下标文本： 标签
标签用于创建下标文本，字符会变小并下移，常用于化学分子式或数学表达式。
例如：
<p>水的化学式是 H<sub>2</sub>O</p> <p>CO<sub>2</sub> 是二氧化碳的分子式</p>
显示效果：
水的化学式是 H₂O
CO₂ 是二氧化碳的分子式
3. 注意事项与使用建议
- 这两个标签是行内元素，不会独占一行，适合嵌入段落中使用。
- 不要滥用 sup 或 sub 来实现视觉样式（如缩小文字、调整位置），应使用CSS处理样式问题，语义化才是它们的核心用途。
- 可嵌套使用，但不推荐多层嵌套，以免影响可读性和维护性。
- 在屏幕阅读器等辅助工具中，这些标签有助于传达正确语义，提升网页可访问性。
