直接用标签展示html代码会导致浏览器将其解析为真实标签而非文本，如alert(1)真会弹窗；必须先对&、、"、'五个字符做实体转义（如&→&），再放入中，漏任一字符都可能引发xss或dom错乱。
直接用 标签展示 HTML 代码会出什么问题
浏览器会把 <div> 当成真实标签解析，而不是文本——<code><script>alert(1)</script> 真的会弹窗，click 可能被当成可交互元素。这不是 bug，是 标签的设计本意：它只声明“这是代码”，不负责转义或格式保留。<h3><pre class="brush:php;toolbar:false;"> 组合必须手动转义五个字符</pre></h3>
<p>要安全展示 HTML 源码，必须先对原始字符串做实体替换，再塞进 </p>
<pre class="brush:php;toolbar:false;"><code> 里。漏掉任意一个，DOM 就可能错乱或执行脚本。<ul>
<li>
<code>&</code> 必须最先转：&（否则 <code> 会被误认为 <code> 的一部分）</code></code>
</li>
<li><code> 转成 <code>，<code>></code> 转成 <code>></code></code></code></li>
<li>
<code>"</code> 和 <code>'</code> 在属性值中也要转，比如 <code>title="User's input"</code> → <code>title="User's input"</code>
</li>
<li>别混用命名实体（<code>）和数字实体（<code>），维护成本高且易出错</code></code>
</li>
</ul>
<h3>JavaScript 动态插入时最省心的写法是 textContent</h3>
<p>如果你只是想在页面上显示一段 HTML 字符串（比如调试用、文档示例），别碰 <code>innerHTML</code>。用 <code>textContent</code> 一行搞定，完全绕过 HTML 解析器：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178938727468962.jpg" alt="Markdown to HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML" class="overflowclass">Markdown to HTML</a>
<p class="overflowclass">{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}</p>
</div>
<a rel="nofollow" href="/xiazai/skill2900" title="Markdown to HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">const el = document.querySelector('#code-output');
el.textContent = '<div class="box">Hello</div>';</pre><p>它自动把所有字符当纯文本处理，<code> 不会变成 <code>，<code>& 也不会被二次解析。但注意：textContent 不保留换行缩进，多行代码还得配
。
表格单元格里填 HTML 代码容易漏转义
<td><img src="x"></td> 这种写法在表格里极危险——未转义的 会让浏览器提前闭合 <td>，后续内容可能跑到表格外。更隐蔽的是 <code>&：如果代码里含 URL 参数如 src="a.png?w=100&h=80"，漏转 & 会导致参数截断。
- 用户输入、API 返回值、数据库字段，只要填进
或 ，一律先过转义函数 - JS 动态设置时，优先用
element.setAttribute('data-code', str)，它自动处理引号，但不处理和 <code>&- 服务端已转义的字符串，前端不要再用
innerHTML二次拼接，否则变成<真正难的不是记那五个字符，而是每次往
、<pre class="brush:php;toolbar:false;">、<td>、title、data-* 里塞内容时，都得条件反射问一句：这里面有没有 <code>、<code>&</code>？</code> </td></pre> - JS 动态设置时，优先用
