标签不自动转义，因它仅是语义标记，浏览器仍会解析其中的<、>、&等字符；必须手动按顺序转义&、<、>、"才能安全显示HTML代码。
直接在 <code> 标签里写 <img> 会导致浏览器解析它，不是显示代码，而是试图渲染图片——必须转义。
为什么 <code> 标签本身不自动转义
<code> 只是语义标签，告诉浏览器“这段是代码”，但不改变 HTML 解析行为。浏览器仍会照常处理其中的 <、>、& 等字符。
- 常见错误现象：页面中突然出现空白图、控制台报
Failed to load resource、<code><div>hello</div></code>渲染成真实<div>块 - 根本原因：HTML 解析器在构建 DOM 时，不区分你用的是
<pre>还是<code>，只要看到<就开始匹配标签 - 所以
<code>必须和转义配合使用，不能单独依赖它“防解析”
手动转义的 4 个必须步骤（顺序不能错）
转义顺序错误会导致二次解析，比如把 < 先转成 ，再把 <code>& 转成 &，结果变成 —— 页面上就真显示 <code> 了。
- 第一步：先把所有
&替换为&（这是最危险的，必须最先做） - 第二步：把所有
<替换为 - 第三步：把所有
>替换为> - 第四步：把所有
"替换为"（仅当字符串会被塞进双引号属性时才需这步，但建议统一做）
例如原始 HTML：<img src="x.jpg" alt="A & B"> → 转义后应为：<img src="x.jpg" alt="A & B">
立即学习“前端免费学习笔记（深入）”；
用 textContent 替代手动替换更可靠
前端动态插入代码片段时，靠正则替换容易漏或错，推荐用 DOM API 借力浏览器自身转义逻辑。
- 创建临时元素：
const temp = document.createElement('div') - 赋值
textContent：temp.textContent = '<img src="x.jpg">' - 取回已转义内容：
temp.innerHTML→ 得到<img src="x.jpg" alt="HTML code标签中特殊字符安全显示的转义教程" > - 再把结果塞进
<code>或<pre><code>里
注意：不要用 innerText，它受 CSS 影响；也不要直接设 innerHTML 到目标节点，那等于又放回解析流程。
服务端模板里插值要确认是否默认转义
不同模板引擎对变量插值的默认行为差异极大，同一行 {{ html_snippet }} 在不同环境可能一个安全、一个直接 XSS。
- Django / Jinja2 / Twig / Vue（
{{ }}）：默认转义，安全 - EJS：
<%= %>不转义，<%- %>转义 —— 写错一个符号就破防 - Handlebars：
{{ }}转义，{{{ }}}}不转义 - PHP 原生：
<?php echo $html; ?>完全不转义，必须手动调htmlspecialchars($html, ENT_QUOTES)
上线前务必查清模板层策略，别假设“框架会兜底”。尤其当数据来自用户输入或第三方 API 时，& 和 < 漏一个，XSS 就成立。
