# HTML 是怎么搭出网页骨架的：从最小文档到元素、属性和嵌套
元素、标签、属性和嵌套各自解决什么问题，以及写错结构时该去哪里核对
> HTML 基础 · 语义化标签 · DOM · 约 7 分钟 · 09 月 28 日
## 本篇要点
1. 最小可用的 HTML 由 doctype、html、head、body 四层构成：doctype 让浏览器用标准模式解析，head 装不显示给用户的元信息，body 装全部可见内容。
2. 元素是开始标签、内容、结束标签合成的整体，对应 DOM 树上的一个节点；标签只是标出边界的记号。
3. 空元素如 img、br、meta、link、input 只有一个标签，不能有内容。
4. 属性写在开始标签里，描述元素本身的设置（资源地址、语言、唯一标识、给 CSS 和 JS 用的抓手），可见文字才放在内容里。
5. class 和 id 只是抓手，本身不改变外观；id 在文档内必须唯一，class 可被多个元素共用。
6. 嵌套靠“谁在谁里面”决定结构，缩进只是给人看的；规则是先开的最后关，交叉嵌套不会报错，浏览器会按容错规则猜出另一棵树。
7. p、li、td 这类元素的结束标签可以省略，因为解析器有隐含结束规则；写全结束标签更不容易出问题。
8. 检查结构要看开发者工具里的 DOM 树，而不是源文件或页面外观。
9. 标签名表达的是“这段内容是什么”而非“它长什么样”；这个语义信息供搜索引擎、屏幕阅读器、CSS 和 JavaScript 使用，div 与 span 只在找不到更合适标签时使用。
---
上一篇讲浏览器打开网页时，读到 HTML 才建出一棵 DOM 树。但那棵树具体是你用什么写出来的、为什么长成那样，上一篇只带了一句。这一篇就解决这一件事：HTML 靠什么把一个页面搭成有结构的骨架。
先记住一句总的前提：HTML 不是给人看的排版稿，而是给浏览器看的说明书。你写在文件里的字符，最终要变成内存里那棵树的节点。所以下面所有语法，都值得问一句“它在这棵树上留下了什么”。
## 最小可用的一份 HTML
```html
我的第一个页面
你好
这是我的第一个页面。
```
这十几个字符里，一共只有四层东西：
`` 不是元素，而是一条给解析器看的声明。它必须放在文件第一行：只有写了它，浏览器才会用标准模式解析页面，其余部分才能按预期工作 [1]。
`` 是根元素，页面里所有东西都在它里面。它上面带的 `lang="zh-CN"` 声明这份文档的主要语言，屏幕阅读器靠这个信息决定用哪套发音规则，翻译工具也靠它判断 [2]。
`` 装的是“关于这个页面的信息”，而不是页面内容本身：编码、标题、样式表、脚本。上一篇说浏览器读 HTML 时发现 ``、`