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

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


当前回答

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

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

其他回答

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

<textarea disabled> code </textarea>

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


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

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

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

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

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

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

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

它将显示如下:

你可以在这里现场观看

已弃用,但适用于FF3和IE8。

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

推荐:

<pre><code>
    code here, escape it yourself.
</code></pre>