HTML 中的 SUP 标签

WBOY原创: 2024-09-04 16:26:061218浏览

HTML 中的 SUP 标签将上标文本添加到 HTML 文档中。 SUP 是上标文本的缩写。它在 HTML 语言中主要用于表示数学表达式和科学公式。 SUP 标签的位置位于基线上其角色高度的一半位置。它专门用于印刷目的。此标签的另一个用途是显示脚注。

^.. 之间包含的文本以内嵌文本格式显示较小字体的上标文本。使用它来显示指数是一种常见的做法，指示文本表示中数字的幂。 tag 没有任何特殊属性，但支持全局属性和事件属性。

语法：

要在 HTML 中使用sup标签，请遵循以下语法：

<sup> text </sup>

如上面的语法所示，^{之间的文本是标签被视为文本的上标。人们在数学公式和特定的科学方程中使用它。}
示例：
5² = 25
HTMLsup标签支持全局属性，如accesskey、class、data-*、dir、conenteditable、draggable、dropzone、hidden、id、lang、拼写检查、style、tabindex、title、translate等
它还支持 onafterprint、onbeforeprint、onerror、onbeforeunload、onhashchange、onload、onmessage、ononline、onoffline、onpagehide、onpopstate、onpageshow、onpagehide、onresize、onunload、onstorage 等事件属性。

HTML 中的 SUP 标签示例

您还可以使用sup标签来显示用于商业或产品目的的时尚文字标记。也可以使用 CSS 来完成；我们在此没有使用sup 标签。示例如下：

示例#1

让我们看看如何使用 ^{编写数学方程标签。一个例子包括各种数学公式，如下所示：}

代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 40%;
}
</style>
</head>
<body>
<div class="row">
<h2>Mathematical Equations</h2>
<div class="column">
<h4>Mathematical formulas</h4>
<p> <b> Area of Square :</b> A = l <sup> 2 </sup></p>
<p> <b> Area of Circle :</b> A = 3.14 * r <sup> 2 </sup></p>
<p> <b> Area of Sphere :</b> A = 4 * 3.14* 4 <sup> 2 </sup></p>
<p> <b> Area of Cube :</b> V = s <sup> 3 </sup></p>
<p> <b> Area of Cylinder :</b> V = 3.14 * r <sup>2</sup></p>
<p> <b> Product :</b> A <sup> m </sup> * A <sup> n </sup> = a <sup>m + n</sup></p>
<p> <b> Quotient :</b> A <sup> m </sup> / A <sup> n </sup> = a <sup>m - n</sup></p>
<p> <b> Power of Power :</b> (a*b) <sup> n </sup> = a <sup> n </sup>  * b <sup> n </sup>
<p> <b> Power of Power :</b> (a/b) <sup> n </sup> = a <sup> n </sup> / b <sup>n</sup></p>
<p> <b> Zero Exponents :</b> a <sup> 0 </sup> = 1</p> <br>
</div>
<div class="column" >
<h4> Factoring formulas </h4>
<p> <b> a<sup>2</sup> - b <sup>2</sup> = (a - b) * ( a + b ) </b> </p>
<p> <b> a<sup>4</sup> - b <sup>4</sup> = (a - b) * ( a + b ) * (a <sup>2</sup> + b <sup>2</sup> ) </b> </p>
<p> <b> a<sup>6</sup> - b <sup>6</sup> = (a - b) * ( a + b ) * (a <sup>2</sup> -ab + b <sup>2</sup> ) * (a <sup>2</sup> +ab + b <sup>2</sup> ) </b> </p>
<p> <b> a<sup>3</sup> + b <sup>3</sup> = (a + b) * (a <sup>2</sup> -ab + b <sup>2</sup> ) </b> </p>
<p> <b> a<sup>3</sup> - b <sup>3</sup> = (a - b) * (a <sup>2</sup> +ab + b <sup>2</sup> )  </b> </p>
<p> <b>(a+b) <sup>2</sup> = a <sup>2</sup> + 2ab + b <sup>2</sup> </b> </p>
<p> <b> (a-b) <sup>2</sup> = a <sup>2</sup> -2ab + b <sup>2</sup> </b> </p>
<p> <b> (a+b+c) <sup>2</sup> = a <sup>2</sup> + b <sup>2</sup>  + c <sup>2</sup> + 2(ab + bc + ca) </b> </p>
<p> <b> (a+b) <sup>3</sup> = a <sup>3</sup> + b <sup>3</sup> + 3ab(a+b) </b> </p>
<p> <b> (a-b) <sup>3</sup> = a <sup>3</sup> - b <sup>3</sup> - 3ab(a-b) </b>  </p>
</div>
</div>
</body>
</html>

输出：

HTML 中的 SUP 标签

示例#2

显示 ^{中数字的平方和立方体；标签。}

代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Squares and Cube of Numbers</h2>
<h4>Numbers & its Square</h4>
<p> <b> 1<sup> 2 </sup> = 1</b> </p>
<p> <b> 2<sup> 2 </sup> = 4</b> </p>
<p> <b> 3<sup> 2 </sup> = 9</b> </p>
<p> <b> 4<sup> 2 </sup> = 16</b> </p>
<p> <b> 5<sup> 2 </sup> = 25</b> </p>
<h4>Numbers & its Cube</h4>
<p> <b> 1<sup> 3 </sup> = 1</b> </p>
<p> <b> 2<sup> 3 </sup> = 8</b> </p>
<p> <b> 3<sup> 3 </sup> = 27</b> </p>
<p> <b> 4<sup> 3 </sup> = 64</b> </p>
<p> <b> 5<sup> 3 </sup> = 125</b> </p>
</body>
</html>

输出：

HTML 中的 SUP 标签

示例#3

^{标签用于表示物理方程，如下所示。}

代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Physics Equations</h2>
<p><b>Kinetic Energy formula E = 1/2 mv <sup> 2 </sup></b> </p>
<p><b>Kinetic Elastic Energy formula E = 1/2 ke  <sup> 2 </sup></b> </p>
<p> <b> Enery of object: E= MC<sup> 2 </sup> </b> </p>
<p><b>Power Current resistance formula = I<sup> 2 </sup> R</b> </p>
<p><b> Formula for calculating velocity , distance and acceleration : v<sup> 2 </sup> - u <sub>2 </sub> =2as</b> </p>
</body>
</html>

输出：

HTML 中的 SUP 标签

结论

在这里我们了解到^{HTML 代码中的标签代表其相关 HTML 文档中的上标文本。用户主要将此标签用于数学表达式、科学方程和显示语言缩写。它提供的文本是低于正常行的一半，并且文本大小较小。}

以上是HTML 中的 SUP 标签的详细内容。更多信息请关注PHP中文网其他相关文章！

css html for format using class Event this display position

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML samp Tag下一篇：div Tag in HTML

查看更多