# HTML Structure
这部分只解决一个问题：你能不能把页面内容写成清晰、正确、可维护的 HTML 结构。
## 学完后你应该掌握
- HTML 文档的基本骨架
- 标签的嵌套关系
- 常见文本标签的作用
- 块级元素和行内元素的区别
- 列表、链接、图片的结构写法
- 媒体标签的基础写法
- 表格和表单的基础结构
- 进阶表单控件的使用
- 语义化标签的使用场景
- 如何把一个页面先拆成结构，再开始写代码
## HTML 是什么
HTML 不是“样式语言”，也不是“交互语言”。
HTML 负责的是：
- 页面有什么内容
- 内容之间是什么关系
- 哪部分是标题，哪部分是正文，哪部分是导航，哪部分是表单
你可以把 HTML 理解成网页的骨架。
## 必须建立的 5 个核心意识
### 1. 页面是树状结构
一个页面不是一堆标签平铺，而是父子嵌套关系。
示例：
```html
```
这里的关系是：
- `body` 包含 `main`
- `main` 包含 `section`
- `section` 包含 `h1` 和 `p`
### 2. 先想结构，再写标签
写页面前先问自己：
- 这一块是不是标题区
- 这一块是不是导航区
- 这一块是不是主要内容
- 这一块是不是补充信息
- 这一块是不是页脚
### 3. 能用语义化标签时，别只会写 `div`
常见语义化标签：
- `header`
- `nav`
- `main`
- `section`
- `article`
- `aside`
- `footer`
### 4. 标签要和内容类型匹配
- 标题用 `h1` 到 `h6`
- 段落用 `p`
- 列表用 `ul` / `ol` / `li`
- 链接用 `a`
- 图片用 `img`
- 表单用 `form`
- 表格用 `table`
### 5. 结构正确比数量多更重要
不是标签越多越厉害，而是结构越合理越好。
## 高频标签速记
### 文本
- `h1` - `h6`：标题
- `p`：段落
- `strong`：强调
- `em`：语气强调
### 容器
- `div`：通用容器
- `span`：行内容器
- `section`：主题分区
- `article`：独立内容块
### 导航和布局
- `header`
- `nav`
- `main`
- `aside`
- `footer`
### 列表和媒体
- `ul`
- `ol`
- `li`
- `a`
- `img`
- `video`
### 表格和表单
- `table`
- `thead`
- `tbody`
- `tr`
- `th`
- `td`
- `form`
- `label`
- `input`
- `textarea`
- `button`
- `select`
- `option`
## 常用属性
- `id`：唯一标识
- `class`：分组标识
- `href`：链接地址
- `src`：资源地址
- `alt`：图片说明
- `name`：表单字段名
- `placeholder`：输入提示
- `type`：输入类型
## 学习顺序
1. 文档骨架
2. 文本结构
3. 链接、图片、列表
4. 语义化布局
5. 表格
6. 表单
7. 综合页面拆解
## 练习目录
- [01-document-skeleton/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/01-document-skeleton/README.md)
- [02-text-links-lists/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/02-text-links-lists/README.md)
- [03-semantic-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/03-semantic-layout/README.md)
- [04-tables-and-forms/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/04-tables-and-forms/README.md)
- [05-final-project/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/README.md)
- [06-block-and-inline/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/06-block-and-inline/README.md)
- [07-media-and-paths/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/07-media-and-paths/README.md)
- [08-advanced-form-controls/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/08-advanced-form-controls/README.md)
- [09-nesting-review/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/09-nesting-review/README.md)
## 过关标准
如果你能独立做到下面这些，就说明你已经真正入门：
- 不看答案写出完整 HTML 基本骨架
- 能把一段需求描述拆成标题区、内容区、列表区、表单区
- 能区分 `div`、`span`、`section`、`article`
- 能区分块级元素和行内元素
- 能独立写出列表、表格、表单的正确嵌套
- 能写出图片、视频、`select` 等常见结构
- 能写出一个结构清晰的单页介绍页面
## 学习建议
- 每个练习至少手写一遍，不要只看答案
- 写完后自己检查嵌套关系
- 不要急着加 CSS，先把结构写准
- 每次写页面都先画结构草图