为什么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> "代表预先格式化的文本块,其中结构由排版约定而不是元素表示".它的最初目的只不过是这样:提供与作者给出的文本相同的文本,例如

+----------------------------------+
|                                  |
| 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>自动剥离.

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

参考

• W3C:HTML5:4.5.12代码元素(W3C Recommendation 2014年10月28日)

  该code元素代表计算机代码的一个片段.这可以是XML元素名称,文件名,计算机程序或计算机可识别的任何其他字符串.

• W3C:HTML5:4.4.3前要素(W3C建议2014年10月28日)

  所述pre元件代表预格式化的文本块,其中结构是由印刷约定而不是由元素表示.

Answer 2

CSS用于演示.

在许多编程语言中,空白是重要的(不是表示性的).