如何在 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+ 次瀏覽

開啟您的 職業生涯

完成課程獲得認證

立即開始
廣告

© . All rights reserved.