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

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

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

当前回答

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

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

2010-05-12 15:52:25

其他回答

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

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

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

2010-05-12 16:19:28

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

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

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

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

2010-05-12 15:52:25

我认为:

你想要编写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

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

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

推荐文章

最新文章

标签