html - pre样式 - pre缩写




为什么HTML5建议将代码元素放在pre中? (3)

HTML5文档建议code元素放在pre元素中,但我不明白它是如何比使用代码元素和CSS更好或更具语义。 在他们自己的例子中:

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></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解决方案?


CSS用于演示。

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


<code>仅代表“计算机代码片段” 。 它最初被认为是简单的代码片段,如i++<code>

<pre> “表示预先格式化的文本块,其中结构由印刷约定而不是按元素表示” 。 它的最初目的仅仅是这个:提供与作者给出的文本相同的文本,例如

+----------------------------------+
|                                  |
| WARNING! PREFORMATED TEXT AHEAD! |                      =o=
|                               __;                                  ~^
+----------------TT------------°
                 ||    _____________    _____________________
                 ||    | TO GRANDMA  >  | TOTALLY NOT A TRAP  > 
  oÖo            ||    |°°°°°°°°°°°°    °°°°°°°°°°°°°°°°°°°°°          
   |  ö          ||    |                |      .mm,                    
~"""~"""~"""~"""~"""~"""~~"""~"""~"""~"""~"""~"""~"""~"""~"""~""..MWMWc...~"""~""

您不需要彼此使用。 <pre>有自己的角色,比如<code>有自己的角色。 但是, <pre>是一种表示给定片段中的空白区域很重要的方法,这是<code>缺失的角色。

但是,回到你的问题:注意确切的措辞:

以下示例显示了如何使用precode元素标记代码块。

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

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

它说可以 ,不应该 。 你可以随心所欲地做到这一点。 W3C不以任何方式推荐它,但是,我个人建议您使用<pre><code>...

进一步说明

每当空格是代码和代码结构的一部分时,您应该声明应保留此结构。 由于代码中的结构是由排版约定(制表符,换行符,空格)给出的,我个人建议您使用<pre><code> ,即使它可以说是DOM中的更多代码和另一个节点。 但是,每当缺少空格会使代码不完美时,这是必要的。

除此之外,您可以轻松地在内联代码和代码块之间进行element.className ,而无需检查element.className ,并且一些JS语法高亮显示器与<pre><code>...并自动剥离<code>

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

参考

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

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

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

    pre元素represents预格式化文本块,其中结构由印刷约定而不是元素表示。


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

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

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

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





code-formatting