结论：<!DOCTYPE html>、<html lang="zh-CN">、<meta charset="UTF-8"> 必须严格按顺序出现在文档前1024字节内，缺一不可；<!DOCTYPE html>须独占首行且无BOM/空格，否则触发怪异模式；lang="zh-CN"影响屏幕阅读器与JS初始化行为；<meta charset>须在<head>最前，避免Safari等解析失败导致乱码。
直接说结论：一个真正能上线、可访问、易维护的 HTML 文档结构，<!DOCTYPE html>、<html lang="zh-CN">、<meta charset="UTF-8"> 这三样必须严格按顺序放在前 1024 字节内，缺一不可——不是“建议”，是浏览器解析逻辑硬性要求。
为什么 <!DOCTYPE html> 必须独占第一行且不能有 BOM 或空格
浏览器看到非 <!DOCTYPE html> 开头的内容（比如 UTF-8 BOM EF BB BF、注释、空行），会立刻切换到怪异模式（Quirks Mode）。这时 CSS 盒模型、display: flex 行为、甚至 getBoundingClientRect() 返回值都可能出错。
- 用 VS Code 打开文件后，右下角确认编码显示为
UTF-8（不是UTF-8 with BOM） - 保存前手动删掉开头所有空格、换行、注释——哪怕只多一个空格，
<!DOCTYPE html>就失效 - 验证方式：打开 DevTools → Elements 面板，看顶部是否显示
Rendered in Standards Mode
<html lang="zh-CN"> 不只是 SEO，它影响屏幕阅读器和 JS 行为
lang 属性在 DOM 初始化时就被读取，之后再用 JS 动态改 document.documentElement.lang 不会触发屏幕阅读器重读，也不会影响拼写检查或字体回退逻辑。
- 必须写全称，
lang="zh"或lang="zh-Hans"都不如lang="zh-CN"明确（后者被 NVDA、VoiceOver 广泛识别） - 不要依赖框架自动注入——React/Vue SSR 渲染时若漏传
lang，首屏就失去语义化基础 - 多语言站点需配合
<link rel="alternate" hreflang="en" href="/en/">，否则搜索引擎可能误判主语言
<meta charset="UTF-8"> 必须在 <head> 前 1024 字节内，且不能被 CSS/JS 阻塞
浏览器在解析到第 1024 字节前，必须已读到 <meta charset="UTF-8">，否则会按默认编码（如 ISO-8859-1）解码后续内容，导致中文乱码。更隐蔽的问题是：某些 Safari 版本会因 <link rel="stylesheet"> 在 <meta charset> 前而跳过 charset 解析。
立即学习“前端免费学习笔记（深入）”；
- 把
<meta charset="UTF-8">放在<head>第一行，紧接在<html>后 - 禁止在它前面放任何
<link>、<style>、<script>——哪怕只是空<style></style>也会让 Safari 失效 - 如果用了 HTTP header 发送
Content-Type: text/html; charset=UTF-8，仍需保留该<meta>标签，二者不互斥
真正难的不是写对这三行，而是确保它们在所有构建流程中始终处于绝对头部位置——Webpack 插件注入、CMS 模板拼接、SSG 静态生成，任何一个环节加了空行或前置资源，都会让整个文档结构从根上失效。
