HTML5页面中文乱码需五步解决：一、确保<meta charset="UTF-8">位于<head>最顶部；二、文件保存为UTF-8无BOM；三、服务器响应头Content-Type须含charset=utf-8；四、删除重复charset声明；五、外部CSS/JS文件编码及响应头也须一致。
如果您在浏览 HTML5 页面时遇到中文显示为方块、问号或符号等乱码现象，通常是由于浏览器未能正确识别页面字符编码所致。以下是解决此问题的步骤：
一、确保 标签位于 最顶部且无前置内容
HTML5 中 必须作为
内的第一个子元素（或至少在任何可能触发渲染/解析的标签之前），否则浏览器可能已按默认编码（如 ISO-8859-1）开始解析，导致后续 charset 声明失效。1、打开 HTML 文件，定位到 <head> 标签内部。
2、确认 <meta charset="UTF-8"> 是
中第一个非注释、非空格的标签。立即学习“前端免费学习笔记（深入）”；
3、删除该标签之前所有脚本、样式链接、甚至空白换行与 HTML 注释（如 <!-- ... -->）。
二、检查文件实际保存编码是否为 UTF-8 无 BOM
即使声明了 charset="UTF-8"，若源文件本身以 GBK、ANSI 或 UTF-8 with BOM 方式保存，浏览器仍会因字节流与声明不一致而误判或截断首字节，引发乱码。
1、用支持编码切换的编辑器（如 VS Code、Notepad++、Sublime Text）打开 HTML 文件。
2、在编辑器菜单中查找“编码”或“Encoding”选项，确认当前文件编码显示为 UTF-8（不含 BOM）。
3、若显示为 UTF-8 with BOM 或其他编码，选择“另存为”，在保存对话框中明确选择 UTF-8（无 BOM） 格式并覆盖原文件。
三、验证服务器响应头未覆盖 meta 声明
当 Web 服务器（如 Apache、Nginx）通过 HTTP 响应头发送 Content-Type 并包含 charset 字段时，该头信息优先级高于 HTML 中的 标签，可能导致声明被忽略。
1、在浏览器中按 F12 打开开发者工具，切换至 Network 面板。
2、刷新页面，点击主 HTML 文件请求，查看 Headers 标签页下的 Response Headers 区域。
3、查找 Content-Type 字段值，确认其末尾为 charset=utf-8；若为 charset=gbk、charset=iso-8859-1 或缺失 charset，则需调整服务器配置。
四、移除重复或冲突的字符集声明
同一页面中存在多个 charset 声明（如同时使用 和 ）、或在 后又插入含 charset 的 ，将引发解析冲突，使浏览器采用不可预测的编码策略。
1、搜索整个 HTML 文件，确认仅存在一个 <meta charset="UTF-8"> 标签。
2、删除所有形如 <meta http-equiv="Content-Type" content="text/html; charset=..."> 的旧式声明。
3、确保无 JavaScript 动态写入或修改 标签的行为。
五、检查外部资源（CSS/JS）引入路径及编码一致性
若页面中引入的 CSS 或 JavaScript 文件本身含中文且未以 UTF-8 编码保存，或其 HTTP 响应头指定错误 charset，也可能间接导致页面部分区域渲染异常或触发浏览器重排编码逻辑。
1、逐一检查 与 <script src="..."> 的目标文件路径是否可访问。</script>
2、对每个外部资源文件，重复执行“二、检查文件实际保存编码是否为 UTF-8 无 BOM”中的步骤。
3、在 Network 面板中分别查看各 CSS/JS 文件的 Response Headers，确认其 Content-Type 同样包含 charset=utf-8。
