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

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

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

当前回答

我使用<xmp>，就像这样: http://jsfiddle.net/barnameha/hF985/1/

2013-11-11 10:57:02

其他回答

<code><?php $str='&lt;';echo htmlentities($str);?></code>

我发现这是最简单、最快和最紧凑的方法。

2022-09-26 06:16:34

在HTML中有几种方法可以转义所有内容，但都不是很好。

或者你可以放入一个iframe来加载一个普通的旧文本文件。

2010-05-12 15:52:25

已废弃的<xmp>标记实际上就是这样做的，但它不再是XHTML规范的一部分。尽管它在当前所有浏览器中仍然有效。

这里有另一个想法，一个hack/parlor trick，你可以把代码放在一个文本区域，像这样:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

将尖括号和这样的代码放在文本区域内是无效的HTML，在不同的浏览器中会导致未定义的行为。在Internet Explorer中，HTML是解释的，而Mozilla、Chrome和Safari则不解释。

如果你想要它是不可编辑的，看起来不同，那么你可以很容易地使用CSS样式。唯一的问题是浏览器会在右下角添加一个小的拖动句柄来调整方框的大小。或者，尝试使用input标记。

正确的方式注入代码到你的文本区域是使用服务器端语言，比如PHP:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

然后，它绕过html解释器，并在所有浏览器中一致地将未解释的文本放入文本区域。

除此之外，如果使用静态HTML，唯一的方法是自己转义代码，如果使用这种技术，则使用服务器端方法，如。net的HtmlEncode()。

2010-05-12 16:01:38

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

这是一个简单的技巧，我已经在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>

它将显示如下:

你可以在这里现场观看

2018-10-10 11:13:24

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

推荐文章

最新文章

标签