module 01 · html 基础 · 第 1–8 课
模块01
HTML 基础
目标一句话：看懂网页的骨架，不依赖任何工具手写一个语义正确的多区块页面。
3 课打基础：文档骨架 · 文本标签 · 链接与图片
2 课承载信息：列表表格 · 表单输入
2 课往上走一层：语义化结构 · 多媒体嵌入
1 课阶段实战：独立交付「个人介绍页」
// module 01
模块一 · HTML 基础 · 第 1–8 课
01走进网页与 HTML文档骨架
02文本内容标签标题 / 段落 / 格式化
03链接与图片a / img / 路径
04列表与表格ul / ol / table
05表单与输入控件form / input
06语义化与页面结构header / main / footer
07多媒体与嵌入video / iframe / figure
08阶段实战一：个人介绍页第一次独立交付
// 模块一 · 第 01 课
走进网页与 HTML
讲授 · 25 min
- 浏览器请求 → 解析 → 渲染的粗略过程
- 文档骨架：
<!DOCTYPE html> / head / body
- 标签、属性、元素、成对标签与自闭合标签
- 注释写法 · F12 打开 DevTools 看 Elements
练习 · 15 min
新建 index.html，写一个带标题和自我介绍段落的页面，用浏览器打开，再用 DevTools 改页面上的文字（不改文件）。
验收：双击能打开；中文不乱码；能用 DevTools 说明"改的是浏览器内存，不是文件"。
易错点：存成 .txt 后缀 · 编码写成 GBK 导致乱码（统一 UTF-8）
// 模块一 · 第 02 课
文本内容标签
讲授 · 25 min
h1–h6 的层级语义（一页只用一个 h1）p 与 br 的区别：不拿 br 当排版工具strong/em 与 b/i 的语义差别mark / del / ins / sub / sup · 字符实体
练习 · 15 min
做一份约 200 字的「我的自我介绍」：标题分级、重点加粗、含一个上下标、含一个特殊字符（如 ©）。
验收：标签层级合理；全部正确闭合；无多余 br 撑间距。
// 模块一 · 第 03 课
链接与图片
讲授 · 25 min
a：href / target="_blank" / 页内锚点 #idmailto: 与 tel: 的写法img：src / alt / 宽高 / 图片格式选择- 相对路径
./ ../ 与绝对路径的区别
练习 · 15 min
做一个导航页：3 个站外链接 + 2 张图片 + 2 个页内锚点跳转（顶部到某个区块再回来）。
验收：每个链接都能跳对位置；图片路径大小写正确；每张图都有有意义的 alt。
易错点：路径大小写不一致 · alt 写空 · 相对路径层级算错（../ 少一层）
// 模块一 · 第 04 课
列表与表格
讲授 · 25 min
ul / ol / li 与列表嵌套dl / dt / dd 的使用场景table / tr / th / td 的结构caption / thead / tbody · colspan / rowspan
练习 · 15 min
用表格做一张「我的课程表」（含表头、caption、至少一处合并单元格），用列表做一份学习清单，并把清单嵌套进课程表下方。
验收：表头用 th；合并后行列对齐无误；列表层级清晰。
明确告诉学生：用表格做页面布局是历史做法，不要学。表格只用来表达二维数据。
// 模块一 · 第 05 课
表单与输入控件
讲授 · 25 min
form 的 action / method（先理解用途）input 的 type：text / password / email / number / date / radio / checkbox / filelabel 与 for 的关联 · select / textarea / buttonplaceholder / required / readonly / disabled
练习 · 15 min
做「社团报名表」：姓名、学号、性别单选、兴趣多选、入学日期、附件上传、个人简介文本域、提交按钮。
验收：同名 radio 只能单选；点 label 文字能选中控件；必填项不填点提交会被浏览器拦下。
易错点：radio 不写相同的 name 导致无法单选 · label 的 for 与 id 不匹配
// 模块一 · 第 06 课
语义化与页面结构
讲授 · 25 min
header / nav / main / section / article / aside / footer- 各自的含义与使用边界（什么时候不该用）
div 与 span 的兜底定位- 语义化的四个好处：可读性、SEO、屏幕阅读器、团队协作
练习 · 15 min
把前五课的碎片页面整合成一个完整页面：顶部导航、主内容区（含两篇文章）、侧边栏、页脚。
验收：main 只有一个；每个 section 都有标题；导航链接都在 nav 里；div 数量不超过必要数量。
// 模块一 · 第 07 课
多媒体与嵌入
讲授 · 25 min
audio / video：controls / autoplay / muted / loop / postersource 提供多格式回退iframe 的用途与安全注意（默认不信任外部页面）figure / figcaption · 图片格式选择与压缩常识
练习 · 15 min
在页面中嵌入一段视频、一张带图注的图片、一个 iframe（地图或在线视频）。
验收：autoplay 必须配 muted；iframe 有宽高；图注与图片用 figure 包在一起。
// 模块一 · 第 08 课 · 阶段实战
阶段实战一 · 个人介绍页
课堂流程 · 45 min
- 3′ 需求拆解：这个页面要有哪些区块
- 5′ 画结构草图（纸上画框，标注标签）
- 25′ 编码实现，老师巡场个别辅导
- 10′ 两人一组互评 + 2′ 共性总结
验收标准
- 语义骨架完整，至少 5 个区块
- 标签全部正确闭合，缩进统一
- 图片都有有意义的 alt
- 去掉所有内容只看结构，依然读得通
这节课的交付物会一直用到第 16 课、第 23 课——它是整门课的贯穿项目，不要删。
// module 01 · summary
本模块交付物 · 个人介绍页
交付物
index.html —— 语义化个人介绍页，至少 5 个区块- 结构草图（纸上画的区块划分）
- 互评记录：两人一组按清单互相检查
验收标准
- 语义骨架完整，标签全部正确闭合
- 图片都有有意义的
alt
- 去掉所有内容只看结构，依然读得通
- 无中文乱码，浏览器直接打开可用
这份页面不要删 —— 第 16 课要用 CSS 美化它，第 23 课要把它做成响应式。它是整门课的贯穿项目。