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

这些标签的排序是否重要？例如。以下是等效？

虽然输出在两个方面都是等价的，但在编写有效和语义的html5代码时的排序很重要

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

可以使用此元素的上下文：流内容的位置预期

而关于the <code> element：

可以使用此元素的上下文：措辞内容的位置预期

（措辞内容是文档的文本，以及在段落内标记该文本的元素。（spec））

上述两者之间是否存在技术差异？方法

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

错误：不允许元素作为元素代码的子元素上下文。

Answer 2

关于您的评论

我没有得到的是＆lt; pre＆gt;＆lt; code＆gt;什么东西＆lt; / code＆gt;＆lt; / pre＆gt; 代码标签内的文本被翻译成不具备的内容包含空格和换行符，那么预标签如何保留白色空格和换行符？

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

＆＃13;

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

＆＃13;

更多内容阅读：

Answer 3

对于html elements一般来说，有2个主要群组，inline elements，例如

＆LT;跨度＆GT; ＆lt; code＆gt; ＆lt; a＆gt; ＆LT; IMG＆GT; ＆LT b取代;

和block elements

＆LT; DIV＆GT; ＆lt; pre＆gt; ＆lt; p＆gt; ＆LT; H1＆GT; ＆LT; UL＆GT;

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

内联元素
块元素

并且内联元素可以包含

内联元素

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

另外，如果将一个块元素放在内联中，它通常仍会显示相同的输出为什么？ ...大多数浏览器都会尝试解释所做的事情，然后尝试修复它并使其正常工作＆＃34;。

所以回答你的问题

这些标签的排序是否重要？

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

关于你的问题（评论）

首先翻译了哪个？＆lt; code＆gt;里面的代码或者＆lt; pre＆gt;标签被赋予更高的优先级？

简短回答，内部元素的属性，设置时，无论是显式的还是预定义的，都会覆盖外部元素的相等属性。

因此，在您的情况下，pre元素的white-space属性默认设置为white-space: pre，white-space属性为{{3默认情况下，code使用该值，因此输出与pre元素的输出相同。

但是如果我们要在white-space元素上显式设置code属性，它将按照您的预期运行，没有换行符等。

＆＃13;

#reset code {
  white-space: normal;
}

＆＃13;

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

＆＃13;

Answer 4

Stack Overflow将它用于多行代码：

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

代码标签使用固定宽度字体，而pre标签另外保留空白和换行符。代码标签代表计算机代码，而预标签基本上可以包含任何东西（代码标签中的计算机代码，还有一些很好的格式化文本或一些ASCII图片等）。

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

4 个答案: