为什么HTML5建议将代码元素放在pre中？

将

code

元素放在

pre

元素中，但我不明白这比仅使用code元素和CSS更好或更具语义。在他们自己的例子中：

即使

pre

用于区分代码块和内联代码字符串，我也不认为它比在类中指定

code

的块度更具语义

---

在CSS解决方案中建议使用

pre

有什么具体原因吗？

CSS用于演示

---

在许多编程语言中，空格是重要的（不是表示性的）。

为了表示一块计算机代码，pre元素可以与code元素一起使用

---

为了表示计算机输出块，pre元素可以与samp元素一起使用

用于不能包装的块代码。
对于可以包装的内联代码，请使用

标记中包含的文本中的换行符和空格在浏览器上显示时会保持html文档中的状态。浏览器通常以固定间距字体呈现
文本，其中
空格显示换行符

这会阻止您使用诸如nl2br（）之类的php函数或在每行末尾手动添加


问候,，
Ghost只代表“计算机代码片段”。它最初被认为是用于像
i++
或
这样的简单代码片段



该示例中使用了一个类来指示所使用的语言

它说可以，不应该。你可以随心所欲地做这件事。W3C并不以任何方式推荐它，但是，我个人建议您使用
…

进一步解释
当空白是代码和代码结构的一部分时，您应该声明应该保留此结构。由于代码中的结构是由排版惯例（制表符、换行符、空格）给出的，我个人建议您使用
，即使它可能是更多的代码和DOM中的另一个节点。但是，每当缺少空格会导致代码不完美时，就有必要这样做

除此之外，您可以在不检查
元素的情况下轻松区分内联代码和代码块。className
，一些JS语法荧光笔可以很好地使用
..
并自动去除

另外，如果您将
的一般规则与
空白一起使用：pre，在没有其他类的情况下，不能将其用于内联代码段。如果您要创建一个类，那么与
相比，您将一无所获

工具书类

W3C：（W3C建议2014年10月28日）

code
元素是一段计算机代码。这可以是XML元素名、文件名、计算机程序或计算机可以识别的任何其他字符串


W3C：（W3C建议2014年10月28日）

pre
元素预先格式化的文本块，其中结构由排版惯例而不是元素表示


因为
虽然应用了固定宽度字体，但它不会像
那样应用任何换行符。e、 g.将
应用于格式化代码将破坏格式化。在
的原始定义中，这有点疏忽，现在为了向后兼容，我们不得不使用它。文档没有“推荐”它，它只是作为一个示例显示。“[示例]显示了如何使用
pre
和
code
元素标记代码块。”@MarcB我认为这不是疏忽。正如我在问题中所说，
code
对于内联代码字符串也很有用。但这并不能使
pre
成为比CSS更好的块格式解决方案在css片段中？@kojiro深呼吸，想象平静的蓝色海洋。另外，在
空白处添加破折号（
？：）还应该注意的是，即使在不需要空白的编程语言中（从技术上讲），为了便于人类阅读，也有必要使用空白。@FabianBarney，嗯。。。是的，我知道。这就是我所说的“…即使在编程语言中，也不需要空格…”。我从来没有说过任何编程语言在技术上都不需要空白。@bfrohs哦sry，我一开始误解了你+1因此，我应该使用
pre
标记来表示有大量空白的代码，而CSS则表示空白具有代表性的代码？这个答案让我想知道
到底是语义标记还是类似于
，
（即早期HTML版本的纯粹代表性遗留）。这并没有真正回答OPs的问题，那就是“为什么html5示例中会出现问题？”他问“是否有一个特定的原因建议使用pre而不是CSS解决方案？”据我所知，我回答了。这是一个经过深思熟虑的答案，但我会提出：那么我应该使用
pre
来处理带有大量空白的代码，如果空白是表示性的，那么CSS代表代码？当空白是代码和代码结构的一部分时，您应该声明应该保留此结构。由于代码中的结构是由排版惯例（制表符、换行符、空格）给出的，我个人建议您使用
，即使它可能是更多的代码和DOM中的另一个节点。（除此之外，你可以很容易地区分内联代码和块，一些JS语法highlighter只在
..
上工作，并自动去除
。+1如果你的目标是语义标记，我同意Zeta的建议，因为
意味着
<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

<style>
code {
    display: block;
    white-space: pre;
}
</style>
…
<code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code>

+----------------------------------+
|                                  |
| WARNING! PREFORMATED TEXT AHEAD! |                      =o=
|                               __;                                  ~^
+----------------TT------------°
                 ||    _____________    _____________________
                 ||    | TO GRANDMA  >  | TOTALLY NOT A TRAP  > 
  oÖo            ||    |°°°°°°°°°°°°    °°°°°°°°°°°°°°°°°°°°°          
   |  ö          ||    |                |      .mm,                    
~"""~"""~"""~"""~"""~"""~~"""~"""~"""~"""~"""~"""~"""~"""~"""~""..MWMWc...~"""~""
<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>