HTML元素嵌套问题

最新推荐文章于 2023-03-20 15:46:53 发布

web世界之窗

最新推荐文章于 2023-03-20 15:46:53 发布

阅读量281

点赞数

文章标签： html html元素前端前端开发 web开发

本文链接：https://blog.csdn.net/weixin_45974707/article/details/104010895

版权

本文探讨了HTML元素嵌套的规则，特别是P元素嵌套问题和块级元素嵌套的限制。解释了为何内联元素不能包含块元素，以及浏览器如何处理不合法的嵌套。同时阐述了内联元素和部分具有特殊性质的元素，如可以定义宽高的内联块元素。

摘要由CSDN通过智能技术生成

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，只能包含其他的内联元素。

<p>
  <div></div>
</p>

在P元素中嵌套div等块级元素，在浏览器中解析如下：

可以看到在元素最后会多出一个空的<p></p>。

通过查询，发现原来p元素内无法包裹块级元素。
因为我们使用的DTD中规定了块级元素是不能放在<p>里面的，再加上一些浏览器纵容这样的写法：

<p>这是一个段落的开始
<p>这是另一个段落的开始
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

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

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

关注