Maison > interface Web > tutoriel HTML > Balise SUP en HTML

Balise SUP en HTML

WBOY
Libérer: 2024-09-04 16:26:06
original
1228 Les gens l'ont consulté

La balise SUP en HTML ajoute du texte en exposant au document HTML. SUP est une abréviation de texte en exposant. Il trouve une utilisation principale dans les langages HTML pour représenter des expressions mathématiques et des formules scientifiques. Le placement de la balise SUP est à mi-position de la hauteur de son personnage par rapport à la ligne de base. Il sert exclusivement à des fins typographiques. Une autre utilisation de cette balise consiste à afficher les notes de bas de page.

Le texte placé entre .. affiche le texte en exposant dans des tailles de police plus petites au format de texte en ligne. Il est courant de l'utiliser pour afficher les exposants, indiquant la puissance des nombres dans la représentation textuelle. La balise n'a pas d'attributs spéciaux, mais elle prend en charge les attributs globaux et événementiels.

Syntaxe :

Pour utiliser la balise sup en HTML, suivez la syntaxe ci-dessous :

<sup> text </sup>
Copier après la connexion
  • Comme le montre la syntaxe ci-dessus, le texte entre les caractères La balise est considérée comme un exposant pour le texte. Les gens l'utilisent dans des formules mathématiques et des équations scientifiques spécifiques.
  • Exemple :

    52 = 25

  • La balise HTML sup prend en charge les attributs globaux tels que accesskey, class, data-*, dir, conenteditable, draggable, dropzone, caché, id, lang, orthographe, style, tabindex, titre, traduire, etc.
  • Il prend également en charge les attributs d'événement tels que onafterprint, onbeforeprint, onerror, onbeforeunload, onhashchange, onload, onmessage, ononline, onoffline, onpagehide, onpopstate, onpageshow, onpagehide, onresize, onunload, onstorage et bien d'autres.

Exemples de balise SUP en HTML

Vous pouvez également utiliser la balise sup pour afficher un mot-symbole élégant à des fins commerciales ou liées à un produit. Cela peut également être fait en utilisant CSS ; nous n'utilisons pas la balise sup dans ce cas. Un exemple de ceci est le suivant :

Exemple n°1

Voyons comment des équations mathématiques peuvent être écrites à l'aide de l'outil étiqueter. Un exemple comprend diverses formules mathématiques, comme indiqué ci-dessous :

Code :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 40%;
}
</style>
</head>
<body>
<div class="row">
<h2>Mathematical Equations</h2>
<div class="column">
<h4>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> <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> 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>
</body>
</html>
Copier après la connexion

Sortie :

Balise SUP en HTML

Exemple n°2

Affichage des carrés et des cubes des nombres dans étiquette.

Code :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Squares and Cube of Numbers</h2>
<h4>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>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>
</body>
</html>
Copier après la connexion

Sortie :

Balise SUP en HTML

Exemple #3

La balise est utilisée pour représenter des équations physiques, comme indiqué ci-dessous.

Code :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>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>
</body>
</html>
Copier après la connexion

Sortie :

Balise SUP en HTML

Conclusion

Ici, nous avons appris que le La balise dans le code HTML représente le texte d'inscription dans son document HTML associé. Les utilisateurs utilisent principalement cette balise pour les expressions mathématiques, les équations scientifiques et l'affichage des abréviations linguistiques. Il propose du texte dans la moitié de la ligne inférieure à la normale et est dans une taille de texte plus petite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal