HTML 零基础入门
结课项目：完成个人学习主页
把 11 节内容组合成完整、可检查、可以继续扩展的 HTML 作品。
- 难度
- 入门
- 预计时间
- 75 分钟
- 最近验证
- 2026/9/21
这一节要完成什么
交付包含主页、关于页、学习笔记、图片、数据表和反馈表单的三页网站。
先理解：为什么要学它
结课项目检验能否独立决定内容结构、文件位置和验证方法。整理前 11 节逐步建立的作品，不要重新复制答案。
跟着做
my-learning-page/ ├─ index.html ├─ images/ │ └─ first-page.png ├─ notes/ │ └─
week-1.html └─ pages/ └─ about.html- 按文件树整理文件，确认三个 HTML 文件都能直接打开。
- 主页包含唯一 h1、导航、进度、周记、任务列表、表格、截图、表单和 footer。
- about 说明学习动机；week-1 记录一次真实问题、排查过程和结论；三页互相可达。
- 逐页做键盘测试、图片失败测试、200% 放大和验证，再请别人找到本周进度并打开关于页。
关键代码怎么读
- 验收看信息结构和可用性，视觉外观留给 CSS 课程。
- 每页都有独立 title、description、lang、h1 和 main。
- 示例姓名、日期和目标全部替换为真实内容。
常见错误：看到什么，检查什么
| 现象 | 检查方法 |
|---|---|
| 为了丰富重复堆标签 | 每块内容都要有用途。 |
| 所有页面同一个 title | 分别描述主页、关于页和周记。 |
| 验证通过就停止 | 还要点击、键盘操作、放大并观察真实用户。 |
自己完成一次
在主页加入项目说明：目标、三个页面、修复过的错误、验证结果和未来三项 CSS 改进。
完成后再看参考答案
逐项对照验收表，每项都提供页面或测试证据；缺项就回到对应课程修复。
完成检查
- 我的页面出现了本节要求的新内容
- 我能不用看答案解释关键标签或属性
- 我主动制造并修复了至少一个错误
结课验收表
| 检查项 | 通过标准 |
|---|---|
| 三页结构 | index.html、pages/about.html、notes/week-1.html 都能直接打开并互相到达 |
| 页面大纲 | 每页只有一个 h1，后续标题不跳级，单独只看标题也能理解内容 |
| 内容元素 | 主页包含列表、带 caption 和表头的表格、含图注的作品截图 |
| 表单 | 每个控件都有可点击标签，必填与邮箱格式验证有效，提交按钮类型明确 |
| 键盘操作 | 不使用鼠标能访问每个链接、输入框和按钮，焦点顺序与阅读顺序一致 |
| 元数据 | 每页都有准确且不同的 title、description、lang 和 UTF-8 声明 |
| 代码质量 | 三页通过 HTML 验证，没有重复 id、损坏链接或缺失图片 |
| 真实内容 | 示例姓名、日期、目标和记录已全部替换为你自己的内容 |
通过这 8 项，才算学完这门课。保存最终文件，下一门 CSS 课程会直接在这个作品上继续。