我很久以前用过这个，它对我很有用，我希望它也能帮助到你。

var preTag = document.querySelectorAll（'pre'）; console.log（preTag.innerHTML）; for （var i = 0; i < preTag.length; i++） { var pattern = preTag[i].innerHTML; pattern = pattern.replace（/&lt;/g， “&lt;”）.replace（/&gt;/g， “&gt;”）; 控制台.log（模式）; preTag[i].innerHTML = pattern; } <pre> <p>例</p> <span>更多文字</span> </pre>

您可以通过将标记更改为span来分隔它们。

是这样的:

< span > < < / span > < !- h1的左括号-> < span > h1 > < / span > < !——h1的开始标签在这里完成——> < span > < / span > <你好!——text to print——> < span > < < / span > < !——h1标签的括号在这里——> < span > / h1 > < / span > < !——h1标签结束于此——>

而且，你可以只把<(左尖括号)加到span上

< span > < < / span > < !- h1的左括号-> h1 > < !——h1的开始标签在这里完成——> 你好< !——text to print——> < span > < < / span > < !——h1标签的括号在这里——> / h1 > < !——h1标签结束于此——>

已废弃的<xmp>标记实际上就是这样做的，但它不再是XHTML规范的一部分。尽管它在当前所有浏览器中仍然有效。

这里有另一个想法，一个hack/parlor trick，你可以把代码放在一个文本区域，像这样:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

将尖括号和这样的代码放在文本区域内是无效的HTML，在不同的浏览器中会导致未定义的行为。在Internet Explorer中，HTML是解释的，而Mozilla、Chrome和Safari则不解释。

如果你想要它是不可编辑的，看起来不同，那么你可以很容易地使用CSS样式。唯一的问题是浏览器会在右下角添加一个小的拖动句柄来调整方框的大小。或者，尝试使用input标记。

正确的方式注入代码到你的文本区域是使用服务器端语言，比如PHP:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

然后，它绕过html解释器，并在所有浏览器中一致地将未解释的文本放入文本区域。

除此之外，如果使用静态HTML，唯一的方法是自己转义代码，如果使用这种技术，则使用服务器端方法，如。net的HtmlEncode()。

行之有效的HTML方法:

将&字符替换为& 将<字符替换为&lt; 将>字符替换为&gt; 可以选择用<pre>和/或<code>标记包围HTML示例。

它可能并不适用于所有情况，但将代码片段放在文本区域内将它们显示为代码。

如果你不想让它看起来像一个实际的文本区域，你可以用CSS样式文本区域。

这是目前为止在大多数情况下最好的方法:

<pre><code>
    code here, escape it yourself.
</code></pre>

我会投票给第一个提出这个建议的人，但我没有名气。为了那些试图在网上找到答案的人，我不得不说些什么。