<code> vs <pre> vs <samp>用于内联和块代码片段
我的网站将有一些内联代码（“当使用foo()函数…”）和一些块摘录。 这些往往是XML，并有很长的行，我更喜欢浏览器包装（即，我不想使用<pre> ）。 我也想把CSS格式的块代码片断。
似乎我不能使用<code> ，因为如果我把CSS块属性（与display: block; ），它将打破内联片段。
我很好奇人们在做什么。 使用<code>代替块， <samp>代替inline？ 使用<code><blockquote>或类似的东西？
我想保持实际的HTML尽可能简单，避免类，因为其他用户将维护它。
使用<code>作为可以包装的内联代码，使用<code> <pre><code>作为不能包装的代码块。 <samp>用于输出样本，所以我将避免使用它来表示样本代码（读者将input ）。 这是Stack Overflow所做的。
（更好的是，如果你想容易维护，让用户编辑为Markdown的文章，那么他们不必记得使用<pre><code> 。）
HTML5在“ pre元素”中同意这一点：
pre元素表示一个预先格式化的文本块，其中结构由印刷惯例而不是元素表示。
一些可以使用pre元素的例子：
- 包括计算机代码的片段，其结构按照该语言的惯例表示。
[…]
为了表示一个计算机代码块，pre元素可以和一个代码元素一起使用; 为了表示计算机输出块，pre元素可以与samp元素一起使用。 类似地，可以在pre元素内使用kbd元素来指示用户将要input的文本。
在下面的代码片段中，提供了一个计算机代码示例。
<p>This is the <code>Panel</code> constructor:</p> <pre><code>function Panel(element, canClose, closeHandler) { this.element = element; this.canClose = canClose; this.closeHandler = function () { if (closeHandler) closeHandler() }; }</code></pre>
我完全错过了： <pre>的非包装行为可以用CSS来控制。 所以这给了我正在寻找的确切结果：
code { background: hsl(220, 80%, 90%); } pre { white-space: pre-wrap; background: hsl(30,80%,90%); }
Here's an example demonstrating the <code><code></code> tag. <pre> Here's a very long pre-formatted formatted using the <pre> tag. Notice how it wraps? It goes on and on and on and on and on and on and on and on and on and on... </pre>
就个人而言，我会使用<code>因为这是最正确的。 然后为了区分内联代码和分块代码，我会添加一个类：
<code class="inlinecode"></code>
对于内联代码或者：
<code class="codeblock"></code>
代码块。 取决于哪个不太常见。
对于正常的内联<code>使用：
<code>...</code>
并为每个需要阻止<code>的地方使用
<code style=display:block;white-space:pre-wrap>...</code>
或者，定义一个<codenza>标签作为break lining block <code> （没有类）
<script> </script> <style> codenza, code {} /* noop mnemonic aide that codenza mimes code tag */ codenza {display:block;white-space:pre-wrap} </style>`
testing：（注意：以下是使用data: URI协议/scheme的scURIple，因此%0A nl格式代码在剪切并粘贴到URL栏以进行testing时非常重要 ，所以view-source: （ ctrl – U ）看起来不错， 每一行都在%0A ）
data:text/html;charset=utf-8,<html > <script>document.write(window.navigator.userAgent)</script> <script></script> <style> codenza, code {} /* noop mnemonic aide that codenza mimes code tag */ codenza {display:block;white-space:pre-wrap} </style> <p>First using the usual <code> tag <code> %0A function x(arghhh){ %0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)" %0A } </code> and then <p>with the tag blocked using pre-wrapped lines <code style=display:block;white-space:pre-wrap> %0A function x(arghhh){ %0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)" %0A } </code> <br>using an ersatz tag <codenza> %0A function x(arghhh){ %0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)" %0A } </codenza> </html>
使用（过时的） <xmp>标签按原样显示HTML代码：
<xmp> <input placeholder='write something' value='test'> </xmp>
<xmp> <input placeholder='write something' value='test'> </xmp>
