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

inside

)

, 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

##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:

Test it Differences between block elements and inline elements

Test the difference between

block elements

and inline elements

                                                                                ## The effect is as follows:

In the above example,

will Generate a new line by itself, and 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

in

inside),

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

, look at this again:

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

##Where

is a block element, and is an inline element. There is no error in

including . Similarly,

can contain

, and it is correct for

to contain , but if it is like the following, it is wrong, because inline elements should not contain block elements:

<a href="#"> <h2 id="这样是错误的用法">这样是错误的用法！</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

, and some browsers condone such writing:

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

当一个

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

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

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

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

这也是跟刚才说第一个例子中

里面放

不合理是同一个道理。

以下为重点理解部分：

那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道是在最外层，下一级里面只会有head

>、、、，而我们已经知道了可视的元素只会出现在里，所以我们把划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。<span style="color:rgb(255,0,0)">所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线</p> <hr>和一个特别的元素<dt>(它只存在于列表元素</dt> <dl>的子一级)。</dl> </caption> </h6> </h5> </h4> </h3> </h2> </h1></span>

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

嵌在

里面，也可以把

嵌在

• 里面。

There are several elements in HTML that are quite special:

,

,

, , their sub-levels must be designated elements, and

must be
1. ; the child level of

   must be

   or the child level of

   ;

must be or , , , etc., and the next sub-layer must be ( only exists in , , ), followed by

or	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 or It can pass, but we cannot blindly verify for the sake of verification, is not a god, cannot replace the semantic tag. In fact, among inline elements, you can still distinguish them. There are several Elements (, , 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!