如何在网页上显示HTML片段，而不需要将每个<替换为<>和>?
换句话说，是否有一个标记表示在点击结束标记之前不呈现HTML ?
当前回答
您可以通过将标记更改为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标签结束于此——>
其他回答
一种简单的方法来显示代码将包括它在一个文本区域和添加禁用属性，所以它是不可编辑的。
<textarea disabled> code </textarea>
希望这能帮助那些寻找简单方法完成工作的人。
但是警告，这不会为你转义标签，正如你在这里看到的(下面显然是行不通的):
textarea残疾> < 这是创建textarea的代码: textarea > < textarea > < / textarea > < /
在HTML中有几种方法可以转义所有内容，但都不是很好。
或者你可以放入一个iframe来加载一个普通的旧文本文件。
如果你的目标是显示你在同一页面的其他地方执行的代码块，你可以使用textContent(它是纯js和良好的支持:http://caniuse.com/#feat=textcontent)
<div id="myCode">
<p>
hello world
</p>
</div>
<div id="loadHere"></div>
document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;
要在结果中获得多行格式，您需要在目标div上设置css样式“white-space: pre;”，并在每一行的末尾使用“\r\n”单独写入行。
这里是一个演示:https://jsfiddle.net/wphps3od/
与使用textarea相比，这种方法有一个优点:代码不会像在textarea中那样重新格式化。(比如 在文本区域中完全删除)
这是一个简单的技巧，我已经在Safari和Firefox中尝试过了
<code>
<span><</span>meta property="og:title" content="A very fine cuisine" /><br>
<span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>
它将显示如下:
你可以在这里现场观看
最终，最好的答案(尽管很烦人)是“转义文本”。
然而，有很多文本编辑器——甚至是独立的迷你实用程序——可以自动完成这项工作。所以如果你不想，你永远都不应该手动转义它(除非它是转义和未转义代码的混合…)
快速搜索谷歌会显示这个，例如:http://malektips.com/zzee-text-utility-html-escape-regular-expression.html
