必须写，且须置于最前（最好在前）；否则浏览器遇中文或emoji等非ascii字符时会按系统默认编码（如gbk）解码致乱码，即使文件已utf-8保存也无效。
HTML文件开头必须写吗
必须写，而且要放在 内最靠前的位置（最好在 <title></title> 之前）。浏览器解析 HTML 时，一旦遇到非 ASCII 字符（比如中文、emoji），又没提前声明编码，就会按系统默认编码（如 Windows 的 GBK）去解码，导致乱码——哪怕你用 UTF-8 编码保存了文件，也救不回来。
常见错误现象：文本乱ç 、テスト 这类问号式乱码，基本就是这个原因。
-
<meta charset="UTF-8">和<meta charset="utf-8">效果一样，大小写不敏感，但推荐小写，更符合惯例 - 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是旧写法，部分老浏览器支持，但现代 HTML5 明确推荐用charset属性 - 如果用了 HTTP 响应头
Content-Type: text/html; charset=utf-8，它优先级高于<meta>，但不能依赖它：本地双击打开 HTML 文件时，HTTP 头不存在，全靠<meta>
编辑器里保存文件时选UTF-8无BOM还是带BOM
选「UTF-8 无 BOM」。BOM（Byte Order Mark）是三个字节 EF BB BF，对 HTML 来说纯属干扰：
- 如果服务器配置不当，BOM 可能被当作响应体开头内容输出，导致
Cannot modify header information类 PHP 错误，或 JSON 解析失败 - 某些老旧 IE 版本会因 BOM 渲染出顶部空白，或触发怪异模式（Quirks Mode）
- VS Code、Sublime Text、Notepad++ 默认保存为无 BOM；若 Notepad++ 里显示「UTF-8-BOM」，请点右下角编码 →「转为 UTF-8 编码」
为什么写了还乱码？检查这三处
光加 <meta charset="utf-8"> 不够，下面三点漏一个都白搭：
- 编辑器实际保存编码是否真是 UTF-8？在 VS Code 右下角点击编码名（如「UTF-8」或「GBK」），选「Save with Encoding」→「UTF-8」
- 服务器是否覆盖了编码？用浏览器开发者工具（F12）→ Network → 点开 HTML 请求 → 查看 Response Headers 中的
Content-Type值，确认含charset=utf-8 - 有没有在
<meta charset>之前写了其他内容？比如注释、空格、甚至不可见的 BOM 字节——这些都会让浏览器忽略该 meta 标签
Node.js 或 Python 后端生成HTML时怎么设UTF-8
后端模板输出 HTML 时，不仅要写 <meta>，还要确保 HTTP 响应头正确，否则静态文件那一套就失效了。
- Express（Node.js）：
res.set('Content-Type', 'text/html; charset=utf-8')，或者用res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}) - Flask（Python）：
return Response(html_content, mimetype='text/html; charset=utf-8') - 如果用模板引擎（如 EJS、Jinja2），确保传入的字符串本身是 UTF-8 解码后的 str（Python3）或 string（Node.js），别用 bytes 直接拼接
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
