Tag SUP dalam HTML

SUP Tag dalam HTML menambah teks superskrip pada dokumen HTML. SUP ialah singkatan daripada teks superskrip. Ia menemui penggunaan utama dalam bahasa HTML untuk mewakili ungkapan matematik dan formula saintifik. Peletakan teg SUP berada pada kedudukan separuh ketinggian wataknya pada garis dasar. Ia berfungsi secara eksklusif untuk tujuan tipografi. Satu lagi kegunaan tag ini ialah untuk menunjukkan nota kaki.

Teks yang disertakan antara ^.. menunjukkan teks superskrip dalam saiz fon yang lebih kecil dalam format teks sebaris. Ia adalah amalan biasa untuk menggunakannya untuk memaparkan eksponen, yang menunjukkan kuasa nombor dalam perwakilan teks. ^{teg tidak mempunyai sebarang atribut khas, tetapi ia menyokong atribut global dan acara.}

Sintaks:

Untuk menggunakan teg sup dalam HTML, ikut sintaks di bawah:

<sup> text </sup>

• Seperti yang ditunjukkan dalam sintaks di atas, teks di antara ^{tag dianggap sebagai superskrip untuk teks. Orang ramai menggunakannya dalam formula matematik dan persamaan saintifik khusus.}
• Contoh:

  5² = 25

• Teg sup HTML menyokong atribut global seperti kunci akses, kelas, data-*, dir, boleh disambungkan, boleh seret, dropzone, tersembunyi, id, lang, semakan ejaan, gaya, indeks tab, tajuk, terjemah, dll.
• Ia juga menyokong atribut acara seperti onafterprint, onbeforeprint, onerror, onbeforeunload, onhashchange, onload, onmessage, ononline, onoffline, onpagehide, onpopstate, onpageshow, onpagehide, onresize, onunload, onstorage dan banyak lagi.

Contoh Teg SUP dalam HTML

Anda juga boleh menggunakan teg sup untuk memaparkan tanda perkataan yang bergaya untuk tujuan perniagaan atau produk. Ia boleh dilakukan menggunakan CSS juga; kami tidak menggunakan tag sup dalam hal ini. Contohnya adalah seperti berikut:

Contoh #1

Mari kita lihat bagaimana persamaan matematik boleh ditulis menggunakan ^{tag. Contohnya termasuk pelbagai formula matematik, seperti yang ditunjukkan di bawah:}

Kod:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 40%;
}
</style>


<div class="row">
<h2 id="Mathematical-Equations">Mathematical Equations</h2>
<div class="column">
<h4 id="Mathematical-formulas">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>
<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 id="Factoring-formulas"> 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>

Output:

Contoh #2

Menunjukkan segi empat sama dan kiub nombor dalam ^tag.

Kod:

<meta name="viewport" content="width=device-width, initial-scale=1">


<h2 id="Squares-and-Cube-of-Numbers">Squares and Cube of Numbers</h2>
<h4 id="Numbers-amp-its-Square">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 id="Numbers-amp-its-Cube">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>

Output:

Contoh #3

^{tag digunakan untuk mewakili persamaan fizik, seperti yang ditunjukkan di bawah.}

Kod:

<meta name="viewport" content="width=device-width, initial-scale=1">


<h2 id="Physics-Equations">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>

Output:

Kesimpulan

Di sini kami mengetahui bahawa ^{tag dalam kod HTML mewakili teks superskripsi dalam dokumen HTML yang berkaitan. Pengguna terutamanya menggunakan teg ini untuk ungkapan matematik, persamaan saintifik dan memaparkan singkatan bahasa. Ia menawarkan teks dalam separuh daripada baris di bawah normal dan dalam saiz teks yang lebih kecil.}

Atas ialah kandungan terperinci Tag SUP dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!