HTML如何设置UTF-8编码？详细操作步骤一览-html教程-PHP中文网

必须紧贴开头、任何非ASCII内容（如、注释、BOM、空格）之前，否则浏览器仅扫描前1024字节时会跳过该标签，回退至系统默认编码（Windows为GBK，macOS/Linux为ISO-8859-1），导致乱码或JS报错。

html如何设置utf-8编码？详细操作步骤一览

meta charset="UTF-8" 必须写在开头、任何非 ASCII 内容（包括、注释、<script></script>、空格、BOM）之前，否则大概率失效。

为什么 `meta charset="UTF-8"` 有时不生效

浏览器解析 HTML 时只扫描前 1024 字节找第一个 meta charset；一旦遇到非 ASCII 字符（比如中文、注释、BOM EF BB BF），就会跳过该标签，回退到系统默认编码（Windows 是 GBK，macOS/Linux 是 ISO-8859-1），直接导致乱码或 JS 报 Invalid or unexpected token。

ҳ —— 失效：title 中文已超 ASCII 范围
—— 失效：注释含非 ASCII 字符
\n —— 可能失效：换行后紧跟非 ASCII 内容，空格/缩进本身不破坏，但若编辑器插入了 BOM 或隐藏控制字符就危险
正确写法：ҳ —— meta 紧贴，前面零空格、零注释、零 BOM

HTML 文件本身必须存为 UTF-8（无 BOM）

即使 meta 写对了，如果文件实际保存为 GBK 或 UTF-8 with BOM，浏览器读到的字节流仍是错的。VS Code 默认保存为 UTF-8（no BOM），但打开旧文件时可能自动识别成 GBK —— 这时候改 meta 没用，得先重编码。

VS Code：右下角点击编码名称（如 GBK 或 UTF-8 with BOM）→ 选 Reopen with Encoding → 试 GBK / UTF-8 看哪边中文正常 → 正常后点 Save with Encoding → 选 UTF-8（**不是 UTF-8 with BOM**）
Linux/macOS 终端验证：file -i index.html 应输出 charset=utf-8；head -c 3 index.html | xxd 不应显示 ef bb bf
Notepad++：编码 → 转为 UTF-8 编码（**不要选“UTF-8-BOM”**）→ 保存

HTTP 响应头比 `meta` 优先级更高

如果服务器返回的 Content-Type 响应头里写了 charset=GBK，哪怕 meta 写得再标准，浏览器也强制用 GBK 解析 —— 这是 W3C 规定的优先级：HTTP header > meta charset > 系统默认。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

Apache：.htaccess 中加 AddDefaultCharset UTF-8，或 Header set Content-Type "text/html; charset=UTF-8"
Nginx：server 或 location 块中加 charset utf-8;（注意不是 AddDefaultCharset，也不要用 add_header Content-Type）
Express：res.set('Content-Type', 'text/html; charset=UTF-8') 必须在 res.send() 之前调用
验证方式：Chrome DevTools → Network → 刷新 → 点 HTML 请求 → Headers → Response Headers → 查 Content-Type 是否含 charset=utf-8

表单提交和 JS 交互也得同步 UTF-8

光页面显示正常不够，用户输入提交、AJAX 请求、JSON 解析等环节若没对齐 UTF-8，照样出问题：中文 POST 数据变成问号、fetch 返回 JSON 解析失败、CSS content 属性显示方块。

—— 显式声明表单编码，尤其 Safari 和 Android WebView 对此敏感
fetch 提交时加 header：headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
JS 字符串操作、正则匹配中文时，确保源文件是 UTF-8，且没被构建工具（如 Webpack）意外转码
CSS 中 content: "中文"; 若显示为空白或方块，大概率是 CSS 文件本身没存为 UTF-8

最易被忽略的是三者不同步：文件存为 UTF-8，meta 写对了，但服务器响应头是 GBK；或者响应头对了，meta 却被注释挡在后面；又或者所有前端都对了，但后端接收 POST 时没设 req.setEncoding('utf8')。验证必须覆盖文件编码、HTTP 响应头、DOM document.characterSet 三处，缺一不可。