HTML5中文乱码需确保UTF-8编码统一：一、head内首行加<meta charset="UTF-8">；二、文件保存为UTF-8无BOM；三、服务器响应头charset设为UTF-8；四、清除BOM及开头非法字符；五、硬重载并禁用缓存验证。
如果您在浏览 HTML5 页面时遇到中文显示为乱码的问题，则很可能是网页未正确声明字符编码。HTML5 默认使用 UTF-8 编码，但必须通过 meta charset 标签显式声明，否则浏览器可能按系统默认编码（如 GBK）解析，导致乱码。以下是几种确保正确编码设置的方法：
一、在 中添加标准 meta charset 声明
HTML5 规范要求将字符集声明置于文档 <head> 内最靠前的位置（通常在第一个标签），以确保浏览器尽早识别编码。该声明必须是 ASCII 字符，且不能含 BOM。
1、在 HTML 文件的 <head> 标签内部第一行插入以下代码：
2、<meta charset="UTF-8">
立即学习“前端免费学习笔记（深入）”；
3、确认该标签未被注释、未拼写错误（例如写成 "utf8" 或 "utf-8" 以外形式）、且未重复出现多个 charset 声明。
二、检查文件实际保存编码是否为 UTF-8 无 BOM
即使 HTML 中声明了 UTF-8，若文件本身以其他编码（如 ANSI、GBK 或 UTF-8 with BOM）保存，浏览器仍可能解析失败。编辑器保存时的编码设置必须与 meta 声明严格一致。
1、用 VS Code 打开 HTML 文件，右下角查看当前编码显示（如 “UTF-8” 或 “GBK”）。
2、点击该编码标识，在弹出菜单中选择 “Save with Encoding” → “UTF-8”（非 “UTF-8 with BOM”）。
3、若使用 Sublime Text，依次点击菜单栏 File → Save with Encoding → UTF-8。
4、Notepad++ 用户需点击 编码 → 转为 UTF-8 无 BOM 格式 → 另存为。
三、验证服务器 HTTP 响应头是否覆盖 meta 设置
当 Web 服务器（如 Apache、Nginx）在 HTTP 响应头中明确设置了 Content-Type 并包含 charset，该响应头优先级高于 HTML 中的 meta 标签，可能导致 meta 失效。
1、在浏览器中按 F12 打开开发者工具，切换到 Network 面板，刷新页面。
2、点击主 HTML 文件请求，在 Headers 标签页的 Response Headers 区域查找 Content-Type 字段。
3、若其值为 text/html; charset=GBK 或不含 charset=，则需修改服务器配置。
4、Apache 用户应在 .htaccess 或 httpd.conf 中添加：AddDefaultCharset UTF-8；Nginx 用户应在 server 块中添加：charset utf-8;。
四、排除 HTML 文档开头存在不可见非法字符
文件开头若存在 BOM（字节顺序标记）或零宽空格等不可见字符，会干扰浏览器对 meta 标签的识别，使 charset 声明失效或被忽略。
1、将 HTML 文件拖入在线工具（如 https://www.soscisurvey.de/tools/viewphp.php）检测 BOM。
2、若检测到 BOM，使用支持无 BOM 保存的编辑器（如 VS Code、Notepad++）重新保存为 UTF-8 无 BOM。
3、删除 HTML 文件第一行开头所有空白字符，确保 <!DOCTYPE html> 或 <html> 前无任何字符（包括空格、换行、零宽空格 U+200B）。
五、强制浏览器重载并忽略缓存验证编码效果
浏览器可能缓存了旧版本的 HTML 响应（含错误编码信息），导致即使已修正 meta 和文件编码，乱码现象仍持续出现。
1、在 Chrome 或 Edge 中按下 Ctrl + Shift + R（Windows/Linux）或 Cmd + Shift + R（macOS）执行硬性重载。
2、打开开发者工具（F12），在 Network 面板勾选 “Disable cache”，再刷新页面。
3、清除该站点特定缓存：右键刷新按钮 → “Empty Cache and Hard Reload”。
