html5 태그의 세 가지 카테고리는 무엇입니까?
- 青灯夜游원래의
- 2022-05-18 16:36:453630검색
3가지 유형의 HTML5 태그: 1. 표시 값이 "block"인 블록 수준 요소는 너비, 높이, 여백 및 자동 줄 바꿈을 설정할 수 있는 특징이 있습니다. 2. 표시 값이 다음과 같은 인라인 요소입니다. "인라인", 자동으로 줄 바꿈되지 않으며 너비와 높이를 설정할 수 없습니다. 3. 인라인 블록 요소는 자동으로 줄 바꿈되지 않으며 너비와 높이를 설정할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
HTML5 태그의 분류
태그는 요소라고도 합니다
태그 특성에 따라 블록 태그, 인라인(인라인) 태그, 인라인 블록 태그로 나눌 수 있습니다
태그 닫는 규칙은 다음과 같이 나눌 수 있습니다: 단일 레이블(빈 레이블, 자체 닫는 레이블), 이중 레이블
일반적으로 사용되는 블록 요소:
... ;
자주 사용되는 인라인 요소:
i> </p>
<p>일반적으로 사용되는 인라인 블록 요소: <input> block 레벨 요소의 특징: </p>
<code class="marker">display:<p style="text-align:left;"><code class="marker">block;
display:<strong><code class="marker">block;1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及上下左右的margin、padding值都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置（只支持左右方向的margin、padding）；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。（支持上下左右的margin、padding值）
3、margin:0 auto无效
4、水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。
标记类型的转换
标签的类型是可以转换的：
设置display:inline 转换为行内元素
设置display:linline-block 转换为行内块元素
设置display:block
2. 요소의 높이, 너비, 줄 높이와 상하좌우의 여백 및 패딩 값을 설정할 수 있습니다. 3. 설정되지 않은 경우 너비가 설정되지 않은 한 요소의 너비는 상위 컨테이너의 100%입니다(상위 요소의 너비와 동일).
🎜인라인 요소의 특징: 🎜display:inline🎜🎜🎜;🎜🎜🎜🎜1, 그리고 다른 요소는 같은 줄에 있습니다. 🎜🎜2. 높이🎜, 너비🎜 및 위쪽 및 아래쪽 여백🎜 설정 불가🎜🎜 ( 왼쪽 및 오른쪽 방향의 여백과 패딩만 지원됩니다. 🎜🎜3. 요소의 너비는 포함된 텍스트 또는 이미지의 너비이며 변경할 수 없습니다. 🎜🎜🎜🎜인라인 블록 요소의 특성: display:inline-block;🎜🎜🎜🎜1 및 기타 요소는 같은 줄에 있습니다. 🎜🎜2, 🎜요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 설정할 수 있습니다. 🎜🎜 (여백 및 패딩 값 위, 아래, 왼쪽 및 오른쪽 지원) 🎜🎜3. 여백: 0 자동은 유효하지 않습니다. 🎜🎜4. 가로로 정렬하지만 기본적으로 모든 요소의 간격은 1입니다. html Cart 줄바꿈에 쓸 때 요소 사이에 간격이 있기 때문에 브라우저 구문 분석에서는 이를 공백으로 구문 분석합니다. 🎜🎜🎜🎜 태그 유형 변환 🎜🎜🎜🎜태그 유형을 변환할 수 있습니다: 🎜🎜🎜🎜display:inline을 설정하여 인라인 요소로 변환 🎜🎜🎜🎜display:linline 설정 - block 인라인 블록 요소로 변환🎜🎜🎜🎜 블록 수준 요소🎜🎜🎜🎜로 변환하려면 display:block을 설정하세요(학습 동영상 공유: 🎜html 동영상 튜토리얼🎜, 🎜웹 프론트) -끝🎜 )🎜위 내용은 html5 태그의 세 가지 카테고리는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
设置
display:inline转换为行内元素设置
display:linline-block转换为行内块元素设置
display:block1. update from new 줄을 시작하고 그 뒤의 요소도 새 줄을 시작합니다.
자주 사용되는 인라인 요소:
i></p> <p>일반적으로 사용되는 인라인 블록 요소: <input> block 레벨 요소의 특징: </p> <code class="marker">display:<p style="text-align:left;"><code class="marker">block;display:<strong><code class="marker">block;1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及上下左右的margin、padding值都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：
display:inline;1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置（只支持左右方向的margin、padding）；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：
display:inline-block;1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。（支持上下左右的margin、padding值）
3、margin:0 auto无效
4、水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。
标记类型的转换
标签的类型是可以转换的：
2. 요소의 높이, 너비, 줄 높이와 상하좌우의 여백 및 패딩 값을 설정할 수 있습니다. 3. 설정되지 않은 경우 너비가 설정되지 않은 한 요소의 너비는 상위 컨테이너의 100%입니다(상위 요소의 너비와 동일).
🎜인라인 요소의 특징: 🎜display:inline🎜🎜🎜;🎜🎜🎜🎜1, 그리고 다른 요소는 같은 줄에 있습니다. 🎜🎜2. 높이🎜, 너비🎜 및 위쪽 및 아래쪽 여백🎜 설정 불가🎜🎜 ( 왼쪽 및 오른쪽 방향의 여백과 패딩만 지원됩니다. 🎜🎜3. 요소의 너비는 포함된 텍스트 또는 이미지의 너비이며 변경할 수 없습니다. 🎜🎜🎜🎜인라인 블록 요소의 특성:display:inline-block;🎜🎜🎜🎜1 및 기타 요소는 같은 줄에 있습니다. 🎜🎜2, 🎜요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 설정할 수 있습니다. 🎜🎜 (여백 및 패딩 값 위, 아래, 왼쪽 및 오른쪽 지원) 🎜🎜3. 여백: 0 자동은 유효하지 않습니다. 🎜🎜4. 가로로 정렬하지만 기본적으로 모든 요소의 간격은 1입니다. html Cart 줄바꿈에 쓸 때 요소 사이에 간격이 있기 때문에 브라우저 구문 분석에서는 이를 공백으로 구문 분석합니다. 🎜🎜🎜🎜 태그 유형 변환 🎜🎜🎜🎜태그 유형을 변환할 수 있습니다: 🎜🎜🎜🎜display:inline을 설정하여 인라인 요소로 변환 🎜🎜🎜🎜display:linline 설정 - block인라인 블록 요소로 변환🎜🎜🎜🎜 블록 수준 요소🎜🎜🎜🎜로 변환하려면display:block을 설정하세요(학습 동영상 공유: 🎜html 동영상 튜토리얼🎜, 🎜웹 프론트) -끝🎜 )🎜위 내용은 html5 태그의 세 가지 카테고리는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!