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

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

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

当前回答

function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

它将返回转义的Html

2014-07-08 11:51:15

其他回答

你可以使用像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>

2014-01-07 08:35:50

如果您正在寻找与框架一起工作的解决方案。

const code = `
 <div>
  this will work in react
 <div>
`
<pre>
  <code>{code}</code>
</pre>

你可以用css给它一个漂亮的外观:

pre code {
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 20px;
}

2022-12-21 03:30:41

我认为:

你想要编写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: " and &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 </textarea or similar &thing; needs escaping: &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

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

2017-01-08 01:22:52

您可以通过将标记更改为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

<textarea ><?php echo htmlentities($page_html); ?></textarea>

对我来说很好。

“记住亚历山大的建议，这就是为什么我认为这是一个很好的方法”

如果我们只是尝试朴素的<textarea>，它可能并不总是工作，因为可能会关闭textarea标签，这可能会错误地关闭父标签，并在父文档上显示HTML源代码的其余部分，这看起来很尴尬。

使用htmlentities将所有适用的字符(如< >)转换为HTML实体，从而消除了任何泄漏的可能性。

这种方法可能有好处或缺点，也可能有更好的方法来实现相同的结果，如果是这样，请评论，因为我很想从中学习:)

2018-01-10 01:02:52

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

推荐文章

最新文章

标签