ホームページ > 記事 > ウェブフロントエンド > HTML の SUP タグ
HTML の SUP タグ
- WBOYオリジナル
- 2024-09-04 16:26:061192ブラウズ
HTML の
SUP タグは、HTML ドキュメントに上付きテキストを追加します。 SUP は、Superscript Text の略称です。主に HTML 言語で数式や科学公式を表すために使用されます。 SUP タグの配置は、ベースライン上のキャラクターの高さの半分の位置です。これは活版印刷の目的のみに使用されます。このタグのもう 1 つの用途は、脚注を表示することです。
.. で囲まれたテキストインライン テキスト形式で上付き文字を小さいフォント サイズで表示します。テキスト表現で数値のべき乗を示す指数を表示するためにこれを使用するのが一般的です。タグには特別な属性はありませんが、グローバル属性とイベント属性をサポートしています。
構文:
HTML で sup タグを使用するには、以下の構文に従います。
<sup> text </sup>
- 上記の構文に示すように、 の間にあるテキストはタグはテキストの上付き文字とみなされます。人々はそれを数式や特定の科学方程式で使用します。
- 例:
52 = 25
- HTML sup タグは、accesskey、class、data-*、dir、conenteditable、draggable、dropzone、hidden、id、lang、spellcheck、style、tabindex、title、translate などのグローバル属性をサポートします。
- また、onafterprint、onbeforeprint、onerror、onbeforeunload、onhashchange、onload、onmessage、ononline、onoffline、onpagehide、onpopstate、onpageshow、onpagehide、onresize、onunload、onstorage などのイベント属性もサポートします。
HTML の SUP タグの例
sup タグを使用して、ビジネスや製品の目的でスタイリッシュなワードマークを表示することもできます。 CSS を使用して行うこともできます。ここでは sup タグを使用していません。この例は次のとおりです:
例 #1
を使用して数学方程式をどのように書くことができるかを見てみましょう。タグ。例には、以下に示すように、さまざまな数式が含まれています。
コード:
<!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>
出力:
例 #2
で数値の正方形と立方体を表示します。タグ。
コード:
<!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>
出力:
例 #3
タグは、以下に示すように物理方程式を表すために使用されます。
コード:
<!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>
出力:
結論
ここで、 がHTML コード内の タグ は、関連する HTML ドキュメント内の上付きテキストを表します。ユーザーは主に、数式、科学方程式、および言語の略語の表示にこのタグを使用します。通常よりも半分の行にテキストが表示され、テキスト サイズも小さくなります。
以上がHTML の SUP タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLサンプルタグ次の記事：HTMLサンプルタグ