어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개-HTML 튜토리얼-php.cn

标题元素，占据一行

집

웹 프론트엔드

HTML 튜토리얼

어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개

青灯夜游

Oct 23, 2018 pm 02:33 PM

html 블록 요소 인라인 요소

이 글의 내용은 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 id="标题元素-占据一行">标题元素，占据一行</h4>
		<ul>
			<li>ul1 li 标签 元素</li>
			<li>ul1 li 标签 元素</li>
		</ul>
		<ul>
			<li>ul2 li 标签 元素</li>
			<li>ul2 li 标签 元素</li>
		</ul>
	</body>
</html>

로그인 후 복사

Rendering:

어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개

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="/static/imghw/default1.png"  data-src="1.png"  class="lazy"      style="max-width:90%" / alt="어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개" >
		<img  src="/static/imghw/default1.png"  data-src="1.png"  class="lazy"      style="max-width:90%" / alt="어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개" >
		<p>换一行看看文字效果，我是一段测试代码，<b>被b标签加粗</b>。我是一段测试代码，<i>被i标签变成斜体</i>。</p>
</html>

로그인 후 복사

렌더링:

어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개

인라인 블록 요소

특징:

1. 다른 요소와 같은 줄에 있으며 자동으로 줄바꿈되지 않습니다. 기본 배열은 왼쪽에서 오른쪽입니다.

2. 요소의 높이, 너비 및 줄 높이; 위쪽 및 아래쪽 여백을 설정할 수 있습니다.

인라인 블록 요소는 인라인 요소와 블록 요소의 특성을 결합하지만 각각 고유한 장단점이 있습니다. 따라서 인라인 블록 요소는 일상적으로 사용되는 특성으로 인해 더 자주 사용되며 여러 측면에서 유용합니다.

요약: 위 내용은 이 글에서 소개하는 세 가지 유형의 html 태그 요소, 즉 블록 요소, 인라인 요소, 인라인 블록 요소 및 일반적으로 사용되는 블록 요소 및 인라인 요소에 대한 소개입니다. 각 태그 유형에는 고유한 특성이 있습니다. 다양한 태그가 어떻게 사용되는지 직접 확인하고 이해를 깊게 하며 필요에 따라 다양한 상황에서 다양한 태그를 사용할 수 있습니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 다음을 방문하세요. HTML 비디오 튜토리얼 , Html5 비디오 튜토리얼 , bootstrap 비디오 튜토리얼# 🎜 🎜#!

위 내용은 어떤 유형의 HTML 태그 요소가 있습니까? HTML의 공통 태그 요소 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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