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

Question

HTML5文档建议将code元素放在pre元素中，但是我不明白这比仅使用代码元素和CSS更好或更语义。在他们自己的示例中：

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

也可以这样写（对的浏览器默认值做出一些假设pre）：

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

即使pre是有区分代码 块 从代码内联串，我不认为它是一个更语义选择，而不是指定 块岬 的code一类。

是否有pre通过CSS解决方案推荐的特定原因？

Answer 1

<code>只代表 “计算机代码片段” 。它最初被认为是用于诸如i++或的简单代码段<code>。

<pre> “表示一块预格式化的文本，其中结构由印刷约定而不是元素表示” 。它的原始目的无非就是这个：以作者指定的方式提供文本，例如

+ ---------------------------------- +
| |
| 警告！预先准备好的文字！| = o =
| __; 〜^
+ ---------------- TT ------------°
                 || _____________ _____________________
                 || | 对格兰德> | 完全不是陷阱>
  oÖo|| |°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°          
   | ö|| | | .mm，                    
〜“”“〜”“ ~~”“〜”“”〜“”“〜”“ ~~”“”〜“”“〜”“”〜“”〜“”〜“”〜“ “”“〜”“”〜“”〜“” .. MWMWc ...〜“”“〜”“

您无需彼此使用。<pre>有自己的作用，就像<code>有自己的作用。但是，这<pre>是一种信号，表明给定片段中的空白很重要，<code>而缺少该角色。

但是，回到您的问题：请注意 确切的 措辞：

下面的示例示出了如何一个代码块 可以 使用被标记pre和code元素。

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

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

它说 可以 ，不 应该 。您可以按自己的意愿随意执行此操作。W3C不建议以任何方式使用它，但是，我个人建议您使用<pre><code>...。

进一步说明

只要空格是您的代码和代码结构的一部分，就应声明应保留此结构。由于代码的结构是由印刷约定（制表符，换行符，空格）给出的，因此我 个人
建议您使用<pre><code>，即使它可以说是更多的代码和DOM中的另一个节点。但是，每当缺少空白会导致您的代码不完善时，就必须这样做。

除此之外，您无需检查即可轻松地在内联代码和代码块之间进行区分element.className，并且某些JS语法突出显示工具可以很好地工作<pre><code>...并<code>自动删除。

另外，如果您对<code>with 使用通用规则white- space:pre;，那么在没有其他类的情况下，不能将其用于内联代码段。如果您要创建一个班级，那么与相比，您将一无所获<pre><code>。