SUP-Tag in HTML

SUP-Tag in HTML fügt dem HTML-Dokument hochgestellten Text hinzu. SUP ist eine Abkürzung für hochgestellten Text. Es wird hauptsächlich in HTML-Sprachen zur Darstellung mathematischer Ausdrücke und wissenschaftlicher Formeln verwendet. Die Platzierung des SUP-Tags erfolgt in der halben Position der Höhe seines Zeichens auf der Grundlinie. Es dient ausschließlich typografischen Zwecken. Eine weitere Verwendung dieses Tags ist die Anzeige von Fußnoten.

Der Text zwischen ^.. Zeigt hochgestellten Text in kleineren Schriftgrößen im Inline-Textformat an. Es ist eine gängige Praxis, es zur Anzeige von Exponenten zu verwenden, die die Potenz von Zahlen in der Textdarstellung angeben. ^{Tag hat keine speziellen Attribute, unterstützt aber globale und Ereignisattribute.}

Syntax:

Um das sup-Tag in HTML zu verwenden, befolgen Sie die folgende Syntax:

<sup> text </sup>

• Wie in der obigen Syntax gezeigt, ist der Text zwischen dem ^{Das Tag wird als hochgestellter Text für den Text betrachtet. Menschen verwenden es in mathematischen Formeln und spezifischen wissenschaftlichen Gleichungen.}
• Beispiel:

  5² = 25

• HTML-Sup-Tag unterstützt globale Attribute wie Zugriffsschlüssel, Klasse, Daten-*, Verzeichnis, Inhalt, ziehbar, Dropzone, versteckt, ID, Sprache, Rechtschreibprüfung, Stil, Tabindex, Titel, Übersetzung usw.
• Es unterstützt auch Ereignisattribute wie onafterprint, onbeforeprint, onerror, onbeforeunload, onhashchange, onload, onmessage, ononline, onoffline, onpagehide, onpopstate, onpageshow, onpagehide, onresize, onunload, onstorage und viele mehr.

Beispiele für SUP-Tags in HTML

Sie können das Sup-Tag auch verwenden, um eine stilvolle Wortmarke für Geschäfts- oder Produktzwecke anzuzeigen. Dies ist auch mit CSS möglich; Wir verwenden hier nicht das Sup-Tag. Ein Beispiel hierfür ist wie folgt:

Beispiel #1

Sehen wir uns an, wie mathematische Gleichungen mit dem ^{geschrieben werden können. Etikett. Ein Beispiel enthält verschiedene mathematische Formeln, wie unten gezeigt:}

Code:

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

Ausgabe:

Beispiel #2

Zeigt Quadrate und Kubikzahlen der Zahlen in ^Tag.

Code:

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

Ausgabe:

Beispiel #3

^{Tag wird verwendet, um physikalische Gleichungen darzustellen, wie unten gezeigt.}

Code:

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

Ausgabe:

Fazit

Hier haben wir erfahren, dass das ^{Das Tag im HTML-Code stellt den Überschriftstext im zugehörigen HTML-Dokument dar. Benutzer verwenden dieses Tag hauptsächlich für mathematische Ausdrücke, wissenschaftliche Gleichungen und die Anzeige von Sprachabkürzungen. Es bietet Text in der Hälfte der unterdurchschnittlichen Zeile und ist in einer kleineren Textgröße.}

Das obige ist der detaillierte Inhalt vonSUP-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!