实例1:p标签2层嵌套
效果如下:文字正常显示,但是dom却和想象的不一样。个人理解是如果p标签后面没有跟结束标签则会自动补上结束标签,而如果p标签和结束标签正好配对,则不发生改变,但是如果只有结束标签,则会自动配上开始标签。
实例2:p标签3层嵌套
实例3: h标签嵌套问题
分析:h标签并没有和p标签一样有多余的空标签对,而是把结束标签提前了,与开始标签配对。
实例4:p标签和h标签互相嵌套
嵌套规则:
1、块级元素与块级元素平级、内嵌元素与内嵌元素平级
2、块级元素可以包含内联元素或某些块元素,但是内联元素不能包含块元素,它只能包含其他的内联元素。
3、有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素:h1~h6、p、dt
4、li标签可以包含标签,因为li和div标签都是装载内容的容器,地位平等,没有级别之分。
5、块级元素与块级元素并列、内嵌元素与内嵌元素并列:
<div><h2></h2><p></p></div> —— 对
<div><a href=”#”></a><span></span></div> —— 对
<div><h2></h2><span></span></div> —— 错