必须将置于开头、之前，且不能有注释、空行或BOM干扰；浏览器仅扫描前1024字节查找该标签，否则fallback至系统默认编码（Windows为GBK，macOS/Linux为ISO-8859-1），导致中文、emoji及JS中文字符串乱码或报Invalid or unexpected token。
meta charset必须放在
最前面
浏览器解析HTML时，只读取前1024字节来查找，如果它被
或<script>挡在后面，就会 fallback 到系统默认编码（Windows 是 GBK，macOS/Linux 是 ISO-8859-1），导致中文、emoji 或 JS 中的中文字符串直接乱码或报 <code>Invalid or unexpected token。
<p>常见错误写法：
<pre class="brush:php;toolbar:false;"><head>
<title>我的页面</script>
</title>
<meta charset="UTF-8">
<p>正确位置必须是 <code> 开头、<code><title> 之前，且不能有注释、空行或 BOM 干扰：
<pre class="brush:php;toolbar:false;">
<meta charset="UTF-8"><title>我的页面</title>
<ul><li>VS Code 打开文件后，若顶部显示 “UTF-8 with BOM”，请用 <code>Reopen with Encoding → <code>UTF-8，再用 <code>Save with Encoding → <code>UTF-8（不带 BOM）
<li>用命令行验证：Linux/macOS 运行 <code>file -i index.<a style="color:#f60; text-decoration:underline;" title="html" href="https://m.php.cn/zt/15763.html" target="_blank">html；Windows PowerShell 运行 <code>Get-Content index.html -Encoding Byte | Select -First 3，结果不是 <code>239, 187, 191 才安全
<li>不要写成 <code><meta charset="UTF-8"> —— HTML5 不支持自闭合，IE 可能忽略
<h3>charset值大小写和拼写必须严格为"UTF-8"
<p><code>charset="utf-8"、<code>charset=UTF8、<code>charset=utf8 都是错的。浏览器只认精确匹配的 <code>"UTF-8"（大写 UTF，带连字符，带引号）。
<p>错误示例会静默失效：
<ul><li><code><meta charset="utf8">（缺引号 + 错拼）
<li><code><meta charset="utf-8">（小写 utf）
<li><code><meta charset="UTF8">（缺连字符）
<p>验证是否生效：打开 DevTools → Network → 点 HTML 请求 → 查看 <code>Response Headers 中的 <code>Content-Type 字段，以及 Preview 标签页是否正常显示中文；也可在控制台执行 <code>document.characterSet，返回值必须是 <code>"UTF-8"。
<h3>meta charset和HTTP响应头冲突时以Header为准
<p>当服务器返回的 HTTP 响应头包含 <code>Content-Type: text/html; charset=GBK，哪怕 HTML 里写了 <code><meta charset="UTF-8">，浏览器也优先按 Header 解码，meta 完全失效。
<p>常见场景：
<ul><li>本地双击打开 <code>file:// 协议页面：无 HTTP 头，完全依赖 meta
<li>Apache：在 <code>.htaccess 中加 <code>AddDefaultCharset UTF-8 或 <code>Header set Content-Type "text/html; charset=UTF-8"
<li>Nginx：配置块中加 <code>charset utf-8;（注意不是 <code>charset GBK;）
<li>Node.js/Express：用 <code>res.set('Content-Type', 'text/html; charset=UTF-8')
<p>部署前务必用 Network 面板确认响应头中的 <code>Content-Type 和 meta 值一致，否则前端写的 meta 就是摆设。
<h3>外部JS/CSS文件也要统一用UTF-8编码
<p><code><meta charset="UTF-8"> 只管 HTML 主文档，但 <code><script src="app.js"> 或 <code><link href="style.css"> 加载的外部文件如果实际是 GBK 编码，依然会触发 JS 报错或 CSS 注释乱码。
<p>排查方法：
<ul>
<li>用编辑器单独打开 <code>app.js，确认其编码是 UTF-8（非 UTF-8 with BOM）
<li>检查构建工具：Webpack 的 <code>html-webpack-plugin 默认注入 meta，但不会改 JS/CSS 文件编码；Vite、Rollup 同理
<li>避免用记事本保存 JS 文件——它默认 ANSI（GBK），极易埋雷
<p>真正麻烦的是：HTML 和 JS 都标 UTF-8，但 JS 文件本身是 GBK 存的，浏览器拿 UTF-8 去解 GBK 字节流，第一个中文就崩，且错误堆栈不提示编码问题，只报语法错误。</script><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'"></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a>
<p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
