초보친구_HTML/Xhtml_웹페이지 제작에 적합한 HTML 태그 중첩 규칙 상세 요약

최근 HTML을 다시 배우고 있는데, 이는 HTML에 대한 새로운 이해라고 할 수 있습니다! 이것을 과소평가하지 마십시오. 모든 웹페이지는 이를 기반으로 합니다! HTML 태그의 중첩 규칙을 자세히 요약해 보겠습니다. 모든 분들께 도움이 되기를 바랍니다.

많은 XHTML 태그가 있습니다: div, ul, li, dl, dt, dd, h1~h6, p, a, addressa,span,strong... 이러한 태그를 사용하여 페이지 구조를 구축할 때 , 무한히 중첩될 수 있지만 중첩에도 특정 규칙이 있어야 하며 개인 습관이 무작위로 중첩되도록 허용할 수 없습니다. XHTML은 결국 XML이 아닙니다.

XHTML 언어에서 우리는 모두 ul 태그에 li가 포함되고 dl 태그에 dt와 dd가 포함된다는 사실을 알고 있습니다. 이러한 고정 태그의 중첩 규칙은 매우 명확합니다. 하지만 여전히 h1, div, p 등 독립적이고 함께 묶이지 않은 태그가 많이 있습니다. 그렇다면 이러한 태그의 중첩 규칙은 무엇입니까? 오늘은 이 주제에 대해 이야기해 보겠습니다.

XHTML 태그의 중첩 규칙에 관해 먼저 XHTML 태그에는 두 가지 유형이 있다는 것을 알아야 합니다.
한 유형은 블록 수준 요소(블록)라고 합니다.
다른 유형은 타입을 인라인 요소라고 합니다 (인라인, 많은 사람들이 인라인, 인라인, 라인레벨 등으로 부르기도 합니다.)

블록레벨 요소와 인라인 요소를 나누는 기준은 아주 간단합니다. 코드를 본문 태그에 추가합니다.

코드 복사

코드는 다음과 같습니다.

div1

div2

브라우저 렌더링 효과:
div1
div2

페이지에 표시되는 두 개의 div는 플로팅되거나 다른 설정을 지정하지 않는 한 두 줄의 공간을 차지합니다. 둘 다 자체 공간을 차지합니다. 태그에서 이 현상을 볼 때마다 이를 블록 수준 요소(block)라고 부를 수 있습니다.

두 줄의 코드를 body 태그에 넣습니다.

코드 복사

코드는 다음과 같습니다.

span1
span2

브라우저 렌더링 효과:
span1span2

이번에는 두 개의 스팬이 일렬로 병치되어 친근하고 친근하며 조화롭습니다... 이런 라벨 동작으로 우리는 인라인 요소라고 부를 수 있습니다.

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

·블록 수준 요소는 일반적으로 웹 사이트 아키텍처, 레이아웃 및 콘텐츠 전달에 사용됩니다. .. …이러한 주요 물리적 작업은 모두 다음 태그를 포함하는 블록 수준 요소입니다:

address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1~h6, hr , isindex, menu, noframes, noscript, ol, p, pre, table, ul

· 인라인 요소는 일반적으로 "강조, 스타일 구별, 위 첨자, 아래 첨자, 앵커 포인트 등, 다음 태그는 모두 인라인 요소입니다:

a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em,font ,i,img,input, kbd,label,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var


· 블록 요소와 인라인 요소는 다음으로 변환 가능 변환 코드는 다음과 같습니다.
display: block; /* 블록 요소로 변환*/
display: inline /* 인라인 요소로 변환*/

· CSS 호출 블록 요소와 인라인 요소에 대한 규칙은 다릅니다(이 문서에서는 태그 중첩에 대해 설명하므로 이 지식 포인트는 설명하지 않습니다).

블록 요소와 인라인 요소를 간략히 이해한 후 XHTML 태그의 중첩 규칙은 다음과 같습니다.

1. 블록 요소는 인라인 요소 또는 특정 블록 요소를 포함할 수 없습니다. 블록 요소에는 다른 인라인 요소만 포함될 수 있습니다.

—— 예
—— 예

< ;/span> —— 틀림

2. 블록 수준 요소는

안에 배치할 수 없습니다.

— 틀림

—— 틀림

3. 특수 블록 수준 요소가 여러 개 있습니다. 인라인 요소만 포함할 수 있으며 더 이상 블록 수준 요소를 포함하지 않습니다.
h1, h2, h3, h4, h5, h6, p, dt

4. li 내부에는 div 태그가 포함될 수 있습니다. 따로 나열해야 하는데 인터넷에서 많은 분들이 헷갈려 하시는 부분이 있어서 여기서 간단히 설명하겠습니다.

Li 태그와 div 태그는 모두 콘텐츠를 로딩하는 컨테이너이고 동등한 상태를 갖습니다. 수준 구분(예: h1 및 h2^_^과 같은 엄격한 계층) li 태그가 상위 ul 또는 ol도 수용할 수 있다는 것을 알아야 합니다. 왜 어떤 사람들은 li가 div를 수용할 수 없다고 생각합니까? li가 너무 인색하다고 생각하지 마세요. li는 꽤 야위어 보이지만 실제로는 마음이 넓습니다...

5. 블록 수준 요소와 인라인이 병치됩니다. 요소는 인라인 요소와 인라인입니다.

—— 오른쪽

< ;a href="#" >
—— 오른쪽


< ;/div> —— 틀림

본 웹사이트의 성명

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