HTML 实体编码：< & 为什么要转义
< > & 在 HTML 里有语法含义，直接输出用户内容会被浏览器当标签执行。讲清实体编码、XSS 防护与前端渲染的正确姿势。
一、什么是 HTML 实体
HTML 实体是用 &名字; 或 &#数字; 表示特殊字符的方式：
<→<，>→>，&→&"→ 引号， → 不换行空格中或中→ 「中」（数字实体）
二、为什么必须转义
< > & 是 HTML 语法保留字符。如果用户输入的内容原样输出到页面：
- 输入
<script>alert(1)</script>会被浏览器当真标签执行——这就是存储型 XSS。 - 内容里出现
&会和后面的字符意外拼成实体。
转义后浏览器把它渲染成纯文本显示，而不是当成标签解析。
三、输出场景决定转义规则
- HTML 文本节点：转义
< > &。 - 属性值（attr="..."）：还要加转义引号
"。 - URL 属性（href/src）：先做 URL 编码，再防
javascript:协议。 - JS 字符串/JSON 内联：另一套转义（反斜杠、引号、</script> 结束标签）。
框架（React/Vue 的默认转义、Jinja2 的 autoescape）已覆盖大部分场景，dangerouslySetInnerHTML、v-html、|safe 是高危入口，用前必须确认数据已消毒。
四、常见误区
- 「入库前转义」不推荐：存原始数据、输出时按场景转义，否则多次转义出现
&lt;叠罗汉。 - ：用白名单过滤库（如 DOMPurify）只放行安全标签，而不是手写正则替换。
- 转义 ≠ 防全部 XSS：还需配 CSP、HttpOnly Cookie 等纵深防御。
在线体验
不用装任何环境，直接用本站URL 编解码工具在线操作，数据都在浏览器本地处理，方便又安全。
常见问题
&lt; 这种叠罗汉是怎么回事？
同一份数据被重复转义：已转义成 < 的内容又被转义一次，& 变成 &。原因通常是入库时转义一次、输出时又转义一次。原则：只转义一次，且在输出时做。
和普通空格有什么区别？
是不换行空格：不会被 HTML 折叠成单个空格，且禁止在此处换行。用来对齐表格数字、保持「词组不折行」，别滥用。
URL 里的 & 要转义成 & 吗？
在 HTML 的 href 属性里，& 规范上应写成 &（如 a=1&b=2）；浏览器对裸 & 容错很高，但规范写法能避免和实体名冲突。