必须放在第一行且前面不能有任何字符，否则浏览器进入怪异模式，导致失效；该meta标签须置于最前，且文件编码、响应头、meta声明三者必须均为utf-8无bom。

必须放在第一行，且前面不能有任何字符（包括空格、BOM、注释），否则浏览器会退入怪异模式，<code><meta charset="UTF-8"> 就失效。

确认并清除 BOM 头

老旧 HTML 文件常带 UTF-8-BOM（EF BB BF），VS Code 默认不显示，但它会让 <meta charset="UTF-8"> 失效。打开文件后，若状态栏显示 “UTF-8 with BOM”，就得转成纯 UTF-8：

• VS Code：右下角点击编码名称 → 选 “Save with Encoding” → 选 “UTF-8”（不是 “UTF-8 with BOM”）
• Sublime Text：File → Save with Encoding → UTF-8
• 验证是否清除成功：xxd yourfile.html | head，输出里不应出现 ef bb bf

把 <meta charset> 放到 最前面

它必须是 内第一个标签，早于 <title></title>、<script></script>、<style></style> 和任何注释。错位会导致：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• Chrome/Firefox 可能忽略它，按 HTTP 响应头或默认 ISO-8859-1 解析
• 中文、emoji 显示为 或乱码
• PHP/ASP 输出前若有空格或 BOM，也会让该 meta 失效

正确写法：<meta charset="UTF-8"> <title>...</title> —— 中间不能有换行或空格干扰。

同步修正服务器响应头和文件保存编码

只改 HTML 里的 <meta> 不够，HTTP 响应头和文件实际编码必须三者一致：

• Apache：在 .htaccess 加 AddDefaultCharset UTF-8；Nginx：server 块加 charset utf-8;
• PHP 页面开头加 header('Content-Type: text/html; charset=UTF-8');（必须在任何输出之前）
• 用 curl -I http://yoursite/page.html 检查响应头，确认 Content-Type 包含 charset=UTF-8
• 编辑器保存时务必选 “UTF-8（无 BOM）”，别信“自动识别”——老旧文件常被误判为 GBK

最容易被跳过的点：文件本身是 GBK 编码，却硬写 <meta charset="UTF-8">。浏览器按 UTF-8 解析 GBK 字节，必然乱码。先用 iconv -f GBK -t UTF-8 input.html > output.html 转码，再统一处理 meta 和响应头。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！