HTML特殊字符转义与显示问题解决方法

你是否遇到过网页上明明写了“

”，却直接显示为文字而非尖括号？这其实是HTML特殊字符未被正确转义或误被双重编码导致的典型问题——浏览器将其当作纯文本而非HTML指令解析。本文直击痛点，详解<、 、"等常用转义字符的正确写法、常见误用场景（如后端重复转义、模板引擎配置不当）、以及前端JavaScript动态插入时的避坑方案，助你快速定位并修复字符“不渲染”这一令人抓狂的显示异常。

HTML 转义字符显示为原始文本而不是渲染效果

常见现象是页面上直接看到 <、  这类字符串，而不是对应的 或空格。本质是浏览器把转义序列当作了普通文本，没触发 HTML 解析。

根本原因通常是：你用 JS 赋值给 innerText 或 textContent，或者服务端返回的字符串被框架（如 React/Vue）自动做了二次转义。

• 用 innerHTML 替代 innerText 可让浏览器解析转义字符，但注意 XSS 风险——只对可信内容用
• React 中写 {'<div>'} 会原样输出，得用 dangerouslySetInnerHTML={{__html: '<div>'}}
• Vue 模板里用 v-html，而非双大括号插值
• 后端返回 JSON 时如果已转义过一次（如 Python 的 html.escape()），前端再手动拼接就容易叠成 <

Python 里 html.unescape() 和 html.escape() 怎么选

处理用户输入或存储 HTML 内容时，html.escape() 是防 XSS 的第一道关；读取并展示时，html.unescape() 才能还原成可渲染的符号。

典型误用：从数据库读出带 " 的字段，直接塞进模板，结果引号不显示——其实该先 html.unescape()。

• html.escape('