标准HTML文档结构是浏览器解析渲染的硬性前提：必须有首行的<!DOCTYPE html>、正确的<html><head><body>嵌套、<head>中必备<meta charset="UTF-8">和viewport等标签，且lang属性不可缺。
标准 HTML 文档结构不是可选的“格式规范”，而是浏览器解析和渲染页面的硬性前提——缺了 <!DOCTYPE html>，页面就进 quirks mode；<html> 标签没闭合，DOM 树可能被截断；<head> 里漏掉 <meta charset="UTF-8">，中文直接变乱码。
为什么必须写 <!DOCTYPE html>
这不是装饰性注释，而是告诉浏览器：“用标准模式解析”。没有它，IE 和旧版 Edge 会降级到怪异模式（quirks mode），导致盒模型、行高、浮动行为全部错乱。现代 Chrome/Firefox 虽宽容，但 SEO 工具、无障碍检测器会直接报错。
-
<!DOCTYPE html>必须严格写在第一行，前面不能有任何字符（包括空格、BOM） - 大小写不敏感，但推荐全小写；不要写成
<!doctype html>或带版本号的旧写法（如 HTML4 的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">） - 如果用 VS Code，输入
!+ Tab 可自动补全整套结构，但得确认生成的<!DOCTYPE html>确实在首行
<head> 里哪些标签不能少
<head> 不显示内容，但它决定页面怎么加载、怎么被识别、怎么被搜索。漏掉关键项，轻则字体乱码，重则手机端页面缩放失灵、SEO 掉权重。
-
<meta charset="UTF-8">：必须放在<head>最靠前的位置（通常第二行），否则浏览器可能已按默认编码（如 ISO-8859-1）解析了部分 HTML，再改也晚了 -
<meta name="viewport" content="width=device-width, initial-scale=1">：移动端适配底线，没它，手机浏览器会把页面当桌面宽度渲染，文字小到无法阅读 -
<title>：不仅影响浏览器标签页标题，还是搜索引擎结果页的第一展示项，也是屏幕阅读器读出的页面主标识 -
<link rel="icon" href="favicon.ico">虽非强制，但缺失时控制台会报 404（浏览器默认请求根目录下的/favicon.ico）
<body> 外围标签的嵌套陷阱
常见错误不是写错某个标签，而是破坏了 HTML 的层级契约：<html> 必须且只能包裹一个 <head> 和一个 <body>；<head> 里不能出现 <h1> 或 <p> 这类内容型标签；<body> 里也不能塞 <meta> 或 <title>。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<body><head><title>错位</title></head></body>—— 浏览器会自动纠错，但 DOM 结构不可控，JS 查询document.head可能返回空 - 另一个坑：
<html lang="zh-CN">的lang属性别漏，它影响屏幕阅读器发音、CSS 的:lang()选择器、甚至某些字体回退逻辑 - VS Code 的 Emmet 快捷键
html:5生成的结构是可靠的，但复制粘贴时容易多带一个空行或缩进，导致<!DOCTYPE html>前有空白
验证结构是否合法的最快方式
别等上线才查——本地就能验。最有效的是浏览器开发者工具的 Elements 面板 + 控制台：
- 打开页面后按 F12 → 切到 Elements 标签页，观察左侧 DOM 树顶层是否为
<html>，其下是否只有<head>和<body>两个子节点 - 在 Console 输入
document.doctype，应返回DocumentType对象；若为null，说明<!DOCTYPE html>缺失或位置错误 - 右键页面 → “查看页面源代码”，肉眼确认前三行是否为：
<!DOCTYPE html>→<html lang="xxx">→<head>，中间不能插任何内容
结构问题往往不报红错，但会让后续所有 CSS 和 JS 行为变得不可预测——比如 document.querySelector('body') 返回 null，或者 getComputedStyle(document.body) 拿不到预期值。稳住骨架，才能往上搭东西。
