p标签里面不能嵌套ul、div等块级元素

一直以为P标签作为块级元素，可以像div那样可以嵌套其他的块级元素。因为开发过程中没这样写的习惯，一直也就没有遇到过，直到面试被问到这个问题。

于是代码操作一下看看：

HTML

解析的HTML

结果发现父级包裹的P标签被解析成了两个P标签，这样一来我写的P标签就从没有兄弟节点变化成有两个兄弟节点了。如果写CSS的时候使用了nth-child()、last-child()这样的选择器，那么我们的样式是不是就变化了。

从上面这个现象来看，我们得出结论：p标签里面不能嵌套ul、div等块级元素，只能嵌套内联元素（行内元素）。

---

当发现了上面这个问题得到解决了之后，一个新的问题就来了：块级元素只有P标签这一个不能嵌套块级元素吗？

于是发现块级元素h1~h6之间也不能相互嵌套，嵌套之后浏览器会自动帮我们把他们拆分开,转化成两个同级标签。经过进一步的测试发现，h1~h6可以单独让div、p嵌套，但是仍不建议这样使用，毕竟他们是语义化标签。跟上面这个相似的像我们常用的无序列表ul、有序列表ol，虽然可以嵌套div、p等，但我们还是要遵循语义化。