如何在html标签不被解析的显示在html页面上

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ForMyQianDuan/article/details/80423345

有三样标签可以用:

1、<xmp>
2、<pre>
3、<code>

不过,MDN上这样说:

Note: Do not use this element(<xmp>).
It has been deprecated since HTML3.2 and was not implemented in a consistent way. It was completely removed from the language in HTML5.
Use the <pre> element or, if semantically adequate, the <code> element instead. Note that you will need to escape the '<' character as '&lt;' to make sure it is not interpreted as markup.
A monospaced font can also be obtained on any element, by applying an adequate CSS style using monospace as the generic-font value for the font-family property.

原文:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp

所以,

<xmp>被淘汰了,但它是不转义标签,最好用的标签。目前在各个浏览器测试用了也还能支持。
下面我们看看,各种标签下如何让html标签不被解析到html页面上。

代码和用法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<xmp>
    <div>xmp:你可以显示代码吗?</div>
</xmp>
<pre>
    &lt;div&gt;
    pre: 你可以显示代码么?
    &lt;/div&gt;
</pre>
<code>
    &lt;div&gt;
    code: 你可以显示代码么?
    &lt;/div&gt;
</code>
</body>
</html>

效果:
这里写图片描述

还有一个pre和code的区别:
http://www.php.cn/div-tutorial-369716.html
https://www.jianshu.com/p/6abc36c28e45

猜你喜欢

转载自blog.csdn.net/ForMyQianDuan/article/details/80423345