HTML怎么处理字符集与编码 HTML文档设置技巧【心得】-html教程-PHP中文网

html页面中文乱码、emoji显示方块、js报错，根本原因是字符集声明、文件保存编码、http响应头三者未对齐；必须是中第一个无空格/注释/bom的元素，编辑器须存为utf-8无bom，且服务器响应头content-type必须含charset=utf-8，三者缺一不可。

html怎么处理字符集与编码 html文档设置技巧【心得】

HTML 页面出现中文乱码、emoji 显示为方块、console.log("你好") 报 Uncaught SyntaxError: Invalid or unexpected token，基本就是字符集声明、文件保存编码、HTTP 响应头三者不一致——不是某个地方写错了，而是三个地方没对齐。

怎么写 `<meta charset>` 才真正生效

这个标签必须是中**第一个**且**无前置空格/注释/BOM**的元素，否则部分浏览器（尤其是旧版 IE）会忽略它。

✅ 正确位置：<meta charset="UTF-8"> <title>...</title> —— 紧贴开始，前面不能有任何字符（包括换行前的空格）
❌ 错误写法：\n \n <meta charset="UTF-8"> 或 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（HTML5 中已过时，兼容性差）
⚠️ 大小写敏感："UTF-8" 是唯一推荐写法；"utf8"、"utf_8"、"Unicode" 都不被标准认可，某些浏览器可能 fallback 到 ISO-8859-1

编辑器保存编码必须是 UTF-8 无 BOM

VS Code 默认新建文件是 UTF-8 无 BOM，但打开一个 GBK 编码的旧文件后，再另存为，很可能默认继承原编码 —— 这会导致 <meta charset="UTF-8"> 声明的是 UTF-8，而文件实际是 GBK，浏览器解析必然错乱。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

VS Code：右下角点击编码名称（如 GBK），选 Save with Encoding → UTF-8；确认状态栏显示 UTF-8 且**没有 “BOM” 字样**
Sublime Text：菜单 File → Save with Encoding → UTF-8（不是 UTF-8 with BOM）
BOM 的危害：UTF-8-BOM（EF BB BF）在文件开头插入 3 字节，会使 <meta charset> 不再是第一个内容，导致声明失效；还会让 JS 解析报 Invalid or unexpected token

HTTP 响应头 `Content-Type` 优先级高于 `<meta>`

当服务器返回的 HTTP 响应头里有 Content-Type: text/html; charset=GBK，哪怕 HTML 里写了 <meta charset="UTF-8">，浏览器也以响应头为准 —— 这是规范强制行为，不是 bug。

Nginx：在 http / server / location 块中加 charset utf-8;
Apache：配置 AddDefaultCharset UTF-8（注意不是 UTF8）
Node.js（Express）：res.set('Content-Type', 'text/html; charset=utf-8')；用 res.send() 时 Express 默认带 charset=utf-8，但显式设置更稳妥
静态托管（GitHub Pages、Vercel、Netlify）：通常默认发 UTF-8，但需进 Network 面板看 Response Headers 确认 Content-Type 值