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

小编典典

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

html

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

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

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

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

阅读 363

2020-05-10

共1个答案

小编典典

使用<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>

2020-05-10