如果您在浏览器中打开 html 页面时出现中文乱码，极大概率是由于字符编码声明缺失或冲突所致。标签正是用于向浏览器明确告知当前文档所采用的字符编码格式。以下是解决此问题的步骤：
一、确保位于最前端
该标签必须置于元素内部，并且尽可能靠近开头位置（理想情况下为后的第一个子元素），因为浏览器在解析前 1024 字节时即开始查找 charset 声明；若位置过晚或被注释、空格、BOM 等不可见字符阻隔，将导致声明失效，浏览器被迫回退至系统默认编码（如 Windows 下为 GBK）而引发乱码。
1、打开 HTML 文件，定位到标签内部。
2、确认是中第一个非空白、非注释的标签。
3、检查该标签前方无任何字符，包括空格、换行、HTML 注释（）、BOM 字节或不可见 Unicode 符号。
4、删除所有重复的 charset 声明，仅保留一个且必须为形式（禁止使用 utf8、UTF8、utf-8 等非标准写法）。
二、统一文件实际编码与声明一致
即使正确书写，若 HTML 文件本身并非以 UTF-8（无 BOM）编码保存，浏览器仍将按声明尝试解码错误字节流，造成乱码。尤其需警惕编辑器默认保存为 UTF-8 with BOM 或 GBK 的行为。
1、在 VS Code 中打开文件，右下角查看当前编码显示（如显示“GBK”或“UTF-8 with BOM”）。
2、点击该编码标识，选择“Save with Encoding” → “UTF-8”（明确排除“with BOM”选项）。
3、在 Notepad++ 中，点击菜单栏“编码” → “转为 UTF-8 编码”（非“UTF-8-BOM”）。
4、在 Sublime Text 中，点击“File” → “Save with Encoding” → “UTF-8”。
5、使用命令行验证：执行 head -c 4 yourfile.html | xxd，若输出含 ef bb bf 则存在 BOM，需清除后重存。
三、校验 HTTP 响应头中的 Content-Type
服务器通过 HTTP 响应头发送的 Content-Type 字段具有更高优先级，会覆盖 HTML 内部的声明。若响应头中指定 charset=gbk 或缺失 charset 子句，即使页面内正确声明 UTF-8，仍会导致乱码。
1、在浏览器中按 F12 打开开发者工具，切换至 Network 标签页。
2、刷新页面，找到主 HTML 文件请求项（通常为 document 类型）。
3、点击该项，在 Headers 子页中查看 Response Headers 区域的 Content-Type 字段值。
4、确认其完整值为 text/html; charset=utf-8；若为 charset=gbk、charset=iso-8859-1 或无 charset 子句，则需修改服务器配置。
5、对于 Nginx，在 server 或 location 块中添加 charset utf-8;（注意小写 utf-8，非 UTF-8）。
6、对于 Apache，在 .htaccess 或 httpd.conf 中添加 AddDefaultCharset UTF-8。
7、对于 PHP，在输出 HTML 前调用 header('Content-Type: text/html; charset=utf-8');，且确保该语句在任何输出（含空格、换行）之前执行。
四、排查外部资源编码一致性
HTML 页面中引入的外部 CSS、JS 文件若自身编码与页面不一致，或未声明编码，也可能间接引发 DOM 渲染异常或脚本解析错误，进而影响中文显示。特别是内联 script 标签中的中文字符串，其解码完全依赖于所在 HTML 文档的编码上下文。
1、确认所有 .css 文件以 UTF-8（无 BOM）保存，并在首行添加 @charset "UTF-8";。
2、确认所有 .js 文件以 UTF-8（无 BOM）保存，且不含 BOM 字节（BOM 可导致 Uncaught SyntaxError: Invalid or unexpected token 错误）。
3、避免在<script>标签内直接书写含中文的 alert、console.log 等语句，除非确保整个 HTML 文档编码链绝对可靠。</script>
4、检查 AJAX/fetch 请求返回的 HTML 片段或 JSON 数据，其响应头中 Content-Type 必须包含 charset=utf-8，否则需在客户端显式使用 TextDecoder 解码。
五、禁用 BOM 并验证文件纯净性
BOM（Byte Order Mark）是 UTF-8 文件开头的三个不可见字节（EF BB BF），虽不破坏文本内容，但会被浏览器识别为页面开头的实际字符，导致标签无法在前 1024 字节内被及时发现，从而触发 fallback 编码机制。
1、使用十六进制编辑器（如 HxD）或命令行工具打开 HTML 文件。
2、检查文件起始位置是否为 EF BB BF 字节序列。
3、若存在，删除这三个字节并以 UTF-8（无 BOM）格式重新保存文件。
4、在 VS Code 中，若右下角显示“UTF-8 with BOM”，务必点击后选择“Save with Encoding” → “UTF-8”而非“UTF-8 with BOM”。
5、保存后再次运行 head -c 4 yourfile.html | xxd 验证 BOM 已清除，输出应以 3c 21（即 "
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
