HTML5的元素嵌套规则【2】

来源 : 作者 : admin时间 : 2015-10-27 09:16:20 人气指数 :

导语内联元素不能嵌套块元素<p>元素和<h1~6>元素不能嵌套块元素那么到底什么是块元素，什么是内联元素？以下是W3C CSS2 1规范中对块元素和内联元素的定义：Block-level elementsare those elements of the so

嵌套错误可能引起的问题

上面讲了HTML5对元素新的分类方式和以<h1>~<h6>、<div>、<a>元素举例讲述了各自的嵌套规则，这就给我们带来了一个思考：嵌套错误到底会不会有问题？

例子(1)：开始与结束标签嵌套错误

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

测试结果：

element11

例子(2)：<p>元素嵌套<div>元素

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

测试结果：

element12

例子(3)：列表元素<li>兄弟元素为<div>

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

测试结果：

element13

例子(4)：<h2>元素嵌套<div>元素

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

测试结果：

element14

例子(5)：<a>元素嵌套<a>元素

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

测试结果：

element15

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

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

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

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

通过上面的示例我们发现在<p>元素里嵌套<div>元素或者<a>元素里<a>元素会导致所有的浏览器都解析错误，这其实是W3C规范的严格嵌套约束，严格嵌套约束要求必须去遵守，不然就会导致所有浏览器的解析错误。

严格嵌套约束规则：

语义嵌套约束：

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

浏览器的容错机制

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

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

拥抱WEB标准

原本我们认为从HTML4到XHTML是一个时代，现在又从XHTML跨到了HTML5，新时代新标准的诞生，我们应该敞开胸怀去拥抱，而不是排斥。

你关注或不关注，标准就在那里，只增不减。我们应该感谢W3C这样一个组织，让各个浏览器厂商抛开彼此的敌意共同制定新的标准。不然，也许你会像90年代那样，JS引用一个元素都需要为某个浏览器写一套自己的代码。

本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明：文章转载自：爱思资源网 http://www.aseoe.com/show-10-691-1.html

[前端插件推荐] Plugin