HTML元素嵌套嵌套错误可能引起的问题

前言

hello world欢迎来到前端的新世界

---

😜当前文章系列专栏：前端扫盲之HTML
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

嵌套错误可能引起的问题

在我们使用各种浏览器时，时常发现即使不按照标准去嵌套也不会有大的错误问题，这就给我们带来了一个思考：嵌套错误到底会不会有问题？

举个栗子1：开始与结束标签嵌套错误

<div><h2>内容</div></h2>

测试结果

举个栗子2：

元素嵌套

元素

<p><div>内容</div></p>

测试结果：

举个栗子3：列表元素

• 兄弟元素为

<ul><li>内容</li><div>内容</div></ul>

测试结果：

举个栗子4：

元素嵌套

元素

<h2><div>内容</div></h2>

测试结果：

举个栗子5：元素嵌套元素

<a href=""><a href="">内容</a></a>

测试结果：

通过上述栗子，我们总结如下：

• 元素开始与结束标签嵌套错误，页面可以在大部分浏览器被正常解析，IE9会出现解析错误
• 在

  元素内嵌入

  等元素造成所有浏览器的解析错误

• 在

  ~

  元素内嵌入

  等元素所有浏览器可以解析正常

• 在元素内嵌入元素会导致所有浏览器的解析错误
• 在列表元素
• 等插入非列表兄弟元素会导致IE6\IE7的解析错误

其实，这里说解析错误并不是很合理，应该是说浏览器解析出来的结果和我们期望的结果不一致，但任何的嵌套错误都不会导致页面呈现有很大的出错。

我们知道JS代码如果写的有语法错误，浏览器的JS解释器就会拒绝执行并且报错，而浏览器在遇到不符合语法规定的HTML代码时则会千方百计将其呈现出来。

严格嵌套约束、语义嵌套约束

通过上面的示例我们发现在

元素里嵌套

元素或者 a 元素里a>元素会导致所有的浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。

严格嵌套约束规则：

• a元素里不可以嵌套交互式元素( < a >、< button>、< select>等)
• < p>里面不可以嵌套< div>、< h1>~< h6>、< p>、< ul>/< ol>/
• 、< dl>/< dt>/< dd>、< form>等
• 暂时没有发现更多，有的欢迎告诉我

语义嵌套约束：

每个元素基本都有自己的嵌套规则（即父元素可以是什么，子元素可以是什么），除了严格嵌套约束之外的一些规则就是语义嵌套约束，对于语义嵌套约束，如果不遵守，页面可能正常，但也可能解析错误，这和下面要讲的容错机制有关。

浏览器的容错机制

并不是每位同学在写完页面后去做合法性检查，因此浏览器厂商不得不让它们的浏览器以尽可能宽松的方式去处理网页，每个浏览器内核中都有相当一部分代码专门用来处理那些含糊不清的html标记及嵌套，并且会去猜测前端们到底想如何呈现网页，这是浏览器的容错机制。

这其实在告诉我们，我们写出来的HTML代码不符合W3C规范可能最终呈现出来没有异样，但那其实是浏览器的一种容错机制，我们没有理由让自己以一个随性的态度去coding，对待自己的代码应该一丝不苟，即使HTML5的胸襟很宽广。

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力