必须转义的只有5个字符：&、<、>、"、'；中文、emoji等UTF-8字符原生支持，前提是文档声明了charset=utf-8；最稳妥做法是统一使用命名实体。

表格单元格里出现

这不是 bug，是浏览器在解析 HTML 时把

price 0 里直接写，浏览器会尝试闭合 <td> 标签，后续内容全乱套。 <p>必须转义的只有 5 个字符：<code>、<code>>、&、"、'。其他如中文、emoji、©、® 等 UTF-8 原生支持，不用转——前提是文档声明了 <meta charset="UTF-8">。

• 最稳妥：统一用命名实体，比如 、<code>&、"
• 别用十六进制编码（如 ），IE 和旧版 XML 解析器容易不认
• 如果内容来自 JS 动态生成，别拼字符串，优先用 textContent 赋值，它自动规避所有转义问题

后端返回 JSON，表格里显示的是<而不是

这是双重转义：后端用 html.escape() 编码了一次，前端又手动或框架自动再 encode 一次。典型现象是页面上看到字面量 <，而不是渲染后的

检查三处：

立即学习“前端免费学习笔记（深入）”；

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• Python 后端是否对字段重复调用了 html.escape()？读数据库后展示前才该调用一次
• 前端 JS 是否用 innerHTML = data.content —— 如果 data.content 已是转义后的字符串，再塞进 innerHTML 就会原样输出
• Vue/React 模板里用了 {{ content }} 还是 v-html/dangerouslySetInnerHTML？前者自动转义，后者要求传入已转义好的 HTML 字符串

表格中空格、换行、制表符全被压成一个空格

HTML 默认折叠空白符，<td>line1\nline2\t extra </td> 渲染出来就是 “line1 line2 extra”。这不是转义问题，是 CSS 白空格处理规则。

• 想保留换行：加 CSS white-space: pre-line 到 <td> 或父级样式 <li>想保留所有空格和缩进：用 <code>white-space: pre，但注意它不自动换行
• 别指望用   堆砌空格来对齐——语义错误，且响应式下极易错位
• 表格中真正需要转义的空白字符只有  （不间断空格），用于防止折行

用 JS 动态生成表格时，innerHTML += '

' 报错或漏内容

字符串拼接 HTML 是高危操作。一旦变量含 & 或 ，拼出来的片段就可能被截断或注入。

• 绝对不要用 innerHTML += 拼接用户数据；改用 document.createElement('td') + textContent
• 如果非得用 innerHTML，先对每个变量做转义：Python 用 html.escape()，JS 可封装函数 function escapeHtml(str) { return str.replace(/[&"']/g, c => ({'&': '&', '': '>', '"': '"', "'": '''})[c]); }
• 框架场景下（如 React），直接插值 {item.price} < {item.threshold} 即可，JSX 自动转义

真正麻烦的不是怎么转义，而是判断「该不该转」——输入来源是否可信、输出上下文是 innerHTML 还是 textContent、服务端是否已处理过。混用两层转义比完全不转更难排查。