HTML 요소 분류에 대한 자세한 소개

HTML의 요소 분류

1. 블록 수준 요소 또는 인라인 요소에 따른 분류

블록 수준 요소(블록 수준) 및 인라인 요소(인라인 수준, "인라인"이라고도 함) " "요소).

a. 블록 수준 요소(한 행만)

블록 수준 요소: 가장 눈에 띄는 특징은 기본적으로 상위 요소의 콘텐츠 영역을 가로로 채우고 다른 요소는 없다는 것입니다. 왼쪽과 오른쪽에 있는 요소, 즉 블록 레벨 요소는 기본적으로 한 줄에 있습니다. 일반적인 블록 수준 요소는

,

,

~

,

등입니다.

b. 인라인 요소(다른 요소와 한 줄을 공유할 수 있음)

인라인 요소: 인라인 요소는 새로운 콘텐츠 블록을 형성하지 않습니다. 즉, 주변에 , 등은 모두 일반적인 인라인 수준 요소입니다. displayattribute이 "인라인"인 요소는 모두 인라인 요소입니다. 교체 가능한 거의 모든 요소는 , 등과 같은 인라인 요소입니다.

PS: (블록 수준과 인라인은 서로 변환 가능): CSS의 display 속성을 설정하면 인라인 요소가 블록 수준 요소로 바뀔 수 있습니다. 인라인 요소인 :display:inline으로 변환됩니다.

*블록 수준 요소와 인라인 요소의 차이점:

1.블록 수준 요소는 한 줄을 차지하며 너비는 자동으로 채워집니다. 인라인 요소는 한 줄만 차지하지 않습니다. 인접한 인라인 요소는 한 줄에 들어갈 수 없을 때까지 줄 바꿈되지 않습니다. the element

2. 일반적인 상황에서 블록 레벨 요소는 width 및 높이 속성으로 설정할 수 있지만 인라인 요소의 너비 및 높이 설정은 유효하지 않습니다.

3. 블록 수준 요소는 margin 및 padding으로 설정할 수 있습니다. 가로 방향은 padding-left, padding-right, margin-left, margin-right입니다. 인라인 요소는 모두 마진 효과가 발생하지만 수직 padding-top, padding-bottom, margin-top, margin-bottom에서는 마진 효과가 발생하지 않습니다. (가로 방향에서는 유효하고, 세로 방향에서는 유효하지 않습니다.)

2. 교체 가능한 요소와 교체 불가능한 요소에 따른 분류

물론, 블록 수준 요소와 인라인 요소 외에도 교체 가능한 요소인지 여부에 따라 분류할 수도 있습니다.

a. 요소 교체(이 요소는 특정 속성의 변경에 따라 다른 표시 효과를 생성할 수 있음)

요소 교체: 브라우저는 요소의 태그 및 속성을 기반으로 요소의 특정 표시 내용을 결정합니다. 요소.

예: 브라우저는 image정보를 읽고 태그의 src 속성 값을 기반으로 표시하지만 (X) HTML 코드를 보면 실제 콘텐츠를 볼 수 없습니다. 또 다른 예는 태그의 type 속성을 기반으로 입력 상자를 표시할지 아니면 라디오 버튼을 표시할지 결정하는 것입니다. HTML의

(X), , , <select>, object>는 모두 대체 요소입니다. 이러한 요소에는 실제 콘텐츠가 없는 경우가 많습니다. 즉, 빈 요소</select>

b. 대체할 수 없는 요소

대체할 수 없는 요소: (X) HTML의 대부분 요소는 대체할 수 없는 요소입니다. 콘텐츠는 사용자 측에 직접 표시됩니다.

ps: 일반적으로 인라인 요소의 너비와 높이를 설정하는 것은 쓸모가 없는데 왜 input이나 img와 같은 일부 인라인 요소가 너비와 높이를 설정할 수 있나요?

input, img 등은 모두 대체 요소이기 때문에 대체 요소는 일반적으로 고유한 크기를 갖고 있어서 너비와 높이를 설정할 수 있다는 점이 상당히 특이합니다. 너비와 높이를 설정하지 않으면 브라우저는 기본 너비와 높이를 제공합니다. 예: 입력 텍스트 입력 상자 형식은 기본 너비와 높이를 제공합니다. 하지만 너비와 높이를 변경할 수 있습니다.

위 내용은 HTML 요소 분류에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!