HTML文档类型声明与字符集设置的规范化实践-html教程-PHP中文网

必须位于第一行首字符，必须为首个子元素，否则浏览器 fallback 至默认编码（如 iso-8859-1 或 gbk），导致中文乱码、emoji 显示异常、dom 解析中断及怪异模式渲染错误。

html文档类型声明与字符集设置的规范化实践

必须用 ，且 <code><meta charset="UTF-8"> 要放在最前面——缺一不可，否则中文乱码、布局错乱、emoji 渲染失败都是大概率事件。

为什么 `不能省，也不能写错`

浏览器靠它决定用“标准模式”还是“怪异模式”渲染。写成 （小写）、<code>（大写但没空格）、甚至漏掉空格写成 <code>，部分旧版 Safari 或 IE 可能降级为怪异模式，<code>document.compatMode 返回 "BackCompat"，盒模型、height 计算、表格对齐全会出偏。

常见错误现象：

明明写了 height: 100px，元素却撑不满
CSS 的 margin 双倍叠加（IE 盒模型 bug 复现）
table 内边距或居中失效

实操建议：

复制粘贴时确认是 —— 全小写 <code>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">` 必须紧贴开头

浏览器解析 HTML 时，只扫描前 1024 字节找 <meta charset>；如果它被 <title></title>、<script></script> 或注释挡在后面，就可能 fallback 到 ISO-8859-1，中文直接变，emoji 显示为空白方块，甚至触发 DOM 解析中断。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

实操建议：

<meta charset="UTF-8"> 是中第一个子元素，顺序： <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;