HTML模板文件编码必须统一为UTF-8且不带BOM，meta charset="UTF-8"必须紧接<html>后置于<head>最开头，否则浏览器在解析前1024字节内无法及时识别编码，导致中文等非ASCII字符被默认ISO-8859-1错误解码而乱码不可逆。
HTML模板文件编码必须统一为 UTF-8，且不能带 BOM；meta charset="UTF-8" 必须放在 <head> 的最开头（紧接 <html> 之后），否则中文等非 ASCII 字符在解析早期就会被错误解码。
为什么 UTF-8 是唯一合理选择
UTF-8 覆盖全部 Unicode 字符，兼容 ASCII，且是现代浏览器、HTTP 协议、Node.js/Express、Nginx、Apache 和所有主流静态托管平台（Vercel、Netlify、GitHub Pages）的默认编码。用 GBK 或 ISO-8859-1 等编码，等于主动放弃国际化支持、增加部署风险、引发不可预测的乱码链式反应。
- UTF-8 不带 BOM 是硬性要求：BOM（
EF BB BF）会出现在<!DOCTYPE html>之前，导致浏览器误判文档开头，使meta charset失效 - “UTF-8 with BOM” 是编辑器常见陷阱：VS Code 默认不写 BOM，Notepad++ 默认可能写 BOM，保存时务必手动选 “UTF-8” 而非 “UTF-8-BOM”
- 模板中若含动态插入（如 PHP
echo $title或 JS 模板字符串），源文件编码与运行时输出编码必须一致，否则document.characterSet会返回错误值
meta charset="UTF-8" 必须放在 <head> 最靠前位置
浏览器解析 HTML 时，会在读取前 1024 字节内尽快确定编码。一旦开始解析 <title> 或外部 <script>，就不再回退重解——此时若编码未声明或声明滞后，已读内容（包括中文标题、内联脚本注释、CSS 字体名）就会按默认 ISO-8859-1 解码，产生乱码且不可逆。
- 正确顺序：
<html lang="zh-CN"><head><meta charset="UTF-8"><title>用户中心</title>... - 错误示例：注释、空行、BOM、
<script>或<link>出现在meta charset之前 - 模板引擎（如 EJS、Handlebars）生成 HTML 时，需确保
meta标签不被条件逻辑包裹或延迟输出
HTTP 响应头与 meta 必须双重保障
仅靠 meta 不可靠：如果服务器返回的 HTTP Content-Type 头明确指定其他编码（如 charset=GBK），浏览器会优先信任响应头，直接忽略 meta。模板部署后，这个头由 Web 服务器或框架控制，不是前端能单方面决定的。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 本地开发用 Node.js/Express：在
res.send()前加res.set('Content-Type', 'text/html; charset=utf-8') - Nginx 配置：在
server或location块中加charset utf-8;（注意不是AddDefaultCharset） - Apache：在站点目录下
.htaccess中写AddDefaultCharset UTF-8或用Header set Content-Type "text/html; charset=UTF-8" - 验证方式：Chrome DevTools → Network → 刷新页面 → 点 HTML 请求 → 查看 Response Headers 中
Content-Type值是否含charset=utf-8
模板文件本身怎么存才安全
编辑器保存动作决定字节流，这是乱码的物理源头。很多“明明写了 meta 却还乱码”的问题，根源都在这一步。
- VS Code：保存时点击右下角编码显示（如 “GBK”），选 “Save with Encoding” → “UTF-8”；确认状态栏显示 “UTF-8” 且无 “BOM” 字样
- Notepad++：编码菜单选 “转为 UTF-8 编码”（不是 “UTF-8-BOM”）；另存为时格式选 “UTF-8”
- 命令行验证（Linux/macOS）：
file -i your-template.html应输出charset=utf-8；xxd -l 8 your-template.html应看不到ef bb bf - 团队协作：在项目根目录放
.editorconfig，强制charset = utf-8和end_of_line = lf
最容易被忽略的是：模板文件编码、HTTP 响应头、meta 标签三者必须严格一致，缺一不可；任何一环脱节，乱码就会在某个环节悄然发生，且往往只影响部分字符（比如只错标题、只错 JS 注释），排查成本远高于预防成本。
