<!DOCTYPE html>必须位于第一行首字符，<meta charset="UTF-8">必须为<head>首个子元素，否则浏览器 fallback 至默认编码（如 ISO-8859-1 或 GBK），导致中文乱码、emoji 显示异常、DOM 解析中断及怪异模式渲染错误。
必须用 <!DOCTYPE html>，且 <meta charset="UTF-8"> 要放在 <head> 最前面——缺一不可，否则中文乱码、布局错乱、emoji 渲染失败都是大概率事件。
为什么 <!DOCTYPE html> 不能省，也不能写错
浏览器靠它决定用“标准模式”还是“怪异模式”渲染。写成 <!doctype html>（小写）、<!DOCTYPE HTML>（大写但没空格）、甚至漏掉空格写成 <!DOCTYPEhtml>，部分旧版 Safari 或 IE 可能降级为怪异模式，document.compatMode 返回 "BackCompat"，盒模型、height 计算、表格对齐全会出偏。
常见错误现象：
- 明明写了
height: 100px，元素却撑不满 - CSS 的
margin双倍叠加（IE 盒模型 bug 复现） -
table内边距或居中失效
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 复制粘贴时确认是
<!DOCTYPE html>—— 全小写doctype、一个空格、html全小写，无引号、无 URI、无 DTD - 它必须是文件第一行第一个字符，前面不能有空格、BOM、注释或 UTF-8 BOM（
EF BB BF） - 用
file -i your-page.html检查是否含 BOM；VS Code 保存时选 “UTF-8” 而非 “UTF-8 with BOM”
<meta charset="UTF-8"> 必须紧贴 <head> 开头
浏览器解析 HTML 时，只扫描前 1024 字节找 <meta charset>；如果它被 <title>、<script> 或注释挡在后面，就可能 fallback 到 ISO-8859-1，中文直接变 ，emoji 显示为空白方块，甚至触发 DOM 解析中断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">是<head>中第一个子元素，顺序：<head><meta charset="UTF-8"><title>...</title>... - 不要混用旧式写法
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，HTML5 中已过时，Safari 和微信内置浏览器不完全支持 - 若服务端设置了
Content-Type: text/html; charset=GBK，哪怕<meta>写了 UTF-8，页面仍按 GBK 解析——HTTP 响应头优先级高于<meta>
文件实际编码、<meta> 声明、HTTP 响应头三者必须一致
三者不一致是乱码的根源。比如编辑器存成 GBK，<meta charset="UTF-8"> 却写了 UTF-8，浏览器就会把两个字节的中文当做一个 UTF-8 字符解析，结果满屏乱码；反过来，文件是 UTF-8 但服务器返回 charset=GBK，也会崩。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 编辑器统一设为“UTF-8 无 BOM”：VS Code → 右下角编码 → “Save with Encoding” → 选
UTF-8；Sublime Text → File → Save with Encoding →UTF-8 - 用命令行验证文件编码：
file -i index.html输出应含charset=utf-8，而非iso-8859-1或us-ascii - 检查 HTTP 响应头：
curl -I https://yoursite.com/index.html看Content-Type是否含charset=UTF-8；Nginx/Apache 需显式配置AddDefaultCharset utf-8或charset UTF-8;
最容易被忽略的是 BOM：VS Code 默认可能保存为 “UTF-8 with BOM”，那个看不见的 EF BB BF 会卡在 <!DOCTYPE html> 前面，导致 DOCTYPE 失效，浏览器直接进怪异模式——连 <meta charset> 都来不及读。
