在HTML中显示HTML代码段
Answers:
不，没有。在HTML适当的版本中，必须转义一些字符：
&如&<如<
（顺便说一句，没有必要逃脱，>但人们经常出于对称的原因而逃脱。）
当然，您应该将生成的，转义的HTML代码括<pre><code>…</code></pre>在其中（a）保留空格和换行符，并且（b）将其标记为代码元素。
所有其他解决方案，例如将代码包装到<textarea>或（不推荐使用）<xmp>元素中，都将中断。1个
向浏览器声明为XML的XHTML（通过HTTP Content-Type标头！-仅设置a DOCTYPE是不够的）可以替代地使用CDATA部分：
<![CDATA[Your <code> here]]>但这仅适用于XML，不适用于HTML，甚至也不是万无一失的解决方案，因为代码中不得包含结束定界符]]>。因此，即使在XML中，最简单，最可靠的解决方案是通过转义。
1个例子：
>为 >
<并且&需要替换，未转义>在HTML内有效。
&先处理<然后再处理。
最好的办法：
<xmp>
// your codes ..
</xmp>旧样本：
样本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>漂亮的CSS示例：
pre{
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
margin-bottom: 10px;
overflow: auto;
width: auto;
padding: 5px;
background-color: #eee;
width: 650px!ie7;
padding-bottom: 20px!ie7;
max-height: 600px;
}语法高亮代码（用于专业工作）：
彩虹 （非常完美）
最适合您的链接：
https://github.com/balupton/jquery-syntaxhighlighter
http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/
http://alexgorbatchev.com/SyntaxHighlighter/
一种简单的显示代码的方法是将其包括在textarea中，并添加disabled属性，使其不可编辑。
<textarea disabled> code </textarea>希望能帮助寻求简单方法完成工作的人。
已弃用 <xmp>标签实际上是这样做的，但不再是XHTML规范的一部分。尽管在所有当前的浏览器中，它仍然应该可以工作。
这是另一个想法，一个黑客/客厅的把戏，您可以将代码放在文本区域中，如下所示：
<textarea disabled="true" style="border: none;background-color:white;">
<p>test</p>
</textarea>将尖括号和类似的代码放在文本区域内是无效的HTML，并将在不同的浏览器中导致未定义的行为。在Internet Explorer中，HTML被解释，而Mozilla，Chrome和Safari则未解释。
如果您希望它不可编辑并且看起来不同，则可以使用CSS轻松设置其样式。唯一的问题是浏览器将在右下角添加该拖动控件以调整框的大小。或者，也可以尝试使用输入标签。
将代码注入到textarea中的正确方法是使用服务器端语言，例如以下PHP：
<textarea disabled="true" style="border: none;background-color:white;">
<?php echo '<p>test</p>'; ?>
</textarea>然后，它绕过html解释器，并在所有浏览器中一致地将未解释的文本放入文本区域。
除此之外，唯一的方法实际上是如果您使用静态HTML则自行转义代码，或者如果使用此类技术则使用.NET的HtmlEncode（）这样的服务器端方法。
<textarea disabled="true" style="border: none;background-color:white; width:100%">
我假设：
- 您想编写100％有效的HTML5
- 您想要将代码片段（几乎）文字放在HTML中
- 特别是
<不需要转义
- 特别是
您所有的选项都在此树中：
- HTML语法
- 有五种元素
- 那些被称为“正常元素”（例如
<p>）- 不能有文字
< - 它将被视为下一个标签或注释的开始
- 不能有文字
- 空元素
- 他们没有内容
- 您可以将HTML放入data属性中（但这对于所有元素都是如此）
- 需要JavaScript将数据移到其他地方
- 双引号的属性，
"并&thing;需要转义："和&thing;分别
- 原始文字元素
<script>而且<style>只有- 他们永远不会变得可见
- 但是将文本嵌入Javascript可能是可行的
- Javascript允许带有反引号的多行字符串
- 然后可以将其动态插入
</script不允许在任何位置使用文字<script>
- 可转义的原始文本元素
<textarea>而且<title>只有<textarea>是包装代码的不错选择</html>在那写是完全合法的</textarea由于明显的原因， 不合法是子字符串- 用
</textarea或类似的方法逃避这种特殊情况
- 用
&thing;需要转义：&thing;
- 异物
- MathML和SVG名称空间中的元素
- 至少SVG允许再次嵌入HTML ...
- 并且允许CDATA在那里，所以它似乎有潜力
- 使用XML语法
- 康拉德的答案涵盖了
注意：>永远不需要转义。即使在正常元素中也是如此。
<script>并且<style>可以呈现为可见，如果不希望将其作为JavaScript执行，只需将它们放在<body>with style="display: block; white-space: pre;"和“ type="text/html"或”之内。我认为这是一个很好的技巧，适合识字的编程和教学。同样<xmp>是在主流浏览器仍然执行，但它已被弃用。
<xmp>无效的HTML5，但您的其他技巧似乎很正确！
如果您的目标是显示要在同一页上其他位置执行的代码块，则可以使用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;要在结果中获得多行格式，您需要设置CSS样式“ white-space：pre;”。在目标div上，并在每行的末尾使用“ \ r \ n”分别编写各行。
这是一个演示：https : //jsfiddle.net/wphps3od/
与使用textarea相比，此方法有一个优点：代码不会像在textarea中那样重新格式化。（类似 的内容已在文本区域中完全删除）
<template>通常不呈现的或一起使用。
最终，最好的（尽管很烦人）答案是“转义文本”。
但是，有许多文本编辑器-甚至是独立的迷你实用程序-都可以自动执行此操作。因此，如果您不想这么做，则永远不必手动对其进行转义（除非它是转义代码和未转义代码的组合...）
快速的Google搜索向我显示了这一内容，例如：http : //malektips.com/zzee-text-utility-html-escape-regular-expression.html
<textarea ><?php echo htmlentities($page_html); ?></textarea>对我来说很好。
“记住Alexander's建议，这就是为什么我认为这是一个好方法”
如果我们只是简单地尝试，<textarea>它可能并不总是有效，因为可能有关闭textarea标记可能会错误地关闭父标记，并在父文档上显示HTML源代码的其余部分，这看起来很尴尬。
使用htmlentities会将所有适用的字符转换为< >HTML实体，从而消除了泄漏的可能性。
这种方法或获得相同结果的更好方法可能会有好处或不足，如果有的话，请发表评论，我很乐意向他们学习:)
您可以使用类似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;
?>然后转储$strhtmlencoded 的值：
<div style="white-space: pre">
<?php echo htmlentities($str); ?>
</div>
其实，有是一个办法做到这一点。它有局限性（一个），但是是100％标准的，不建议弃用（例如xmp），并且可以使用。
这是微不足道的。这里是：
<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
<script src="WidgetsLib/all.js"></script>
^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>请让我解释一下。首先，普通的HTML注释会起作用，以防止整个块被解释。您可以轻松地在其中添加任何标签，所有标签都将被忽略。从解释中忽略，但仍可通过innerHTML！所以剩下的就是获取内容，并过滤前面和后面的注释标记。
除了（记住-限制），您不能在其中放置HTML注释，因为（至少在我的Chrome中）不支持它们的嵌套，并且第一个'->'将结束显示。
好吧，这是一个令人讨厌的小限制，但是在某些情况下，如果您的文本没有HTML注释，那根本就不是问题。而且，逃避一个构造，然后逃脱一整堆是容易的。
现在，那奇怪的LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo字符串是什么？它是一个随机字符串，如哈希，不太可能在块中使用，并用于？这是上下文，我为什么要使用它。就我而言，我取了一个DIV的内容，然后用Showdown markdown处理了它，然后将输出分配给了另一个div。这个想法是，在HTML文件中内联编写markdown，然后在浏览器中打开它，它会即时改变负载。因此，就我而言，该注释<!--已转换为<p><!--</p>，正确地转义了该注释。它起作用了，但是污染了屏幕。因此，为了使用正则表达式轻松删除它，使用了随机字符串。这是代码：
var converter = new showdown.Converter();
converter.setOption('simplifiedAutoLink', true);
converter.setOption('tables', true);
converter.setOption('tasklists', true);
var src = document.getElementById("mydoc-src");
var res = document.getElementById("mydoc-res");
res.innerHTML = converter.makeHtml(src.innerHTML)
.replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
src.innerHTML = '';而且有效。
如果有人感兴趣，那么本文就是使用这种技术编写的。随意下载，并查看HTML文件的内部。
这取决于您使用它的目的。是用户输入吗？然后使用<textarea>，并进行所有操作。就我而言，也许也是您的情况，我只是使用注释，就可以了。
如果您不使用markdown，而只想从标记中获取它，那么它会更简单：
<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
<script src="WidgetsLib/all.js"></script>
^^ This is a text, no side effects trying to load it.
-->
</div>和JavaScript代码来获取它：
var src = document.getElementById("mydoc-src");
var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");这是我的方法：
$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";可能并非在每种情况下都有效，但是将代码段放在a内textarea会将其显示为代码。
如果您不希望CSS看起来像实际的textarea，则可以使用CSS设置textarea的样式。
这有点hack，但是我们可以使用以下方法：
body script {
display: block;
font-family: monospace;
white-space: pre;
}<script type="text/html">
<h1>Hello World</h1>
<ul>
<li>Enjoy this dodgy hack,
<li>or don't!
</ul>
</script>使用该CSS，浏览器将在体内显示脚本。它不会尝试执行此脚本，因为它的类型未知text/html。<script>除非要包含结束</script>标记，否则不必在内转义特殊字符。
我正在使用类似的方法在页面的主体中显示可执行的JavaScript，以进行“识字编程”。
此问题中还有更多信息，标签何时应可见，为什么能看到？。
//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)几个答案的组合在这里共同起作用：
function c(s) {
return s.split("<").join("<").split(">").join(">").split("&").join("&")
}
displayMe.innerHTML = ok.innerHTML;
console.log(
c(ok.innerHTML)
)<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">
</div>