<code>仅表示 “计算机代码片段”。它最初被认为是用于简单的代码片段，如i++或<code>。
<pre>“表示预格式化文本块，其中结构由排版约定而不是元素”“表示。它最初的目的无非就是这个：以作者给出的相同方式提供文本，例如

+----------------------------------+
|                                  |
| WARNING! PREFORMATED TEXT AHEAD! |                      =o=
|                               __;                                  ~^
+----------------TT------------°
                 ||    _____________    _____________________
                 ||    | TO GRANDMA  >  | TOTALLY NOT A TRAP  > 
  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>...。

进一步说明

无论何时，只要空白是代码和代码结构的一部分，就应该声明应该保留这种结构。由于代码的结构是由排版约定（制表符，换行符，空格）给出的，我个人建议您使用<pre><code>，即使它可以说是更多的代码和DOM中的另一个节点。但是，当缺少空格会使代码不完美时，这是必要的。
除此之外，您可以轻松区分内联代码和代码块，而无需检查element.className，一些JS语法高亮器可以很好地与<pre><code>...配合使用，并自动剥离<code>。
此外，如果您对white-space:pre;使用<code>的通用规则，则不能将其用于没有附加类的内联代码段。如果您创建一个类，那么与<pre><code>相比，您将一无所获。

参考资料

• W3C：HTML5：4.5.12代码元素（W3C推荐标准2014年10月28日）

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

• W3C：HTML5：4.4.3 pre元素（W3C Recommendation 28 October 2014）

pre元素表示一个预先格式化的文本块，其中的结构由排版约定而不是元素表示。

CSS是用来表示的。
在许多编程语言中，白色是重要的（不是表示性的）。

为了表示一个计算机代码块，前元素可以与代码元素一起使用;
为了表示计算机输出的块，pre元素可以与samp元素一起使用。
<pre><code>表示不能换行的块代码。使用<code>作为可以换行的内联代码。
<pre>标签中的文本中的换行符和白色在浏览器上显示时保持与html文档中的相同。浏览器通常以固定间距的字体呈现<pre>文本，使用whitespace。

<pre>显示换行符！
这可以防止您使用php函数，如nl 2br（）或在每行末尾手动添加<br />。
问候，幽灵

<pre>成为显示预格式化文本的语义元素是其默认的white-space属性值：

white-space: pre;

如果出于某种原因需要覆盖它，那么使用<pre>就没有意义了，在标记中添加额外的元素是一种不好的做法。例如，如果您更喜欢 Package 长的代码字符串，则需要white-space: pre-wrap。在这种情况下，以下是如何处理内联代码和块代码：

code.block {
  display: block;
  white-space: pre-wrap;
  background: tan;
}

code:not(.block) {
  background: plum;
}

<code class="block">var i: Integer;
begin
   i := 1;
end.</code>

<p>The <code>code</code> element is enough.</p>

为了更清晰的标记，请将class用于站点中不太常见的用例：class="inline"或class="block"。