浏览器添加空代码标记

Question

你可以在这个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">(如此jsFiddle中所示)来解决,但为什么浏览器首先执行此操作,为什么它只对每个段落的第一部分执行此操作？

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

Answer 1

HTML对哪些元素可以嵌套在哪些其他元素中设置了某些限制.有时浏览器会很乐意在某些嵌套场景中构建一个无意义的DOM,例如<div>直接在一个嵌套场景中<ul>.其他时候,他们绝对不能因为其他书面或不成文的解析规则,例如<p>从不包含任何其他块元素的元素,甚至其他<p>元素都没有(这是规范所暗示的),所以他们必须通过改变它来解决它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>仍未使用a 显式终止</code>),浏览器按照以下方式构建DOM的其余部分,然后继续执行:

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

对于传统和跨浏览器兼容性原因,这可能在浏览器中保持一致; 其中一些遗留解析规则也已重新编入HTML5规范的各个部分.不幸的是,我不是一个浏览器实现者,所以我不能列出所有可能的场景; 另一方面,考虑到你写的标记首先是无效的,依赖这些细节是不明智的.

最后,今天高度相关的xkcd(当然):