如何将代码作为纯文本

Question

<pre>
    <button>323</button> // I see button
</pre>

<code>
     <button>323</button>  // I see button
</code>

如何显示代码，即浏览器中的纯文本？

那么，一般来说，code和pre标签的目的是什么？

Answer 1

使用HTML实体（即将<替换为<，将<替换为>），如下所示：

<code>
    &lt;button&gt;323&lt;/button&gt;
</code>

同样使用<pre>：

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

Answer 2

对于应在浏览器中显示的代码，您需要分别使用<而不是<和>而不是>。这些被称为HTML entities，如@BenM所述。

以下是所有HTML实体的列表：http://dev.w3.org/html5/html-author/charref

查看此工作示例：

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

<code>
     &lt;button&gt;323&lt;/button&gt;
</code>

请注意<pre>保留缩进，而<code>不会。

来源：http://www.sitepoint.com/everything-need-know-html-pre-element/

<小时/> 您是否应该使用<pre>或<code>或其他内容？

读取：<code> vs <pre> vs <samp> for inline and block code snippets

Answer 3

<code>标记或<pre>标记在此处有效，但您需要使用代码来获取正确的字形。使用<pre>将保留您的格式（即前面的空格）。

<code>
    &lt;button&gt;323&lt;/button&gt;
</code>

或

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

详细说明：

<提供了<

>提供了>

Answer 4

尝试使用textarea元素并将disabled属性设置为true

textarea:disabled {
  min-width:200px;
  max-width:200px;
  min-height:50px;
  max-height:50px;
}

<textarea disabled="true">
  <button>323</button>
</textarea>