>웹 프론트엔드 >HTML 튜토리얼 >HTML의 태그 유형

HTML의 태그 유형

王林
王林원래의
2024-09-04 16:19:501285검색

태그는 HTML 문서의 텍스트에 직접 삽입되는 지침으로 정의할 수 있습니다. HTML 문서에 사용되는 태그 유형은 단순히 텍스트를 표시하는 대신 웹 브라우저에 명령을 따르도록 지시하는 역할을 합니다. HTML 문서에서 모든 태그 이름은 다른 단순 텍스트와 구별됩니다. 태그 이름은 꺾쇠 괄호나 '보다 작음' 및 '보다 큼' 기호, (<) 및 (>)로 묶입니다.

HTML의 상위 3가지 태그 유형

HTML 문서는 다양한 유형의 태그를 사용하여 생성됩니다. HTML 태그는 다양한 기준에 따라 정의되고 구분될 수 있습니다. 이 기사의 다음 부분에서 이를 살펴보겠습니다. 우리는 다음 분류에 따라 HTML 태그를 분류했습니다:

1. 페어링된 태그와 페어링되지 않은 태그

다음은 HTML의 쌍을 이루는 태그와 쌍을 이루지 않는 태그를 예시를 통해 자세히 설명합니다.

페어링된 태그

HTML 태그는 여는 태그와 동반 태그인 닫는 태그로 구성되는 경우 쌍 태그라고 합니다. HTML 쌍 태그는 여는 태그로 시작합니다. 태그 이름은 꺾쇠 괄호 안에 들어 있습니다. 예를 들어, 단락 열기 태그는 '

'로 작성됩니다. 콘텐츠는 종료 태그로 끝나는 여는 태그 뒤에 옵니다. 태그 이름은 슬래시로 시작합니다. 예를 들어, 끝 단락 태그는 '

'로 작성됩니다. 첫 번째 태그는 '오프닝 태그', 두 번째 태그는 클로징 태그라고 할 수 있습니다.

예 #1:

<p> This text is a paragraph . </p>

출력:

HTML의 태그 유형

참고: 여기서 여는 태그는

이며 닫는 태그는

입니다.

예 #2:

쌍으로 구성된 태그의 또 다른 예는 기울임꼴 및/또는 굵은 태그입니다.

<i> <b> This is a bold and italicized text </b> </i>

출력:

HTML의 태그 유형

참고: 이렇게 쌍을 이루는 태그를 컨테이너 태그라고도 합니다.
페어링되지 않은 태그

HTML 태그에 여는 태그만 있고 닫는 태그나 컴패니언 태그가 없는 경우 짝이 없는 태그라고 합니다. Unpaired HTML 태그에는 닫는 태그가 필요하지 않습니다. 이 유형에서는 여는 태그로 충분합니다. 짝이 없는 태그는 동반 태그가 필요하지 않기 때문에 독립형 태그 또는 단일 태그라고도 합니다.

예:

This is a paragraph


<i> <b> This is a bold and italicized text </b> </i>

출력:

참고: 여기서
수평선을 만드는 데 사용되는 짝이 없는 태그입니다. 이전 버전에서는 hr 태그가

대신. 이러한 태그를 빈 태그라고도 합니다.

2. 스스로 닫는 태그

자체 닫는 태그는 파트너 태그가 없는 HTML 태그로, 첫 번째 태그는 서식 지정에 유효한 유일한 필수 태그입니다. 주요 정보와 중요한 정보는 요소 내에 해당 속성으로 포함되어 있습니다. 이미지 태그는 자동으로 닫히는 태그의 전형적인 예입니다. 아래에서 실제로 작동하는 모습을 살펴보겠습니다.

예:

<img src="a.jpg" alt="This is an alternate text">

참고: 이전 버전에서는 자체 닫는 태그에서 아래와 같이 끝 또는 닫는 '보다 큼' 기호/기호 앞에 '슬래시'를 사용합니다.

”대체

3. 유틸리티 기반 태그

HTML 태그는 유용성, 즉 제공되는 목적에 따라 크게 구별될 수 있습니다. 기본적으로 아래에 설명된 대로 세 가지 범주로 나눌 수 있습니다.

태그 서식 지정

텍스트 크기, 글꼴 스타일, 텍스트를 굵게 만드는 등과 같은 텍스트 서식 지정에 도움이 되는 HTML 태그입니다. 이 작업은 , , < u> 등. 테이블, 디비전 및 범위 태그는 웹 페이지나 문서의 형식을 지정하고 페이지 레이아웃을 설정하는 데 도움이 되는 태그이기도 합니다. 다음은 다른 서식 태그와 함께 페이지 서식을 지정하기 위해 구분을 사용하는 작은 프로그램입니다.

예:

<body>
<div class="container">
<div class="row">
<div class="col-25">
<label for="email"><b>Name</b></label>
</div>
<div class="col-35">
<input type="text" placeholder="First" name="fname" required>
</div>
<div class="col-35">
<input type="text" placeholder="Last" name="lname" required>
</div>
</div>
</div>
</body>

출력:

HTML의 태그 유형

구조 태그

HTML 문서를 구성하는 데 도움이 되는 HTML 태그를 구조 태그라고 합니다. 설명, 머리글, HTML, 제목, 본문 등이 페이지 구조 태그 그룹을 구성합니다. 구조 태그는 루트에서 기본 HTML 페이지를 생성하거나 형성하는 데만 도움이 됩니다. 즉, 텍스트 형식에 영향을 주거나 관여하지 않습니다. 따라서 기본 HTML 프로그램은 구조적 태그의 기본 그룹입니다.

예:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Types of Tags Demo</title>
</head>
<body>
<p> This is a paragraph </p>
<i><b> This is a bold and italicized text </b></i>
</body>
</html>

출력:

HTML의 태그 유형

제어 태그

생성할 수 있는 또 다른 태그 카테고리는 '컨트롤 태그'입니다. 스크립트 태그, 라디오 버튼 또는 체크박스, 양식 태그 등이 제어 태그를 구성합니다. 콘텐츠를 관리하거나 외부에 있는 스크립트나 라이브러리를 관리하는 데 사용되는 태그입니다. 모든 양식 태그, 드롭다운 목록, 입력 텍스트 상자 등은 방문자 또는 사용자와 상호 작용하는 데 사용됩니다.

위의 HTML 태그 구분은 태그 유형과 유틸리티에 따라 다릅니다. HTML 태그는 기본 HTML 루트 태그, 서식 지정 태그, 오디오 및 비디오 태그, 양식 및 입력 태그, 프레임 태그, 링크 태그, 목록 태그, 테이블 태그, 스타일 태그, 메타 태그 등과 같은 기본 범주를 기반으로 간단히 나눌 수도 있습니다. .

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

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