如何在 html 页面中展示 html 代码？ [复制]答案

【问题标题】：How do you showcase html code within a html page? [duplicate]如何在 html 页面中展示 html 代码？ [复制]
【发布时间】：2020-06-13 21:21:26
【问题描述】：

当我这么说的时候，我的意思是我如何让一段特定的代码不作为实际网站的一部分显示，而是作为演示给其他人看？

【问题讨论】：

这能回答你的问题吗？ How to show <div> tag literally in <code>/<pre> tag?

标签： html

【解决方案1】：

有多种方法可以做到这一点

你可以使用<pre></pre>标签

<pre>
   your-code
</pre>

使用特殊的<code>标签

<pre>
  <code>
    your-code
  </code>
</pre>

您可能希望在

<![CDATA[<your-code>]]>

使用任何语法高亮库，例如prettify 或 syntaxhighlighter

【讨论】：

【解决方案2】：

你必须使用：

<pre> - 用于显示 html 文本的预格式化标签
&lt; - 小于标记代替代码中的标记
&gt; - 大于代码中的 > 标记。

即&lt;div&gt; 应替换为&lt;div&gt;

简单的例子

<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;

&lt;h1&gt;The code element&lt;/h1&gt;

&lt;p&gt;The HTML &lt;code&gt;button&lt;/code&gt; tag defines a clickable button.&lt;/p&gt;

&lt;p&gt;The CSS &lt;code&gt;background-color&lt;/code&gt; property defines the background color of an element.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

【讨论】：

【解决方案3】：

<pre>
<code>
you code here 
</code>
</pre>

【讨论】：