为什么浏览器认为这个<div />标签没有立即结束？

Question

给出以下HTML:

<div style="background-color:green"/>
<div>text</div>

大多数浏览器以绿色显示文本,表示<div/>速记未被识别为"已结束",并且跨越以包裹第二个<div>.

或者这是标准所说的？

Answer 1

严格地说,<div>元素是HTML中的非void /非空元素,即它不意味着自我关闭.虽然<div />是有效的XHTML - 由于/>表示自闭(或空)XML元素 - 它被常见的HTML解析器和一些验证器解释为未闭合的开始标记,因此无效HTML 4.01和HTML5.¹

事实上,通过W3C验证器(作为HTML5)运行您的给定HTML片段会导致此错误消息:

在非void HTML元素上使用的自闭语法(/>).忽略斜杠并将其视为开始标记.

所以你看到了什么.

从HTML5规范(在第一个链接中):

非void元素必须具有结束标记,除非此引用的HTML元素部分中该元素的子部分指示可以省略其结束标记.

在此之后,<div>元素的子部分指出:

div元素必须同时包含开始标记和结束标记.

这使得<div>不同<p>或<li>已知不总是需要结束标记.

如果您<p>在未闭合后立即放置<p>,则隐式关闭之前的<p>.同样地去做<li>.这是因为您无法直接将多个段落或列表项嵌套在一起.但是,<div>可以嵌套到任何深度.因此,开始<div>标记不会关闭先前未打开的<div>标记.

这就是为什么你看到你所看到的.

¹ _{在真正的XHTML页面中(通过用作序列化为XML application/xhtml+xml),第一个<div />元素将不会展开以包装第二个<div>text</div>元素.相反,作为XHTML,它将遵循XML规则并将其自身包含为空元素,而不是遵循HTML标记汤规则并被解释为开放标记本身.}