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

换句话说,是否有一个标记表示在点击结束标记之前不呈现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>

其他回答

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

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

已废弃的<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()。

很简单.... 使用此xmp代码

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

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

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