>  기사  >  웹 프론트엔드  >  HTML의 SUP 태그

HTML의 SUP 태그

WBOY
WBOY원래의
2024-09-04 16:26:061191검색

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

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

구문:

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

<sup> text </sup>
  • 위 구문에서 볼 수 있듯이 태그는 텍스트의 위 첨자로 간주됩니다. 사람들은 이를 수학 공식과 특정 과학 방정식에 사용합니다.
  • 예:

    52 = 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 태그

결론

여기서 HTML 코드의 태그는 관련 HTML 문서의 머리글 텍스트를 나타냅니다. 사용자는 주로 수학적 표현, 과학적 방정식 및 언어 약어 표시에 이 태그를 활용합니다. 일반 줄 아래의 절반 크기로 텍스트를 제공하며 텍스트 크기도 더 작습니다.

위 내용은 HTML의 SUP 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:HTML 샘플 태그다음 기사:HTML 샘플 태그