이번에는 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; /* 转成内嵌元素 */
1. 블록 요소는
인라인 요소
또는 특정 블록 요소를 포함할 수 있지만 인라인 요소는 블록 요소만 포함할 수 있습니다. 기타 인라인 요소:
<div><h1></h1><p></p></div> —— 对 <a href=”#”><span></span></a> —— 对 <span><div></div></span> —— 错
<p><ol><li></li></ol></p> —— 错 <p><div></div></p> —— 错
h1、h2、h3、h4、h5、h6、p、dt
5. 블록 수준 요소는 블록 수준 요소와 병치되고, 인라인 요소는 인라인 요소와 병치됩니다. :
<div><h2></h2><p></p></div> —— 对 <div><a href=”#”></a><span></span></div> —— 对 <div><h2></h2><span></span></div> —— 错
관련 읽기:
HTML에서 헤더 구조를 사용하는 방법 type="file"의 입력 상자 스타일을 작동하는 방법 HTML 목록에서 dl(dt,dd), ul (리)와 ol(리)위 내용은 HTML 태그 중첩에 대한 세부 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!