要原样显示html转义字符如 ，需对&符号再次转义为 ；js中用textcontent而非innerhtml；模板引擎需传入双转义字符串；document.createtextnode()可完全避免解析。
HTML 里 、< 这类转义字符怎么原样显示出来
直接写进 HTML 源码的转义字符，浏览器默认会解析成对应符号（比如 变成空格），想让它“不解析、只显示”，本质是让浏览器把它们当普通文本处理——得先对这些字符本身再做一次转义。
常见错误是以为加个 <pre class="brush:php;toolbar:false;"></pre> 或 <code> 就够了，其实不行：这些标签只控制样式和语义，不阻止 HTML 解析器执行转义还原。
- 要把
- 要把
<显示成字面量，得写成 - 同理，
&要显示出来，必须写成&
用 JavaScript 动态插入时，innerHTML 和 textContent 的区别
如果通过 JS 往页面塞含转义字符的字符串，选错属性会导致结果完全相反。
innerHTML 会触发 HTML 解析，textContent 则严格按字符串原样输出（包括其中的 & 符号）。
立即学习“前端免费学习笔记（深入）”；
- 写
el.innerHTML = " "→ 页面显示一个空格 - 写
el.textContent = " "→ 页面显示 - 想用
innerHTML显示字面量？那就得提前把字符串里的&替换成&，例如：str.replace(/&/g, "&")
服务端模板（如 Jinja2、Django、EJS）里自动转义失效的坑
很多模板引擎默认对变量做 HTML 转义，但开发者常误以为“已转义就安全”，结果发现 还是被渲染成空格——因为模板转义的是原始内容，不是你写死在模板里的转义序列。
比如在 Django 模板中写 {{ " "|safe }}，实际传入的是字符串 " "，它会被解析为一个空格；而你要的是显示这串字符本身。
- 正确做法：传入已双转义的字符串，比如后端传
" "，前端模板直接插值 - 或者在模板里手动替换：Django 用
{{ value|replace:"&":"&" }}（需自定义 filter），EJS 用 - 注意：开启
autoescape时，（EJS）或{{ }}（Jinja）仍会二次解析，优先用或{% autoescape false %}
用 document.createTextNode() 最省心但有局限
这是唯一完全绕过 HTML 解析器的方法：创建纯文本节点，浏览器绝不会碰里面的任何字符。
适合小段落、动态生成的提示文案，但没法嵌套 HTML 标签，也不能用 CSS 选择器单独样式化其中某部分。
- 示例：
el.appendChild(document.createTextNode(" <div>"))→ 页面原样显示全部字符 - 不能混用 HTML：
document.createTextNode("hello <strong>world</strong>")会显示整个字符串，<strong></strong>不生效 - 若需部分加粗、链接等交互，只能拆成多个节点 +
appendChild组合，代码变冗长
该问题的核心不在“怎么显示”，而在“谁在解析”——只要经过 HTML 解析器（无论是初始加载、innerHTML 赋值，还是模板渲染），就得提前把 & 自己转义掉。漏掉这一层，其他操作都是白忙。
