> 웹 프론트엔드 > 프런트엔드 Q&A > html5 태그의 세 가지 카테고리는 무엇입니까?

html5 태그의 세 가지 카테고리는 무엇입니까?

青灯夜游
풀어 주다: 2022-05-18 16:36:45
원래의
3796명이 탐색했습니다.

3가지 유형의 HTML5 태그: 1. 표시 값이 "block"인 블록 수준 요소는 너비, 높이, 여백 및 자동 줄 바꿈을 설정할 수 있는 특징이 있습니다. 2. 표시 값이 다음과 같은 인라인 요소입니다. "인라인", 자동으로 줄 바꿈되지 않으며 너비와 높이를 설정할 수 없습니다. 3. 인라인 블록 요소는 자동으로 줄 바꿈되지 않으며 너비와 높이를 설정할 수 있습니다.

html5 태그의 세 가지 카테고리는 무엇입니까?

이 튜토리얼의 운영 환경: 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

    • 1. update from new 줄을 시작하고 그 뒤의 요소도 새 줄을 시작합니다.

    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿