HTML上下标标签用法_HTML sup/sub标签上下标实现

HTML通过和标签原生支持上标下标,分别用于数学公式、化学式等场景,如m²用2,H₂O用2,二者可嵌套使用于复杂表达式,且语义清晰、利于可访问性。

在HTML中,想要实现上标或下标效果,不需要使用CSS也能轻松完成。HTML提供了两个原生标签,分别用于定义上标和下标内容,适用于数学公式、化学式、版权符号等常见场景。

HTML上标标签

标签用于将文本设置为上标,通常显示在当前行文字的右上方,字体略小。

常见用途包括:

  • 表示平方单位,如 m2、m3
  • 版权或注册符号,如 © 2025、®
  • 数学表达式,如 xn
示例代码:

面积单位:m2

版权所有:© 2025

HTML下标标签

标签用于将文本设置为下标,通常显示在当前行文字的右下方,常用于化学分子式或数学脚标。

典型应用场景:

  • 化学式,如 H2O、CO2
  • 数学序列,如 ai、x1
示例代码:

水的化学式:H2O

数组元素:an

上下标可以嵌套使用

在复杂表达式中,可同时使用,比如科学计数法或带电荷的离子符号。

示例:

离子表示:SO42-

科学计数法:1.2 × 106

注意:嵌套顺序不影响显示效果,浏览器会自动按位置排布。

与CSS相比的优势

虽然用CSS的 vertical-align 也能实现类似效果,但语义更清晰,代码更简洁,且对屏幕阅读器等辅助工具更友好,利于网页可访问性(Accessibility)。

基本上就这些。合理使用,能让文本中的特殊格式更标准、更易读。不复杂但容易忽略细节。