Html 为什么 HTML5 建议将 code 元素放在 pre 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11742907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does HTML5 recommend putting the code element inside pre?
提问by kojiro
The HTML5 documentation recommendsputting the codeelement inside the preelement, but I don't understand how this is better or more semantic than just using the code element and CSS. In their own example:
HTML5 文档建议将code元素放在元素内pre，但我不明白这比仅使用代码元素和 CSS 更好或更具有语义。在他们自己的例子中：
<pre><code class="language-pascal">var i: Integer;
begin
i := 1;
end.</code></pre>
Could also be written (Making some assumptions about the browser's defaults for pre):
也可以写成（对浏览器的默认值做一些假设pre）：
<style>
code {
display: block;
white-space: pre;
}
</style>
…
<code class="language-pascal">var i: Integer;
begin
i := 1;
end.</code>
Even if the preis there to distinguish a code blockfrom an inline string of code, I don't see it being a more semantic choice than specifying the block-nessof the codein a class.
即使pre是有区分代码块从代码内联串，我不认为它是一个更语义选择，而不是指定块岬的code一类。
Is there a specific reason the preis recommended over a CSS solution?
是否有特定原因pre推荐使用 CSS 解决方案？
回答by Zeta
<code>represents only a "fragment of computer code". It was originally thought for simple code snippets like i++or <code>.
<code>仅代表一个“计算机代码片段”。它最初被认为是用于简单的代码片段，例如i++or <code>。
<pre>"represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements". It's original purpose was nothing more than exactly this: provide a text in the same way it was given by the author, e.g.
<pre>“代表一块预先格式化的文本，其中的结构由排版约定而不是由元素表示”。它的原始目的无非就是这样：以作者给出的相同方式提供文本，例如
+----------------------------------+
| |
| WARNING! PREFORMATED TEXT AHEAD! | =o=
| __; ~^
+----------------TT------------°
|| _____________ _____________________
|| | TO GRANDMA > | TOTALLY NOT A TRAP >
o?o || |°°°°°°°°°°°° °°°°°°°°°°°°°°°°°°°°°
| ? || | | .mm,
~"""~"""~"""~"""~"""~"""~~"""~"""~"""~"""~"""~"""~"""~"""~"""~""..MWMWc...~"""~""
You don't need to use each with each other. <pre>has its own roles, like <code>has its own. However, <pre>is a way to signalize that the white-space in the given fragment is important, a role that <code>is missing.
你不需要互相使用。<pre>有自己的角色，就像<code>有自己的角色。然而，<pre>是一种表示给定片段中的空白很重要的方法，这<code>是一个缺失的角色。
However, back to your question: note the exactwording:
但是，回到您的问题：注意确切的措辞：
The following example shows how a block of code couldbe marked up using the
preandcodeelements.<pre><code class="language-pascal">var i: Integer; begin i := 1; end.</code></pre>A class is used in that example to indicate the language used.
下面的示例示出了如何一个代码块可以使用被标记
pre和code元素。<pre><code class="language-pascal">var i: Integer; begin i := 1; end.</code></pre>该示例中使用了一个类来指示所使用的语言。
It says could, not should. You're free to do this how you want. It's not recommended by the W3C in any way, however, I personally recommend you to use <pre><code>....
它说可以，不应该。您可以随意执行此操作。W3C 不以任何方式推荐它，但是，我个人建议您使用<pre><code>....
Further explanation
进一步说明
Whenever white-space is part of your code and the structure of your code, you should state that this structure should be kept. As the structure in code is given by typographic conventions (tabs, linefeeds, spaces) I personallyrecommend you to use <pre><code>, even if it's arguably more code and another node in the DOM. But whenever missing white-space will render your code imperfect it's necessary.
每当空白是您的代码和代码结构的一部分时，您应该声明应该保留该结构。由于代码中的结构是由排版约定（制表符、换行符、空格）给出的，我个人建议您使用<pre><code>，即使它可以说是更多的代码和 DOM 中的另一个节点。但是每当缺少空格会使您的代码不完美时，这是必要的。
Apart from that you can easily differ between inline code and code-blocks without checking element.className, and some JS syntax highlighter work pretty well with <pre><code>...and strip the <code>automatically.
除此之外，您可以轻松区分内联代码和代码块而无需检查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>.
此外，如果您对<code>with使用一般规则white-space:pre;，则不能将其用于没有附加类的内联代码段。如果您要创建一个类，与<pre><code>.
References
参考
W3C: HTML5: 4.5.12 The code element(W3C Recommendation 28 October 2014)
The
codeelement representsa 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
preelement representsa block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
W3C：HTML5：4.5.12 代码元素（W3C 建议 2014 年 10 月 28 日）
该
code元素表示一段计算机代码。这可以是 XML 元素名称、文件名、计算机程序或计算机可以识别的任何其他字符串。W3C：HTML5：4.4.3 pre 元素（W3C 建议 2014 年 10 月 28 日）
所述
pre元件代表预格式化的文本块，其中结构是由印刷约定而不是由元素表示。
回答by Quentin
CSS is for presentation.
CSS 用于演示。
White space is significant (not presentational) in many programming languages.
在许多编程语言中，空格很重要（不是表示性的）。
回答by Prashobh
To represent a block of computer code, the pre element can be used with a code element;
为了表示一个计算机代码块，pre 元素可以与 code 元素一起使用；
To represent a block of computer output the pre element can be used with a samp element.
为了表示计算机输出块，可以将 pre 元素与 samp 元素一起使用。
<pre><code>for block code that must not wrap.
Use <code>for inline code that can wrap.
<pre><code>对于不能换行的块代码。使用<code>内联代码，可以换。
Line breaks and white spaces in the text enclosed within the <pre>tags is maintained as it is in the html document when displays on the browser.Browsers normally render <pre>text in a fixed-pitched font, with whitespace.
<pre>当在浏览器上显示时，标签中包含的文本中的换行符和空格保持在 html 文档中的状态。浏览器通常<pre>以固定间距的字体呈现文本，带有whitespace.
回答by Ghost
<pre>shows line breaks!
<pre>显示换行符！
This prevent you using php function such as nl2br() or adding manually <br />at every line end.
这可以防止您使用诸如 nl2br() 之类的 php 函数或<br />在每一行末尾手动添加。
Regards, Ghost
问候，幽灵
