浏览器添加空代码标记 [英] Browser adds empty code tag

问题描述

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

我尝试使用代码标签来区分特殊内容，但是这很快就反对我（正如你可以在上面的链接中看到的）。当我使用Firebug来查看内容时：

 < code> 
< p>某行代码< / p> 
< p>另一行代码< / p> 
< / code> 
  

变成了这样：

 < p> 
这是一个带有代码块的示例段落：
< code> < / code> 
< / p> 
< p> 
< code>一些代码行< / code> 
< / p> 
< code> 
< p>另一行代码< / p> 
< / code> 
  

现在，这可以通过更改< code> 到< div class =code> （如 this jsFiddle ），但是为什么首先是浏览器执行此操作，为什么它只在 每个段落？

Firefox，Opera，Chrome，Internet Explorer，Safari - 他们都这样做，但我真的想知道为什么。它是否只发生在代码，或者它会与其他标签一起做吗？为什么浏览器会像这样移动标签？

解决方案

HTML对哪些元素可以嵌套在其他元素有一定的限制。有时，浏览器会在某些嵌套方案中快乐地构造一个无意义的DOM，例如直接在< ul> < div> c $ c>。其他时候，它们绝对不能因为其他书写或未写入的解析规则，例如< p> 元素不包含任何其他块元素，甚至不包括其他< p> 元素（这是隐含的规范），所以他们必须通过改变DOM到他们可以工作，解决它，导致你观察到的行为。 / p>

因为你不能把< p> 元素嵌套在一起，

 < p>某行代码< / p> 
  

会导致此其他元素被终止：

 < p> 
这是一个带有代码块的示例段落：
< code> 
  

由于有一个空的< code> 标签，关闭，并且包含< p> 也关闭，因为后续的< p> start标签将自动关闭之前的< p> 开始标签：

 < p> 
这是一个带有代码块的示例段落：
< code> < / code> 
< / p> 
  

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

 < p> 
< code>一些代码行< / code> 
< / p> 
  

由于浏览器似乎允许< p> < code> 仍然不是 c> < code>但是使用< / code> 显式终止），浏览器会按如下方式构建DOM的其余部分，然后继续： / p>



 < code> 
< p>另一行代码< / p> 
< / code> 
  

由于遗留和跨浏览器兼容性原因，其中一些旧版解析规则已重新导入HTML5规范。不幸的是，我不是浏览器实现者，所以我不能列出所有可能的方案;另一方面，考虑到你写的标记在第一时间是无效的，依赖这些细节是不明智的。

最后，今天高度相关的xkcd （当然）：

You can see my problem in this jsFiddle.

I tried usingcode tags to distinguish special content, but this quickly backfired on me (as you can see in the above link). When I use Firebug to look at the content, this:

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

has turned into this:

<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>

Now, this can be solved by changing <code> to <div class="code"> (as seen in this jsFiddle), but why did the browser do this in the first place, and why did it do it only to the first section in each paragraph?

Firefox, Opera, Chrome, Internet Explorer, Safari - all of them do this, but I'd really like to know why. Does it happen with code only, or will it do this with other tags? And why would browsers move tags around like that?

解决方案

HTML places certain restrictions on which elements can be nested in which other elements. Sometimes browsers will happily construct a nonsensical DOM out of certain nesting scenarios, such as a <div> directly in a <ul>. Other times, they absolutely can't because of other written or unwritten parsing rules, such as <p> elements never containing any other block elements, not even other <p> elements (this is implied by the spec), so they have to work around it by changing the DOM to something that they can work with, resulting in the behavior you observe.

Because you cannot nest <p> elements within one another at all, what's happening here is that this element:

    <p> Some line of code </p>

is causing this other element to be terminated:

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

Since there's an empty <code> tag in there, it's closed, and the containing <p> closed as well, because a subsequent <p> start tag will automatically close a preceding <p> start tag:

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

At this point a browser has to deal with the fact that the <code> and <p> tags are now effectively in the wrong order, but still nested. To compensate for the restructuring of the first "outer" <p> element, and the fact that there was going to be a <code> tag before the second "inner" <p>, it inserts <code> tags into the second <p>, turning its contents into code:

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

Since browsers do seem to allow <p> within <code> for whatever reason (note that at this point the <code> is still not yet explicitly terminated with a </code>), the browser builds the rest of the DOM as follows, before continuing on its way:

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

This is probably consistent across browsers for legacy and cross-browser compatibility reasons; some of these legacy parsing rules have been retconned into sections of the HTML5 spec as well. Unfortunately, I'm not a browser implementer so I can't list out all possible scenarios; on the other hand, it's unwise to rely on such details considering the markup you're writing is invalid in the first place.

And, finally, today's highly relevant xkcd (of course):

这篇关于浏览器添加空代码标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！