1

解析错误

屏幕截图显示了萤火虫监视窗口。

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

4

2 回答 2

9

浏览器没有错。<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 开发者网络：
MDN：p 元素（检查“允许的内容”）
MDN：块级元素

于 2013-08-19T21:14:52.700 回答
4

无论哪种情况，结果都没有错。

<p>HTML 标记只能包含短语内容元素。但是，<div>不是短语内容（而是一个流程元素）。（Simplified<p>可能包含内联元素，但<div>它是块元素。）因此，第二个示例中的 HTML 代码无效（因为不符合标准）。

结果是浏览器 HTML 到 DOM 解析器——当然是由 jQuery 触发的——处理 HTML 如下：

  1. 识别<p>正在打开的块
  2. 识别<div>正在打开的块
  3. 注意先前打开的 div 块是无效的<p>
  4. 关闭上一个<p>块
  5. …</li>

所以等效的 HTML 代码是 <p></p><div></div><p></p>，它是有效的 HTML。因此解析器会为您更正 HTML。

因为我们现在拥有三个顶级元素，而不是一个顶级元素的嵌套元素，所以您会得到一个DOM 元素数组，而不是像您预期的那样一个元素。

网络浏览器对不符合标准的 HTML 代码非常健壮。您在此处注意到并指出的行为是解析器尽最大努力从无效 HTML 代码中理解的众多示例之一。

参考：

于 2013-08-19T21:46:52.580 回答