4495ae0e28
- Created multiple exercises under the CSS layout section, including: - Final page layout with CSS styles and HTML structure. - Display and flow concepts with examples of block, inline, and none display types. - Selectors and pseudo-classes with practical examples. - Overflow and sizing handling in CSS. - Grid layout basics for two-dimensional layouts. - Fixed and sticky positioning examples. - Centering techniques for common layout scenarios. - Added README files for each exercise to outline objectives and file structures. - Updated main README to include new sections and usage instructions.
191 lines
4.4 KiB
Markdown
191 lines
4.4 KiB
Markdown
# HTML Structure
|
||
|
||
这部分只解决一个问题：你能不能把页面内容写成清晰、正确、可维护的 HTML 结构。
|
||
|
||
## 学完后你应该掌握
|
||
|
||
- HTML 文档的基本骨架
|
||
- 标签的嵌套关系
|
||
- 常见文本标签的作用
|
||
- 块级元素和行内元素的区别
|
||
- 列表、链接、图片的结构写法
|
||
- 媒体标签的基础写法
|
||
- 表格和表单的基础结构
|
||
- 进阶表单控件的使用
|
||
- 语义化标签的使用场景
|
||
- 如何把一个页面先拆成结构，再开始写代码
|
||
|
||
## HTML 是什么
|
||
|
||
HTML 不是“样式语言”，也不是“交互语言”。
|
||
|
||
HTML 负责的是：
|
||
|
||
- 页面有什么内容
|
||
- 内容之间是什么关系
|
||
- 哪部分是标题，哪部分是正文，哪部分是导航，哪部分是表单
|
||
|
||
你可以把 HTML 理解成网页的骨架。
|
||
|
||
## 必须建立的 5 个核心意识
|
||
|
||
### 1. 页面是树状结构
|
||
|
||
一个页面不是一堆标签平铺，而是父子嵌套关系。
|
||
|
||
示例：
|
||
|
||
```html
|
||
<body>
|
||
<main>
|
||
<section>
|
||
<h1>标题</h1>
|
||
<p>正文</p>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
```
|
||
|
||
这里的关系是：
|
||
|
||
- `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，先把结构写准
|
||
- 每次写页面都先画结构草图
|