HTML文档结构是具有明确分工的层级契约，而非套娃模板；根元素<html>不可省略且唯一，决定文档类型与DOM可靠性；<head>承载字符集、视口、标题等关键元信息，缺失将导致乱码、白屏或SEO失效；<body>是内容容器但有默认边距与语义边界，需重置并谨慎使用；<title>是跨平台信息枢纽，影响标签页、分享卡片、搜索引擎及无障碍访问。
HTML 文档结构不是“套娃模板”，而是有明确分工的层级契约。跳过这个理解直接写页面，后期改样式、加脚本、做 SEO 都会卡在莫名其妙的地方。
为什么 <html> 标签不能省，也不只是个摆设
<html> 是整个文档的根容器，浏览器靠它识别“这是一份 HTML5 文档”。它必须存在，且只能有一个；如果漏写，多数浏览器会自动补上，但 DOM 树结构可能异常，影响 document.documentElement 的可靠性。
常见错误现象：
- 用
<div>或其他标签替代<html>作为最外层（比如 SSR 模板拼错）→ 浏览器降级为怪异模式，box-sizing、height: 100%行为不一致 - 写了两个
<html>→ 后一个被忽略，JS 查询document.querySelector('html')可能返回意外节点
它支持 lang 属性（如 <html lang="zh-CN">），这对屏幕阅读器、搜索引擎分词、CSS 的 :lang() 伪类都起效——不是可有可无的装饰。
立即学习“前端免费学习笔记（深入）”；
<head> 里放什么，决定页面“能不能被正确看见”
<head> 不渲染内容，但它是浏览器解析和加载逻辑的指挥中心。漏掉关键标签，轻则乱码，重则白屏、SEO 归零。
必须存在的最小集合：
-
<meta charset="UTF-8">：指定字符编码，没它中文可能变方块或问号 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：移动端响应式基础，缺了页面会默认按 980px 渲染 -
<title>：不仅显示在标签页，还参与搜索引擎标题提取、微信分享摘要生成
容易踩的坑：
- 把
<script>放进<head>且没加defer或async→ 阻塞 HTML 解析，首屏时间拉长 - 重复定义
<meta name="description">→ 搜索引擎可能忽略全部 -
<link rel="stylesheet">放在<title>后面是安全的，但放在<meta charset>前会导致 CSS 解析延迟
<body> 是内容容器，但不是“随便往里塞”的垃圾筐
<body> 承载所有用户可见内容，但它本身也带语义和行为边界。滥用会导致可访问性失败、打印样式错乱、甚至 JS 获取高度异常。
关键事实：
-
<body>默认有 margin（通常是 8px），这是历史遗留，现代项目建议用 CSS 重置：body { margin: 0; } - 它支持
onload等事件属性，但已不推荐——应改用addEventListener('load', ...) - 某些旧版 IE 中，
body.scrollTop和document.documentElement.scrollTop指向不同滚动源，需兼容判断
使用场景提醒：
- 全屏背景图/视频应挂载在
<body>上而非某个子<div>，避免因父容器 overflow 被裁剪 - 服务端渲染（SSR）时，
<body>内容是唯一允许动态注入的部分；<head>注入需通过框架专用 API（如 Next.js 的Head组件）
<title> 看似简单，实则是跨平台信息枢纽
<title> 不只控制浏览器标签页文字。它的内容会被操作系统任务栏、书签管理器、微信/钉钉分享卡片、搜索引擎结果页直接抓取使用。
实操建议：
- 动态页面中，用 JS 修改
document.title是安全的，但要注意：单页应用（SPA）路由切换时，仅改 title 不触发搜索引擎重新索引 - 避免纯符号或过长标题（>60 字符），移动端会截断，微信分享只取前 32 字
- 不要在
<title>里写 HTML 实体（如
真正容易被忽略的是：没有 <title> 的页面，部分无障碍工具会报严重错误，且 Google Search Console 会标记“缺失关键元数据”。这不是“锦上添花”，而是上线前必须验证的硬性项。
