必须显式声明UTF-8编码，否则浏览器按环境默认编码解析易致乱码；应使用置于最开头，且确保文件实际保存为UTF-8编码。
HTML里不写会怎样
浏览器会按默认编码解析页面，而这个“默认”在不同环境差异极大：中文windows下常是gbk，mac或linux下可能是utf-8，http响应头没设content-type时更依赖浏览器猜测。结果就是中文乱码、符号错位、甚至js执行报错——比如console.log("你好")变成console.log("")。
实操建议：
- 只要页面含非ASCII字符（中文、emoji、特殊标点），就必须显式声明编码
- 优先用
<meta charset="utf-8">，放在最开头（越靠前越好，最好第1行） - 不要写
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">，它等效但更冗长，且部分老浏览器解析顺序不稳
charset=utf-8和Content-Type里的charset冲突怎么办
当HTTP响应头里有Content-Type: text/html; charset=iso-8859-1，而HTML里又写了<meta charset="utf-8">，浏览器以HTTP头为准——<meta>会被忽略。这是硬规则，不是bug。
实操建议：
- 检查真实响应头：用浏览器开发者工具的Network面板看
Response Headers里的Content-Type - 静态文件托管（如GitHub Pages、Vercel）通常默认发
UTF-8，但Nginx/Apache可能按系统locale配错，需手动加charset utf-8;配置 - Node.js后端用
res.setHeader('Content-Type', 'text/html; charset=utf-8')比依赖<meta>更可靠
为什么必须放在最前面
浏览器解析HTML是流式的，一旦开始按错误编码读取了前几百字节，后续即使遇到<meta charset>也来不及回退重载——特别是当标题、内联CSS/JS里已有中文时，乱码已发生。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
-
<title>用户管理</title>显示成<title>Óû§¹ÜÀí</title> - 内联
<script>alert("保存成功")</script>弹出乱码对话框 - CSS里的
content: "编辑";变成方块或问号
实操建议：
-
<meta charset="utf-8">应为中第一个子元素，前面不能有任何空白、注释或<script></script> - 生成HTML的模板引擎（如EJS、Jinja）注意别在
<meta>前插入空行或变量输出
HTML5里charset=utf-8还有没有其他写法
有，但都不推荐。比如<meta http-equiv="Content-Type" content="text/html;charset=utf-8">在HTML5中合法，但语义模糊、解析更慢；用XML声明<?xml version="1.0" encoding="UTF-8"?>对HTML无效（只对XHTML起作用）。
关键点：
-
<meta charset="utf-8">是HTML5唯一推荐写法，简洁、明确、解析最快 - 大小写不敏感，但统一小写更稳妥（
UTF-8、utf8都错，后者缺横线） - 不要省略引号：
<meta charset="utf-8">在某些解析器里可能被截断为utf
最容易被忽略的是：服务器返回的字节流本身必须真是UTF-8编码。编辑器存盘时选错编码（比如用ANSI存中文文件），再怎么写<meta charset="utf-8">也没用。
