<code> vs <pre> vs <samp>用于内联代码和块代码片段

335

我的网站将有一些内联代码（“使用foo()函数时...”）和一些代码段。这些通常是XML，并且行很长，我希望浏览器将它们包装起来（即，我不想使用<pre>）。我还想将CSS格式放在块片段上。

似乎我不能同时使用<code>两者，因为如果将CSS块属性（带有display: block;）放在上面，它将破坏内联代码段。

我很好奇人们在做什么。使用<code>的块，<samp>内联？使用<code><blockquote>还是类似的东西？

我想使实际的HTML尽可能简单，避免使用类，因为其他用户将维护它。

html  semantic-markup 
— 史蒂夫·贝内特
source
3
使用Google Chrome浏览器并查看Rick Strahl的博客： weblog.west-wind.com/posts/2016/May/23/…， 然后使用他的样式表属性。他的代码段非常干净，易于复制/阅读。
— JoshYates1980 '16
1
<pre>它的行为可以被牢记为“精确”一词
— snr

Answers:

351

使用<code>内联代码可以包装和<pre><code>块代码不能换行。<samp>是用于示例输出的，因此我将避免使用它来表示示例代码（读者要输入）。这就是堆栈溢出的作用。

（更好的是，如果您希望易于维护，让用户以Markdown的形式编辑文章，则不必记住使用<pre><code>。）

HTML5在“ pre元素”中对此表示赞同：

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

可以使用pre元素的一些示例：

  • 包括计算机代码片段，其结构根据该语言的约定进行指示。

[…]

为了表示一个计算机代码块，pre元素可以与code元素一起使用；为了表示计算机输出的一个块，pre元素可以与samp元素一起使用。类似地，可以在pre元素内使用kbd元素来指示用户要输入的文本。

在以下代码段中，提供了一个计算机代码示例。

<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>
— 乔希·李
source
8
这也许是正确的方法，但我仍然认为这很愚蠢。HTML开发人员预见了对<code>标记的需求，但是决定我们只写一行吗？或者我猜是因为他们不想拥有两个标签，一个块和一个内联？仍然... <code>用CSS 进行块级处理有什么问题？我以为我们应该编写“语义” HTML。<code>是很好的语义，但<pre>没有那么多。
— mpen 2011年
11
我不同意。预格式化文本的反义词只是文档中的普通旧文本。制作<code>块级与CSS是unsemantic。在HTML5中建议使用这种方式。
— Josh Lee
1
问题<pre>在于它也会修改空白处理：保留所有空格，并关闭包装。除非有办法将其关闭？
— 史蒂夫·本内特
3
@Steve Bennett，在CSS中white-space: normal;尽管我看不到为什么要对代码执行此操作。这<pre><code>件事也是愚蠢的，<pre>正如@jleedev所提到的，标签在标准中非常清楚地定义为“计算机代码”（及其他内容）。是因为您认为这<code>是一个更好的名字吗？抱歉，这并没有使其更具语义。标签也有类似的情况<address>，它听起来并不像是“作者”，但是标准说的就是它的用途，所以是。
— srcspider 2011年
6
-1。OP的中心问题是如何完成包装的代码段。您已经解决了内联代码以及不得包装的块代码，但这并未解决OP的主要问题。
— Asad Saeeduddin
80

我完全想念的东西：的非包装行为<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>&lt;code&gt;</code> tag.

<pre>
Here's a very long pre-formatted formatted using the &lt;pre&gt; 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>
展开摘要

http://jsfiddle.net/9mCN7/

— 史蒂夫·贝内特
source
41

我个人会使用，<code>因为这在语义上是最正确的。然后要区分内联代码和块代码，我可以添加一个类：

<code class="inlinecode"></code>

用于内联代码或：

<code class="codeblock"></code>

用于代码块。取决于哪个不太常见。

— slebetman
source
是的，我也开始这样认为。我确实要求一种不带类的解决方案，但是看起来好像没有一个好的解决方案。
— 史蒂夫·本内特
3
@Steve：最主要的是<code>为最常见的用例定义一个没有类的默认块。然后，任何想做不常见的事情的人都只需添加类。以任何其他方式执行操作仍会要求用户键入多余的内容。这样，用户可以将其视为添加特殊标签，而不是使用完全不同的结构。
— slebetman 2011年
17

对于常规的内联<code>使用：

<code>...</code>

在<code>需要封锁的每个地方使用

<code style="display:block; white-space:pre-wrap">...</code>

或者，<codenza>为中断衬块定义标签<code> （无类）

<script>
</script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>`

测试：（注意：以下是使用data:URI协议/方案的脚本，因此在保存和粘贴到URL栏中进行测试时，%0Anl格式代码是必不可少的 -因此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 &lt;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>
— 依金
source
14

使用（过时）标签按原样显示HTML代码<xmp>：

<xmp>
<div>
  <input placeholder='write something' value='test'>
</div>
</xmp>
展开摘要

令人遗憾的是，此标签已被弃用，但它仍可在浏览器上使用，它是一个糟糕的标签。无需在其中逃脱任何东西。太高兴了！

使用标签按原样显示HTML代码<textarea>：

<textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
  <input placeholder='write something' value='test'>
</div>
</textarea>
展开摘要

— 垂直同步
source
我肯定会丢失一些东西，但是显然，这是我发现的唯一一种在WordPress / PHP模板中显示原始HTML代码（用于调试目的）的方法……
— sphakka
@sphakka（＆vsync），在这里查看我的答案，建议使用<textarea readonly>相同的功能，是最新的，并且如果您愿意，可以进行更多控制。
— www-0av-Com
@ user1863152-这是对textarea恕我直言的非常不好的用法，因为该代码无法通过外部脚本（例如Prism）突出显示。而且，它不适合内容的高度和宽度，就像<xmp>不适合任何其他block元素一样。我不建议将其作为一种真正的解决方案，而只是作为一种理论上的解决方案。
— vsync
@vsync，是的，它是课程必不可少的东西（我给了你一个赞誉）。我根据需要使用textarea。我尝试了xmp，不记得为什么我发现xmp不能满足我的需求。当然，它的过时地位肯定会令人沮丧。当需要突出显示和使用CODE进行内联使用时，可以使用PRE。我无法想象Prism如何在XMP中突出显示-一些CSS向导？
— www-0av-Com，
我对此不太确定。是的，它可以工作，但是从3.2起已弃用，而在5中已完全删除？尽管没有很多标记已从浏览器中完全删除（仅举<blink>一个例子），但我担心将其用于需要面向未来的一切。
— spacer GIF
9

考虑TextArea

人们通过谷歌找到这一点，并寻找更好的方法来管理他们的片段的显示也应该考虑<textarea>这给了很多在宽度/高度控制，滚动等注意到@vsync提到的过时的标签<xmp>，我觉得<textarea readonly>是一个很好的替代品用于显示HTML，而无需转义其中的任何内容（</textarea>可能出现在其中的位置除外）。

例如，要显示具有受控制的换行符的单行，请考虑<textarea rows=1 cols=100 readonly> html或其他带有制表符和CrLf的字符 </textarea>。

<textarea rows=5 cols=100 readonly>Example text with Newlines,
tabs & space,
  html tags etc <b>displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</textarea>
展开摘要

比较所有...

<h2>Compared: TEXTAREA, XMP, PRE, SAMP, CODE</h2>
<p>Note that CSS can be used to override default fixed space fonts in each or all these.</p>
    
    
<textarea rows=5 cols=100 readonly>TEXTAREA: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;</textarea>

<xmp>XMP: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; (&) will not act as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</xmp>

<pre>PRE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</pre>

<samp>SAMP: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</samp>

<code>CODE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</code>
展开摘要

— www-0av-Com
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.