如何在 HTML 输入框中显示化学公式?

htmlweb developmentfront end technology更新于 2024/4/22 13:00:17

在 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>

当脚本执行时，它将生成一个输出，该输出由网页上显示的内层轨道复合体的示例组成，该示例是使用上标和下标获得的。