67

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 解决方案？

4

4 回答 4

74

<code>仅代表“计算机代码片段”。它最初被认为用于简单的代码片段，例如i++or <code>。

<pre> “表示一个预先格式化的文本块，其中结构由排版约定而不是元素表示”。它的最初目的只不过是这样：以作者给出的相同方式提供文本，例如

+---------------------------------+
| |
| 警告！预先准备好的文本！| =o=
| __; ~^
+----------------TT------------°
                 || _____________ _____________________
                 || | 致奶奶 > | 完全不是陷阱 >
  哦哦|| |°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°          
   | ö || | | 。毫米，                    
~"""~"""~"""~""""~"""~"""~~""""~"""~"""~"""~"""~"""~ """~"""~"""~""..MWMWc...~"""~""

你不需要互相使用。<pre>有自己的角色，就像<code>有自己的角色一样。然而，<pre>这是一种表示给定片段中的空白很重要的方式，这<code>是一种缺失的角色。

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

下面的示例显示了如何使用and 元素标记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>。

Also, if you use a general rule for <code> with white-space:pre;, you cannot use it for inline snippets without additional classes. If you were to create a class instead, you've won nothing compared to <pre><code>.

References

  • W3C: HTML5: 4.5.12 The code element (W3C Recommendation 28 October 2014)

    The code element represents a fragment of computer code. This could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.

  • W3C: HTML5: 4.4.3 The pre element (W3C Recommendation 28 October 2014)

    The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

于 2012-07-31T15:08:29.080 回答
12

CSS 用于演示。

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

于 2012-07-31T14:58:00.730 回答
4

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

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

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

当在浏览器上显示时，标签中包含的文本中的换行符和空格将<pre>保持与 html 文档中的状态相同。浏览器通常<pre>以固定间距的字体呈现文本，使用whitespace.

于 2012-07-31T15:03:53.067 回答
0

<pre>显示换行符！

这可以防止您使用诸如 nl2br() 之类的 php 函数或<br />在每一行末尾手动添加。

问候， 幽灵

于 2012-07-31T15:06:19.873 回答