如何在网页上显示HTML片段，而不需要将每个<替换为<>和>?
换句话说，是否有一个标记表示在点击结束标记之前不呈现HTML ?
当前回答
已废弃的<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()。
其他回答
已废弃的<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()。
我很久以前用过这个，它对我很有用，我希望它也能帮助到你。
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（/</g， “<”）.replace（/>/g， “>”）; 控制台.log（模式）; preTag[i].innerHTML = pattern; } <pre> <p>例</p> <span>更多文字</span> </pre>
这是目前为止在大多数情况下最好的方法:
<pre><code>
code here, escape it yourself.
</code></pre>
我会投票给第一个提出这个建议的人，但我没有名气。为了那些试图在网上找到答案的人，我不得不说些什么。
是否有一个标签表示在点击结束标签之前不呈现HTML ?
不，没有。在HTML中，除了转义某些字符外，没有其他方法:
& as & < as <
(顺便说一句，没有必要转义>，但人们经常这样做是为了对称。)
当然，您应该将结果转义的HTML代码包围在<pre><code>…</code></pre>中，以(a)保留空格和换行符，并(b)将其标记为代码元素。
所有其他解决方案，如将代码包装到<textarea>或(已弃用)<xmp>元素，都会破坏1
向浏览器声明为XML的XHTML(通过HTTP Content-Type报头!-仅仅设置DOCTYPE是不够的)也可以使用CDATA部分:
<![CDATA[Your <code> here]]>
但这只适用于XML，而不适用于HTML，而且这也不是一个万无一失的解决方案，因为代码不能包含结束分隔符]]>。因此，即使在XML中，最简单、最健壮的解决方案也是通过转义。
1 .恰当的例子:
不;教室:100%;} < textarea readonly =“readonly > <p>电脑<textarea>说</textarea> <span>no.</span> < / textarea > < xmp > 计算机<xmp>说</xmp> <span>no.</span> < / xmp >
你可以使用像PHP这样的服务器端语言来插入原始文本:
<?php
$str = <<<EOD
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Minimal HTML5">
<meta name="keywords" content="HTML5,Minimal">
<title>This is the title</title>
<link rel='stylesheet.css' href='style.css'>
</head>
<body>
</body>
</html>
EOD;
?>
然后转储$str htmlencoded的值:
<div style="white-space: pre">
<?php echo htmlentities($str); ?>
</div>
