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

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

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

当前回答

在HTML ?不。

在XML / XHTML吗?您可以使用CDATA块。

2010-05-12 15:50:27

其他回答

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

<textarea disabled> code </textarea>

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

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

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

2015-01-05 20:34:45

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

如果你的目标是显示你在同一页面的其他地方执行的代码块，你可以使用textContent(它是纯js和良好的支持:http://caniuse.com/#feat=textcontent)

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

要在结果中获得多行格式，您需要在目标div上设置css样式“white-space: pre;”，并在每一行的末尾使用“\r\n”单独写入行。

这里是一个演示:https://jsfiddle.net/wphps3od/

与使用textarea相比，这种方法有一个优点:代码不会像在textarea中那样重新格式化。(比如 在文本区域中完全删除)

2017-01-12 15:45:03

这是目前为止在大多数情况下最好的方法:

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

我会投票给第一个提出这个建议的人，但我没有名气。为了那些试图在网上找到答案的人，我不得不说些什么。

2013-10-24 05:11:08

我是这样做的:

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";

2014-03-15 14:47:28

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

推荐文章

最新文章

标签