答案需在HTML中直接编写代码，无需额外工具或环境，直接在HTML文件中编写并运行。
直接在 HTML 里敲 、<code>&、" 这些字符，浏览器会当标签或属性解析，轻则显示错乱，重则执行恶意脚本——这不是你代码写错了，是 HTML 解析规则本身如此。
哪些字符必须转义，不转就出问题
只有 5 个字符在任何上下文都必须转义，漏一个都可能破坏结构或引入 XSS：
→ 必须写成 <code><（否则浏览器以为是标签开始）-
>→ 建议写成>（虽部分场景可直输，但 XML 模式或严格校验下会报错） -
&→ 必须写成&（所有实体都以&开头，它自己不转义就会让后续实体失效） -
"→ 在属性值中必须转为"（比如title="他说"你好""） -
'→ 属性值用单引号包裹时需转为'（注意：IE8 不支持'，稳妥起见统一用'）
常见错误现象：innerHTML = "x 直接赋值会触发 <code>Unexpected token "<"；src="a.js?k=v&v=2" 中的 & 若未转义，URL 参数会被截断。
和普通空格的区别到底在哪
浏览器默认把连续空格、制表符、换行全压缩成一个空格——这是规范行为，不是 bug。 是唯一能“锁住”空格不被合并的实体，但它本质是「不换行空格」，不是排版工具：
立即学习“前端免费学习笔记（深入）”；
- 想保留两个空格？写
姓名 张三，不是姓名 张三 - 想对齐文字或数字列？别堆
text-align或margin - 想控制宽度？
- 移动端慎用大量
真要原样保留缩进和换行，优先用 <pre> 或 white-space: pre-wrap，而不是手动补几十个 。
版权符 ©、注册符 ® 能不能直接粘贴
可以，但有前提：HTML 文件必须存为 UTF-8 无 BOM 格式，且页面声明了 </meta charset="UTF-8">。否则 © 可能变成 或乱码。
- 直接粘贴 Unicode 字符（如 ©、→、€）最简洁，适合静态内容
- 用实体名（
©、®）语义清晰，兼容性好，老浏览器也认 - 用十进制/十六进制（
©、©）最通用，但难记，适合动态生成或 emoji（如😀） - 服务端模板（如 Jinja2、EJS）通常自动转义
<和&，但不会动 © 或空格——此时再手动加实体，反而造成双重编码
检查是否生效，别只看源码，打开浏览器开发者工具的「元素」面板，看渲染后的实际 HTML 结构里是不是你想要的字符。
JS 动态插入时最容易翻车的点
前端拼接字符串往 DOM 插内容，转义逻辑常被忽略：
el.innerHTML = "x & y → 必须先转义：用 <code>el.innerHTML = "x & y < z"el.textContent = "x & y → 安全！<code>textContent自动转义，不解析 HTML- 用户输入内容直接进
innerHTML？必须过一遍转义函数，否则 XSS 风险极高 - React/Vue 项目里用
v-html或dangerouslySetInnerHTML，等于主动放弃框架保护，得自己确保内容已转义 - 后端返回的 JSON 数据含
<，前端 JS 解析后直接塞进innerHTML？一样要转——API 返回的原始数据不会自动 HTML 转义
最隐蔽的坑：同一个页面里混用多种方式（比如模板里用 ©，JS 里又拼 "©"），一旦编码不一致或传输被代理篡改，符号就崩。
