Question

The HTML5 documentation recommends将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的-ness 。

是否有特定原因推荐pre而不是CSS解决方案？

Answer 1

<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>，即使它可以说是DOM中的更多代码和另一个节点。但是，每当缺少空格会使代码不完美时，这是必要的。

除此之外，您可以在不检查element.className的情况下轻松区分内联代码和代码块，并且某些JS语法高亮显示器可以与<pre><code>...很好地工作，并自动剥离<code>。 / p>

此外，如果您对<code> white-space:pre;使用<pre><code>的一般规则，则无法在没有其他类的情况下将其用于内联摘要。如果你要创建一个类，那么与code相比你没有赢得任何东西。

参考

W3C：HTML5: 4.5.12 The code element（W3C 2014年10月28日建议书）

pre元素represents计算机代码的一个片段。这可以是XML元素名称，文件名，计算机程序或计算机可识别的任何其他字符串。
W3C：HTML5: 4.4.3 The pre element（W3C 2014年10月28日建议书）

{{1}}元素represents预先格式化的文本块，其中的结构由排版约定而不是元素表示。

Answer 2

CSS用于演示。

许多编程语言中的空白区域非常重要（非表示性）。

Answer 3

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

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

<pre><code>表示不能换行的块代码。将<code>用于可以换行的内联代码。

在<pre>标签中包含的文本中的换行符和空格在浏览器上显示时保持在html文档中。浏览器通常以固定音调字体呈现<pre>文本，whitespace。

Answer 4

<pre>显示换行符！

这会阻止您使用nl2br（）等php函数或在每一行结束时手动添加<br />。

此致鬼

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

4 个答案:

进一步说明

参考