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

最新推荐文章于 2025-04-14 17:41:34 发布

进击的小宇宙

最新推荐文章于 2025-04-14 17:41:34 发布

阅读量5.9k

点赞数

分类专栏： HTML 文章标签：转义字符 solution

本文链接：https://blog.csdn.net/zy13608089849/article/details/79278833

版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

1. 概述

<pre>标签中保留空格和换行，常用来展示代码片段，但如果直接嵌套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>