rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add CSS layout exercises and corresponding HTML files

Browse Source 
- 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.
This commit is contained in:
chali
2026-03-09 14:16:22 +08:00
commit 4495ae0e28
85 changed files with 2566 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
01-html-structure/01-document-skeleton/README.md Normal file
View File

@@ -0,0 +1,36 @@
# 练习 1：文档骨架
## 目标
掌握一个 HTML 页面最基本的完整结构。
## 你要练什么
- `<!DOCTYPE html>`
- `<html>`
- `<head>`
- `<body>`
- `title`
- 标题和段落
## 任务
请完成一个“前端学习计划”页面，要求包含：
- 页面标题：前端学习计划
- 一级标题：我的前端学习路线
- 一段介绍文字，说明自己正在学习 HTML 结构
- 二级标题：本周目标
- 一个无序列表，至少 3 项
## 检查点
- 页面是否有完整骨架
- `title` 是否写在 `head` 里
- 页面内容是否都放在 `body` 中
- 列表项是否都写在 `li` 里
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/01-document-skeleton/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/01-document-skeleton/answer.html)

19
01-html-structure/01-document-skeleton/answer.html Normal file
View File

@@ -0,0 +1,19 @@
<!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>
<h1>我的前端学习路线</h1>
<p>我正在学习 HTML 结构，目标是先把页面骨架写清楚，再继续学习 CSS 和 JavaScript。</p>
<h2>本周目标</h2>
<ul>
<li>理解 HTML 基本骨架</li>
<li>掌握标题、段落和列表标签</li>
<li>独立写出一个简单页面</li>
</ul>
</body>
</html>

16
01-html-structure/01-document-skeleton/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TODO</title>
</head>
<body>
<!-- 任务：
1. 写一个 h1
2. 写一段自我介绍
3. 写一个 h2
4. 写一个 ul，里面至少 3 个 li
-->
</body>
</html>

37
01-html-structure/02-text-links-lists/README.md Normal file
View File

@@ -0,0 +1,37 @@
# 练习 2：文本、链接、列表
## 目标
掌握最常见的内容组织标签。
## 你要练什么
- `h1` 到 `h3`
- `p`
- `strong`
- `em`
- `a`
- `ul` / `ol` / `li`
## 任务
请完成一个“前端新手资源页”，要求包含：
- 一个主标题
- 一个资源介绍段落，段落中要有 `strong` 和 `em`
- 一个“推荐网站”二级标题
- 一个无序列表，里面至少 3 个链接
- 一个“学习步骤”二级标题
- 一个有序列表，里面至少 4 步
## 检查点
- `a` 是否有 `href`
- 列表项是否全部在 `li` 中
- 强调内容是否使用了合适标签
- 标题层级是否合理
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/02-text-links-lists/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/02-text-links-lists/answer.html)

31
01-html-structure/02-text-links-lists/answer.html Normal file
View File

@@ -0,0 +1,31 @@
<!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>
<h1>前端新手资源页</h1>
<p>
学习前端时，最重要的是先把 <strong>HTML 结构</strong> 打稳，再逐步进入
<em>CSS 布局</em> 和 JavaScript 交互。
</p>
<h2>推荐网站</h2>
<ul>
<li><a href="https://developer.mozilla.org/" target="_blank">MDN Web Docs</a></li>
<li><a href="https://www.w3schools.com/" target="_blank">W3Schools</a></li>
<li><a href="https://html.spec.whatwg.org/" target="_blank">HTML Standard</a></li>
</ul>
<h2>学习步骤</h2>
<ol>
<li>先掌握 HTML 页面骨架</li>
<li>练习文本、链接和列表结构</li>
<li>开始写语义化页面布局</li>
<li>再进入表格和表单练习</li>
</ol>
</body>
</html>

16
01-html-structure/02-text-links-lists/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!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>
<!-- 任务：
1. 写一个主标题
2. 写一个介绍段落，包含 strong 和 em
3. 写一个推荐网站区域，包含 ul 和多个 a
4. 写一个学习步骤区域，包含 ol
-->
</body>
</html>

39
01-html-structure/03-semantic-layout/README.md Normal file
View File

@@ -0,0 +1,39 @@
# 练习 3：语义化布局
## 目标
学会把一个页面拆成有意义的结构区域。
## 你要练什么
- `header`
- `nav`
- `main`
- `section`
- `article`
- `aside`
- `footer`
## 任务
请完成一个“个人博客首页结构”，要求包含：
- 页头：博客名称
- 导航：至少 3 个链接
- 主内容区
- 一个“最新文章”分区
- 分区里至少 2 篇 `article`
- 一个侧边栏，写上“关于我”
- 一个页脚
## 检查点
- 页面是否有清晰的区域划分
- `article` 是否适合承载独立内容
- `aside` 是否作为补充信息
- `footer` 是否放在页面结尾
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/03-semantic-layout/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/03-semantic-layout/answer.html)

43
01-html-structure/03-semantic-layout/answer.html Normal file
View File

@@ -0,0 +1,43 @@
<!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>
<nav>
<a href="#home">首页</a>
<a href="#posts">文章</a>
<a href="#about">关于我</a>
</nav>
</header>
<main>
<section id="posts">
<h2>最新文章</h2>
<article>
<h3>HTML 结构入门</h3>
<p>这篇文章介绍如何用标题、段落和列表搭建页面基础结构。</p>
</article>
<article>
<h3>为什么要写语义化标签</h3>
<p>语义化标签让页面更清晰，也更方便后期维护。</p>
</article>
</section>
<aside id="about">
<h2>关于我</h2>
<p>我是一名正在学习前端的同学，目前专注于 HTML 和 CSS 基础。</p>
</aside>
</main>
<footer>
<p>2026 小周的前端博客</p>
</footer>
</body>
</html>

17
01-html-structure/03-semantic-layout/starter.html Normal file
View File

@@ -0,0 +1,17 @@
<!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>
<!-- 任务：
1. 写 header 和 nav
2. 写 main
3. 在 main 里写一个 section
4. section 里至少放 2 个 article
5. 写 aside 和 footer
-->
</body>
</html>

40
01-html-structure/04-tables-and-forms/README.md Normal file
View File

@@ -0,0 +1,40 @@
# 练习 4：表格与表单
## 目标
掌握结构化数据和信息收集的 HTML 写法。
## 你要练什么
- `table`
- `thead`
- `tbody`
- `tr`
- `th`
- `td`
- `form`
- `label`
- `input`
- `textarea`
- `button`
## 任务
请完成一个“前端训练营报名页”，要求包含：
- 一个课程安排表格
- 表格至少 3 列、3 行数据
- 一个报名表单
- 表单中至少有姓名、邮箱、学习目标、提交按钮
## 检查点
- 表头是否使用 `th`
- 数据是否使用 `td`
- 表单控件是否和 `label` 对应
- 提交按钮是否在 `form` 中
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/04-tables-and-forms/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/04-tables-and-forms/answer.html)

59
01-html-structure/04-tables-and-forms/answer.html Normal file
View File

@@ -0,0 +1,59 @@
<!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>
<h1>前端训练营报名页</h1>
<h2>课程安排</h2>
<table>
<thead>
<tr>
<th>周次</th>
<th>主题</th>
<th>目标</th>
</tr>
</thead>
<tbody>
<tr>
<td>第 1 周</td>
<td>HTML 结构</td>
<td>掌握页面骨架与常用标签</td>
</tr>
<tr>
<td>第 2 周</td>
<td>CSS 布局</td>
<td>掌握盒模型和 Flex</td>
</tr>
<tr>
<td>第 3 周</td>
<td>JavaScript 基础</td>
<td>掌握变量、函数和对象</td>
</tr>
</tbody>
</table>
<h2>报名表单</h2>
<form>
<div>
<label for="name">姓名</label>
<input id="name" name="name" type="text" placeholder="请输入姓名" />
</div>
<div>
<label for="email">邮箱</label>
<input id="email" name="email" type="email" placeholder="请输入邮箱" />
</div>
<div>
<label for="goal">学习目标</label>
<textarea id="goal" name="goal" rows="4" cols="30" placeholder="写下你的学习目标"></textarea>
</div>
<button type="submit">提交报名</button>
</form>
</body>
</html>

15
01-html-structure/04-tables-and-forms/starter.html Normal file
View File

@@ -0,0 +1,15 @@
<!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>
<!-- 任务：
1. 写一个 table，包含 thead 和 tbody
2. 写一个 form
3. 在 form 里加入 label、input、textarea、button
-->
</body>
</html>

48
01-html-structure/05-final-project/README.md Normal file
View File

@@ -0,0 +1,48 @@
# 练习 5：综合项目
## 目标
把前面学过的结构知识拼成一个完整页面。
## 项目名称
个人前端学习主页
## 任务
请独立完成一个单页网站，要求至少包含：
- `header`
- `nav`
- `main`
- `section`
- `article`
- `aside`
- `footer`
- 一个列表
- 一张表格
- 一个表单
- 至少 3 个层级的标题
## 推荐页面拆分
- 页头：站点标题 + 导航
- 主要介绍区：你是谁、你在学什么
- 学习路线区：用列表展示
- 作品展示区：用 `article` 展示 2 个项目
- 学习进度区：用表格展示
- 联系我区：用表单收集信息
- 页脚：版权信息
## 自检标准
- 页面结构是否一眼能看懂
- 是否不是全都用 `div`
- 标题层级是否合理
- 列表、表格、表单是否嵌套正确
- 每个区域是否有明确职责
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/answer.html)

106
01-html-structure/05-final-project/answer.html Normal file
View File

@@ -0,0 +1,106 @@
<!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>
<nav>
<a href="#intro">自我介绍</a>
<a href="#roadmap">学习路线</a>
<a href="#projects">练习项目</a>
<a href="#contact">联系我</a>
</nav>
</header>
<main>
<section id="intro">
<h2>自我介绍</h2>
<p>我正在系统学习前端开发，目前优先掌握 HTML 结构、CSS 布局和 JavaScript 基础。</p>
</section>
<section id="roadmap">
<h2>学习路线</h2>
<ul>
<li>HTML 结构</li>
<li>CSS 布局与视觉</li>
<li>JavaScript 语言本体</li>
<li>DOM 与事件</li>
</ul>
</section>
<section id="projects">
<h2>练习项目</h2>
<article>
<h3>项目一：博客首页结构</h3>
<p>重点练习 `header`、`nav`、`main`、`section` 和 `article` 的页面组织方式。</p>
</article>
<article>
<h3>项目二：训练营报名页</h3>
<p>重点练习表格和表单的结构化写法。</p>
</article>
</section>
<section>
<h2>学习进度</h2>
<table>
<thead>
<tr>
<th>模块</th>
<th>状态</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML 结构</td>
<td>学习中</td>
<td>正在练习语义化标签</td>
</tr>
<tr>
<td>CSS</td>
<td>未开始</td>
<td>等 HTML 熟练后进入</td>
</tr>
</tbody>
</table>
</section>
<aside>
<h2>当前提醒</h2>
<p>先把结构写对，再考虑样式。先会拆页面，再会写页面。</p>
</aside>
<section id="contact">
<h2>联系我</h2>
<form>
<div>
<label for="visitor-name">姓名</label>
<input id="visitor-name" name="visitorName" type="text" />
</div>
<div>
<label for="visitor-email">邮箱</label>
<input id="visitor-email" name="visitorEmail" type="email" />
</div>
<div>
<label for="message">留言</label>
<textarea id="message" name="message" rows="4" cols="30"></textarea>
</div>
<button type="submit">发送</button>
</form>
</section>
</main>
<footer>
<p>2026 小周的前端学习主页</p>
</footer>
</body>
</html>

16
01-html-structure/05-final-project/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!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>
<!-- 任务：
1. 写完整语义化页面结构
2. 至少写 3 个 section
3. 加入 article、aside、table、form
4. 不要急着写 CSS，先保证 HTML 结构正确
-->
</body>
</html>

28
01-html-structure/06-block-and-inline/README.md Normal file
View File

@@ -0,0 +1,28 @@
# 练习 6：块级与行内元素
## 目标
分清什么标签默认独占一行，什么标签默认跟着文字流动。
## 你要练什么
- 块级元素
- 行内元素
- `div`
- `span`
- `p`
- `a`
- `strong`
## 任务
完成一个“学习提示条”，要求：
- 用块级元素搭出 3 条提示
- 每条提示中有关键词，用行内标签包起来
- 不要把段落错误地放进行内标签里
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/06-block-and-inline/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/06-block-and-inline/answer.html)

25
01-html-structure/06-block-and-inline/answer.html Normal file
View File

@@ -0,0 +1,25 @@
<!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>
<h1>块级与行内元素练习</h1>
<div>
<p>先保证 <strong>结构</strong> 正确，再考虑样式。</p>
</div>
<div>
<p>页面区域通常由 <span>块级元素</span> 负责搭建。</p>
</div>
<div>
<p>一句话中的局部强调，通常用 <strong>行内元素</strong> 处理。</p>
</div>
<p><a href="#">查看完整学习文档</a></p>
</body>
</html>

16
01-html-structure/06-block-and-inline/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!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>
<!-- 任务：
1. 写一个主标题
2. 写 3 个提示块
3. 每个提示块里用 span 或 strong 包住关键词
4. 再写一个链接，跳到学习文档
-->
</body>
</html>

29
01-html-structure/07-media-and-paths/README.md Normal file
View File

@@ -0,0 +1,29 @@
# 练习 7：图片、视频与路径
## 目标
掌握媒体标签和资源路径的基础写法。
## 你要练什么
- `img`
- `video`
- `src`
- `alt`
- `controls`
## 任务
请完成一个“课程展示页”，要求包含：
- 一个课程封面图
- 一段图片说明
- 一个视频区域
- 一个下载讲义链接
资源文件可以先用占位路径，不要求真实可播放。
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/07-media-and-paths/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/07-media-and-paths/answer.html)

18
01-html-structure/07-media-and-paths/answer.html Normal file
View File

@@ -0,0 +1,18 @@
<!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>
<h1>课程展示页</h1>
<img src="./images/html-cover.png" alt="HTML 结构课程封面" />
<p>这是一门面向初学者的 HTML 结构课程。</p>
<video src="./videos/html-intro.mp4" controls></video>
<p><a href="./docs/html-notes.pdf">下载讲义</a></p>
</body>
</html>

15
01-html-structure/07-media-and-paths/starter.html Normal file
View File

@@ -0,0 +1,15 @@
<!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>
<!-- 任务：
1. 写一个 img，并补上 alt
2. 写一个 video，并加上 controls
3. 写一个下载讲义的 a 标签
-->
</body>
</html>

28
01-html-structure/08-advanced-form-controls/README.md Normal file
View File

@@ -0,0 +1,28 @@
# 练习 8：进阶表单控件
## 目标
补齐常见表单控件的结构写法。
## 你要练什么
- `select`
- `option`
- `input type="radio"`
- `input type="checkbox"`
- `label`
## 任务
完成一个“学习偏好登记表”，要求包含：
- 姓名输入框
- 学习方向下拉框
- 学习节奏单选
- 感兴趣模块多选
- 提交按钮
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/08-advanced-form-controls/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/08-advanced-form-controls/answer.html)

62
01-html-structure/08-advanced-form-controls/answer.html Normal file
View File

@@ -0,0 +1,62 @@
<!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>
<h1>学习偏好登记表</h1>
<form>
<div>
<label for="student-name">姓名</label>
<input id="student-name" name="studentName" type="text" />
</div>
<div>
<label for="track">学习方向</label>
<select id="track" name="track">
<option value="">请选择</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
</div>
<fieldset>
<legend>学习节奏</legend>
<label>
<input type="radio" name="pace" value="slow" />
慢节奏
</label>
<label>
<input type="radio" name="pace" value="normal" />
正常
</label>
<label>
<input type="radio" name="pace" value="fast" />
快节奏
</label>
</fieldset>
<fieldset>
<legend>感兴趣模块</legend>
<label>
<input type="checkbox" name="modules" value="layout" />
布局
</label>
<label>
<input type="checkbox" name="modules" value="animation" />
动画
</label>
<label>
<input type="checkbox" name="modules" value="project" />
项目实战
</label>
</fieldset>
<button type="submit">提交</button>
</form>
</body>
</html>

17
01-html-structure/08-advanced-form-controls/starter.html Normal file
View File

@@ -0,0 +1,17 @@
<!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>
<!-- 任务：
1. 写一个 form
2. 加入 select 和 option
3. 加入 radio
4. 加入 checkbox
5. 每项都尽量配 label
-->
</body>
</html>

21
01-html-structure/09-nesting-review/README.md Normal file
View File

@@ -0,0 +1,21 @@
# 练习 9：嵌套纠错
## 目标
训练你检查 HTML 结构是否写错。
## 你要练什么
- 标签闭合
- 父子关系
- 列表嵌套
- 表单结构
## 任务
先看 `starter.html`，里面故意写了一些常见错误。你的任务是自己修正，再对照 `answer.html`。
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/09-nesting-review/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/09-nesting-review/answer.html)

26
01-html-structure/09-nesting-review/answer.html Normal file
View File

@@ -0,0 +1,26 @@
<!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>
<h1>HTML 纠错练习</h1>
<p>下面这些结构已经修正完成。</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
<p><a href="#">这里改成更清晰的链接结构</a></p>
<form>
<label for="email">邮箱</label>
<input id="email" name="email" type="email" />
<button type="submit">提交</button>
</form>
</body>
</html>

28
01-html-structure/09-nesting-review/starter.html Normal file
View File

@@ -0,0 +1,28 @@
<!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>
<h1>HTML 纠错练习</h1>
<p>下面这些结构有错误，请你自己修正。
<ul>
<li>列表项 1
<li>列表项 2</li>
</ul>
<a href="#">
<p>这里的嵌套写法是否合理？</p>
</a>
<form>
<label for="email">邮箱</label>
<input id="email" name="email">
<button>提交
</form>
</body>
</html>

190
01-html-structure/README.md Normal file
View File

@@ -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，先把结构写准
- 每次写页面都先画结构草图