必须统一用utf-8：文件保存编码、、http响应头content-type三者必须完全一致，缺一不可；bom、位置错误或大小写/连字符不规范均会导致日韩文字显示为方块或问号。
必须统一用 UTF-8，且三处编码声明必须完全一致：文件保存编码、<meta charset="UTF-8">、HTTP 响应头 Content-Type。其他任何组合（比如文件存为 shift_jis 却写 meta charset="UTF-8"）都会导致日韩文字显示为方块、问号或西欧重音符号。
确认并重存 HTML 文件为 UTF-8（无 BOM）
很多乱码问题根源不在 HTML 代码，而在编辑器保存时选错了编码。记事本默认存为 ANSI（即 GBK/GB2312），VS Code 默认可能是 UTF-8 但带 BOM —— 而 BOM 在部分旧浏览器或邮件客户端中会引发解析异常。
- VS Code：右下角点击编码名称（如
UTF-8或GBK），选Save with Encoding→UTF-8（不勾选 BOM） - Notepad++：菜单栏
编码→转为 UTF-8 无 BOM 编码→ 再保存 - Sublime Text：
File→Save with Encoding→UTF-8 - 验证是否真为 UTF-8：用十六进制编辑器打开文件，开头三个字节不能是
EF BB BF（这是 BOM）；若存在，说明仍是“UTF-8 with BOM”
<meta charset="UTF-8"> 必须放在
这个标签必须在 内尽可能靠前，理想位置是 <title></title> 之前，且不能有任何字符（包括空格、注释、BOM）在它前面。否则浏览器可能跳过或误判。
- ✅ 正确：
<meta charset="UTF-8"> <title>...</title> - ❌ 错误：
<!-- 注释 --><meta charset="UTF-8">（注释导致 meta 失效） - ❌ 错误：
<meta http-equiv="content-type" content="text/html; charset=UTF-8">（HTML5 中已废弃，优先级低于charset属性，且易拼错） - 不要写成
<meta charset="utf-8">（小写没问题），但更关键的是内容必须与文件实际编码严格匹配
检查并强制服务器返回 Content-Type: text/html; charset=UTF-8
即使 HTML 文件本身和 meta 都正确，如果 Web 服务器（如 Apache/Nginx）在 HTTP 响应头里声明了别的编码（例如 charset=GBK 或干脆没声明），浏览器仍会以响应头为准 —— 这是最高优先级的声明。
- Apache：在站点根目录或虚拟主机配置中加一行
AddDefaultCharset UTF-8，或用.htaccess：Header set Content-Type "text/html; charset=UTF-8" - Nginx：在
server或location块中加charset utf-8; - 验证方法：打开浏览器开发者工具 → Network → 刷新页面 → 点开 HTML 请求 → 查看
Response Headers→ 找Content-Type字段值是否为text/html; charset=UTF-8 - 注意：PHP 输出前若调用了
header("Content-Type: text/html; charset=GBK")，会覆盖服务器配置，需同步修改
后端动态内容也要全程 UTF-8
如果页面含 PHP/Python/Node.js 渲染的日韩文字（比如数据库查出的字段、API 返回的 JSON），光前端设置不够。常见断裂点：
- MySQL 连接：执行
SET NAMES utf8mb4，且表与字段字符集设为utf8mb4_unicode_ci（不是utf8） - PHP：输出前确保
mb_internal_encoding('UTF-8')，JSON 返回加header('Content-Type: application/json; charset=UTF-8') - Node.js（Express）：
res.set('Content-Type', 'text/html; charset=utf-8')，读取文件时显式指定encoding: 'utf8' - 表单提交：前端
<form accept-charset="UTF-8"></form>不是必须，但可作双重保险；后端接收时禁止用iconv或mb_convert_encoding二次转码，除非原始数据确实非 UTF-8
最容易被忽略的是「文件保存编码」和「HTTP 响应头」这两环 —— 它们无声无息地覆盖 HTML 中的 meta 声明。只要其中任一环节是 shift_jis 或 euc-kr，日韩文字就会当场失效，哪怕 meta 写得再标准也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
