HTML中sup标签上标字符和sub标签下标字符的使用方法介绍-html教程-PHP中文网

HTML中sup标签上标字符和sub标签下标字符的使用方法介绍

不言

发布： 2019-01-18 17:06:20

原创

9822人浏览过

我们在学习数学的时候经常会看看比如3的平方是3²，上面的那个2就是上标，在学习化学的时候会看到h₂，下面这个2就是下标，那么我们在html中如何来实现上标和下标字符呢？本篇文章就来给大家介绍关于html中上标和下标字符的实现方法。

HTML中sup标签上标字符和sub标签下标字符的使用方法介绍

在HTML中我们要实现上标和下标字符需要用到sup元素和sub元素

sup标签可定义上标文本。

sub标签可定义下标文本。

立即学习“前端免费学习笔记（深入）”；

下面就来看sup元素和sub元素的具体使用方法

代码如下

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>10的3次方是10<sup>3</sup></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1397">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680029112420.png" alt="Voicv">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1397">Voicv</a>
                            <p>克隆你的声音，就像Ctrl+C, Ctrl+V一样</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Voicv">
                                <span>165</span>
                            </div>
                        </div>
                        <a href="/ai/1397" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Voicv">
                        </a>
                    </div>
                
<p>水的分子式是H<sub>2</sub>O</p>
</body>
</html>

登录后复制

运行效果如下

微信截图_20190118141200.png