如何在html页面中展示html源码

最新推荐文章于 2024-05-13 10:09:55 发布

huzhenv5

最新推荐文章于 2024-05-13 10:09:55 发布

阅读量6k

点赞数 4

分类专栏： HTML 文章标签： html 展示标签源码

本文链接：https://blog.csdn.net/huzhenv5/article/details/104685001

版权

6 篇文章 1 订阅

订阅专栏

输入框是可以展示html源码的，如下：

<input value="<script>alert(1)</script>">

展示的结果为：
在这里插入图片描述

文本输入框是可以展示html源码的，如下：

<textarea>
    <script>console.log(12)</script>
</textarea>

展示的结果为：
在这里插入图片描述

<xmp> 标签之间的内容不会被当作文档内容解析，而会被用等宽字体直接呈现，包括空格和换行也可以展现。但是不建议使用！，改用<pre>

注意：

从HTML3.2开始反对使用本元素，同时它不再会在之后版本内被推荐使用
从HTML5开始，该元素被移除

<xmp style="background-color: cornflowerblue;">

    <script>console.log(12)</script>


</xmp>

展示的结果为：
在这里插入图片描述

pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

<pre> 标签的一个常见应用就是用来表示程序的源代码

注意：

pre标签里面的特殊符号需要转化为符号实体才能正常显示，比如 "<" 代表 “<”，">" 代表 “>”

示例代码：

<pre style="background-color: burlywood;">


    &lt;script&gt;console.log(12)&lt;/script&gt;


</pre>

展示结果为：
在这里插入图片描述

总结

如果需要展示源码，可以使用pre标签，当然如果需要用到文本输入框，可以看情况使用input或者textarea，他们都有一些共同特点：

关注