您现在的位置：首页 >> 前端 >> 内容

HTML的(pre>标签中嵌套HTML标签时被解析的解决方案

时间：2018/2/7 14:55:24 点击：

　　核心提示：1. 概述标签中保留空格和换行，常用来展示代码片段，但如果直接嵌套HTML标签，会被浏览器解析，所以需要使用转义字符将代码片段转换为不被解析的文本。2. 示例我想显示以下代码片段：htmlheadme...

1. 概述

标签中保留空格和换行，常用来展示代码片段，但如果直接嵌套HTML标签，会被浏览器解析，所以需要使用转义字符将代码片段转换为不被解析的文本。

2. 示例

我想显示以下代码片段：

<html>
    <head>
        <meta charset="utf-8">
        <title>Wechat</title>
    </head>
    <body>
         <iframe src="https://wx.qq.com/"/>
     </body>
</html>

用<pre>包裹后：

<pre>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Wechat</title>
        </head>
        <body>
             <iframe src="https://wx.qq.com/"/>
        </body>
    </html>
</pre>

那么浏览器将直接打开微信扫码登录页面，而这并不是我想要的效果。

正确的操作是将整个文本转义（网上很多在线转义工具）后放入<pre>标签：

<pre>
    &lt;html&gt;
        &lt;head&gt;
            &lt;meta charset=&quot;utf-8&quot;&gt;
            &lt;title&gt;Wechat&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;iframe src=&quot;https://wx.qq.com/&quot;/&gt;
        &lt;/body&gt;
    &lt;/html&gt;
</pre>