Why can't DIV tags be included in the P tag in html?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

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

黄舟

Jul 03, 2017 am 11:41 AM

html Include

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:

HTML中为何P标签内不可包含p标签？ - JORTON - ★柳暗花明★ 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

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>

Copy after login

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

Copy after login

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

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

Copy after login

And this is okay.

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

Copy after login

Why? Because the DTD we use stipulates that block-level elements cannot be placed inside

, and some browsers condone such writing:

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

Copy after login

当一个

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

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

Copy after login

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

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

Copy after login

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

里面放

不合理是同一个道理。

以下为重点理解部分：

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