数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 HTML 输入框中显示化学式？
在 HTML 中，为了在 HTML 输入框中显示化学式，我们将使用下标和上标标签。让我们考虑一个简单的例子。
Chemical formula of water is H2O
对于上面提到的，我们将应用 HTML 上标和下标标签来获得如上所述的化学式的输出。
Chemical formula of water is H<sub>2</sub>O
让我们深入阅读以下文章，以便更好地理解如何在 HTML 输入框中显示化学式。
HTML 下标
HTML 元素 <sub> 标签用于指定应纯粹出于排版目的而显示为下标的内联文本。下标通常以较小的字体和较低的基线显示。
HTML 上标
HTML 元素 <sup> 标签用于指定应纯粹出于排版目的而显示为上标的内联文本。上标通常以较小的字体和较高的基线显示。
为了获得更多关于如何在 HTML 输入框中显示化学式的想法。让我们看看下面的例子
示例
在下面的示例中，我们使用下标来编写硫酸的化学式。
<!DOCTYPE html>
<html>
<body>
<style>
body{
text-align: center;
background-color:#EAFAF1;
}
p{
color: #8E44AD ;
}
</style>
<p>Chemical Formula of Sulphuric Acid: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含使用脚本在网页上显示的硫酸化学式。
示例
考虑以下示例，其中我们使用上标来编写锡离子 (Sn2+) 的化学式。
<!DOCTYPE html>
<html>
<body style="background-color:#D5DBDB ">
<style>
.tutorial {
position: absolute
}
.place {
position:relative; left: 40px;
}
</style>
<span class='tutorial'>
<span class='place'><b>Sn</b><sup>2+</sup>
</span>
</span>
</body>
</html>
运行上述脚本后，输出窗口将弹出，在使用 **上标标签** 获得的网页上显示锡离子的化学式。
示例
让我们考虑以下示例，其中我们使用上标和下标来编写内轨络合物的化学式。
<!DOCTYPE html>
<html>
<body style="background-color:#F4ECF7 ">
<p>
<strong>Example of the inner orbital complex:
[Co(NH<sub>3</sub>)<sub>6</sub>]<sup>3+ </sup></strong>
</p>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含使用 **上标** 和下标在网页上显示的内轨络合物示例。
更新于： 2023年4月20日
2K+ 次浏览
广告