이 글의 내용은 html 태그 요소의 종류를 소개하여 html에서 일반적으로 사용되는 태그 요소가 무엇인지 누구나 쉽게 이해할 수 있도록 하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
먼저 html 태그 요소는 어떤 유형으로 나눌 수 있는지 알아볼까요?
HTML의 태그 요소는 일반적으로 블록 요소, 인라인 요소, 인라인 블록 요소의 세 가지 유형으로 나뉩니다.
이제 이 세 가지 요소의 특징과 용도를 자세히 소개하고, 흔히 사용되는 블록 요소와 인라인 요소가 무엇인지 알려드리겠습니다.
블록 요소
특징:
1. 전용 행을 차지하며, 각 블록 요소는 새로운 행에서 시작하여 위에서 아래로 정렬됩니다.
2. 너비와 높이를 직접 제어할 수 있습니다. 그리고 박스 모델의 관련 CSS 속성(요소의 높이, 너비, 줄 높이, 상하 여백 모두 설정 가능)
3. 너비를 설정하지 않으면 블록 수준 요소의 너비는 상위 요소 Width의 콘텐츠
4. 높이를 설정하지 않으면 블록 수준 요소의 높이는 자체 콘텐츠의 높이가 됩니다.
블록 요소의 특성상 큰 레이아웃(대형 구조)에는 일반적으로 블록 요소를 사용합니다. 짓다.
일반적으로 사용되는 블록 요소:
1. 일반 요소
div(일반적으로 사용되는 블록 컨테이너, CSS 레이아웃의 기본 레이블이기도 함), p(문단), hr(가로 구분선), table(테이블), form (대화형 형식)
2. 제목 요소:
h1(큰 제목), h2(부제), h3(3급 제목), h4(4급 제목), h5(5급 제목), h6( 6단계 제목) 제목)
3. 목록 요소
menu(메뉴 목록), ol(순서가 지정된 목록), ul(순서가 없는 목록), li(목록 항목), dl(목록 정의), dt(용어 정의) , dd (정의 설명)
간단한 코드를 통해 이러한 블록 요소를 살펴보겠습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块状元素</title>
<style>
div{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
h4{
background-color:papayawhip;
}
ul{
background-color: peru;
}
</style>
</head>
<body>
<div>div标签元素，占据一行</div>
<p>p标签元素，占据一行</p>
<h4>标题元素，占据一行</h4>
<ul>
<li>ul1 li 标签 元素</li>
<li>ul1 li 标签 元素</li>
</ul>
<ul>
<li>ul2 li 标签 元素</li>
<li>ul2 li 标签 元素</li>
</ul>
</body>
</html>Rendering:
Inline 요소
특징:
1. 기타 인라인 요소 from 왼쪽에서 오른쪽으로 한 줄로 표시됩니다
2. 박스 모델의 너비, 높이 및 관련 CSS 속성을 직접 제어할 수는 없지만 내부 및 외부 여백의 왼쪽 및 오른쪽 값을 직접 설정할 수 있습니다.
3. 인라인 요소의 너비와 높이는 자체 콘텐츠에 따라 결정됩니다. 크기(텍스트, 그림 등)에 따라 결정됩니다.
4. 인라인 요소는 텍스트 또는 기타 인라인 요소만 수용할 수 있습니다. 인라인 요소에 블록 수준 요소를 중첩하지 않음)
왜냐하면 이러한 특성 때문에 우리는 일반적으로 인라인 요소를 사용하여 텍스트와 작은 아이콘(작은 구조)을 만듭니다.
일반적으로 사용되는 인라인 요소:
1. 일반 요소 태그
span(일반적으로 사용되는 인라인 컨테이너, 텍스트 내 블록 정의), a(앵커, 링크), img(이미지 소개), br(강제 줄 바꿈) ), sub(아래 첨자), sup(위 첨자)
2. 텍스트 수정 태그
b(굵게), Strong(굵게 강조), i(기울임꼴), em(이탤릭체 강조), big(큰 글꼴 텍스트), 작게 (작은 글꼴 텍스트), s(밑줄(권장하지 않음)), Strike(밑줄), del(문서에서 삭제된 텍스트), u(밑줄)
3 양식에 사용되는 레이블 요소
textarea( 여러 줄 텍스트 입력 상자), 입력(입력 상자), 선택(드롭다운 목록), 레이블 입력(요소 정의 레이블(표시))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内元素</title>
<style>
span{
background-color: palegoldenrod;
}
p{
background-color:paleturquoise ;
}
</style>
</head>
<body>
<span>span标签元素1</span>
<span>span标签元素2</span>
<img src="1.png" style="max-width:90%" / alt="어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개" >
<img src="1.png" style="max-width:90%" / alt="어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개" >
<p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。我是一段测试代码，<i>被i标签变成斜体</i>。</p>
</html>렌더링:
인라인 블록 요소
특징:
1. 다른 요소와 같은 줄에 있으며 자동으로 줄바꿈되지 않습니다. 기본 배열은 왼쪽에서 오른쪽입니다.
2. 요소의 높이, 너비 및 줄 높이; 위쪽 및 아래쪽 여백을 설정할 수 있습니다.
인라인 블록 요소는 인라인 요소와 블록 요소의 특성을 결합하지만 각각 고유한 장단점이 있습니다. 따라서 인라인 블록 요소는 일상적으로 사용되는 특성으로 인해 더 자주 사용되며 여러 측면에서 유용합니다.
요약: 위 내용은 이 글에서 소개하는 세 가지 유형의 html 태그 요소, 즉 블록 요소, 인라인 요소, 인라인 블록 요소 및 일반적으로 사용되는 블록 요소 및 인라인 요소에 대한 소개입니다. 각 태그 유형에는 고유한 특성이 있습니다. 다양한 태그가 어떻게 사용되는지 직접 확인하고 이해를 깊게 하며 필요에 따라 다양한 상황에서 다양한 태그를 사용할 수 있습니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 다음을 방문하세요. HTML 비디오 튜토리얼 , Html5 비디오 튜토리얼 , bootstrap 비디오 튜토리얼# 🎜 🎜#!
위 내용은 어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
