HTML通过<sup>和<sub>标签原生支持上标下标，分别用于数学公式、化学式等场景，如m²用<sup>2</sup>，H₂O用<sub>2</sub>，二者可嵌套使用于复杂表达式，且语义清晰、利于可访问性。
在HTML中，想要实现上标或下标效果，不需要使用CSS也能轻松完成。HTML提供了<sup>和<sub>两个原生标签，分别用于定义上标和下标内容，适用于数学公式、化学式、版权符号等常见场景。
<sup> 标签用于将文本设置为上标，通常显示在当前行文字的右上方，字体略小。
常见用途包括：
<p>面积单位：m<sup>2</sup></p> <p>版权所有：© 2025</sup></p>
<sub> 标签用于将文本设置为下标，通常显示在当前行文字的右下方，常用于化学分子式或数学脚标。
立即学习“前端免费学习笔记（深入）”；
典型应用场景：
<p>水的化学式：H<sub>2</sub>O</p> <p>数组元素：a<sub>n</sub></p>
在复杂表达式中，可同时使用<sup>和<sub>，比如科学计数法或带电荷的离子符号。
<p>离子表示：SO<sub>4</sub><sup>2-</sup></p> <p>科学计数法：1.2 × 10<sup><sub>6</sub></sup></p>
注意：嵌套顺序不影响显示效果，浏览器会自动按位置排布。
虽然用CSS的 vertical-align 也能实现类似效果，但<sup>和<sub>语义更清晰，代码更简洁，且对屏幕阅读器等辅助工具更友好，利于网页可访问性（Accessibility）。
基本上就这些。合理使用<sup>和<sub>，能让文本中的特殊格式更标准、更易读。不复杂但容易忽略细节。
以上就是HTML上下标标签用法_HTML sup/sub标签上下标实现的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
343
收藏
