如何在网页上显示HTML片段，而不需要将每个<替换为<>和>?
换句话说，是否有一个标记表示在点击结束标记之前不呈现HTML ?
当前回答
这是一种hack，但是我们可以使用类似的东西:
正文脚本{ 显示:块; 字体类型:等宽字体; 空白:前; ｝ <脚本type = " text / html " > <标题> Hello World h1 > < / < ul > <li>享受这个狡猾的黑客， <李>或不! < / ul > > < /脚本
使用该CSS，浏览器将在主体中显示脚本。它不会尝试执行这个脚本，因为它有一个未知的类型text/html。在<script>中没有必要转义特殊字符，除非你想包含一个结束</script>标记。
我正在使用类似这样的东西在页面主体中显示可执行的JavaScript，这是一种“有文化的编程”。
在这个问题中还有更多的信息，标签什么时候应该可见，为什么可以?
其他回答
一种简单的方法来显示代码将包括它在一个文本区域和添加禁用属性，所以它是不可编辑的。
<textarea disabled> code </textarea>
希望这能帮助那些寻找简单方法完成工作的人。
但是警告，这不会为你转义标签，正如你在这里看到的(下面显然是行不通的):
textarea残疾> < 这是创建textarea的代码: textarea > < textarea > < / textarea > < /
//To show xml tags in table columns you will have to encode the tags first
function htmlEncode(value) {
//create a in-memory div, set it's inner text(which jQuery automatically encodes)
//then grab the encoded contents back out. The div never exists on the page.
return $('<div/>').text(value).html();
}
html = htmlEncode(html)
示例1:
<pre>
This text has
been formatted using
the HTML pre tag. The brower should
display all white space
as it was entered.
</pre>
示例2:
<pre>
<code>
My pre-formatted code
here.
</code>
</pre>
示例3: (如果你实际上是在“引用”一段代码，那么标记应该是)
<blockquote>
<pre>
<code>
My pre-formatted "quoted" code here.
</code>
</pre>
</blockquote>
如果你的目标是显示你在同一页面的其他地方执行的代码块，你可以使用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中那样重新格式化。(比如 在文本区域中完全删除)
你可以使用像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>
