如何在HTML页面上显示原始HTML代码

如何在网页上显示HTML片段，而不需要将每个<替换为<>和>?

换句话说，是否有一个标记表示在点击结束标记之前不呈现HTML ?

当前回答

最终，最好的答案(尽管很烦人)是“转义文本”。

然而，有很多文本编辑器——甚至是独立的迷你实用程序——可以自动完成这项工作。所以如果你不想，你永远都不应该手动转义它(除非它是转义和未转义代码的混合…)

快速搜索谷歌会显示这个，例如:http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

2010-05-12 16:19:28

其他回答

行之有效的HTML方法:

将&字符替换为& 将<字符替换为< 将>字符替换为> 可以选择用<pre>和/或<code>标记包围HTML示例。

2010-05-12 15:58:55

这是一种hack，但是我们可以使用类似的东西:

正文脚本{ 显示:块; 字体类型:等宽字体; 空白:前; ｝ <脚本type = " text / html " > <标题> Hello World h1 > < / < ul > <li>享受这个狡猾的黑客， <李>或不! < / ul > > < /脚本

使用该CSS，浏览器将在主体中显示脚本。它不会尝试执行这个脚本，因为它有一个未知的类型text/html。在<script>中没有必要转义特殊字符，除非你想包含一个结束</script>标记。

我正在使用类似这样的东西在页面主体中显示可执行的JavaScript，这是一种“有文化的编程”。

在这个问题中还有更多的信息，标签什么时候应该可见，为什么可以?

2020-06-03 05:10:41

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

2021-07-27 13:36:39

是否有一个标签表示在点击结束标签之前不呈现HTML ?

不，没有。在HTML中，除了转义某些字符外，没有其他方法:

& as & < as <

(顺便说一句，没有必要转义>，但人们经常这样做是为了对称。)

当然，您应该将结果转义的HTML代码包围在<pre><code>…</code></pre>中，以(a)保留空格和换行符，并(b)将其标记为代码元素。

所有其他解决方案，如将代码包装到<textarea>或(已弃用)<xmp>元素，都会破坏1

向浏览器声明为XML的XHTML(通过HTTP Content-Type报头!-仅仅设置DOCTYPE是不够的)也可以使用CDATA部分:

<![CDATA[Your <code> here]]>

但这只适用于XML，而不适用于HTML，而且这也不是一个万无一失的解决方案，因为代码不能包含结束分隔符]]>。因此，即使在XML中，最简单、最健壮的解决方案也是通过转义。

1 .恰当的例子:

不;教室:100%;} < textarea readonly =“readonly > <p>电脑<textarea>说</textarea> <span>no.</span> < / textarea > < xmp > 计算机<xmp>说</xmp> <span>no.</span> < / xmp >

2010-05-12 15:49:58

JavaScript字符串文字可以用于跨多行编写HTML。显然，这个解决方案需要JavaScript，特别是ECMA6。

.createTextNode with CSS white-space: pre-wrap;很管用。

. innertext单独也可以。运行下面的代码片段。

let codeBlock = ` <!DOCTYPE HTML> <html lang="en"> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page</h1> <p>I like cars and lorries and have a big Jeep!</p> <h2>Where I live</h2> <p>I live in a small hut on a mountain!</p> </body> </html> ` const codeElement = document.querySelector("#a"); let textNode = document.createTextNode(codeBlock); codeElement.appendChild(textNode); const divElement = document.querySelector("#b"); divElement.innerText = codeBlock; #a { white-space: pre-wrap; } <div id=a> </div> <div id=b> </div>

2023-01-29 22:02:54

如何在HTML页面上显示原始HTML代码

推荐文章

最新文章

标签