在编写技术文档或搭建教程页面时，我们经常需要把一段HTML源代码展示给读者看，但不希望浏览器把它解析成真正的按钮、表单或弹窗。要实现html文档代码不运行，核心思路就是让浏览器把代码当作纯文本处理，而不是可执行的标签。下面介绍几种实用的禁用html文档代码运行设置方式。
使用HTML实体转义
最基础的方法是把代码里的特殊符号转义。将<写成<，>写成>，&写成&，浏览器就不会把它们当成标签开头。例如想展示一个input框的代码：
<input type="text" placeholder="请输入">
这样页面上会显示成文本，不会渲染出输入框。
配合pre与code标签
用<pre>保留换行格式，用<code>标记代码语义，内部再转义，就能整齐展示多行html源码：
<div class="box"> <p>这是示例文字</p> </div>
用textarea承载代码
textarea本身会把内容当表单值处理，里面的标签不会被解析。适合做可复制的代码块：
<textarea rows="4" cols="50"> <button onclick="alert(1)">点我</button> </textarea>
用户看到的是按钮的代码文字，不会触发弹窗。
使用script的非法类型
把代码放在type不被识别的script标签里，浏览器会忽略执行，仅作文本节点存放：
<script type="text/plain"> <a href="https://ipipp.com">链接</a> </script>
这种方式对大段html非常友好，也不会意外运行内部脚本。
方法对比
| 方式 | 优点 | 注意点 |
|---|---|---|
| 实体转义 | 兼容性好 | 手写麻烦 |
| pre+code | 格式清晰 | 仍需转义 |
| textarea | 可复制 | 有边框样式 |
| script文本 | 大段方便 | 不能被SEO读取 |
通过上述设置，你可以根据场景选择方案，稳定实现html文档代码不运行只展示的需求。