首页 > p标签里面似乎不能存放div标签???(更新了,快过来)

p标签里面似乎不能存放div标签???(更新了,快过来)

今天发现p标签里面不能放div标签,我是不是应该看html的文档了?

上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>divp</title>
    <style>
        p{
            width:200px;
            height:200px;
            background-color:green;
        }
        div{
            width:50px;
            height:50px;
            background-color:red;
        }
    </style>
</head>
<body>
    <p>
        <div></div>
    </p>
</body>
</html>

在浏览器中的dom结构如图:

在浏览器中的效果图:

这下子问题清楚多了吧,我会胡乱说话吗?!


谁说不能放了……


所以你是从哪得出不能存放的?

题主更新后,我又认真的看了这个题目。自己尝试了一下。

p{
    width: 50px; height: 50px;
    background: #00F;}
   
<p>
    <div></div>
    </p>

所以感觉是div元素把p元素 “撕开”了,也就是div之前浏览器自动补全一个p元素,浏览器之后自动建立一个p元素。

p{
    width: 50px; height: 50px;
    background: #00F;}
div + p{
    background: #F0F;}

果然是这样。
然后我觉得这么有意思的题目肯定有人发现过。
先看第二个链接。

[W3C#TEXT规范][2]
[Why <p> tag can't contain <div> tag inside it?][3]

总之,建议题主把问题说的详细点。
其次,W3C把P元素归到TEXT分类中,是认为P元素一般是作为文本容器的。所以如果把P元素作为块级容器似乎没什么用,毕竟已经有div了。


建议你先看一看行内标签和块级标签的定义与区别,再来更正这个问题。

【热门文章】
【热门文章】