HTML의 SUP 태그-HTML 튜토리얼-php.cn

HTML의 SUP 태그 예시

예시 #3

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML의 SUP 태그

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:26 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML의 SUP 태그는 HTML 문서에 위 첨자 텍스트를 추가합니다. SUP는 위첨자 텍스트(Superscript Text)의 약어입니다. 수학적 표현과 과학적 공식을 표현하기 위한 HTML 언어의 기본 사용법을 찾습니다. SUP 태그의 배치는 기준선에서 해당 캐릭터 높이의 절반 위치에 있습니다. 이는 인쇄상의 목적으로만 사용됩니다. 이 태그의 또 다른 용도는 각주를 표시하는 것입니다.

^.. 사이에 있는 텍스트입니다. 인라인 텍스트 형식의 위 첨자 텍스트를 더 작은 글꼴 크기로 표시합니다. 텍스트 표현에서 숫자의 거듭제곱을 나타내는 지수를 표시하는 데 이를 활용하는 것이 일반적인 관행입니다.^{태그에는 특별한 속성이 없지만, 전역 및 이벤트 속성을 지원합니다.}

구문:

HTML에서 sup 태그를 사용하려면 아래 구문을 따르세요.

<sup> text </sup>

로그인 후 복사

위 구문에서 볼 수 있듯이 ^{태그는 텍스트의 위 첨자로 간주됩니다. 사람들은 이를 수학 공식과 특정 과학 방정식에 사용합니다.}
예:
5² = 25
HTML sup 태그는 accesskey, class, data-*, dir, conenteditable, draggable, dropzone, hided, id, lang, 맞춤법 검사, 스타일, tabindex, title, 번역 등과 같은 전역 속성을 지원합니다.
onafterprint, onbeforeprint, onerror, onbeforeunload, onhashchange, onload, onmessage, ononline, onoffline, onpagehide, onpopstate, onpageshow, onpagehide, onresize, onunload, onstorage 등과 같은 이벤트 속성도 지원합니다.

HTML의 SUP 태그 예시

up 태그를 사용하여 비즈니스 또는 제품 목적으로 세련된 워드마크를 표시할 수도 있습니다. 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>

로그인 후 복사

출력:

HTML의 SUP 태그

예시 #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>

로그인 후 복사

출력:

HTML의 SUP 태그

예시 #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의 SUP 태그