您可以通过将标记更改为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标签结束于此——>

它可能并不适用于所有情况，但将代码片段放在文本区域内将它们显示为代码。

如果你不想让它看起来像一个实际的文本区域，你可以用CSS样式文本区域。

一种简单的方法来显示代码将包括它在一个文本区域和添加禁用属性，所以它是不可编辑的。

<textarea disabled> code </textarea>

希望这能帮助那些寻找简单方法完成工作的人。

但是警告，这不会为你转义标签，正如你在这里看到的(下面显然是行不通的):

textarea残疾> < 这是创建textarea的代码: textarea > < textarea > < / textarea > < /

下面是几个答案的组合:

函数c(s) { 返回s.split(“& lt;”). join(“<”).split(“在”). join(“>”).split (", ") . join(“&”) ｝ displayMe。innerHTML = ok.innerHTML; console.log ( c (ok.innerHTML) ) <textarea style="display:none" id="ok"> <脚本> console.log(“hello”,5和9); > < /脚本 textarea > < / < div id = " displayMe " > < / div >

实际上有一种方法可以做到。它有一个限制(1)，但是是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注释，这根本不是问题。而且，逃避一个构念比逃避一堆构念容易。

Now, what is that weird LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo string? It's a random string, like a hash, unlikely to be used in the block, and used for? Here's the context, why I have used it. In my case, I took the contents of one DIV, then processed it with Showdown markdown, and then the output assigned into another div. The idea was, to write markdown inline in the HTML file, and just open in a browser and it would transform on the load on-the-fly. So, in my case, <!-- became transformed to <p><!--</p>, the comment properly escaped. It worked, but polluted the screen. So, to easily remove it with regex, the random string was used. Here's the code:

    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, "");

我认为:

你想要编写100%有效的HTML5 你想把代码片段(几乎)文字放在HTML中 特别是<应该不需要转义

你所有的选项都在这棵树里:

with HTML syntax there are five kinds of elements those called "normal elements" (like <p>) can't have a literal < it would be considered the start of the next tag or comment void elements they have no content you could put your HTML in a data attribute (but this is true for all elements) that would need JavaScript to move the data elsewhere in double-quoted attributes, " and &thing; need escaping: &quot; and &amp;thing; respectively raw text elements <script> and <style> only they are never rendered visible but embedding your text in Javascript might be feasable Javascript allows for multi-line strings with backticks it could then be inserted dynamically a literal </script is not allowed anywhere in <script> escapable raw text elements <textarea> and <title> only <textarea> is a good candidate to wrap code in it is totally legal to write </html> in there not legal is the substring </textarea for obvious reasons escape this special case with &lt;/textarea or similar &thing; needs escaping: &amp;thing; foreign elements elements from MathML and SVG namespaces at least SVG allows embedding of HTML again... and CDATA is allowed there, so it seems to have potential with XML syntax covered by Konrad's answer

注意:>从来不需要转义。甚至在正常元素中也没有。