2.1 HTML文档解剖：从DOCTYPE到身体
2.1 HTML 文档解剖：从 DOCTYPE 到 body
本节摘要：一份 HTML 文档由类型声明、根元素、头部与身体四层构成：声明告诉浏览器按什么标准施工，头部存放给浏览器与搜索引擎看的元信息，身体承载用户可见的全部内容。本节逐行解剖这份"图纸规范"，创建看板的入口页面，并解释字符集、视口等头部设定的现实作用。
一、交接单：开工前先看图纸规范
结构班上岗第一件事不是搬砖，是读图纸。所有网页的图纸规范都一样，先认识它再动手，写出来的东西才不会像随手涂鸦。把一份最小文档拆开，只有四层结构：第一行类型声明，一个根元素，根元素里套着头部与身体。头部里的东西用户看不见但浏览器都要读，身体里的东西才是用户眼前的一切。
图 1：一份文档的剖面结构
二、逐行读懂每个仪式性代码
新手常问：那些每份文档都长得一样的行，删掉行不行？逐个回答。
类型声明。文档第一行的尖括号叹号开头那句，作用是让浏览器切换到标准模式解析。删掉它，部分浏览器会退回十多年前的兼容渲染方式，盒子的尺寸计算规则都会变——1.3 节的流水线从这里就分岔。它不是可有可无的装饰，是施工标准的声明。
根元素与语言属性。根元素全文档唯一，它的语言属性标明页面主要语言。浏览器拿它决定断词与翻译提示，读屏软件拿它决定用什么口音朗读——标了中文，读屏就不会用英文口音念汉字，可访问性从根上做起。
字符集设定。头部里那行字符编码声明，是中文页面的生命线。漏写它，浏览器可能用错误编码解读字节，中文全变成乱码。编辑器保存文件用同一编码（上一节配置过），两头对齐，乱码永不登门。
视口设定。没有它，手机会把为桌面设计的页面整体缩小到蝇头小字，逼用户双指放大。有了它，手机按自身宽度当画布，为 3.6 节的响应式装修铺好结构基础。这行代码是结构与样式之间一次重要的提前交接。
页面标题。标签页上那行字，也是搜索结果里最显眼的链接文字。写"首页"两个字还是写"青云精密·车间生产看板"，搜索引擎与用户的判断截然不同。
三、动手：创建看板的入口页面
往下动手之前，先把三个容易混用的词分清。标签是源文件里那对尖括号记号本身；元素是浏览器建树后的节点，涵盖开标签、内容、闭标签这个整体；属性写在开标签里，是给元素的附加说明。一句话概括：你在源文件里写标签和属性，浏览器读完后在内存里造出元素。日常口语三者常混着说，但读报错信息时要能分清——报"标签未闭合"说的是源文件书写问题，去你写的那一行找；报"元素未找到"说的是树上查找失败，去查选择器写得对不对、元素解析到没有。两个方向的排查动作完全不同。
还有一条认知要立住：空白与换行在结构班的地盘基本不算数，连续空格会被折叠成一个，换行会被当作空格处理。想让文字换行要用专门的换行标签，想保留原始排布要用保留格式的标签。这解释了一个新手名场面：源文件里排得整整齐齐的几行字，页面上却挤成一行——因为浏览器根本没把你的换行当回事。结构与呈现分离的思想，从这一个小现象就开始了：源文件只描述内容是什么，怎么呈现是样式班的事。
图纸规范认全了，开工。在编辑器里新建入口页面，敲入下面的完整骨架（保存编码用 UTF-8，从浏览器直接打开验证）：
<!-- 看板入口页面 v0.1：结构班的第一批交付，先立四梁八柱 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>青云精密 · 车间生产看板</title> </head> <body> <!-- 页头：厂名与日期，先占位，样式班后面来装修 --> <header> <h1>青云精密制造 · 车间生产看板</h1> <p>今日日期由行为班脚本自动填写</p> </header> <!-- 主体：统计区、工单表、登记表单三块，本章后续小节逐块填充 --> <main> <section>统计卡片：待开工 / 加工中 / 已完成</section> <section>工单列表：一张表格装下今天的活</section> <section>新增工单：一张表单登记新任务</section> </main> <footer> <p>青云精密制造 · 三车间 · 看板版本由结构班维护</p> </footer> </body> </html>
验收要点（在浏览器里逐条核对）： - 标签页标题显示完整厂名与看板字样 - 页面从上到下依次是页头、三块主体、页脚，无乱码 - 手机模式（开发者工具可模拟）下文字不是缩小的桌面版 - 查看源代码：类型声明在第一行，语言属性在根元素上
两个代码块合起来是"交付加验收"的完整闭环：先写结构，再按清单核对。注意代码里用注释标注了每个区块的用途与归属班组——正式项目里注释不必这么多，但学习期建议写足，注释写不清的地方往往就是理解不到位的地方。
四、嵌套规矩与常见事故
结构班的操作风险集中在嵌套上。元素像容器可以层层相套，但有两条铁律：标签要正确闭合，开一个闭一个；嵌套要正确对齐，后开的先闭。浏览器对错误嵌套有一定容错，会自作主张帮你修正结构——但它的猜测未必是你想表达的，尤其是列表项里塞整段区块、表格行里直接放标题这类操作，修正结果可能面目全非。
另一个高频事故是无语义容器的滥用。有一种标签专门当万能容器用（下一节细说），新手图省事把一切内容都装进去，页面最终变成千层饼：满屏容器，谁也不知道哪层是标题、哪层是表格。判别标准很简单：先问"这段内容本质是什么"，找得到对应标签就用对应的；确实需要纯粹用于分组或挂样式的容器，才用万能容器。
⚠️ 常见坑：复制别处代码时带入了残缺标签——只有开头没有结尾，浏览器容错后页面"看起来正常"，但元素树已经和你的预期不一致，后面样式与脚本点名会莫名失灵。粘贴后过一遍标签配对高亮能省不少排查时间。
💡 关键直觉：元素树是三班共用的唯一结构真相。你在源文件里写的缩进只是给人看的，浏览器按标签嵌套关系建树；元素面板里看到的那棵树，才是样式班点名、行为班操作的对象。
本节要点回顾
- 四层结构：类型声明定标准、根元素定语言、头部放元信息、身体放可见内容；
- 头部四件：字符集防乱码、视口保手机、标题上标签页与搜索结果、引用装修与接线文件；
- 看板开工：入口页面已立起页头、三块主体与页脚的区块划分；
- 闭合与对齐：标签开闭成对、嵌套对齐，容错修正不可依赖；
- 容器纪律：先找语义标签，分组与挂样式才用无语义容器；
- 唯一真相：元素面板里的树是三班共同的操作对象，源文件缩进不算数。
骨架立起来了，下一节往区块里装第一批内容零件：文本与语义化元素。