jQuery用段落错误解析原始HTML

Question

屏幕截图显示了firebug观察窗口.

为什么它解析几乎相同的HTML错误？我预计第二行中只有一个元素,而不是元素数组.

Answer 1

浏览器是没有错的.<p><div></div></p>是无效的HTML.

浏览器分析两个代码不同的原因是因为<p>元素只允许包含inline elements.

双方<p>并<div>都block elements,但<p>不能包含一个<div>未段落式内容.因此,当浏览器读取该代码时,他会找到该元素<p>,然后是意外的<div>.浏览器非常容忍标记错误,因此浏览器会关闭p标记并转到下一个div元素.然后是第三个元素,(错误的HTML因为它错过了开始标记)所以它被读作一个新元素.

在第一种情况下,您有嵌套元素,因此浏览器显示一个元素;
在第二种情况下,您在同一DOM树级别中有三个元素,因此元素数组是浏览器的答案.

他们都渲染,但错误的可以产生意想不到的结果.浏览器如何读取错误的标记加上CSS将很难预测.

因此,浏览器将代码读取/解析为:<p></p><div></div><p></p>,为您提供不同的结果.

 

值得一读:

W3/HTML5规范:
p - 段
div - 通用流容器.

MOZILLA DEVELOPER NETWORK:
MDN:p元素(选中"允许的内容")
MDN:块级元素