必须同时设置meta charset和确保文件真实编码为utf-8，缺一不可；只写但文件存为gbk，照样乱码，因为浏览器按http响应头charset、meta声明、系统默认编码优先级解析，三者不一致即导致乱码。
必须同时设置 meta charset 和确保文件真实编码为 UTF-8，缺一不可；只写 <meta charset="UTF-8"> 但文件存为 GBK，照样乱码。
为什么写了 <meta charset="UTF-8"> 还是乱码？
浏览器读取 HTML 时，会按以下优先级决定用什么编码解析：
- HTTP 响应头
Content-Type中的charset（最高优先级） - HTML 文档内
<meta charset="UTF-8">（次之，但仅当响应头未声明时生效） - 系统或浏览器默认编码（如 ISO-8859-1），此时极易出错
常见错误现象：页面明明写了 <meta charset="UTF-8">，中文仍显示为方块或问号——大概率是文件本身保存成了 ANSI/GBK，或服务器返回了 charset=gb2312 的响应头。
如何验证并统一三处编码？
三个地方必须一致：文件存储编码、HTTP 响应头、HTML meta 声明。
- 用 VS Code / Sublime / Notepad++ 打开 HTML 文件 → 查看右下角编码显示 → 点击切换为
UTF-8（**不要选 UTF-8 with BOM**）→ 保存 - 在 Chrome 开发者工具 Network 标签页里，点开 HTML 请求 → 查看 Response Headers → 确认
content-type: text/html; charset=utf-8 - 检查 HTML 的
内是否真有且仅有一行：<meta charset="UTF-8">，且位置在<title></title>之前、无注释包裹、无 JS 动态插入
若用 Nginx，需在配置中加 charset utf-8;；Apache 加 AddDefaultCharset UTF-8；Express 用 res.set('Content-Type', 'text/html; charset=utf-8')。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
特殊符号要不要用 HTML 实体？
不是所有符号都需要实体编码。只有这五个字符在 HTML 文本或属性中必须转义：、<code>>、&、"、'。
和 <code>>不转义会导致标签被误解析（如写x ，浏览器可能截断为 <code>x）-
&必须第一个转义，否则©会被当成新实体起点，而copy;非法 → 整个实体失效 - ©、®、€、中文等 Unicode 字符，只要页面是真实 UTF-8 编码 + 正确声明，可直接写，无需实体；强行用
©反而增加维护成本 - JavaScript 字符串内（如
document.write("5 ）不走 HTML 解析，<code> 是普通字符；但若拼进 <code>innerHTML，就必须提前转义
前后端协作时最容易忽略的一点
后端 API 返回的 HTML 片段（比如富文本字段），如果已由模板引擎自动转义（如 Django 的 {{ content|safe }} 以外默认行为），前端再用 he.encode() 或手动替换 & → &，就会双重转义：原始 <p>Hello</p> 变成 <p>Hello</p>，最终页面显示源码而非渲染结果。
建议约定：API 层传输原始未转义 HTML，前端在插入前按需处理（如用 textContent 显示纯文本，或用 he.encode() 后再塞进 innerHTML）；避免任何一方“以为对方会做”而重复操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
