浏览器添加空代码标记

Question

您可以在this jsFiddle中看到我的问题。

我尝试使用code标签来区分特殊内容，但这很快就适用于我（正如您在上面的链接中看到的那样）。当我使用Firebug查看内容时，请：

<code>
    <p> Some line of code </p>
    <p> Another line of code </p>
</code>

已经变成了这个：

<p>
    This is a sample paragraph with a code block:
    <code> </code>
</p>
<p>
    <code> Some line of code </code>
</p>
<code>
    <p> Another line of code </p>
</code>

现在，这可以通过将<code>更改为<div class="code">（如this jsFiddle中所示）来解决，但为什么浏览器会在第一次执行此操作地点，为什么它只到每个段落的第一部分？

Firefox，Opera，Chrome，Internet Explorer，Safari - 所有这些都是这样做的，但我真的很想知道原因。是仅在code时发生，还是与其他标签一起使用？为什么浏览器会像这样移动标签？

Answer 1

HTML对哪些元素可以嵌套在哪些其他元素中设置了某些限制。有时，浏览器会很乐意在某些嵌套方案中构建一个无意义的DOM，例如直接在<div>中<ul>。其他时候，他们绝对不能因为其他书面或不成文的解析规则，例如<p>元素从不包含任何其他块元素，甚至不包含其他<p>元素（这是implied by the spec）因此，他们必须通过将DOM更改为可以使用的内容来解决它，从而导致您观察到的行为。

因为你根本无法将<p>元素嵌套在一起，所以这里发生的是这个元素：

    <p> Some line of code </p>

导致其他元素被终止：

<p>
    This is a sample paragraph with a code block:
    <code>

由于其中有一个空的<code>标记，因此它已关闭，并且包含的​​<p>也已关闭，因为后续的<p>开始标记会自动关闭前一个<p> }开始标记：

<p>
    This is a sample paragraph with a code block:
    <code> </code>
</p>

此时，浏览器必须处理<code>和<p>标记现在有效处于错误顺序但仍然嵌套的事实。为了补偿第一个“外部”<p>元素的重组，以及在第二个“内部”<code>之前存在<p>标记的事实，它会插入{{ 1}}标记到第二个<code>，将其内容转换为代码：

<p>

由于浏览器似乎在<p> <code> Some line of code </code> </p> 内因任何原因而允许<p>（请注意，此时<code>尚未显式终止 <code>），浏览器按照以下方式构建DOM的其余部分，然后继续前进：

</code>

对于传统和跨浏览器兼容性原因，这可能在浏览器中保持一致;其中一些遗留解析规则也是retconned into sections of the HTML5 spec。不幸的是，我不是一个浏览器实现者，所以我不能列出所有可能的场景;另一方面，考虑到你写的标记首先是无效的，依赖这些细节是不明智的。

最后，today's highly relevant xkcd（当然）：