必须位于第一行且无前置字符，否则触发怪异模式导致布局错乱；中charset、viewport、title缺一不可；所有内容须包裹在内，结构错误会使CSS/JS行为不可预测。
HTML 文档结构不是“可选知识”，而是浏览器解析页面的硬性契约——写错位置或漏掉关键标签，轻则样式失效，重则整个页面白屏。
为什么 必须放在第一行
它不是注释，也不是可有可无的装饰。浏览器一旦在前几个字节没看到这个声明，就会触发“怪异模式（Quirks Mode）”，用老旧的 IE5 渲染逻辑处理后续所有标签——flex 布局失效、box-sizing 行为异常、甚至 margin 合并规则都变样。
必须独占一行，前面不能有任何空格、BOM 字符或注释- 大小写不敏感，但推荐全小写，避免和某些构建工具的模板引擎冲突
- 不要写成
或 <code><!-- DOCTYPE html -->，后者会被当注释忽略
不显示内容，但缺了它，页面可能根本跑不起来。
-
<meta charset="UTF-8">：没有它，中文会变成方块或乱码；尤其注意不能写成charset=utf8（缺少横线） -
<title></title>：虽然页面能打开，但 SEO 和书签功能直接报废，且部分屏幕阅读器依赖它定位页面 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：移动端页面不加这句，用户看到的是缩放后的小字版桌面页 -
<link rel="stylesheet" href="style.css">放这里没问题，但别把<script></script>也全堆进来——阻塞渲染的 JS 应该放前
所有可见内容必须包裹在 内，连一个换行符都不行。浏览器解析时，会把 外的文本节点当作“文档碎片”自动挪进去，但结果不可控：
立即学习“前端免费学习笔记（深入）”；
- 纯文本（比如不小心写在
后面的 “hello”）会被塞进开头，可能压住导航栏 - 多余的
<div> 或 <code><p></p>标签如果出现在和之间，会被浏览器强行闭合并重排，DOM 结构和你写的完全对不上 - VS Code 或其他编辑器的 Emmet 快捷生成（如输入
!+ Tab）之所以可靠，就是因为它严格遵循这个边界——别手动改坏它生成的骨架 - 用 W3C Markup Validation Service（validator.w3.org）粘贴代码校验——它会指出
里用了<h1></h1>这类语义错误 - 在 Chrome 中右键 → “查看页面源代码”，确认
确实在第 1 行第 1 列（Ctrl+Shift+I 打开 DevTools 后，Elements 里看到的不是源码） - 用
document.querySelector('html')在控制台检查是否存在，再查document.head和document.body是否为非 null —— 如果任一为 null，说明结构已崩
怎么快速验证结构是否合法
别靠肉眼数标签，浏览器开发者工具的 Elements 面板只显示最终 DOM，不是原始 HTML。真正有效的方法是：
结构问题往往不报错，但会让后续所有 CSS 和 JS 行为变得难以预测。与其花三小时调试一个“莫名其妙”的布局错位，不如花三十秒核对这四行骨架是否干净利落。
