如何实现HTML代码原样输出，不被浏览器解析？

比眉伴天荒 2022-06-05 01:38 1151阅读 1赞

有时我们在做自己的技术博客网站的时候，需要直接贴出源代码，不想被浏览器解析，那么我们如何实现HTML代码原样输出，不被浏览器解析？

这里说几种实用方法，供大家参考下：

<meta charset="utf-8"/>
    
    
    方法一：
    <xmp>
        <div class="met-banner " data-height="300||" style="height: auto;">
            <div class="slick-slide">
                <img class="cover-image" id="cover" src="" sizes="(max-width: 767px) 500px" alt="" style="height: auto;">
                <div class="banner-text p-5">
                    <div class="container">
                        <div class="banner-text-con">
                            <div>
                                <h1 style="color:;">html代码不被解析</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            alert('我不会弹出来');
        </script>
    </xmp>
    
    方法二：
    <script type="text/html" style='display:block'>
        <div class="banner-text p-5">
            <div class="container">
                <div class="banner-text-con">
                    <div>
                        <h1 style="color:;">html代码不被解析</h1>
                    </div>
                </div>
            </div>
        </div>
    </script>

因为CSDN博客编辑器的原因，方法三和四的实体符号被解析了，所以我们这里采取截图的方式

![Center][]

结果:

![Center 1][]

[Center]: /images/20220605/394308d4bf094c48b32b0a3dcadd2fd7.png
[Center 1]: /images/20220605/edd4d9519fb343869e6be711da896430.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1151人围观）

还没有评论，来说两句吧...

相关阅读

相关 easyui-datagrid行数据field原样输出html标签

easyui-datagrid 绑定的行 field 原样输出html标签。处理效果如图： ![172074-20151011110345440-1089466993.png

港控/mmm°/ 2023年10月17日 20:43/ 0 赞/ 51 阅读

相关 HTML,JS原样显示

HTML和JS原样显示使用`<xmp></xmp>`标签即可达到效果 //用<xmp></xmp>标签就好了 <xmp> HTML标

迈不过友情╰/ 2023年03月13日 11:41/ 0 赞/ 10 阅读

相关如何不让浏览器读取html缓存,不让浏览器缓存index.html

参考文档：https://www.2cto.com/ask/question/4598 location = /index.html \{ add\_header Cache

迈不过友情╰/ 2022年10月07日 08:50/ 0 赞/ 19 阅读

相关 PHP如何在页面中原样输出HTML代码

字符串与HTML之间的相互转换主要应用htmlentities()函数来完成。 ![Center][] header("Content-Type: text/htm

忘是亡心i/ 2022年07月27日 14:49/ 0 赞/ 193 阅读

相关如何实现HTML代码原样输出，不被浏览器解析？

有时我们在做自己的技术博客网站的时候，需要直接贴出源代码，不想被浏览器解析，那么我们如何实现HTML代码原样输出，不被浏览器解析？这里说几种实用方法，供大家参考下：

比眉伴天荒/ 2022年06月05日 01:38/ 1 赞/ 1152 阅读

相关如何输出html源码，对html代码不进行解析

我们知道，浏览器会自动解析html代码，直接输出解析后的效果。但有时我们希望输出代码结构，并不想被解析，有办法做到吗？答案是肯定的，下面介绍下直接输出源码的方法。方法一：<

水深无声/ 2022年04月13日 11:55/ 0 赞/ 442 阅读

相关 html输出文本标签，html输出原样标签

可以使用使html元素标签不被转义。问题场景：在做富文本编辑器的时候：在网页上copy了一段代码，想粘贴到编辑器里面，使用insertHTML命令，粘贴经过处理的字

叁歲伎倆/ 2022年03月11日 03:21/ 0 赞/ 783 阅读

相关解决Editor.md通过代码块原样输出Emoji被强制解析问题 ...

> Editor.md是一款优秀的开源Markdown 编辑器，在使用中遇到的一些问题和功能改进分享给需要的伙伴。 > 项目地址 ![img\_7f969f62ee272a

亦凉/ 2022年02月14日 16:55/ 0 赞/ 246 阅读

相关 thinkphp-原样输出

\{literal\} hello \{$name\} \{/literal\} 本文转自素颜猪 51CTO博客，原文链接:http://blog.51cto

迷南。/ 2022年02月09日 09:27/ 0 赞/ 262 阅读

相关浏览器-文件解析

最近遇到解析浏览器上传文件的兼容性问题，下面就来记录并分享一下各浏览器解析上传文件的方式，后续会继续来补充： if (window.FileReader) {

待我称王封你为后i/ 2021年09月24日 12:46/ 0 赞/ 485 阅读