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

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

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

<meta charset="utf-8"/>
<!-- html代码不被解析 -->
<!-- 方法一：xmp在H5里已被废弃，已被pre继承了，但是个人感觉比pre好用 -->
方法一：
<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里定义为文本，注意的是记得写display:block，不然没有效果的，直接输出，没有任何格式化效果 -->
方法二：
<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博客编辑器的原因，方法三和四的实体符号被解析了，所以我们这里采取截图的方式

结果:

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_27682041/article/details/78530582
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-03-01 18:24:33
阅读 ( 1032 )
分类：前端

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看