HTML의 P 태그에 DIV 태그를 포함할 수 없는 이유는 무엇입니까?

요약:

1. 블록 요소에는 인라인 요소 또는 특정 블록 요소가 포함될 수 있습니다(위의 예는 실제로 잘못된 사용입니다--->e388a4556c0f65e1904146cc1a846bee를 안에 넣습니다). e388a4556c0f65e1904146cc1a846bee), 그러나 인라인 요소는 블록 요소를 포함할 수 없으며 다른 인라인 요소만 포함할 수 있습니다

2, 사용을 위해 DTD는 블록 수준 요소를 규정합니다. e388a4556c0f65e1904146cc1a846bee

3. 핵심 사항: 세 가지 수준의 블록 요소

4. 인라인 요소에는 없는 너비와 높이가 있습니다. W3C는 이를 대체 요소로 정의합니다. 요소를 display:inline-block으로 설정하면 대체 요소의 효과가 시뮬레이션됩니다. ㅋㅋㅋ

하지만 많은 오류가 발생하여 매우 놀랐습니다. 그래서 이유를 조사한 결과 p가 블록 수준 요소 P 내에 중첩될 수 없다는 것을 발견했습니다.

심층 조사: HTML의 거의 모든 요소는 인라인 요소이거나 블록 요소이므로 먼저 인라인 요소와 블록라인 블록 요소를 이해해 보겠습니다.

in-line이라는 단어는 inline, inline, inline, line level 등 다양한 해석이 있습니다. 그러나 여기서는 모두 동일한 의미를 의미합니다. 여기서는 관례적인 이름인 inline Union을 선택합니다. 먼저 아래 예를 보면 둘 사이의 차이점을 이해할 수 있을 것입니다. e388a4556c0f65e1904146cc1a846bee블록 요소와 45a2772a6b6107b401db3c9b82c049c2인라인 요소54bdf357c58b8a65c66d7c19c8e4d114 사이의 차이점을 테스트해 보세요. 94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee블록 요소94b3e26ee717c64999d7867364b1b4a3와 인라인 요소94b3e26ee717c64999d7867364b1b4a3

                                              효과는 다음과 같습니다.

위에서 예를 들어 e388a4556c0f65e1904146cc1a846bee는 자체적으로 새 줄을 생성하지만 45a2772a6b6107b401db3c9b82c049c2은 CSS 렌더링이 없는 경우에만 적용되며, CSS를 통해 p를 정의할 수도 있습니다. 블록 요소는 HTML에서 임의로 변환할 수 없습니다. 블록 요소에는 인라인 요소나 특정 블록 요소가 포함될 수 있습니다(위의 예는 실제로 잘못된 사용입니다---> e388a4556c0f65e1904146cc1a846bee 안에 e388a4556c0f65e1904146cc1a846bee를 넣었습니다).

그러나 인라인 요소는 블록 요소를 포함할 수 없으며 다른 인라인 요소만 포함할 수 있습니다

, 이것을 다시 살펴보세요:

<h2>我喜欢在<a href="#" >经典论坛</a>讨论Web标准的原因。</h2>

여기서 c1a436a314ed609750bd7c7d319db4da 인라인 요소는 3499910bf9dac5ae3c52d5ede7383485를 포함하는 데 아무런 문제가 없습니다. 마찬가지로 e388a4556c0f65e1904146cc1a846bee를 포함할 수도 있습니다. 다음은 인라인 요소에 블록 요소가 포함되어서는 안 되기 때문에 잘못된 것입니다.

<a href="#"> <h2>这样是错误的用法！</h2></a>

일부 블록 요소가 다른 블록 요소를 포함할 수 없는 경우가 있습니다. 예:

<p>测试文字
<ul>
<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字
</p>

그리고 이건 괜찮습니다.

<ul>
<li><p>这样是可以的</p></li>
</ul>

왜요? 우리가 사용하는 DTD에서는 블록 수준 요소를 e388a4556c0f65e1904146cc1a846bee 안에 배치할 수 없다고 규정하고 일부 브라우저에서는 이 쓰기 방법을 허용합니다.

<p>这是一个段落的开始
<p>这是另一个段落的开始

当一个e388a4556c0f65e1904146cc1a846bee签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样：

<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>

所以刚才那样的写法会变成这样：

<p>测试文字</p>
<ul>
<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字<p></p>

这也是跟刚才说第一个例子中e388a4556c0f65e1904146cc1a846bee里面放e388a4556c0f65e1904146cc1a846bee不合理是同一个道理。

以下为重点理解部分：

那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道100db36a723c770d327fc0aef2ce13b1是在最外层，100db36a723c770d327fc0aef2ce13b1下一级里面只会有8cea2e99ba256aa9b779f5ab5949ca21、6c04bd5ca3fcae76e30b72ad730ca86d、f900b4fc197b16ab214eecf015bb6bd2、37f861bd36cef5b6406eba87d20a5bab，而我们已经知道了可视的元素只会出现在6c04bd5ca3fcae76e30b72ad730ca86d里，所以我们把6c04bd5ca3fcae76e30b72ad730ca86d划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的4a249f0d628e2318394fd9b75b4636b1、c1a436a314ed609750bd7c7d319db4da、684271ed9684bde649abda8831d4d355、3f7b3decd2dcafb07b84d2d3985d9f40、39318b6f72ed39310530dfd69d0078e1、4e9ee319e0fa4abc21ff286eeb145ecc、63bd76834ec05ac1f4c0ebbeaafb0994；段落标记的e388a4556c0f65e1904146cc1a846bee；分隔线f32b48428a809b51f04d3228cdf461fa和一个特别的元素73de882deff7a050a357292d0a1fca94(它只存在于列表元素5c69336ffbc20d23018e48b396cdd57a的子一级)。

为什么说第二级的元素可以自由嵌套呢？我们可以把它们看成是一些容器（或者说是盒子）， 这些容器的大小可以自由变化，例如我们可以把ff6d136ddc5fdfeffaf53ff6ee95f185嵌在e388a4556c0f65e1904146cc1a846bee里面，也可以把e388a4556c0f65e1904146cc1a846bee嵌在25edfb22a4f469ecb59f1190150159c6里面。

HTML에는 ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6, 5c69336ffbc20d23018e48b396cdd57a, f5d188ed2c074f8b944552db028f98a1과 같은 몇 가지 특수 요소가 있으며, 해당 하위 수준은 지정된 요소여야 합니다. ;ol>은 5c69336ffbc20d23018e48b396cdd57a의 하위 레벨이어야 합니다; f5d188ed2c074f8b944552db028f98a1의 하위 레벨은 63bd76834ec05ac1f4c0ebbeaafb0994이어야 합니다. , 등이고 다음 하위 수준은 이어야 합니다( 은 , , 에만 존재함). 콘텐츠를 배치할 수 있는 위치는 b6c5a531a458a2e790c1fd6421739d1c

이것은 또한 많은 사람들이 W3C 검증을 통과하지 못하는 이유이기도 합니다. 잘못된 요소 중첩입니다. 그러나 오류를 표시하는 레이블을 e388a4556c0f65e1904146cc1a846bee 할 수 없습니다. 확인을 위해 맹목적으로 확인하는 것은 e388a4556c0f65e1904146cc1a846bee가 신이 아니며 e388a4556c0f65e1904146cc1a846bee는 semantic 태그를 대체할 수 없습니다.

실제로 인라인 요소 중에서는 구별할 수 있습니다. 특별한 여러 요소(a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd 등)가 있으며 이러한 요소를 정의할 수 있습니다. 너비와 높이. 비록 IE에서는 브라우저에서 모든 요소는 너비와 높이를 정의할 수 있지만 이는 IE 자체 표준이며 모든 브라우저가 이를 지원하는 것은 아닙니다. W3C는 이를 대체 요소라고 부릅니다. 번역에 적합한 단어를 찾을 수 없습니다. 해당 요소는 In-line에 속합니다. "desplay: inline-block의 적용"에서 언급한 inline-block은 실제로 다른 요소를 대체된 요소로 시뮬레이션할 수 있도록 해줍니다. . 나중에 배우려면 기다려주세요.

위 내용은 HTML의 P 태그에 DIV 태그를 포함할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!