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

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

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

当前回答

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

<textarea disabled> code </textarea>

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

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

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

其他回答

这是一种hack，但是我们可以使用类似的东西:

正文脚本{ 显示:块; 字体类型:等宽字体; 空白:前; ｝ <脚本type = " text / html " > <标题> Hello World h1 > < / < ul > <li>享受这个狡猾的黑客， <李>或不! < / ul > > < /脚本

使用该CSS，浏览器将在主体中显示脚本。它不会尝试执行这个脚本，因为它有一个未知的类型text/html。在<script>中没有必要转义特殊字符，除非你想包含一个结束</script>标记。

我正在使用类似这样的东西在页面主体中显示可执行的JavaScript，这是一种“有文化的编程”。

在这个问题中还有更多的信息，标签什么时候应该可见，为什么可以?

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

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

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;
}

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

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

<textarea disabled> code </textarea>

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

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

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

推荐文章