HTML标签原样显示

最新推荐文章于 2025-07-12 01:46:44 发布

ITzhongzi

最新推荐文章于 2025-07-12 01:46:44 发布

阅读量8k

点赞数 3

分类专栏：前端学习笔记文章标签： xmp 原样显示

前端学习笔记专栏收录该内容

276 篇文章

订阅专栏

本文介绍了两种在HTML页面上使HTML标签不被解析而直接显示的方法：使用<script type='text/html' style='display:block'>和<xmp>标签。这两种方法可以帮助开发者在展示代码示例时保持格式不变。

如何使HTML标签原样显示出来
方法一：
将HTML代码嵌入到<script type='text/html' style='display:block'></scipt>中 
<script type='text/html' style='display:block'> <input type="text" /> </scipt>
示例代码：
<body>
    <pre>
            <script type="text/html" style="display: block;">
                <div>
                    哈哈哈
                </div>
                <h4>dfdfd</h4>
            </script>
    </pre>
</body>
 方法二：
       有时候想让一些html的标签不被浏览器解释翻译，直接原样的显示出来，这时可以在想要显示的代码的外面加上<xmp></xmp>，这样<xmp>标签里面的内容将原封不动的显示出来。
例如
<xmp>

<table>
<tr>
<th width="140">a</td>
<th width="140">b</td>
<th width="140">c</td>
</tr>
</table>

</xmp>