XHTML 언어에서 우리는 모두 ul 태그에 li가 포함되고, dl 태그에 dt와 dd가 포함된다는 사실을 알고 있습니다. 이러한 고정 태그의 중첩 규칙은 매우 명확합니다. 하지만 여전히 h1, div, p 등 독립적이고 함께 묶이지 않은 태그가 많이 있습니다. 그렇다면 이러한 태그의 중첩 규칙은 무엇입니까? 오늘은 이 주제에 대해 이야기해 보겠습니다.
XHTML 태그의 중첩 규칙과 관련하여 먼저 XHTML 태그에는 두 가지 유형이 있다는 것을 알아야 합니다. 하나는 블록 수준 요소(블록)이고 다른 하나는 인라인 요소 (인라인, 많은 사람들이 인라인, 인라인, 라인 레벨 등으로 부르기도 함).
블록 수준 요소와 인라인 요소의
분류 기준은 매우 간단합니다. body 태그에 다음 두 줄을 입력하세요.
브라우저 렌더링 효과:
페이지에 표시되는 두 개의 div는 두 줄의 공간을 차지합니다. 플로팅되거나 다른 설정이 지정되지 않는 한, 누구도 서로 옆에 있는 공간을 차지하지 않습니다. - —태그를 볼 때마다. 이러한 현상을 나타내는 것은 블록 수준 요소(블록) 이라고 부를 수 있습니다.
body 태그에 다음 두 줄의 코드를 입력하세요.span1
span2
스팬1 스팬2
이번에는 두 스팬이 한 줄로 병치되어 있습니다. 친근하고 조화롭습니다.인라인 요소(인라인) ;
블록 수준 요소와 인라인 요소의 차이점:
· 블록 수준 요소 는 일반적으로 웹 사이트 아키텍처, 레이아웃 및 콘텐츠 전달에 사용됩니다. 이러한 주요 물리적 작업은 모두 다음 태그를 포함하는 블록 수준 요소에 속합니다.
div, ul, li, dl, dt, dd, h1~h6, p,주소……
· 인라인 요소 는 일반적으로 "스타일, 위 첨자, 아래 첨자, 앵커 등을 강조하고 구별하기 위해" 웹 사이트 콘텐츠의 특정 세부 사항이나 일부에 사용됩니다. 다음 태그는 모두 인라인 요소입니다.
a,span,strong,· 블록 요소와 인라인 요소 는 서로 변환할 수 있습니다. 변환 코드는 입니다.
display: block; /* 블록 요소로 변환 */display: inline; /* 인라인 요소로 변환 */
· 블록 요소와 인라인 요소 는 CSS의 에 대해 서로 다른 호출 규칙 을 갖습니다(이 기사에서는 태그 중첩에 대해 설명하므로 이 지식 포인트는 설명하지 않습니다.).
블록 요소와 인라인 요소를 간략하게 이해한 후
XHTML 태그의 중첩 규칙을 아래에 나열할 수 있습니다.
1. 블록 요소는 인라인 요소 또는 특정 블록 요소를 포함할 수 있지만 인라인 요소는 다른 인라인 요소만 포함할 수 있습니다. :
2. 블록 수준 요소는
안에 배치할 수 없습니다.
—— 틀렸습니다
3. 인라인 요소만 포함할 수 있고 블록 수준 요소는 포함할 수 없는 몇 가지 특수 블록 수준 요소가 있습니다.
h1, h2, h3, h4, h5, h6, p, dt.
4. li에는 div 태그가 포함될 수 있습니다 - 이 항목은 따로 나열할 필요는 없지만, 이에 대해 인터넷에서 헷갈려 하시는 분들이 많으셔서 여기서 간단히 설명하겠습니다.
Li 및 div 태그는 모두 콘텐츠를 로드하기 위한 컨테이너입니다. 둘은 동일한 상태를 가지며 레벨 구분이 없습니다(예: h1 및 h2^_^과 같은 엄격한 계층). 부모 ul 또는 ol을 수용할 수 있습니다. 일부 사람들은 왜 li가 div를 수용할 수 없다고 생각합니까? 리가 너무 인색하다고 생각하지 마세요. 사실 리가 마음이 넓거든요...
5. 블록 수준 요소는 블록 수준 요소와 병치되고, 인라인 요소는 인라인 요소와 병치됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
