必须位于第一行且无前置字符，否则触发怪异模式导致布局错乱；中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 应该放 前

以外的内容为什么不能写

所有可见内容必须包裹在 内，连一个换行符都不行。浏览器解析时，会把 外的文本节点当作“文档碎片”自动挪进去，但结果不可控：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 纯文本（比如不小心写在 后面的 “hello”）会被塞进 开头，可能压住导航栏
• 多余的 <div> 或 <code><p></p> 标签如果出现在 和 之间，会被浏览器强行闭合并重排，DOM 结构和你写的完全对不上
• VS Code 或其他编辑器的 Emmet 快捷生成（如输入 ! + Tab）之所以可靠，就是因为它严格遵循这个边界——别手动改坏它生成的骨架

怎么快速验证结构是否合法

别靠肉眼数标签，浏览器开发者工具的 Elements 面板只显示最终 DOM，不是原始 HTML。真正有效的方法是：

• 用 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，说明结构已崩

结构问题往往不报错，但会让后续所有 CSS 和 JS 行为变得难以预测。与其花三小时调试一个“莫名其妙”的布局错位，不如花三十秒核对这四行骨架是否干净利落。