HTML 태그 중첩에 대한 세부 규칙

이번에는 HTML 태그 중첩에 대한 세부 규칙과 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 태그에는 두 가지 유형이 있다는 것을 알아야 합니다.
한 유형은 블록 수준 요소(블록)라고 하며
한 유형은 인라인 요소(인라인, 많은 사람들이 inline, inline, line level 등으로 부르기도 합니다.)

블록 수준 요소와 인라인 요소의 분류 기준은 매우 간단합니다. body 태그에 다음 두 줄의 코드를 넣어주세요.

코드는 다음과 같습니다. 다음:

<div style=”border: 1px solid red;”>div1</div> 
<div style=”border: 1px solid red;”>div2</div>

브라우저 렌더링 효과:
div1
div2
페이지에 표시되는 두 개의 div는 float(부동)으로 설정하거나 다른 설정을 지정하지 않는 한 옆에 아무도 없습니다. 다른 하나는 모두 자신의 행을 지배적으로 차지합니다. 태그에서 이 현상을 볼 때마다 이를 블록 수준 요소(블록)라고 부를 수 있습니다.
body 태그에 다음 두 줄을 입력하세요. 코드는 다음과 같습니다:

<span style=”border: 1px solid red;”>span1</span> 
<span style=”border: 1px solid red;”>span2</span>

Browser 렌더링 효과:

span1span2

이번에는 두 개의 스팬이 한 줄에 병치되어 있습니다. 그들은 이웃하고 친근하며 조화롭습니다... 이와 같은 태그의 경우
behavior
를 수행할 수 있습니다. 호출: 인라인 요소(inline) 블록 수준 요소와 인라인 요소의 차이점: ·블록 수준 요소는 일반적으로 웹사이트 아키텍처, 레이아웃 및 콘텐츠 전달에 사용됩니다. 이러한 주요 물리적 작업은 모두 다음에 속합니다. 다음 태그를 포함하는 블록 수준 요소:

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. 블록 요소는
인라인 요소
또는 특정 블록 요소를 포함할 수 있지만 인라인 요소는 블록 요소만 포함할 수 있습니다. 기타 인라인 요소:

<div><h1></h1><p></p></div> —— 对 
<a href=”#”><span></span></a> —— 对 
<span><div></div></span> —— 错

2. 블록 수준 요소는

안에 배치할 수 없습니다.

<p><ol><li></li></ol></p> —— 错 
<p><div></div></p> —— 错

3. 인라인 요소만 포함할 수 있고 더 이상 포함할 수 없는 몇 가지 특수 블록 수준 요소가 있습니다. 블록 수준 요소입니다.

h1、h2、h3、h4、h5、h6、p、dt

4. li에는 div 태그가 포함될 수 있습니다. - 이 항목은 별도로 나열할 필요가 없지만 인터넷에서 많은 사람들이 이에 대해 혼란스러워합니다.

li 및 div 태그는 모두 콘텐츠를 로드하기 위한 컨테이너입니다. 둘은 동일한 상태를 가지며 수준 간에 구분이 없습니다(예: h1 및 h2^_^과 같은 엄격한 계층). li 태그가 해당 상위 태그에 연결되어 있음을 알아야 합니다. ul과 ol을 모두 수용할 수 있습니다. 왜 일부 사람들은 li가 div를 수용할 수 없다고 생각합니까? li가 너무 인색하다고 생각하지 마세요, li가 꽤 가늘어 보여도 사실 li는 큰 마음을 가지고 있습니다...

5. 블록 수준 요소는 블록 수준 요소와 병치되고, 인라인 요소는 인라인 요소와 병치됩니다. :

<div><h2></h2><p></p></div> —— 对 
<div><a href=”#”></a><span></span></div> —— 对 
<div><h2></h2><span></span></div> —— 错

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

HTML에서 헤더 구조를 사용하는 방법

type="file"의 입력 상자 스타일을 작동하는 방법

HTML 목록에서 dl(dt,dd), ul (리)와 ol(리)

의 차이점은 무엇인가요?

위 내용은 HTML 태그 중첩에 대한 세부 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!