【梅开三度】HTML元素嵌套嵌套错误可能引起的问题

13824879591   ·   发表于 2021-3-12   ·   编程代码


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

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

内容


测试结果:

举个栗子2:

元素嵌套

元素

内容


测试结果:

举个栗子3:列表元素
  • 兄弟元素为

    • 内容
    • 内容

    测试结果:

    举个栗子4:

    元素嵌套
    元素

    内容


    测试结果:

    举个栗子5:元素嵌套元素
    内容
    测试结果:

    通过上述栗子,我们总结如下:

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

    元素内嵌入

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

    ~

    元素内嵌入
    等元素所有浏览器可以解析正常
    元素内嵌入元素会导致所有浏览器的解析错误
    在列表元素
  • 等插入非列表兄弟元素会导致IE6\IE7的解析错误
    其实,这里说解析错误并不是很合理,应该是说浏览器解析出来的结果和我们期望的结果不一致,但任何的嵌套错误都不会导致页面呈现有很大的出错。

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

    严格嵌套约束、语义嵌套约束
    通过上面的示例我们发现在

    元素里嵌套

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

    严格嵌套约束规则:

    a元素里不可以嵌套交互式元素(