为什么浏览器认为此<div />标记没有立即结束？

Question

鉴于以下HTML：<div style="background-color:green"/><div>text</div>大多数浏览器以绿色显示文本，表示该<div/>速记未被识别为“已终止”，并且跨越第二条<div>。还是这是标准所说的？

Answer 1

严格来说，该<div>元素是HTML中的非空/非空元素，即，它并非旨在自封闭。尽管<div />是有效的XHTML（由于/>表示有一个自动关闭（或为空）的XML元素），但普通的HTML解析器和某些验证器将其解释为未封闭的开始标记，因此是无效的HTML 4.01和HTML5。^1个

实际上，通过W3C验证程序（作为HTML5）运行给定的HTML片段会导致以下错误消息：

在非无效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标记汤规则并被自身解释为开始标记。}

Answer 2

标签此时需要一个单独的关闭器-可能会附加。

请注意，在正确的语法中，即使是自闭标签也需要一个额外的空间（<br />，不是<br/>）

Answer 3

这是因为传统的HTML解析器从未编程过自动关闭元素/>。验证器认为这/>是>因为HTML解析器正是这样做的。现在不能在HTML5解析器中更改此行为，因为它会破坏太多依赖于皇家混乱（即HTML标记汤）的网站。但是，正如我在第一个脚注中提到的那样，如果您真的想在页面中自动关闭“空”元素（而不是真正的void元素），请将您的页面序列化为XML，您将可以自由使用（实际上是必需的）遵循XML规则。