feat: Add CSS layout exercises and corresponding HTML files

- 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.
2026-03-09 14:16:22 +08:00
commit 4495ae0e28
85 changed files with 2566 additions and 0 deletions
--- a/01-html-structure/README.md
+++ b/01-html-structure/README.md
@@ -0,0 +1,190 @@
+# 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，先把结构写准
+- 每次写页面都先画结构草图