html字符实体是避免解析错误、xss漏洞和显示异常的必要手段；必须转义、&、"、'这5个字符；utf-8声明与字体支持同样关键。

直接说结论：HTML 字符实体不是“可选技巧”，而是避免解析错误、XSS 漏洞和跨浏览器显示异常的必要手段。该用就用，别靠肉眼猜。

哪些字符必须转义才能安全显示

只要出现在 HTML 文本内容中（非属性值、非 JS 字符串），以下 5 个字符不转义就会出问题：

• 和 <code>>：浏览器会尝试解析成标签，比如 1 变成 <code>1 ，否则可能截断后续内容
• &：实体开头符号，AT&T 不转义会变成 AT&T → 解析失败或意外嵌套
• "：用于双引号包围的属性值里，如 title="He said "Hi""
• '：单引号属性值中使用，但注意 IE 不支持 '，稳妥起见建议统一用 ' 或改用双引号包裹

命名实体 vs 数字实体：怎么选才不踩坑

命名实体（如 ©）可读性强，但并非所有都受支持；数字实体（如 © 或 ©）兼容性更好，尤其对旧版 IE 或 XML 场景更稳。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 常用符号优先用命名实体：、<code>>、&、"、©、®、€ —— 这些在 HTML4/5 中全支持
• 冷门符号或需要精确控制时用十进制编号：—（em dash）、…（ellipsis），比记 — 或 … 更可靠
• 十六进制编号写法是 →，适合复制 Unicode 码点（比如箭头 → 是 U+2192），但注意要加 x 前缀，漏写就变成十进制

空格与空白符：为什么页面上多个空格只显示一个

HTML 默认折叠连续空白符（空格、制表、换行），所以 Hello<span>   World</span> 才能强制显示三格空隙。

•  ：最常用，表示不换行空格（NBSP），适用于单词间防断行或占位
•  （ ）和  （ ）：分别对应半个和一个汉字宽度，排版微调时比 CSS margin 更轻量
• 避免滥用   做布局 —— 它本质是字符，会参与文本流、影响可访问性，且无法响应式缩放

动态内容中插入实体：别直接拼字符串

后端模板或前端 JS 拼接 HTML 时，硬塞 <script></script> 或用户输入，极易触发 XSS。正确做法是让框架/库自动转义，或手动处理：

• 服务端渲染（如 Django、Twig）默认转义变量，但显式标记 |safe 或 |raw 会绕过 —— 检查是否真有必要
• 前端 JS 中，不要用 element.innerHTML = '<div>' + userInput + '</div>'；改用 textContent 或 innerText 输出纯文本，或用 DOM API 创建节点
• 若必须插 HTML，先用函数做最小化转义，例如：function escapeHtml(str) { return str.replace(/[&"']/g, c => ({ '&': '&', '': '>', '"': '"', "'": ''' })[c]); }

真正容易被忽略的点：UTF-8 声明和字体支持。即使用了 😀（?），如果页面没声明 <meta charset="UTF-8">，或者系统字体不支持 emoji，照样显示为方块或问号。实体只是编码层，显示依赖底层环境。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！