HTML의 태그 유형
태그는 HTML 문서의 텍스트에 직접 삽입되는 지침으로 정의할 수 있습니다. HTML 문서에 사용되는 태그 유형은 단순히 텍스트를 표시하는 대신 웹 브라우저에 명령을 따르도록 지시하는 역할을 합니다. HTML 문서에서 모든 태그 이름은 다른 단순 텍스트와 구별됩니다. 태그 이름은 꺾쇠 괄호나 '보다 작음' 및 '보다 큼' 기호, (<) 및 (>)로 묶입니다.
HTML의 상위 3가지 태그 유형
HTML 문서는 다양한 유형의 태그를 사용하여 생성됩니다. HTML 태그는 다양한 기준에 따라 정의되고 구분될 수 있습니다. 이 기사의 다음 부분에서 이를 살펴보겠습니다. 우리는 다음 분류에 따라 HTML 태그를 분류했습니다:
1. 페어링된 태그와 페어링되지 않은 태그
다음은 HTML의 쌍을 이루는 태그와 쌍을 이루지 않는 태그를 예시를 통해 자세히 설명합니다.
페어링된 태그
HTML 태그는 여는 태그와 동반 태그인 닫는 태그로 구성되는 경우 쌍 태그라고 합니다. HTML 쌍 태그는 여는 태그로 시작합니다. 태그 이름은 꺾쇠 괄호 안에 들어 있습니다. 예를 들어, 단락 열기 태그는 '
'로 작성됩니다. 콘텐츠는 종료 태그로 끝나는 여는 태그 뒤에 옵니다. 태그 이름은 슬래시로 시작합니다. 예를 들어, 끝 단락 태그는 '
'로 작성됩니다. 첫 번째 태그는 '오프닝 태그', 두 번째 태그는 클로징 태그라고 할 수 있습니다.예 #1:
<p> This text is a paragraph . </p>
출력:
참고: 여기서 여는 태그는
이며 닫는 태그는 입니다.예 #2:
쌍으로 구성된 태그의 또 다른 예는 기울임꼴 및/또는 굵은 태그입니다.
<i> <b> This is a bold and italicized text </b> </i>
출력:
페어링되지 않은 태그
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 프로그램은 구조적 태그의 기본 그룹입니다.
예:
<!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의 태그 유형의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7909
15
1652
14
1411
52
1303
25
1248
29
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
