在 HTML 网页开发的过程中,尤其是在网页中含有写数学方程式化学方程式的时候会用到上标和下标,在 HTML 元素中给我们提供了相应的元素 subsup

提示:上标文本的位置比周围的文本略高,而下标文本则必周围文本略低。两种元素的内容的字体都比周围文本略小。

HTML <sup>和<sub>

语法结构:

<sup>上标</sup>
<sub>下标</sub>

代码实例:

<!DOCTYPE html>
<html>
<head>
<title>HTML 上标 下标实例</title>
</head>
<body>
勾股定理:(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup><br/</sup>
水的化学式:H<sub>2</sub>O
</body>
</html>

运行效果:

HTML上标下标

提示:在数学公式和化学方程式中经常会使用到。使用 HTML上标、下标标签无需使用 css 样式即可解决来实现。

HTML 上标、下标如何并列显示

要想使得上标和下标能够并列显示,我们可以通过 CSS 样式设置。

<!DOCTYPE html>
<html>
<head>
<title>HTML 上标 下标并列显示</title>
</head>
<body>
X<sup>2</sup><sub>3</sub>  
Y<sup>2</sup><sub style="margin:0 0 0 -5px;">3</sub>
</body>
</html>

运行效果:

HTML上标下标并列显示

提示:margin 属性声明设置外边距。margin:0 0 0 -5px;设置上、右、下和左边距。在实际应用中,我们可以根据字体的大小设置边距。