html - 浏览器拆分 和包含嵌套 block 的嵌套 block 。为什么？

Question

你可以在this jsFiddle中看到我的问题.

我尝试使用 code标签来区分特殊内容，但这很快就适得其反(如您在上面的链接中所见)。当我使用 Firebug 查看内容时，这是:

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

变成了这样:

<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>元素从不包含任何其他 block 元素，甚至不包含其他 <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> , 它插入 <code>标签进入第二个<p> ，将其内容转化为代码:

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

因为浏览器似乎确实允许 <p>在 <code> 内无论出于何种原因(请注意，此时 <code> 仍未用 </code> 显式终止)，浏览器按如下方式构建 DOM 的其余部分，然后继续其方式:

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

出于遗留和跨浏览器兼容性的原因，这可能在浏览器之间是一致的；其中一些遗留解析规则已被 retconned into sections of the HTML5 spec以及。不幸的是，我不是浏览器实现者，所以我无法列出所有可能的场景；另一方面，考虑到您正在编写的标记首先是无效的，依赖这些细节是不明智的。

最后，today's highly relevant xkcd (当然):