标准html文档结构是硬性前提：必须以开头（无空格/bom），为根，内前置和，为唯一内容容器。
标准 HTML 文档结构不是“可选写法”，而是浏览器渲染和搜索引擎解析的硬性前提——漏掉 或错嵌 <code> 与 ，轻则页面乱码、样式失效，重则被搜索引擎降权。
为什么 必须放在第一行？
它不是 HTML 标签，而是文档类型声明（doctype），作用是告诉浏览器“用标准模式渲染，别用怪异模式”。如果它前面有空格、注释或 BOM 字节，浏览器会退化为怪异模式，导致盒模型、浮动、字体渲染全乱套。
- 常见错误：在
上方加空行、UTF-8 BOM（尤其 Windows 记事本保存时默认带 BOM） - 验证方法：用浏览器开发者工具 → Elements 标签页，看顶部是否显示 “Rendered in Standards Mode”
- 编辑器建议：VS Code 默认 UTF-8 无 BOM；Sublime Text 保存时选 “UTF-8” 而非 “UTF-8 with BOM”
是唯一根元素， 和 必须是它的直接子元素，且只能各出现一次。把 <script></script> 或 <div> 写在 <code> 外、或把 <title></title> 放到 里，浏览器虽会容错修复，但 DOM 结构已损坏，JS 获取 document.title 可能为空，SEO 元数据丢失。
- 典型错误：
<title>xxx</title>（错塞进） - 正确顺序：必须是
→+（同级，无嵌套） - lang 属性别省：写成
，影响屏幕阅读器发音和 Google 搜索结果语言识别
不显示内容，但决定页面能否正常加载、被正确理解。最小可用集合只有三个：必需的 <meta charset="UTF-8">、必需的 <title></title>、以及隐式必需的 <meta name="viewport">（移动端适配）。
-
<meta charset="UTF-8">必须在最靠前位置（最好第二行），否则前面的<title></title>中中文可能乱码 -
<title></title>不只是浏览器标签名，更是 SEO 第一关键词来源，长度建议 20–30 字符 - 没有
<meta name="viewport" content="width=device-width, initial-scale=1.0">，手机访问时页面会缩成一团小字 -
<link rel="stylesheet">和<script></script>可以后置，但<meta charset>和<title></title>顺序不能动
如何一秒生成合规骨架？
手动敲容易漏标签或拼错，现代编辑器都支持 Emmet 快捷展开。在空文件中输入 ! 后按 Tab（VS Code / WebStorm / Sublime 默认支持），直接输出完整、无 BOM、带中文 lang 的骨架：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
注意：生成后立刻改 <title></title>，否则所有页面标题都是 “Document”，不利于调试和 SEO； 里留空也行，但别删掉这层标签——哪怕只放一个 <p></p>，也得让它在 里面。
最常被忽略的是 <meta charset="UTF-8"> 的位置和 的值，这两处出错不会报红，但会让整个页面在部分环境里“看起来不对劲”。
