Why can't DIV tags be included in the P tag in html?

Summary:

1, block elements can contain inline elements or some block elements (the above example is actually a wrong use--->I put e388a4556c0f65e1904146cc1a846bee inside e388a4556c0f65e1904146cc1a846bee), But inline elements cannot contain block elements, they can only contain other inline elements

##2 ,The DTD we use stipulates that block-level elements cannot be placed inside e388a4556c0f65e1904146cc1a846bee

##3. Key points: three levels of block elements

4. img of inline elements They are special compared to input. They have width and height that inline elements do not have. W3C defines it as a replace element. Setting the element to display:inline-block simulates the effect of the replace element.

cause: When I was working on a project, I found that the code that was originally correct in DW was in MyEclipse6.0 but prompted N So many mistakes, so surprising. So after investigating the reason, we found that p cannot be nested within block-level element P.

Go deeper: Let’s first understand in-line elements and block-line block elements, because almost all elements in HTML are inline elements or blocks One of the elements.

The word in-line has many interpretations: inline, inline, inline, line level, etc., but they all mean the same thing means, here we choose the customary name - inline.

You can understand the difference between the two by looking at the following example:

e388a4556c0f65e1904146cc1a846beeTest it Differences between block elements and 45a2772a6b6107b401db3c9b82c049c2inline elements54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846beeTest the difference betweene388a4556c0f65e1904146cc1a846beeblock elements94b3e26ee717c64999d7867364b1b4a3and inline elements94b3e26ee717c64999d7867364b1b4a3

                                                                                ## The effect is as follows:

In the above example, e388a4556c0f65e1904146cc1a846bee will Generate a new line by itself, and 45a2772a6b6107b401db3c9b82c049c2 does not break. This is only the case without CSS rendering. Similarly, we can also define p as an inline element and span as a block element through CSS. However, we cannot convert them arbitrarily in HTML. Block elements can contain inline elements or certain block elements (the above example is actually a wrong use--->I put e388a4556c0f65e1904146cc1a846bee in e388a4556c0f65e1904146cc1a846bee inside),

but inline elements cannot contain block elements, it can only contain other inline elements

, look at this again:

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

##Where c1a436a314ed609750bd7c7d319db4da is a block element, and 3499910bf9dac5ae3c52d5ede7383485 is an inline element. There is no error in c1a436a314ed609750bd7c7d319db4da including 3499910bf9dac5ae3c52d5ede7383485. Similarly, e388a4556c0f65e1904146cc1a846bee can contain e388a4556c0f65e1904146cc1a846bee, and it is correct for e388a4556c0f65e1904146cc1a846bee to contain 3499910bf9dac5ae3c52d5ede7383485, but if it is like the following, it is wrong, because inline elements should not contain block elements:

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

There are also situations where some block elements cannot contain other block elements. For example:

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

And this is okay.

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

Why? Because the DTD we use stipulates that block-level elements cannot be placed inside e388a4556c0f65e1904146cc1a846bee, and some browsers condone such writing:

<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里面。

There are several elements in HTML that are quite special: ff6d136ddc5fdfeffaf53ff6ee95f185, c34106e0b4e09414b63b2ea253ff83d6, 5c69336ffbc20d23018e48b396cdd57a, f5d188ed2c074f8b944552db028f98a1, their sub-levels must be designated elements, 6d5fc63d10dd9bf5fe7049c8f2095bd2 and c34106e0b4e09414b63b2ea253ff83d6 must be 25edfb22a4f469ecb59f1190150159c6; the child level of 5c69336ffbc20d23018e48b396cdd57a must be 73de882deff7a050a357292d0a1fca94 or the child level of 67bc4f89d416b0b8236eaa5f43dee742; f5d188ed2c074f8b944552db028f98a1 must be 165ce83cfd62d7f5daa3cc4a4085ce33 or ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, 92cee25da80fac49f6fb6eec5fd2c22a, etc., and the next sub-layer must be a34de1251f0d9fe1e645927f19a896e8 (a34de1251f0d9fe1e645927f19a896e8 only exists in ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, 45d34ede88d816973d95e26696dafc5d), followed by b6c5a531a458a2e790c1fd6421739d1c or b4d429308760b6c2d20d6300079ed38e where content can be placed.

This is also the reason why many people fail to pass W3C validation--> Wrong element nesting, but change the label that prompts the error to e388a4556c0f65e1904146cc1a846bee or 45a2772a6b6107b401db3c9b82c049c2 It can pass, but we cannot blindly verify for the sake of verification, e388a4556c0f65e1904146cc1a846bee is not a god, e388a4556c0f65e1904146cc1a846bee cannot replace the semantic tag.

In fact, among inline elements, you can still distinguish them. There are several Elements (a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, etc.) are special, they can define width and height. Although in IE In the browser, all elements can define width and height, but this is IE's own standard, not all browsers support it, W3C calls them replaced elements, I can't find a word suitable for translation. , they also have some characteristics of block-line when they are in-line. The inline-block mentioned in "desplay: application of inline-block" actually allows other elements to be simulated as replaced elements. You can temporarily Don’t know too much about it, just learn it later.

The above is the detailed content of Why can't DIV tags be included in the P tag in html?. For more information, please follow other related articles on the PHP Chinese website!