需对HTML特殊字符进行实体转义（如<→
直接在网页中“打出 HTML 代码”本身没有意义——浏览器会自动解析并渲染成页面元素。你真正需要的，是让 HTML 标签以纯文本形式显示在页面上（即“不被解析，只被看到”），或者在开发环境中正确输入、调试、预览 HTML。
如何让 <div> 这类标签原样显示在网页上
这是最常被误解的需求：用户想在网页里写 <p>Hello</p>，但希望它作为文字显示，而不是变成一个段落。
- 必须对特殊字符做 HTML 实体转义：
<→，<code>>→>，&→& - 例如，想显示
<img src="x">，实际要写：<img src="x" alt="如何打出html_输入HTML代码或标签的操作方法【教程】" > - 在 JavaScript 中动态插入时，别用
innerHTML，改用textContent或先转义再赋值 - 使用
<pre><code>组合是最稳妥的展示方式（见下一条）
用 <pre><code> 正确展示 HTML 代码片段
这是前端文档、博客、示例页中最标准的做法，兼顾可读性与安全性。
<pre><code class="html"><button onclick="alert('OK')">Click</button></code></pre>
-
<pre>保留换行和空格；<code>语义化标记为代码 - 所有尖括号必须手动转义为
/<code>>，否则浏览器仍会尝试解析 - 如果用 JavaScript 动态生成，推荐用
document.createTextNode()或第三方转义函数（如DOMPurify.sanitize()配合SAFE_FOR_TEMPLATES）
在编辑器或控制台里快速输入带引号的 HTML
写错引号嵌套是新手高频错误，尤其当 HTML 属性值里含 JS 或双引号时。
立即学习“前端免费学习笔记（深入）”；
- 属性值统一用双引号（HTML5 允许单/双，但团队协作建议固定一种）：
<a href="https://example.com" title="It's "quoted""> - JS 字符串内拼 HTML，优先用模板字符串（反引号），避免引号冲突：
const html = `<div class="btn" data-id="${id}">OK</div>`; - 在浏览器控制台测试时，别直接写
document.body.innerHTML = "<div>..."—— 容易因未转义引号或标签提前闭合导致解析失败
为什么复制粘贴 HTML 到 contenteditable 区域会出问题
很多富文本编辑场景（比如评论框开启 HTML 支持）会用 contenteditable="true"，但直接粘贴含标签的 HTML 极易破坏结构。
- 浏览器会自动修正非法嵌套（如把
<p><div>xxx</div></p>拆开），结果不可控 - 粘贴的 HTML 若含
<script>或内联事件（onclick），可能被过滤或执行——取决于宿主环境策略 - 安全起见，服务端接收前必须用白名单过滤（如只允许
<p>、<strong>、<a>），不能依赖前端innerHTML直接渲染
真正的难点不在“怎么打出来”，而在于明确目标：是要展示代码、注入结构、还是用户可编辑？每种场景对应的转义层级、上下文处理、安全边界都不同——漏掉任意一环，轻则显示错乱，重则 XSS 漏洞。
