foo()函数时...”）和一些代码段。这些通常是XML，并且行很长，我希望浏览器将其包装起来（即，我不想使用<pre>）。我还想将CSS格式放在块片段上。我似乎不能同时使用
<code>，因为如果我在上面放CSS块属性（带有display: block;），它将打破内联代码片段。我很好奇人们在做什么。将
<code>用于块，将<samp>用于内联？使用<code><blockquote>或类似的东西吗？我想使实际HTML尽可能简单，避免使用类，因为其他用户会维护它。
#1 楼
对于可以包装的内联代码，请使用<code>；对于不能包装的块代码，请使用<pre><code>。 <samp>用于示例输出，因此我避免使用它来表示示例代码（读者要输入）。这就是Stack Overflow的功能。（更好的是，如果您希望易于维护，让用户以Markdown的形式编辑文章，那么他们就不必记住使用
<pre><code>了。）HTML5同意在“
pre元素”中具有以下内容：pre元素代表预格式化文本的块，其中结构由印刷约定而不是元素表示。
可以使用pre元素的情况的一些示例：
包括计算机代码的片段，并根据该语言的约定指示结构。
[...]
为了表示一个计算机代码块，pre元素可以与code元素一起使用；为了表示计算机输出的一个块，pre元素可以与samp元素一起使用。同样，kbd元素可以在pre元素内使用，以指示用户要输入的文本。
在以下代码段中，提供了计算机代码示例。
<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>
评论
这也许是正确的方法，但我仍然认为这很愚蠢。 HTML开发人员预见到需要
标记，但是决定我们只写一行吗？或者我猜是因为他们不想拥有两个标签，一个块和一个内联？仍然...用CSS使块级有什么问题？我以为我们应该编写“语义” HTML。 很好并且具有语义，但是没那么多。
– mpen
2011年1月6日8:43
我不同意。预格式化文本的反义词只是文档中的普通旧文本。用CSS使块级是不语义的。在HTML5中建议使用这种方式。
–李Jo
2011年1月6日14:11
的问题是它也会修改空白处理：保留所有空格，并关闭包装。除非有办法将其关闭？
–史蒂夫·贝内特（Steve Bennett）
2011年1月8日23:55
@Steve Bennett，使用CSS空格：正常；尽管我看不到您为什么要为此编写代码。同样，这个 东西很愚蠢，在标准中非常清楚地将标记定义为@jleedev提到的“计算机代码”（和其他东西）。是否因为您认为是更好的名字？抱歉，这并没有使其更具语义。标签也有类似的情况，它听起来并不像是“作者”，但是标准说的就是它的用途，所以是。
–srcspider
2011-2-23在2:15
-1。 OP的中心问题是如何完成包装的代码段。您已经解决了内联代码以及不得包装的块代码，但这不能解决OP的主要问题。
–阿萨德·塞德丁（Asad Saeeduddin）
13年5月31日在0:51
#2 楼
我完全错过了一些东西：<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>
http://jsfiddle.net/9mCN7/
#3 楼
我个人会使用<code>，因为这在语义上是最正确的。然后，要区分内联代码和块代码，我可以添加一个类：<code class="inlinecode"></code>
用于内联代码，或者：
<code class="codeblock"></code>
用于代码块。取决于哪个不太常见。
评论
是的，我也开始这样认为。我确实要求一种不带类的解决方案，但看起来好像没有一个好的解决方案。
–史蒂夫·贝内特（Steve Bennett）
2011年1月8日23:57
@Steve：最主要的是定义默认的
块，而没有用于最常见用例的类。然后，任何想做不常见的事情的人都只需添加类。以任何其他方式执行操作仍会要求用户键入多余的内容。这样，用户可以将其视为添加特殊标签，而不是使用完全不同的结构。
– slebetman
2011年1月9日，0：19
#4 楼
对于普通的内联<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>`
测试：
（NB ：以下是利用
data: URI协议/方案的脚本，因此%0A nl格式代码对于保存至关重要，例如在将其剪切并粘贴到URL栏中进行测试时，因此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>
#5 楼
使用（过时的）<xmp>标签按原样显示HTML代码： <xmp>
<div>
<input placeholder='write something' value='test'>
</div>
</xmp>
很遗憾，此标签已被弃用，但它仍可在浏览器上使用，它是一个糟糕的标签。无需在其中逃脱任何东西。
使用
<textarea>标签按原样显示HTML代码： <textarea readonly rows="4" style="background:none; border:none; resize:none; outline:none; width:100%;">
<div>
<input placeholder='write something' value='test'>
</div>
</textarea>
评论
我肯定会丢失一些东西，但是显然，这是我发现的唯一一种在WordPress / PHP模板中显示原始HTML代码（用于调试目的）的方法...
– sphakka
17年4月2日在9:37
@sphakka（＆vsync），请参阅此处的答案，建议使用
评论
使用Google Chrome浏览器并查看Rick Strahl的博客：weblog.west-wind.com/posts/2016/May/23/…，然后使用他的样式表属性。他的代码段非常干净，易于复制/阅读。