如何在网页上显示HTML片段，而不需要将每个<替换为<>和>?
换句话说，是否有一个标记表示在点击结束标记之前不呈现HTML ?
当前回答
如果您正在寻找与框架一起工作的解决方案。
const code = `
<div>
this will work in react
<div>
`
<pre>
<code>{code}</code>
</pre>
你可以用css给它一个漂亮的外观:
pre code {
background-color: #eee;
border: 1px solid #999;
display: block;
padding: 20px;
}
其他回答
这是目前为止在大多数情况下最好的方法:
<pre><code>
code here, escape it yourself.
</code></pre>
我会投票给第一个提出这个建议的人，但我没有名气。为了那些试图在网上找到答案的人，我不得不说些什么。
已弃用，但适用于FF3和IE8。
<xmp>
<b>bold</b><ul><li>list item</li></ul>
</xmp>
推荐:
<pre><code>
code here, escape it yourself.
</code></pre>
你可以使用像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>
<textarea ><?php echo htmlentities($page_html); ?></textarea>
对我来说很好。
“记住亚历山大的建议，这就是为什么我认为这是一个很好的方法”
如果我们只是尝试朴素的<textarea>，它可能并不总是工作，因为可能会关闭textarea标签，这可能会错误地关闭父标签，并在父文档上显示HTML源代码的其余部分，这看起来很尴尬。
使用htmlentities将所有适用的字符(如< >)转换为HTML实体，从而消除了任何泄漏的可能性。
这种方法可能有好处或缺点，也可能有更好的方法来实现相同的结果，如果是这样，请评论，因为我很想从中学习:)
我很久以前用过这个，它对我很有用，我希望它也能帮助到你。
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>
