html标签的嵌套规则

　　我突然发现我学习了这么长时间的html，竟然在今天才发现这个规则，只恨自己太不认真了。事实上因为我在做jquery的:hover的练习的事后发现的，因为我发现p标签在嵌套的时候出现了和诡异的情形，我昨晚请教了做了php一年的室友，结果这个问题困扰了我们很长时间，给我俩气的直接睡觉去了。可见做了web一年的程序员都没有知道这个规则，这个规则是有被人多么的不重视，但是我感觉还是有必要学习的。下面就是这个规则：

 

1.  块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：

　　<div><h1></h1><p></p></div> —— 对

　　<a href=”#”><span></span></a> —— 对

　　<span><div></div></span> —— 错

　　虽然最后一行代码是错误的，但是在html的文档结构中并没有出错。使用$('span:has(div)')也是没有问题的，最后的html文档也是没有问题的。但是有时候会出现bug。目前不知是什么bug。（有待完善）

 

2.   块级元素不能放在<p>里面

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

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

　　这些都是错误的，因为最后html的文档会是这样的<p></p><div></div><p></p>和<p></p><p></p><p></p>。我在之前就遇到过这样的情况，可见这条规则值得注意的。

 

3.  有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

　　h1、h2、h3、h4、h5、h6、p、dt。

　　在这样的情况下，我试了一下这样的代码：

　　<h2><div>123</div></h2>

　　结果是html文档最终依旧是这个，使用$('h2:has(div)')也是没有错误的。但是，但是，但是.......当出现这样的代码的时候：

　　<h2><h2></h2></h2>

　　浏览器最后的html文档是：<h2></h2><h2></h2>，原本是嵌套的属于父子关系的标签成为了兄弟级别的了。与p标签不同的是h标签会出现2个兄弟元素，而同样的情况下p标签会演变成3个兄弟标签。是不是很怪？接下来，继续：<h2><h3></h3></h2>,结果是<h2></h2><h3></h3>，又变成了兄弟元素。最后放大招：<h2><p></p></h2>，结果是什么？没错，这个在html文档最终是不变的.....那么<p><h2></h2><p>，结果是什么呢？没错这个结果是<p></p><h2></h2><p></p>。

　　那么，我们就需要总结一下了：

　　p标签内部不能嵌套任何块级元素，h标签不能嵌套自身（即便是h2嵌套h3也不行），dt不能嵌套自身。有时候内联元素嵌套块级元素会出现bug