HTML5中设置页面编码的唯一推荐方式是<meta charset="UTF-8">，必须置于<head>最前；需确保文件实际保存为UTF-8（无BOM），且服务器Content-Type响应头不冲突，三者缺一不可。
meta charset 声明必须放在 最前面
HTML5 中设置页面编码的唯一推荐方式是使用 <meta charset="UTF-8">，且它必须出现在 <head> 内尽可能靠前的位置（最好作为第一个子元素）。浏览器在解析到该标签前若已读取了非 ASCII 字符（比如中文注释、标题文字），就可能触发编码误判，导致乱码或重新解析。
常见错误写法包括：
- 把
<meta charset>放在<title>或<script>后面 - 用旧式写法
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">（虽兼容但冗余，且易因空格/大小写出错） - 漏掉引号，如
<meta charset=UTF-8>（不符合 HTML5 规范，部分解析器会忽略）
charset 属性值必须与实际文件保存编码一致
声明 charset="UTF-8" 没有用，如果文件本身是用 GBK 或 ANSI（Windows 记事本默认）保存的，浏览器按 UTF-8 解码仍会显示乱码。关键在于“声明”和“物理存储”要对齐。
确认和修正步骤：
立即学习“前端免费学习笔记（深入）”；
- 用 VS Code、Sublime Text 或 Notepad++ 打开 HTML 文件，查看右下角编码标识（如 “UTF-8”、“GBK”）
- 若显示非
UTF-8，选择「文件 → 另存为 → 编码选 UTF-8（无 BOM）」 - 避免使用 Windows 自带记事本保存 HTML，它默认保存为 ANSI 或 UTF-16，极易出问题
服务器响应头 Content-Type 优先级高于 meta charset
当网页通过 HTTP 服务访问（如 http://localhost:8080/index.html），服务器返回的 Content-Type 响应头（例如 text/html; charset=iso-8859-1）会覆盖 HTML 中的 <meta charset>。本地双击打开（file:/// 协议）则只依赖 <meta>。
验证方法：
- Chrome 开发者工具 → Network → 刷新页面 → 点击
index.html→ 查看 Response Headers 中的content-type - 若发现不匹配，需调整 Web 服务器配置：Apache 加
AddDefaultCharset UTF-8；Nginx 加charset utf-8;；Python 的http.server默认不设 header，此时<meta>生效
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的页面</title> </head> <body> <p>你好，世界！</p> </body> </html>
真正容易被忽略的是：即使写了 <meta charset="UTF-8">，只要文件保存编码不对、或服务器 header 冲突、或它没放在 <head> 开头三行内，乱码就大概率发生——这三个条件缺一不可。
