必须放在最前面，因为浏览器流式解析html，未读到前遇中文会按默认编码（如gbk）错解，后续声明无法挽回已乱码内容。
为什么必须放在最前面？
因为浏览器解析 HTML 是从上到下流式进行的。一旦遇到非 ASCII 字符（比如中文），而此时还没读到 meta charset，它就会按默认编码（通常是系统 locale，如 Windows 的 GBK）去解码——结果就是乱码。哪怕你后面写了 meta charset="UTF-8"，也救不回已经错解的部分。
常见错误现象：
- 页面开头显示正常，中间或结尾中文变
- VS Code 里看着是 UTF-8，但双击打开后全是问号
-
document.characterSet返回GBK或ISO-8859-1
实操建议：
-
meta charset必须是内第一个子元素（<title></title>前） - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 已废弃且兼容性差 - 别用
charset="utf8"（缺短横）或"UTF_8"（下划线）——只有"UTF-8"是 HTML5 合法值
极简 HTML 模板：5 行能跑，中文不乱
下面这个模板去掉所有冗余，只保留运行必需项，复制粘贴就能用：
<meta charset="UTF-8"><p>你好，世界！</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
说明：
-
lang="zh-CN"不是必须，但影响屏幕阅读器、搜索引擎分词和部分 CSS 伪类（如:lang()） - 没写
<title></title>也能运行，但标签页会显示空白或文件名，不利于调试 - 没加
<meta name="viewport">不影响本地打开，但手机 Safari 可能缩放异常（尤其 iOS 17+）
保存为 .html 文件时，UTF-8 编码怎么确认？
很多编辑器“声称”存为 UTF-8，实际可能带 BOM 或根本没生效。BOM 在 前会直接导致 <code>meta charset 失效。
实操建议：
- VS Code：右下角点击编码（如 “UTF-8”），选
Save with Encoding → UTF-8（不是 UTF-8 with BOM） - Notepad++：编码 → 转为 UTF-8（无 BOM）→ 保存
- Sublime Text：File → Save with Encoding → UTF-8
- 验证方法：用十六进制编辑器（如 HxD）打开文件，开头三字节不能是
EF BB BF
双击打开后还是乱码？优先检查这三处
本地开发时，file:// 协议不走 HTTP 响应头，所以完全依赖 HTML 自身声明和文件编码。出问题基本就卡在这三点：
- 文件扩展名是不是
.html？别保存成index.html.txt（Windows 默认隐藏扩展名） - 编辑器是否真的存成了 UTF-8？而不是 ANSI / GBK —— 记事本在“另存为”里必须手动选编码
-
meta charset是否被注释、拼错、或放在了里？
最容易被忽略的是：Mac 上用 TextEdit 直接新建并保存，它默认存为 RTF 格式，哪怕改了扩展名也没用——必须先设为纯文本模式（格式 → 使纯文本）再写 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
