Web 浏览器如何翻译 html 中的嵌套标签以及嵌套标签的顺序如何处理？

Question

在 html 中，假设我手头有两个标签 <code> 和 <pre>，并且我想编写预格式化的代码，那么这些标签的顺序是否重要？例如。以下是否等价？

<!DOCTYPE html>
<html>
<body>

<p>Code example:</p>
<pre><code>var person = {
firstName:"John2",
lastName:"Doe"
}</code></pre>

</body>
</html>

现在我将 <pre> 嵌套在 <code> 标签内，

<!DOCTYPE html>
<html>
<body>

<p>Code example:</p>
<code><pre>var person = {
firstName:"John2",
lastName:"Doe"
}</pre></code>

</body>
</html>

以上两种方式在技术上有什么区别吗？

附录：我也不明白这里的 html 代码是如何翻译的。在第一个版本中，代码标签内的文本应该被翻译成不保留额外的空格和换行符的内容，因此 pre 标签应该看到代码标签的输出并且不应该呈现额外的空格和换行符。

而在第二种情况下，前置标签的输出应该给代码标签。现在代码标签将看到保留的额外空格和换行符，但代码标签的输出不应该保留它们，因为代码标签就是这样做的；它放弃了额外的空格和换行符。

Answer 1

does the ordering of these tags matter? E.g. Are the following equivalent?

尽管两种方式的输出都是等价的，但是在编写有效和语义 html5 代码时，排序确实很重要

根据 html5 spec 关于 <pre> 元素：

Contexts in which this element can be used: Where flow content is expected.

而关于 the <code> element：

Contexts in which this element can be used: Where phrasing content is expected.

（短语内容是文档的文本，以及在 intra-paragraph 级别标记该文本的元素。（spec））

Would there be any technical difference between the above two approaches?

是的。在代码元素中嵌套 pre 元素无效 html5（使用 this validator）并产生错误：

Error: Element pre not allowed as child of element code in this context.

Answer 2

Stack Overflow 将它用于多行代码：

<pre>
    <code>something</code>
</pre>

code标签使用固定宽度的字体，而pre标签额外保留白色space和换行符。 code 标签代表计算机代码，而 pre 标签基本上可以包含任何内容（code 标签中的计算机代码，还有一些格式良好的文本或一些 ASCII 图片等）。

Answer 3

关于您的评论

What I don't get is in <pre><code>something something</code></pre> The text inside code tags is translated into something which doesn't contain white spaces and line breaks then how does the pre tags preserve the white spaces and line breaks?

除了@Danield 的精彩解释之外，这里还有一个示例显示 pre 标记确实保留了空格和换行符。

<div>
  <p>PRE/CODE example:</p>
  <pre>
    <code>
    var person = {
firstName:"John2",
lastName:"Doe"
}  
    </code>
  </pre>
</div>

更多阅读：

What is difference between <pre> and <code> HTML Tag?
<code> vs <pre> vs <samp> for inline and block code snippets
Why does HTML5 recommend putting the code element inside pre?

Answer 4

为html elements in general, there are 2 major groups, inline elements，例如

<span> <code> <a> <img> <b>

和block elements

<div> <pre> <p> <h1> <ul>

要嵌套valid，一个块元素可以包含

一个内联元素
一个块元素

并且内联元素可以包含

一个内联元素

也有例外，但我不会在这里提及。

此外，如果将块元素放在行内，它通常仍会显示相同的输出。
为什么？ ... 大多数浏览器会尝试解释所做的事情并尝试 "fix it and make it work anyway".

所以回答你的问题

does the ordering of these tags matter?

是的，一般情况下，内联元素中不允许块元素，但也可能有其他原因和例外。

关于您的问题（评论）

Which is translated first? The code inside <code> or the <pre> tags are given higher priority?

简而言之，内部元素的属性设置时，无论是显式的还是预定义的，都会覆盖外部元素的相等属性.

因此，在您的情况下，pre 元素的 white-space property is set, as default, to white-space: pre and as the white-space property is inherited 默认情况下，code 使用该值，因此输出看起来与 pre 元素相同.

但是如果我们在 code 元素上显式设置 white-space 属性，它的行为将如您所料，没有换行等。

#reset code {
  white-space: normal;
}

<div>
  <p>Example: inheritence of property</p>
  <pre>
    <code>
    var person = {
firstName:"John2",
lastName:"Doe"
}  
    </code>
  </pre>
</div>

<hr>

<div id="reset">
  <p>Example: explicit set property</p>
  <pre>
    <code>
    var person = {
firstName:"John2",
lastName:"Doe"
}  
    </code>
  </pre>
</div>

Web 浏览器如何翻译 html 中的嵌套标签以及嵌套标签的顺序如何处理？

How are nested tags in html translated by web browsers and how does order of nesting tags in matter?

html

pre