web development · 40 lessons · 30 + 15 min

网站开发
40 课时课程安排

HTML 结构 · CSS 表现 · JavaScript 行为 —— 从第一行标签到一个能上线的个人网站

按 S 进入演讲者视图 · T 切换主题 · ← → 翻页

网站开发 · 教师版课程 deck6 个模块 · 40 节课 · 6 次阶段实战 · 1 个结课项目

// overview

这是一门什么样的课

面向谁

零基础初学者。会开关电脑、会建文件夹就能上，不要求任何编程经验。

先修要求：无。

多少课时

40 节 × 45 分钟 = 30 小时。

每节固定结构：回顾 5′ + 讲授 25′ + 练习 15′（含 3′ 讲评）。

学完拿到什么

一个可上线访问的响应式个人网站 + 6 个阶段实战作品。

工具：VS Code、Chrome DevTools、GitHub Pages。

先花一页时间把这门课的边界说清楚。

第一，面向谁。这门课假设学生是完全零基础——不要求写过任何代码，只要求会基本操作电脑。这一点很重要，因为它决定了两件事：不能跳步，以及每一节课都必须看得见成果。

第二，多少课时。40 节，每节 45 分钟，加起来 30 个小时。每节课的结构是固定的：前 5 分钟回顾上节课、中间 25 分钟讲授、最后 15 分钟练习并讲评。这个 5-25-15 的节奏放在后面还会专门讲一页。

第三，学完拿到什么。这句话我建议你在第一节课就告诉学生——你会做出一个能发到网上、别人手机电脑都能打开的网站。给学生一个能炫耀的终点，是这门课最重要的动力设计。

// material

三份教材，各用其所长

01W3School · HTML 教程 —— 查得到、抄得动，适合现场演示标签第 1–8 课

02W3School · CSS 教程 —— 属性齐全、示例可在线改，适合讲样式体系第 9–24 课

03廖雪峰 · JavaScript 教程 —— 讲原理、成体系，适合讲变量/作用域/对象/函数第 25–40 课

取舍原则：HTML / CSS 用 W3School（速查型），JavaScript 用廖雪峰（理解型）。
补充资源：MDN 查兼容性 · Can I use 查支持度 · CSS-Tricks 看 Flex / Grid 图解。

这门课的知识点来自三份公开教材，但不是平均用力，而是各取所长。

HTML 和 CSS 我用 W3School。原因很实际：它的每个标签、每个属性都有一个能立刻上手改的在线示例，适合课堂上"边讲边演示"。你讲 border-radius 的时候，直接开那个在线编辑器拖一下滑块，学生一眼就懂。

JavaScript 我换成廖雪峰教程。因为 JS 跟 HTML/CSS 完全不是一类东西——它不能靠背标签学。变量、作用域、闭包、对象的 this，这些必须讲清楚原理，学生后面才不会天天踩坑。廖雪峰这份教程正好是成体系讲原理的。

再补一句给学生的：MDN 和 Can I use 要早教会他们用。前端技术变化快，查文档的能力比记住某个属性更重要。

// rhythm

每节课的 45 分钟，固定这么用

5′

回顾 · 复现上一课的代码

不口头回顾，直接打开上次的文件跑一遍，用上一课的成果当引入。

25′

讲授 · 老师现场敲代码

讲一个点、敲一遍、错一次、调试一次。学生同步跟做，不许只看不写。

15′

练习 · 当堂交付

每个练习都有明确交付物和验收标准，避免"随便练练"。

3′

讲评 · 抽查 2–3 份

现场投屏学生的代码，指出共性问题——错误本身就是教学内容。

三条硬规矩：① 每节课都能看到结果 · ② 每节课故意写错一次 · ③ 每节课必须留下可运行的文件

这一页是整门课的执行规则，我建议你第一节课就把它投出来给学生看。

前 5 分钟回顾。注意，不是口头问"上节课讲了什么"——直接打开上节课的文件跑一遍。因为学生的记忆锚点是"我做出过的那个东西"，不是知识点名字。

中间 25 分钟讲授。核心是老师现场敲代码。我特别强调"现场"两个字：不要放录制好的视频，不要放写好的代码截图。老师现场敲、现场报错、现场调试，学生才能真正学会"出错了怎么办"。

最后 15 分钟练习，再留 3 分钟讲评，抽查两到三份投屏。这里我要说一句：讲评的时候优先挑"错得有代表性"的那份，不是挑最好看的。错误本身就是最好的教学内容。

最后三条硬规矩，就是这门课质量的底线了。每节课都能看到结果、每节课故意写错一次、每节课留下可运行的文件。

// roadmap

6 个模块 · 40 节课 · 一条主线

M1HTML 基础 —— 结构：标签、语义化、表单、多媒体第 1–8 课

M2CSS 基础 —— 表现：选择器、盒模型、排版与装饰第 9–16 课

M3CSS 布局与响应式 —— 排布：Flex、Grid、媒体查询第 17–24 课

M4JavaScript 基础 —— 编程：类型、流程、数组、对象、函数第 25–32 课

M5JavaScript DOM 与交互 —— 行为：DOM、事件、数据与状态第 33–38 课

M6综合项目与发布 —— 交付：项目实战、调试、上线第 39–40 课

整门课的地图。一句话概括就是：结构 → 表现 → 排布 → 编程 → 交互 → 交付。

模块一 HTML 讲结构，八节课。学生要学会"一个页面里有什么、每个部分用什么标签"。

模块二 CSS 讲表现，八节课。从"能看"到"好看"，重点是选择器、盒模型和排版系统。

模块三讲布局和响应式，八节课。这是 CSS 里最有用的八节课——Flex 和 Grid 是现在前端的绝对主力，讲好这两个，学生就具备了做真实页面的能力。

模块四换成 JavaScript，讲编程基础，八节课。这里节奏会慢下来，因为思维方式变了。

模块五讲 DOM 和事件，六节课，让页面真正"动起来"。

最后模块六两节课，做综合项目并上线。每三到八节课就有一次阶段实战，这是这门课不掉队的关键。

// outcomes

学完这门课，学生能独立做到

看得懂

拿到任意一个网页，能看懂它的结构分层、样式组织方式，能用 DevTools 定位排版问题并修好。

做得出来

能把一份设计稿或一句话需求，拆成「结构 + 样式 + 交互」三层，独立写出响应式页面。

动得起来

能用 JavaScript 操作 DOM、处理事件、管理数据状态，做出待办清单、留言板这类真实交互应用。

发得出去

能用 Git + 静态托管把作品部署上线，拿到一个可以发给别人访问的链接。

// 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阶段实战一：个人介绍页第一次独立交付

好，进入模块一，HTML 基础，第 1 到第 8 课。

这八节课的目标很明确：让学生看懂网页的骨架，并且能不依赖任何工具手写一个语义正确的多区块页面。

结构上分三段：前三课打基础——第 1 课认识文档骨架，第 2、3 课把"文字、链接、图片"这三样页面最基本的内容解决掉。中间第 4、5 课解决"列表表格"和"表单"，这是页面里承载信息最多的两块。第 6、7 课往上走一层，讲语义化和多媒体。

最后第 8 课是第一次阶段实战——学生要独立交出一个完整的个人介绍页。这是这门课第一次让他们体验"从零做一个东西出来"。

这八节课有个原则要提前说：不要一口气把标签讲全。用不到的先不讲，用到再补。学生的注意力是有限的，一次给太多等于什么都没给。

// 模块一 · 第 01 课

走进网页与 HTML

讲授 · 25 min

浏览器请求 → 解析 → 渲染的粗略过程
文档骨架：<!DOCTYPE html> / head / body
标签、属性、元素、成对标签与自闭合标签
注释写法 · F12 打开 DevTools 看 Elements

练习 · 15 min

新建 index.html，写一个带标题和自我介绍段落的页面，用浏览器打开，再用 DevTools 改页面上的文字（不改文件）。

验收：双击能打开；中文不乱码；能用 DevTools 说明"改的是浏览器内存，不是文件"。

易错点：存成 .txt 后缀 · 编码写成 GBK 导致乱码（统一 UTF-8）

第 1 课。这节课只解决一个问题：打开一个网页，到底发生了什么。

我会先在黑板上画一条线：浏览器向服务器要文件 → 拿到 HTML → 一行行解析 → 渲染成你看到的页面。这个"过程感"很重要，因为它解释了后面所有的调试行为——你改的文件为什么刷新才生效？因为浏览器要先解析一遍。

然后讲骨架。四个东西：第一行 <!DOCTYPE html> 告诉浏览器"这是 HTML5"；html 是根；head 装"给人看不见的信息"，比如标题和编码；body 装"给人看得见的内容"。用一句话记：head 给浏览器看，body 给人看。

再讲标签的形态。成对标签写开闭两个，自闭合标签只有一尖括号。这里一定要强调：标签表达的是"这块内容是什么"，不是"它长什么样"。这个观念要到模块二才完全兑现，但第一课就要埋进去。

练习让他们用 DevTools 改文字。改完一定要问一句："刷新一下，你改的东西还在吗？"——不在。因为那是浏览器内存里的，不是文件。这一问，学生就永远记住了。

易错点两个：存成 txt 了、编码成了 GBK 中文乱码。第一节课就当场踩一遍，比以后解释一百遍都管用。

// 模块一 · 第 02 课

文本内容标签

讲授 · 25 min

h1–h6 的层级语义（一页只用一个 h1）
p 与 br 的区别：不拿 br 当排版工具
strong/em 与 b/i 的语义差别
mark / del / ins / sub / sup · 字符实体

练习 · 15 min

做一份约 200 字的「我的自我介绍」：标题分级、重点加粗、含一个上下标、含一个特殊字符（如 ©）。

验收：标签层级合理；全部正确闭合；无多余 br 撑间距。

第 2 课，文本内容标签。这节课关键词是层级和语义。

先讲标题。h1 到 h6，六个级别，但这里必须强调一句：标题不是"字号大小"的六个选项，是"结构层级"的六个级别。所以一页里只应该有一个 h1，就像一篇文章只有一个主标题。

然后是 p 和 br。这是新手最常犯的错：想空一行就打两个 br。你要当场告诉他们，段与段之间的间距该由 CSS 控制，br 只用来在同一段内换行，比如写地址、写诗。

接着讲 strong 和 b 的区别。长得一样，但含义不一样：strong 是"这段内容重要"，b 只是"加粗"。我一般建议学生统一用 strong、em，因为它有语义，屏幕阅读器会念出来。

最后讲字符实体。为什么要写 < 而不是直接写尖括号？因为尖括号是语法的一部分。你直接写，浏览器会以为那是标签。这个知识点学生后面会反复撞到，今天先立住。

练习就是写自我介绍，200 字左右。这个练习后面还会用——它会一路活到第 16 课、第 23 课，成为他们的练手项目。

// 模块一 · 第 03 课

链接与图片

讲授 · 25 min

a：href / target="_blank" / 页内锚点 #id
mailto: 与 tel: 的写法
img：src / alt / 宽高 / 图片格式选择
相对路径 ./ ../ 与绝对路径的区别

练习 · 15 min

做一个导航页：3 个站外链接 + 2 张图片 + 2 个页内锚点跳转（顶部到某个区块再回来）。

验收：每个链接都能跳对位置；图片路径大小写正确；每张图都有有意义的 alt。

易错点：路径大小写不一致 · alt 写空 · 相对路径层级算错（../ 少一层）

第 3 课，链接和图片。这一课有个主线：路径。

先讲链接。a 标签的 href 可以指向四种地方：外部网址、站内另一个页面、页内某个锚点（#id）、以及 mailto: 和 tel:。其中"页内锚点"学生最容易忽略，但做长页面导航时特别有用，一定要现场演示一遍点击跳转。

target="_blank" 新窗口打开，顺手提一句加上 rel="noopener" 更安全。不用讲原理，提一句就行。

然后是图片。img 只有两个必填属性：src 和 alt。alt 要重点讲：它有三个作用——图片加载失败时显示、屏幕阅读器念出来、搜索引擎理解图片内容。写空 alt 等于对看不见的人关上门。这句话学生记得住。

最后是这节课的重点：相对路径。我建议用一张目录树画在黑板上，然后当场演示三种写法：同一目录直接写文件名；下一层写 文件夹/文件名；上一层写 ../文件名。然后故意把图片路径写错一次，让他们看到那个"破图"图标长什么样，以及 DevTools 里那条 404 报错。

这节课的坑几乎全在路径上：大小写、少一层 ../、中文文件名。练完一定要抽查几个学生的图片是否正常显示。

// 模块一 · 第 04 课

列表与表格

讲授 · 25 min

ul / ol / li 与列表嵌套
dl / dt / dd 的使用场景
table / tr / th / td 的结构
caption / thead / tbody · colspan / rowspan

练习 · 15 min

用表格做一张「我的课程表」（含表头、caption、至少一处合并单元格），用列表做一份学习清单，并把清单嵌套进课程表下方。

验收：表头用 th；合并后行列对齐无误；列表层级清晰。

明确告诉学生：用表格做页面布局是历史做法，不要学。表格只用来表达二维数据。

第 4 课，列表和表格。

列表分三种。ul 无序、ol 有序——这两个学生很快能上手。重点讲第三种 dl：它是"描述列表"，用在"名词—解释"这种结构上，比如术语表、FAQ。这个标签很多人学了前端好几年都不知道，早讲有用。

列表的嵌套要现场演示一次：在 li 里面再放一个 ul，做二级菜单。注意提醒：嵌套的 ul 必须写在 li 里面，写在外面结构就错了。这个细节后面做导航栏时会用到。

然后讲表格。tr 是行、td 是单元格、th 是表头单元格。这里我会强调两件事：第一，表头一定用 th，不要用 td 加粗代替；第二，caption 是表格的标题，写上去对无障碍很有帮助。

再把 thead 和 tbody 讲一下——它把"表头"和"数据"分开，是做长表格和样式时最有用的结构。colspan、rowspan 合并单元格，现场演示一次跨行跨列，然后让学生自己算一遍行列。

最后一定要说这句话："用表格做页面布局是二十年前的做法，你们不要学它"。因为学生一旦在网上搜到老教程，很容易就用表格去排版。今天把话说死，以后就省事。

// 模块一 · 第 05 课

表单与输入控件

讲授 · 25 min

form 的 action / method（先理解用途）
input 的 type：text / password / email / number / date / radio / checkbox / file
label 与 for 的关联 · select / textarea / button
placeholder / required / readonly / disabled

练习 · 15 min

做「社团报名表」：姓名、学号、性别单选、兴趣多选、入学日期、附件上传、个人简介文本域、提交按钮。

验收：同名 radio 只能单选；点 label 文字能选中控件；必填项不填点提交会被浏览器拦下。

易错点：radio 不写相同的 name 导致无法单选 · label 的 for 与 id 不匹配

第 5 课，表单。这是模块一里分量最重的一课，因为表单是页面唯一"接收用户输入"的方式，也是模块五做交互的基础。

开场先讲为什么需要表单：前面四课我们做的都是"给人看的内容"，从这节课开始，页面要"听人说话"了。

form 的 action 和 method 先只讲"它是用来把数据送到服务器的"，不展开，因为还没有后端。

然后是 input 的各种 type。这里有个教学技巧：不要一个个念属性，用"场景"来带。姓名用 text，密码用 password，邮箱用 email（顺便演示浏览器自带的格式校验），性别用 radio，兴趣用 checkbox，日期用 date，附件用 file。每个 type 都现场敲一个，学生跟着敲一个。

接着重点讲 label。为什么要有它？因为 label 的 for 和 input 的 id 对上之后，点文字也能选中控件。演示一遍：手机上点"男"这两个字就能选中单选框，多方便。这既是体验问题，也是无障碍问题。

两个最大的坑：radio 不写相同的 name 就没法单选——这是新手必踩的一次；以及 label 的 for 和 id 对不上，点了没反应。练习的时候重点查这两条。

// 模块一 · 第 06 课

语义化与页面结构

讲授 · 25 min

header / nav / main / section / article / aside / footer
各自的含义与使用边界（什么时候不该用）
div 与 span 的兜底定位
语义化的四个好处：可读性、SEO、屏幕阅读器、团队协作

练习 · 15 min

把前五课的碎片页面整合成一个完整页面：顶部导航、主内容区（含两篇文章）、侧边栏、页脚。

验收：main 只有一个；每个 section 都有标题；导航链接都在 nav 里；div 数量不超过必要数量。

第 6 课，语义化。这一课要完成一次思维升级：从"用标签拼出想要的样子"，到"用标签表达内容的含义"。

开场先给一个反例：一个页面全是 div，长得完全正常。然后问学生：这个 div 里是什么？是导航？是文章？还是页脚？看不出来。这就是语义化要解决的问题。

逐个讲这几个标签。header 是区域头部，nav 装主要导航链接，main 是页面主内容且一页只能有一个，section 是有主题的分块，article 是可以独立成篇的内容，aside 是附属内容比如侧边栏，footer 是页脚。

讲的时候要给"边界案例"，不然学生会乱用。比如：section 里面必须有标题，没有标题就不是 section；nav 不是"装任何链接的地方"，它装的是主要导航；div 不是不能用，它是兜底的容器。

语义化的四个好处按顺序讲：对人可读、对搜索引擎可读、对屏幕阅读器可读、对同事可读。最后一句我记得住的说法是：语义化就是"写给下一个人看"，而那个人通常是三个月后的你自己。

练习是把前五课的碎片拼起来。这一步会让很多人第一次感受到"原来那些零散标签是要拼成一个整体的"。

// 模块一 · 第 07 课

多媒体与嵌入

讲授 · 25 min

audio / video：controls / autoplay / muted / loop / poster
source 提供多格式回退
iframe 的用途与安全注意（默认不信任外部页面）
figure / figcaption · 图片格式选择与压缩常识

练习 · 15 min

在页面中嵌入一段视频、一张带图注的图片、一个 iframe（地图或在线视频）。

验收：autoplay 必须配 muted；iframe 有宽高；图注与图片用 figure 包在一起。

第 7 课，多媒体和嵌入。这一课比较轻快，主要是"能放进去就行"，但有两个点必须讲清楚。

第一，autoplay 必须配 muted。为什么？因为浏览器为了不吓到用户，默认禁止自动播放带声音的视频。这个不是"规定"这么简单，是浏览器主动拦截的。让学生先不加 muted 试一次，发现不播，再加上 muted 播放了——让他们亲眼看到浏览器在保护用户。

第二，iframe 默认不信任外部页面。这个说法要讲明白：iframe 本质是把别人的页面嵌进你的页面，那个页面能干什么你不知道。所以在真实项目里，iframe 的来源要可控。

然后讲 figure 和 figcaption：图片 + 图注是一个整体，用 figure 包起来，图注写 figcaption。这又是一次语义化练习，跟第 6 课呼应。

最后花两三分钟讲图片格式：照片用 jpg，需要的透明用 png，追求体积用 webp，图标和插画用 svg。再补一句：图片一定要压缩再上传，一个 5MB 的图能把网页打开速度拖垮。这也是给学生第一次建立"性能意识"的机会。

练习里我会加一条要求：iframe 一定要写宽高。不写的话页面的高度会乱跳，这是很典型的 bug。

// 模块一 · 第 08 课 · 阶段实战

阶段实战一 · 个人介绍页

课堂流程 · 45 min

3′ 需求拆解：这个页面要有哪些区块
5′ 画结构草图（纸上画框，标注标签）
25′ 编码实现，老师巡场个别辅导
10′ 两人一组互评 + 2′ 共性总结

验收标准

语义骨架完整，至少 5 个区块
标签全部正确闭合，缩进统一
图片都有有意义的 alt
去掉所有内容只看结构，依然读得通

这节课的交付物会一直用到第 16 课、第 23 课——它是整门课的贯穿项目，不要删。

第 8 课，模块一的阶段实战——个人介绍页。这是学生第一次独立交付一个完整页面。

我要特别强调流程里的第 2 步：画草图。很多老师会跳过这步，直接让学生开编辑器。但这一步恰恰是最值钱的——它训练的是"先想结构再写代码"的习惯。让学生拿张纸，画几个方框，每个方框旁边写上准备用什么标签。五分钟，全班的思路就清楚了。

中间 25 分钟编码，老师要巡场。不要坐在讲台上等，走下去看。这时候你会看到各种奇怪的问题：路径错了、标签没闭合、中文乱码。个别辅导的效率比统一讲高得多。

最后 10 分钟两人一组互评。给一个明确的检查清单，让他们照着查，别只说"看看对不对"。互评的价值在于学生当"审阅者"时，对规范的敏感度会明显提高。

最后一句一定要说清楚：这份页面不要删。第 16 课我们要用 CSS 美化它，第 23 课要把它做成响应式。一个项目从头做到尾，学生会看见自己的成长——这是这门课的设计主线。

// module 02

模块二 · CSS 基础 · 第 9–16 课

09CSS 入门语法 / 三种引入

10选择器基础类 / ID / 命名规范

11选择器进阶与层叠伪类 / 优先级

12颜色、单位与字体CSS 变量

13文本排版行高 / 溢出省略

14盒模型border-box / margin

15背景与装饰圆角 / 阴影 / 渐变

16阶段实战二：美化个人页从能用 → 好看

模块二，CSS 基础，第 9 到第 16 课。目标一句话：从"能看"到"好看"。

这八节课的安排有它的道理。前两课（9、10）解决"怎么选中元素"，第 11 课解决"为什么我的样式不生效"——这一课是 CSS 里最关键的一课，优先级搞不懂，后面全是玄学。第 12 到 15 课分别解决四件事：颜色与单位、文本排版、盒模型、装饰。最后第 16 课把个人页美化一遍。

有两个地方我建议放慢节奏：第 11 课的优先级，和第 14 课的盒模型。这两块是学生学 CSS 时最大的拦路虎。我的做法是让他们动手算——算一遍权重、算一遍元素实际宽度，比讲十遍有用。

另外，这个模块要开始培养"设计感"。第 12 课讲变量的时候，就是在给学生建立"一套可以被维护的样式系统"。会写样式的人很多，会维护样式系统的人很少。

// 模块二 · 第 09 课

CSS 入门

讲授 · 25 min

CSS 的作用：把"结构"和"表现"彻底分开
语法：选择器 { 属性: 值; } · 注释写法
三种引入方式：行内 / 内部 / 外部，为什么推荐外部
用 DevTools 的 Styles 面板实时改样式

练习 · 15 min

给第 8 课的个人页挂上外部样式表 style.css，完成前 5 条样式：背景色、字体、字号、行高、内容区最大宽度并居中。

验收：页面无内联样式；样式表路径正确；改一行 CSS 刷新后页面有变化。

第 9 课，CSS 入门。开场我会抛一个问题：如果没有 CSS，网页会是什么样？——答案就是你第 8 课交的那个页面，黑字白底、从上往下排。然后告诉他们：今天开始，你们给页面"穿衣服"。

先把 CSS 的作用说清楚：HTML 负责"这是什么"，CSS 负责"它长什么样"。这两件事分开，是前端工程化的第一步。

然后讲语法。选择器 { 属性: 值; }，三部分。先讲选择器"找谁"，再讲花括号里"改成什么样"。注释用 /* */，顺手提一句"CSS 只有一个注释写法，别写成 HTML 的"。

三种引入方式要讲取舍。行内样式写在一个标签的 style 属性里，能不用就不用；内部样式写在页面 head 的 style 里，只适合单页小 demo；外部样式写一个单独的 css 文件，用 link 引进来，这是唯一推荐的做法。理由很实在：能复用、能缓存、能分工。

最后是这节课最有价值的演示：DevTools 的 Styles 面板。当场选中一个元素，改它的颜色字号，然后问一句"文件变了吗"——没有。这个和第 1 课的体验连起来，学生会形成完整的心智模型：DevTools 是试答案的地方，改完要手写回文件里。

// 模块二 · 第 10 课

选择器基础

讲授 · 25 min

基本选择器：元素 / 类 / ID / 通配
复合选择器：交集 p.hl（连写）· 并集 h1, h2（逗号·也叫分组）· 后代 nav a（空格）· 子代 nav > a
class 可复用，id 全页唯一 —— 样式优先用 class
命名规范：小写 + 短横线 · BEM 初识（block__element--modifier）
给同一元素加多个类的写法与顺序

练习 · 15 min

为第 8 课页面里的导航、卡片、按钮添加类名并写样式，要求类名可读、能看懂它管什么。

验收：不使用 id 写样式；类名用英文小写 + 短横线；同一元素上复用类（如 btn btn-primary）。

第 10 课，选择器基础。这一课的核心不是"背会多少种选择器"，而是建立"选择器 = 定位元素的语法"这个认识。

按"从粗到细"讲：元素选择器找一类标签；类选择器找一类特征；ID 选择器找唯一一个；通配符找全部——这四类是基本选择器，先解决"点谁"。

接着进复合选择器，三种全靠连接符号区分：交集是连写（p.hl，两个条件同时满足，范围更小）；并集是逗号（h1, h2，一次选多个，也叫分组选择器）；后代是空格（nav a，选"里面所有的"）；最后是子代选择器，只选"直接儿子"。

这里必须停下来强调：一个空格之差就是另一种选择器。p.hl 是交集——同时是 p 且带 hl；p .hl 是后代——p 里面所有带 hl 的元素。我一般让学生在纸上各写一遍，写错过一次就记住了。

这里有个必须讲死的点：class 可以复用，id 全页唯一，所以样式一律用 class。我一般会说："id 留给 JavaScript 用，或者用于页内锚点，不要拿来写样式。"这条规则学生一旦养成，后面会省掉很多麻烦。

然后是命名规范。这个学生最容易忽略，但它直接决定了代码能不能维护。要求三条：英文小写、用短横线连接、名字要能看出它是什么。比如 card-title 就比 ct 好得多。这里可以提一句 BEM 的思路——block__element--modifier，不用强求学生用，但要让他们见过。

还有个小技巧：一个元素可以挂多个类。class="btn btn-primary"，btn 管骨架，btn-primary 管颜色。这种做法在做组件的时候特别有用，今天先埋下。

// 模块二 · 第 11 课

选择器进阶与层叠

讲授 · 25 min

伪类：:hover :focus :active :first-child :nth-child(even)
伪元素：::before ::after 与 content
优先级权重：内联 1000 / id 100 / class 10 / 元素 1，同权重后来居上
继承与层叠 · !important 为什么是危险动作

练习 · 15 min

① 5 道优先级判断题（给代码问最终颜色）；② 给按钮加 hover 效果和 ::before 小图标装饰。

验收：能口述算出权重；伪元素有 content；不使用 !important。

这节课的目标是一句话：让学生能自己回答「为什么我的样式没生效」。

第 11 课，选择器进阶和层叠。这是 CSS 里最重要的一课，我建议花足时间，别赶。

先讲伪类。:hover 是鼠标悬停，:focus 是获得焦点，:active 是按下瞬间——这三个是按钮和链接的标配，现场演示一遍按压反馈。然后 :first-child、:nth-child(even) 用来选特定位置的元素，做斑马纹表格特别方便。

再讲伪元素 ::before 和 ::after。关键是那句提醒：一定要写 content，哪怕写 content: ""，不写就完全不显示。这是新手必踩的坑。

然后是今天的重头戏：优先级。给学生一个可以算的口诀：内联样式 1000，id 100，class 10，元素 1。同一权重的时候，后写的赢。我建议用"打分"的方式讲，然后立刻出五道判断题当场算。算过一遍的学生，之后基本不会再问"为什么没生效"。

最后讲继承和 !important。有些属性会自动往下传，比如颜色和字号；有些不会，比如边框。!important 的作用是"强行覆盖"，但它会让整份样式表变得不可预测——我一般会说："你今天加一个 !important，三个月后你要加十个。"这节课的纪律是：不许用 !important。

// 模块二 · 第 12 课

颜色、单位与字体

讲授 · 25 min

颜色写法：hex / rgb / rgba（透明度）/ hsl
单位：px / em / rem / % / vw / vh 的区别与选型
字体栈与中文字体回退顺序 · Web 字体引入思路
CSS 变量：--color-primary 与 var()

练习 · 15 min

为页面定义 8 个 CSS 变量（主色、文字三档、背景、边框等）与一套字号阶梯（14 / 16 / 18 / 24 / 32 / 48），并在页面中全部引用变量。

验收：样式表里不出现硬编码颜色；改一个变量，全站生效。

第 12 课，颜色、单位和字体。这节课表面在讲细节，实际在教一件事：建立一套可维护的样式系统。

颜色先讲清四种写法。hex 最常用；rgb() 好读；rgba() 能加透明度，做遮罩和阴影必须会；hsl() 按色相饱亮度来调，做"同一个颜色的深浅变化"时最方便。这个不用背，告诉学生"知道有这几种，用的时候查就行"。

单位是重点。px 是绝对单位，最直观；em 相对父元素字号，会层层叠加，容易失控；rem 相对根元素字号，很稳定，做字号阶梯推荐用它；% 做宽度；vw、vh 相对视口尺寸。我的建议是：字号用 rem，布局宽度用 %，细节间距用 px。

字体栈要讲中文字体的回退顺序，比如先写拉丁字体再写中文字体，最后兜底 sans-serif。不写回退的后果是：换了台电脑，页面字体就完全变了。

最后压轴：CSS 变量。定义 --color-primary: #3b82f6，用的时候 var(--color-primary)。演示一遍"改一个变量，全站颜色同时变"。这个瞬间通常会让全班"哇"一下。练习就让他们把颜色和字号全部改成变量——从这一课开始，他们的样式表开始有"系统"的味道了。

// 模块二 · 第 13 课

文本排版

讲授 · 25 min

text-align / decoration / transform / indent
line-height 与可读性（正文 1.5–1.8）· letter-spacing / word-spacing
white-space 与换行控制
溢出省略：单行三件套与多行 -webkit-line-clamp

练习 · 15 min

完成一段图文排版：正文字号 16px、行高 1.7；做一处单行溢出省略（长标题）与一处两行溢出省略（简介）。

验收：省略号成功出现；调整窗口宽度时截断位置正确。

单行省略三件套：overflow: hidden + white-space: nowrap + text-overflow: ellipsis，少一个都不生效。

第 13 课，文本排版。这节课的标准很朴素：让正文读起来舒服。

先讲对齐和修饰：text-align 控制左右居中；text-decoration 加下划线，顺便说一句"链接的下划线就是用这个去掉的"；text-transform 控制大小写；text-indent 做首行缩进。

然后是这节课最重要的属性：line-height。我会现场演示给同一段文字设 1.0、1.5、2.0 三种行高，让学生自己说哪种最舒服。结论是正文 1.5 到 1.8 之间。这一个属性对阅读体验的影响，超过其他所有属性加起来。

再讲字间距、词间距和 white-space。这块不用讲太深，知道能用就行。

最后讲溢出省略，这是很实用的技能。单行三件套要让学生背下来：overflow hidden、white-space nowrap、text-overflow ellipsis，少一个都不生效——现场只写两个，让他们看没效果，再补上第三个，效果出来了。这种"故意少写一个"的演示，记忆效果特别好。

多行的 -webkit-line-clamp 提一下就行，知道有这个东西，用到再查。

// 模块二 · 第 14 课

盒模型

讲授 · 25 min

四层结构：content / padding / border / margin
box-sizing: border-box 为什么是行业默认选择
margin 简写顺序（上右下左）与 margin: 0 auto 居中
相邻 margin 合并（塌陷）现象 · 元素实际宽度公式

练习 · 15 min

用盒模型复原一个按钮和一个卡片；分别用 content-box 与 border-box 各做一次，写下两次的实际尺寸差异。

验收：能算出 width:100px + padding:20px 在两种模式下的真实宽度。

经典坑：宽度写 100% 再加 padding 导致横向溢出 —— 根因就是没设 border-box。

第 14 课，盒模型。这是 CSS 第二个拦路虎，和第 11 课的优先级并列。

开场先给一句定调的话：网页里的每一个元素，本质都是一个矩形盒子。这句话是理解 CSS 布局的地基。

然后画那个经典的同心方框图，从里到外四层：content 内容区、padding 内边距、border 边框、margin 外边距。padding 是"衣服和身体的间隙"，border 是"衣服本身"，margin 是"你和别人保持的距离"——这个比喻学生记得住。

接着是核心：box-sizing。默认是 content-box，意思是 width 只算内容区，padding 和 border 额外加上去。所以 width:100px; padding:20px 真实宽度是 140。当场算一遍，让学生自己算第二遍。而 border-box 把 padding 和 border 算进 width 里，就是 100。这就是为什么几乎所有项目都会写一句"所有元素用 border-box"。

再讲 margin 的简写顺序"上右下左"和 margin: 0 auto 水平居中——这句是让内容区居中的最经典写法，第 9 课其实已经用过一次，今天补上原理。

最后讲 margin 合并：上下两个兄弟元素的外边距会取较大值，不是相加。这个现象很反直觉，但要让学生知道"这不是 bug，是规范"。

// 模块二 · 第 15 课

背景与装饰

讲授 · 25 min

background：color / image / repeat / position / size / 多重背景
border-radius 圆角与胶囊按钮
box-shadow 多层阴影营造层次 · text-shadow
linear-gradient / radial-gradient · background-clip: text

练习 · 15 min

做 3 个不同风格的卡片（例如：极简白、渐变霓虹、深色悬浮），用圆角、阴影、渐变各组合一次。

验收：阴影有三层以上参数（偏移 + 模糊 + 透明色）；渐变方向正确；卡片视觉上"有层次"。

第 15 课，背景与装饰。这节课是这八节课里最"爽"的一节，学生的积极性会很高，要利用好。

先讲 background。单个属性好理解，重点讲三件事：第一，background-size: cover 让背景图铺满不拉伸；第二，简写里的斜杠分隔，比如 background: url(x.jpg) center / cover；第三，多重背景可以叠着写，用逗号分隔，这招做渐变遮罩特别有用。

然后 border-radius。演示一个技巧：把宽高设成一样、圆角设成 50%，就是个正圆。做头像框立刻就用上了。胶囊按钮就是圆角等于高度一半。

接着是 box-shadow，这是"高级感"的来源。参数是：水平偏移、垂直偏移、模糊半径、颜色。关键技巧是用带透明度的深色，不要用纯黑，否则显得很脏。再演示一句：把阴影写两层，一层近一层远，层次感会明显变好。

最后是渐变。线性渐变要讲清方向，比如 to right、135deg。再演示一个"文字渐变"——用 background-clip: text 加透明文字色。这个效果在封面页特别好看，学生一定会想用。练习让他们做三张卡片互相投票，把课堂气氛推起来。

// 模块二 · 第 16 课 · 阶段实战

阶段实战二 · 美化个人页

课堂流程 · 45 min

8′ 讲排版系统：字号阶梯与间距节奏（4 / 8 / 16 / 24 / 32 / 48）
8′ 讲颜色系统：1 个主色 + 5 档中性色
25′ 改造第 8 课的个人页（结构不动，只改样式）
4′ 投屏展示与点评

验收标准

使用 CSS 变量，样式表无硬编码颜色
字号不超过 6 级，间距成体系
至少有 1 个卡片组件和 1 个按钮组件
全页无内联样式；HTML 结构基本未改动

第 16 课，阶段实战二：把第 8 课的个人页美化一遍。

注意我特意加了一条要求：结构不动，只改样式。为什么？因为这里有个很重要的概念要让学生体会到——"结构"和"表现"是分开的。同一个 HTML 骨架，换一套 CSS 就能变成完全不同的风格。这一点想通了，后面学换皮肤、换主题、响应式都会轻松很多。

开场八分钟讲排版系统。核心是两件事：字号不超过六级，比如 14、16、18、24、32、48；间距只用固定的几档，比如 4、8、16、24、32、48。为什么会好看？因为"有规律"本身就是美感。让学生别随手写 17px、23px 这种数值。

再八分钟讲颜色系统：一个主色 + 五档中性色（从近黑到近白）。整个页面只用这几个颜色，就会很统一。

中间 25 分钟动手改造。这次巡场我特别关注两件事：有没有人还在写裸颜色、字号是不是超过六级。

最后投屏展示四分钟。让学生自己说"我为什么这样配色"，说不出来就是还没想清楚。这一版要留着，第 23 课要做响应式。

// module 03

模块三 · CSS 布局与响应式 · 第 17–24 课

17display 与文档流块级 / 行内

18定位position / z-index

19浮动与清除历史与边界

20Flex 布局（一）容器属性

21Flex 布局（二）项目属性与配方

22Grid 布局二维与卡片网格

23响应式与媒体查询移动优先

24阶段实战三：响应式落地页三端验收

模块三，CSS 布局与响应式，第 17 到 24 课。这八节课是 CSS 部分最有实用价值的八节课。

为什么这么说？因为学生前面学的都是"一个元素怎么好看"，从这节课开始学的是"一堆元素怎么摆"。真实页面里的难点从来不是单个元素，是排布。

结构上分两条线。第 17 到 19 课是基础概念：文档流、display、定位、浮动。这里我要特别说明——浮动只作为历史理解，让学生知道"以前是这么做的、会遇到什么问题"，然后明确告诉他们现在用 Flex 和 Grid。

第 20 到 22 课是现代布局主力：Flex 两节课、Grid 一节课。Flex 解决一维排布，Grid 解决二维排布，这两个讲透，学生就能做真实的页面了。

第 23 课讲响应式，第 24 课实战。这个模块的验收标准是三端截图——手机、平板、桌面，缺一不可。

// 模块三 · 第 17 课

display 与文档流

讲授 · 25 min

标准文档流：自上而下、自左而右
block 独占一行、可设宽高
inline 不换行、宽高由内容决定、垂直 margin 无效
inline-block 兼具两者 · none 与 visibility: hidden 的区别

练习 · 15 min

把导航项分别设成三种 display 观察排版差异；用 inline-block 把导航项排成一行并留出间距。

验收：能说出为什么给 span 设宽高不生效；能说清 none 与 hidden 的区别。

一句话记住：block 管区块，inline 管文字，inline-block 管一行里的小方块。

第 17 课，display 和文档流。这一课要建立整个布局模块的世界观：元素默认是怎么排的。

先讲"标准文档流"。浏览器默认的排布规则就两条：从上往下排，从左往右排。所有布局技巧，本质都是"打破默认流"或者"引导默认流"。

然后是三种 display。block 是块级，独占一行，宽度默认撑满父元素，能设宽高——div、p、h1 都是块级。inline 是行内，不换行，宽高由内容决定——span、a、strong 都是行内。这里有个必讲的坑：给行内元素设宽高和高低 margin 是不生效的，现场演示一遍，学生一脸疑惑，你再解释"因为行内元素是跟着文字走的"。

inline-block 是两者的结合：跟行内元素一样排在一行，但又能设宽高。做导航栏、做一行里的小方块，全靠它。

最后讲 display: none 和 visibility: hidden 的区别。一个是不存在，一个是看不见但还占着位置——用 DevTools 画个框演示最清楚。这个区别在做显示/隐藏切换时会直接用到。

// 模块三 · 第 18 课

定位

讲授 · 25 min

position 五个值：static / relative / absolute / fixed / sticky
偏移属性 top / right / bottom / left
absolute 找最近的「定位祖先」（包含块）
z-index 与层叠顺序 · 父级层叠上下文

练习 · 15 min

实现三个效果：固定顶部导航（fixed）、卡片右上角角标（absolute + 父级 relative）、「回到顶部」悬浮按钮（fixed）。

验收：absolute 元素落在父卡片内部而不是页面角落；滚动页面时导航不动。

口诀：子绝父相 —— 想让一个元素绝对定位到某个位置，先给它的父元素加 position: relative。

第 18 课，定位。这节课有个很实用的口诀要教给学生：子绝父相。

先讲 static，它是默认值，就是"待在文档流里，不动"。然后 relative：相对于自己原来的位置偏移，而且它原来占的位置还留着。这个"占位"的特性很重要——它是 absolute 的定位参照物。

absolute 是重点：它脱离文档流，然后向上找"最近的一个有定位的祖先元素"作为参照。找不到就一直找到页面根部。所以它最经典的坑就是：只给元素加了 absolute，它跑到了页面角落。这时候就要给父元素加 position: relative——这就是"子绝父相"。

fixed 是相对视口固定，滚动页面不动，固定导航和回到顶部按钮都靠它。sticky 是粘性定位，滚动到某个位置才粘住，用它得满足两个条件：祖先没有 overflow hidden，而且必须指定 top 之类的偏移量。

最后讲 z-index。这里要提醒一个反直觉的点：z-index 只管"同一层叠上下文里"的元素。如果父元素层级低，子元素 z-index 设到 9999 也压不过别人。这个不用讲深，但要让学生知道"z-index 加了没用"是正常现象。

// 模块三 · 第 19 课

浮动与清除

讲授 · 25 min

float 的原始用途：图文环绕
浮动导致父元素高度塌陷
清除浮动三方案：clear / overflow: hidden / ::after clearfix
用浮动做双栏的历史做法及其局限

练习 · 15 min

用浮动实现双栏布局 → 用 clearfix 修复高度塌陷 → 再用 Flex 重写一遍，写下两者的差异感受。

验收：能复现并解释"塌陷"现象；能说出为什么现在推荐 Flex。

给学生明确结论：浮动是历史，知道它、会修它，但新代码用 Flex / Grid。

第 19 课，浮动与清除。我要先说明这节课的定位：它是"历史课"，但必须上。

为什么必须上？因为学生一定会去看老教程、老项目。如果没见过浮动，看到一堆 float 就会懵，而且会照着老办法写新代码。

先讲浮动的原始用途——图文环绕。文字自动绕过图片，这是它设计的初衷，现场演示一下，效果很直观。

然后重点演示高度塌陷：一个父容器里放两个浮动的子元素，父容器高度变成 0。为什么？因为浮动元素脱离了正常文档流，父元素"看不见"它们了。这个现象一定要让学生亲手复现一次，在 DevTools 里看到父元素高度是 0，那种"原来如此"的体验很关键。

接着讲三种修法：给下面加 clear、给父元素 overflow: hidden、或者用 ::after 伪元素做 clearfix。其中 clearfix 是最标准的，因为它不影响其他属性。

最后一步很关键：让学生用 Flex 把同一个双栏布局重写一遍，然后对比。他们会立刻发现——Flex 一行代码解决的事，浮动要三行还要处理塌陷。这个对比比老师说十遍"用 Flex"都管用。

// 模块三 · 第 20 课

Flex 布局（一）· 容器属性

讲授 · 25 min

display: flex 开启弹性布局，主轴与交叉轴的概念
flex-direction：row / column
justify-content（主轴对齐 6 种）· align-items（交叉轴对齐）
flex-wrap 换行与 align-content · gap 间距

练习 · 15 min

完成三个小 demo：① 横向导航栏（两端对齐、垂直居中）② 卡片水平垂直居中（写三种不同写法）③ 自动换行的标签组。

验收：能说清"哪个方向是主轴"；改 direction 后知道 justify / align 的作用轴会互换。

第 20 课，Flex 布局的第一节。从这节课开始，学生真正进入现代前端。

开场只说一件事：给一个元素加 display: flex，它的子元素就自动排成一行。就这一句话，解决了很多以前要算半天的排版问题。让学生先记住这个效果，再理解原理。

然后讲主轴和交叉轴。这是 Flex 唯一一个需要动脑子的概念。记住一句话：主轴方向由 flex-direction 决定，默认是横向，所以主轴就是横的，交叉轴是竖的。

justify-content 管主轴对齐，六个值：从起始、到末尾、居中、两端对齐、环绕、平均分布。 align-items 管交叉轴对齐，最常用的是 center。

这里有个一定要说的点：如果把 flex-direction 改成 column，主轴就变成竖的了，justify 和 align 的作用方向也跟着互换。学生最容易在这里翻车，所以练习里我要求他们改 direction 后重新试一遍。

gap 是间距，比给每个子元素写 margin 干净得多。flex-wrap 让元素放不下时自动换行，做响应式标签组很有用。

练习里"水平垂直居中"那三个 demo 一定要做——这是前端历史上最著名的难题，用 Flex 三行就能解决。让学生亲身体验一次，会很有成就感。

// 模块三 · 第 21 课

Flex 布局（二）· 项目属性与配方

讲授 · 25 min

flex-grow / flex-shrink / flex-basis 与 flex: 1 1 auto 简写
align-self 单独对齐 · order 排序
配方一：侧边栏固定 + 内容自适应
配方二：卡片等高 · 配方三：页脚吸底

练习 · 15 min

用 Flex 完成三栏布局：左栏固定 240px + 主内容自适应 + 右栏 300px；窗口变窄时纵向堆叠。

验收：主内容能随窗口伸缩；文本过长时能正常省略（min-width: 0）。

第 21 课，Flex 第二节，讲项目属性。区别很简单：容器属性加在父元素上，管整体；项目属性加在子元素上，管个体。

三个核心属性要讲透：flex-basis 是基准尺寸，flex-grow 是"还有空间时怎么分配"，flex-shrink 是"空间不够时怎么压缩"。简写就是 flex: 1 1 auto。

最常用的一句是 flex: 1，意思是"你随便伸缩，占满剩余空间"。做自适应内容区就靠它。

然后 align-self 让某个子元素单独对齐，order 改变排列顺序（顺序变了但 HTML 结构没变，这在响应式里很有用）。

接着给三个"配方"，这是这节课最实用的部分：侧边栏固定宽度、内容区 flex:1 自适应；卡片等高；页脚吸底。这三个配方覆盖了真实项目里八成的布局需求，让学生存下来当模板用。

最后提醒一个很隐蔽的坑：如果 flex 子项里的文本想用省略号，得给子项加 min-width: 0。因为 flex 项默认最小宽度是自动的，不会比内容更小。这个坑不提前说，学生一定会撞上。

// 模块三 · 第 22 课

Grid 布局

讲授 · 25 min

display: grid · 网格线与行列定义
grid-template-columns / rows · fr 单位 · gap
repeat + auto-fit + minmax 实现自动列数
grid-template-areas 与 grid-area 命名区域

练习 · 15 min

① 用 repeat(auto-fit, minmax(240px, 1fr)) 做响应式卡片网格（不用媒体查询）② 用命名区域做一个「杂志式」大小格混排版面。

验收：改变窗口宽度时卡片列数自动变化；区域命名与内容对应正确。

选型原则：一维排布用 Flex，二维排布用 Grid。两者不是替代关系，是配合关系。

第 22 课，Grid。上课第一句我先给学生一个选型原则：一维用 Flex，二维用 Grid。一行或者一列的事，用 Flex；行列都要管的事，用 Grid。这样他们就不会在两个之间犹豫。

先讲基本概念：grid-template-columns 定义有几列、每列多宽。1fr 的意思是"一份可用空间"，所以三列各 1fr 就是三等分。

然后是这节课最有价值的一行代码：repeat(auto-fit, minmax(240px, 1fr))。意思是"列宽最少 240px，能塞几列塞几列，剩下的空间平摊"。这一行代码不需要任何媒体查询就能实现响应式网格，学生看到效果通常会愣一下。这是 Grid 最值得记住的用法。

最后讲命名区域 grid-template-areas。它让布局变成了"画画"——你直接在 CSS 里把页面画成几块。特别适合做杂志式版面、后台管理布局这种结构复杂的页面。

练习里的第二个任务就是用它做大小格混排，难度适中，做出来很有成就感。

// 模块三 · 第 23 课

响应式与媒体查询

讲授 · 25 min

viewport meta 为什么必须写
媒体查询语法与断点：640 / 768 / 1024 / 1280
移动优先：min-width 递进书写
流式布局（%、max-width、clamp()）· 图片自适应

练习 · 15 min

让第 16 课的个人页在 375 / 768 / 1440 三个宽度下都正常显示：内容不溢出、字号可读、卡片合理换行。

验收：三端各截一张图；手机端没有横向滚动条。

先写移动端样式，再用 min-width 逐级增强 —— 这就是移动优先。

第 23 课，响应式。这一课有个必须是"啊哈时刻"的点，就是 viewport meta。

开场我会先让学生把个人页用浏览器打开，然后按 F12 切到手机模式。他们会发现——页面被整体缩小了，字小得看不清。然后加上 <meta name="viewport" content="width=device-width, initial-scale=1">，再刷新。页面立刻变成真正的手机版布局。这个对比非常震撼，一分钟就把"为什么要写这一行"讲明白了。

然后讲媒体查询。@media (min-width: 768px) { ... }，意思是"宽度大于等于 768 时，应用里面的样式"。记住用 min-width 递进写，也就是先写手机样式，再加宽屏补充。

这里有个容易翻车的点：断点顺序必须是递增的。因为后面的会覆盖前面的，写反了样式就乱。练习的时候重点查这个。

最后讲流式布局的思路：与其在每个断点写一套尺寸，不如用百分比、max-width 和 clamp() 让尺寸自己流动。图片加一句 max-width: 100% 就自适应了。

这节课的作业是三端截图，我要看到学生的电脑上有三张图，这是最实在的验收。

// 模块三 · 第 24 课 · 阶段实战

阶段实战三 · 响应式落地页

课堂流程 · 45 min

5′ 结构规划：导航 / 首屏 / 功能卡片 / 页脚
5′ 导航折叠方案：纯 CSS 的 checkbox 方案（JS 方案预告）
25′ 编码实现
8′ 三端自测 + 2′ 讲评

验收标准

桌面端导航横排，移动端可折叠
卡片网格随宽度自动换行（Grid 或 Flex）
无横向滚动条，无元素遮挡与溢出
375 / 768 / 1440 三个宽度下都可用

这一版落地页是后续 JS 模块的操作对象——第 33 课起，我们给它加交互。

第 24 课，阶段实战三：响应式落地页。这是 CSS 部分的收官作品。

这四十五分钟里，我要重点说两件事。

第一，导航折叠方案。移动端导航通常是要折叠的。这节课我教一个"纯 CSS 方案"——用一个隐藏的 checkbox 加上 :checked 伪类来控制菜单显示。为什么不用 JS？因为还没学到。而且这个方案本身很有意思，能让学生体会到"CSS 也能做状态切换"。顺便预告一句："下个模块学了 JS，我们会用更优雅的方式重写它。"——这句话会给后面的 JS 课埋下一个动机。

第二，三端自测的纪律。不要让学生凭感觉说"应该没问题"。要求他们真的把浏览器拉到 375、768、1440 三个宽度，逐个检查有没有横向滚动条、有没有被遮住的元素。「响应式」不是写完就成立的，是测出来的。

最后要说清楚交付物的去向：这个落地页不要丢，第 33 课开始我们要给它加 JS 交互，第 35 课加暗黑模式，第 36 课加动态列表。它跟个人页一样，是贯穿项目。

// module 04

模块四 · JavaScript 基础 · 第 25–32 课

25JavaScript 入门引入方式 / console

26变量与数据类型let / const / typeof

27运算符与流程控制if / switch / 真值

28循环与数组for / 数组方法

29函数参数 / 作用域 / 闭包

30对象与 JSON对象数组 / JSON

31内置对象与常用 APIString / Math / Date

32阶段实战四：班级成绩管理器控制台小工具

模块四，JavaScript 基础，第 25 到 32 课。从这里开始，课程的性质变了——前面是"描述页面"，这里是"写程序"。

两件事要提前跟学生说清楚。第一，思维方式变了。HTML 和 CSS 是"声明式"的，你写什么就是什么；JS 是"命令式"的，你要告诉计算机一步步怎么做。很多学生会在前两节课卡住，觉得"想不明白"，这是正常的。第二，节奏要慢。我会把讲授时间压到 20 分钟，练习时间拉长，因为编程必须自己动手。

结构上：第 25 课入门，第 26 到 28 课是语法基础（变量、流程、循环数组），第 29 课函数——函数是这节课里最重要的一节，第 30、31 课讲对象和内置对象，第 32 课做实战。

还有一个设计上的小心思：第 32 课的实战是在控制台里做的，不出界面。为什么？因为下一模块就要把这个"数据层"搬到页面上。先讲清楚数据怎么处理，再讲怎么显示，学生就不会把两件事搅在一起。

// 模块四 · 第 25 课

JavaScript 入门

讲授 · 25 min

三件套分工：HTML 结构 · CSS 表现 · JS 行为
JS 在浏览器里能做什么（改 DOM / 发请求 / 存数据）
三种引入方式与 defer · 注释写法
console.log 调试法 · 如何读报错信息

练习 · 15 min

新建 main.js，用 console 输出 10 行信息（其中至少 4 行是变量计算的结果），并在 DevTools 中查看、清空。

验收：脚本被正确引入；Console 无报错；能说出报错信息里的行号指的是哪一行。

第 25 课，JavaScript 入门。这节课的目标不是学会语法，是建立"我写的代码在哪儿运行、我怎么看到结果"这个基本闭环。

开场用一句话定位：HTML 是骨架，CSS 是皮肤，JavaScript 是肌肉和神经。前面三节课你都只能"看"，从今天开始你能"做"。

然后讲 JS 能干什么：改页面内容、响应用户操作、存取数据、跟服务器通信。先给全景，再进细节。

引入方式要讲清楚，尤其是 defer。为什么脚本放在 head 里会报"找不到元素"？因为脚本执行的时候，下面的 HTML 还没解析到。两个解法：要么把脚本放到 body 末尾，要么加 defer 让它等页面解析完再跑。这个坑是新手第一天必踩的，一定要讲。

最后是这节课最实用的部分：怎么用 console 和怎么读报错。教学生三件事——看行号、看错误类型、对着行号找代码。比如 Uncaught ReferenceError: x is not defined，就说"有个变量 x 你不认识"。会读报错，等于拥有了自学能力，这比多讲两个语法重要得多。

练习让他们输出十行信息，重点不是内容，是让他们习惯"改代码 → 刷新 → 看 Console"这个循环。

// 模块四 · 第 26 课

变量与数据类型

讲授 · 25 min

let / const / var 的区别（块级作用域、重复声明）
基本类型：number / string / boolean / null / undefined / object（+ symbol）
typeof 与显式、隐式类型转换
模板字符串 `${}` · 命名规范（小驼峰）

练习 · 15 min

写 10 行代码声明各类变量并打印类型；故意做一次字符串加数字的运算，写下并解释结果。

验收：能解释 '1' + 1 = '11'；知道什么时候该用 const；变量名可读。

默认用 const，需要重新赋值时再用 let，不要用 var。

第 26 课，变量和数据类型。这节课有两条纪律要立起来。

第一条：默认用 const，需要改的用 let，不用 var。为什么？因为 var 有两个老毛病——没有块级作用域、可以重复声明，很容易出 bug。而 const 声明的变量不能重新赋值，用它能避免很多"不小心改错了"的问题。这条规则简单，学生执行起来没负担。

第二条：变量名要能看出它是什么。userName 就比 a 好，totalPrice 就比 tp 好。用英文，小驼峰。

然后讲类型。让学生记住一个比喻：变量是盒子，类型是盒子里装的东西的种类。数字、字符串、布尔值最好理解；null 和 undefined 要区分——null 是"我故意设成空的"，undefined 是"还没有值"。

类型转换是重点，尤其是那个经典陷阱：'1' + 1 等于 '11'。为什么？因为加号看到字符串就变成了"拼接"。现场演示一遍，让学生自己念一遍"加号看到字符串就拼接"。这一句能救他们后面很多次。

模板字符串顺便带一句，因为后面操作 DOM 时要反复用：反引号加 ${}，比用加号拼字符串清爽得多。

// 模块四 · 第 27 课

运算符与流程控制

讲授 · 25 min

算术 / 赋值 / 自增自减运算符
比较运算符：== 与 === 的区别（强推 ===）
逻辑运算符与短路求值（&& || 的取值技巧）· 三元运算符
if / else if / else · switch 与穿透 · 真假值

练习 · 15 min

完成两个小程序：① 成绩等级判断（90+ 优 / 80+ 良 / 60+ 及格 / 否则不及格）② 登录权限判断（用三元运算符和 if 各写一次）。

验收：使用 === 而不是 ==；能说出哪些值会被判为假。

第 27 课，运算符和流程控制。从这节课开始，程序会"思考"了。

先快速过运算符，重点只有两个。

第一个：== 和 === 的区别。双等号会自动转换类型再比较，三等号必须类型和值都相同。比如 '1' == 1 是 true，'1' === 1 是 false。规则很简单：永远用三等号。不要让学生去记双等号的转换规则，那是浪费时间。

第二个：真假值。哪些值会被当成"假"？六个：0、空字符串、null、undefined、NaN、false。让学生背这六个，其他都是真。这个知识点在做判断和渲染时天天用。

再讲一下短路求值的实用技巧：a || 默认值，如果 a 是空的就用默认值。这个写法后面处理用户输入时会非常常用。

最后讲 if 和 switch。提示一个坑：switch 忘记写 break 会"穿透"，一直往下执行。现场演示一次，学生会印象很深。讲的时候顺便说：能用 if 表达清楚的，就别硬用 switch。

// 模块四 · 第 28 课

循环与数组

讲授 · 25 min

for 三段式与执行顺序 · while / do-while · for...of
break / continue
数组：定义、下标（从 0 开始）、length 与越界
常用方法：push / pop / shift / unshift / slice / splice / indexOf / includes / join

练习 · 15 min

① 用嵌套循环打印九九乘法表；② 实现数组的增、删、改、查四个操作，每做一步都打印当前数组。

验收：能说出 slice 与 splice 的区别（是否改原数组）；不会写出越界循环。

第 28 课，循环和数组。这一课开始，学生才真正感受到"计算机比人快"。

先讲 for 的三段式：初始化、条件、步进。重点是执行顺序——初始化只跑一次，然后条件判断、执行循环体、步进，再回到条件判断。建议用"给表格填数"的方式一笔一笔写在黑板上，让学生跟着念一遍顺序，比讲一遍强十倍。

break 是"跳出整个循环"，continue 是"跳过本次进下一次"，两个放一起对比讲。

然后讲数组，两个必讲的点。

第一，下标从 0 开始。这个所有人都要说，但真正踩过坑才记得住。让它现场写一个 for (let i = 0; i <= arr.length; i++)，看它打印出 undefined，再改成 <。一个"越界"的现场演示，比十遍提醒都管用。

第二，slice 和 splice 的区别。名字很像，但一个不改原数组、一个改原数组。这个区分不清，后面做数据操作会很痛苦。

练习里的乘法表是很经典的一题，嵌套循环是很多学生的第一个"思维门槛"，要留足时间。

// 模块四 · 第 29 课

函数

讲授 · 25 min

函数声明 / 函数表达式 / 箭头函数
参数与返回值（没有 return 就返回 undefined）
默认参数 · 剩余参数 ...rest
作用域与局部 / 全局变量 · 闭包初识 · 回调函数

练习 · 15 min

把第 28 课的数组操作封装成 4 个函数；再写一个带回调的 forEachLike(arr, fn) 函数并验证效果。

验收：每个函数职责单一、命名清晰；理解"封装是为了不用复制粘贴"。

这节课的核心价值：让学生学会「把重复的代码打包成一个名字」。

第 29 课，函数。这是整个模块四最重要的一节课，值得多花时间。

开场先制造一个"痛点"：让学生把第 28 课的数组操作代码复制三遍，改成三种不同的数据。他们敲完会很难受。然后我说：如果把它写成一个函数，改一处就行了。这就是函数存在的理由——不是为了"高级"，是为了"不用重复"。

然后讲三种写法。函数声明、函数表达式、箭头函数。建议学生日常用箭头函数和函数声明，知道表达式是什么就行。箭头函数先只讲写法更短，this 的差异这里不展开，讲多了会乱。

参数和返回值重点讲一个误区：函数如果没有写 return，返回的是 undefined，不是"没有返回值"。学生经常忘了 return 然后对着 undefined 发呆。

作用域用一个比喻讲清楚：函数是一间房子，房子里能看见外面的东西，外面看不见房子里的东西。所以局部变量出不了函数。闭包先只给一个"计数器"的最小例子，让学生知道"函数能记住它出生时的环境"就够了，不要深挖。

最后一定要讲回调函数——因为下一课讲数组方法、再往后讲事件监听，全是回调。不先把"函数可以作为参数传进去"这件事讲明白，后面会到处卡壳。

// 模块四 · 第 30 课

对象与 JSON

讲授 · 25 min

对象字面量与键值对 · 点访问与方括号访问
对象里的方法 · this 指向初识
遍历：for...in / Object.keys / entries · 对象数组
JSON 语法 · JSON.stringify / JSON.parse · 浅拷贝与深拷贝

练习 · 15 min

用对象描述 3 个学生（姓名、成绩数组），输出平均分、最高分，并按总分从高到低排序打印。

验收：能说清点访问和方括号访问各自的适用场景；知道 JSON 的键必须用双引号。

第 30 课，对象和 JSON。这一课是前后端之间的桥梁。

先讲对象是什么。用一句话：数组是"一排东西"，对象是"一件东西的各个属性"。比如一个学生，有姓名、学号、成绩，这就该是一个对象。

点访问和方括号访问都要讲。点访问用来访问固定的属性名；方括号访问用来访问"变量里的属性名"。比如 student[key]，key 是变量。这个区别在做数据筛选时会用到。

然后是很重要的一点：实际开发里最常见的数据结构是"对象数组"——一个数组，里面每个元素都是一个对象。这门课后半程所有数据都长这样，今天一定要让这个结构变成学生的直觉。

接着讲 JSON。两个必讲点：第一，JSON 的键必须用双引号，单引号是错的，学生一定会写错；第二，stringify 是对象转字符串，parse 是字符串转对象，方向别搞反。

顺便说一句为什么需要 JSON——因为网络传输和本地存储只能存字符串，所以对象要先"打包成字符串"，用的时候再"拆开"。这个解释能让第 37 课的 localStorage 少很多困惑。

浅拷贝和深拷贝点到为止，知道展开运算符是浅拷贝、嵌套对象要小心就行。

// 模块四 · 第 31 课

内置对象与常用 API

讲授 · 25 min

String：trim / slice / split / replace / includes / padStart
Math：round / floor / ceil / random 与随机整数区间公式
Date 与时间戳 · toLocaleString 格式化
Number（toFixed / parseInt）· 数组高阶方法初识（map / filter / reduce / sort）· try/catch

练习 · 15 min

写三个小工具：① 把日期格式化成 YYYY-MM-DD；② 随机点名（从数组里随机取一个）；③ 按条件过滤数组（如分数大于 80 的）。

验收：随机点名能取到区间两端；能用比较函数把 [10, 2, 1] 正确排序。

第 31 课，内置对象和常用 API。这节课的定位是"发工具"，不是"讲原理"。

开场先说一句让学生放松的话：今天的东西不需要背，需要的是"知道有这么个东西存在"，用的时候查文档。前端 API 太多了，背不完的。会查才是能力。

String 部分重点讲三个：trim() 去空格——处理用户输入必用，因为用户很爱多打空格；split() 把字符串切成数组；includes() 判断包含——做搜索功能就靠它。

Math 部分重点讲随机数。这里有个必须给的公式：要取 a 到 b 之间的随机整数，用 Math.floor(Math.random() * (b - a + 1)) + a。让学生现场验证一下能不能取到两端的值，因为很多人在这个公式上少加 1，导致永远取不到最大值。

Date 部分讲时间戳和格式化。注意提醒：月份从 0 开始，这是个经典的坑。格式化建议直接用 toLocaleString 或者手写拼接，不用纠结。

最后讲数组的高阶方法 map、filter、reduce 和 sort。sort 有个大坑：默认按字符串排序，所以 [10, 2, 1] 会排成 1、10、2，必须传比较函数。现场演示一遍，效果非常好。

// 模块四 · 第 32 课 · 阶段实战

阶段实战四 · 班级成绩管理器

课堂流程 · 45 min

5′ 需求与数据结构设计（学生对象数组）
30′ 编码：录入 / 统计平均最高最低 / 按分数排序 / 按姓名查询
8′ 边界测试：空数组、非数字输入、重名
2′ 讲评与代码走查

验收标准

四个功能全部实现，控制台输出清晰
函数职责单一、命名可读（如 getAverage）
非数字输入有处理，不出现 NaN
至少使用一次 map / filter / reduce

注意：这节课故意不做界面。下一模块我们会把这份「数据层」搬到页面上。

第 32 课，阶段实战四：班级成绩管理器。这是控制台版本的最后一个作品。

我要强调这节课一个刻意的设计：不做界面，只在控制台里跑。为什么要这么"别扭"？因为我想把两件事分开教。这节课只解决"数据怎么处理"——怎么存、怎么算、怎么查、怎么排。界面是下一模块的事。

这么做的价值，在下一模块一开始就会显现：学生会发现——原来界面只是"把已经算好的结果显示出来"而已，真正难的部分我已经会了。这会极大降低他们学 DOM 的畏难情绪。

课堂重点两件事。第一，数据结构设计。开场五分钟一定要让学生先确定"学生对象长什么样"，比如 { name, score }。数据结构定错了，后面怎么写都别扭。第二，边界测试。留八分钟专门做这个：空数组会怎样？输入 "abc" 当分数会怎样？重名怎么办？「边界意识」是程序员和初学者最大的分野，这节课第一次正式训练它。

验收里"至少用一次 map / filter / reduce"这条，是逼他们用新工具，不要停留在 for 循环。

// module 05

模块五 · JavaScript DOM 与交互 · 第 33–38 课

33DOM 入门找到元素 / 改内容

34事件处理监听 / 冒泡 / 委托

35样式与类操作classList / 暗黑模式

36动态创建与表单交互渲染列表 / 校验

37数据与状态localStorage / 重渲染

38阶段实战五：待办清单一个像真产品的应用

模块五，DOM 与交互，第 33 到 38 课。这是学生最兴奋的六节课——因为从这节课开始，他们做的东西"能动"了。

这六节课有一条清晰的递进：第 33 课先学会"找到元素、改它的内容"；第 34 课学会"响应用户操作"；第 35 课学会"控制样式和切换状态"；第 36 课学会"根据数据动态生成页面"；第 37 课学会"管数据、存数据"；第 38 课把这些全部合起来做一个待办清单。

我要提醒两个教学要点。第一，每写一段 JS 都要在页面上看到变化。这个模块最怕的就是"老师讲代码、学生看不到效果"。所以每节课的练习都必须有可见的结果。第二，操作对象就是第 24 课做的那个落地页——学生会对"给我的作品加功能"这件事特别有动力。

另一个提醒：事件委托这个概念（第 34 课）是这六节课里技术含量最高的一点，但它能一次性解决"动态元素怎么绑事件"的难题，值得花时间讲透。

// 模块五 · 第 33 课

DOM 入门

讲授 · 25 min

DOM 树与节点关系（父 / 子 / 兄弟）
document.querySelector / querySelectorAll
读写内容：textContent / innerText / innerHTML 的区别与风险
读写属性：getAttribute / setAttribute / dataset

练习 · 15 min

用 JS 读取并修改页面上 5 个元素：改标题文字、改图片 src、改链接 href、给卡片加一个 data 属性、批量把所有列表项加上序号前缀。

验收：能用 querySelector 选中带类名和带 id 的元素；知道 querySelectorAll 返回的不是数组。

第 33 课，DOM 入门。上课第一句我会说：DOM 就是"浏览器把 HTML 变成了一棵可以被代码操作的对象树"。

先讲这棵树。画出 div、p、ul、li 的树状结构，讲父节点、子节点、兄弟节点。然后立刻切到 DevTools 的 Elements 面板，指着真实页面的树——概念和实物对上号了。

然后是这节课最常用的两个方法：querySelector 找第一个，querySelectorAll 找全部。重点强调：括号里写的就是 CSS 选择器，你们在模块二学的东西原封不动搬过来用。这个"复用"会让很多学生松一口气。

接着讲改内容。textContent 只取文字，innerHTML 会把标签也当 HTML 解析。这里必须提一句安全风险：如果内容是用户输入的，用 innerHTML 可能被人塞进脚本。不用讲太深，但要让"innerHTML 有风险"这个意识留在他们脑子里。

最后讲 dataset 读写 data-* 属性。这个知识点在第 34 课的事件委托里马上就会用到，是今天埋的伏笔。

练习里我特意加了"批量给所有列表项加序号"，目的是让他们体会一下 querySelectorAll 返回的 NodeList 和数组的差别——不能直接 map，要用 [...nodes] 转换。

// 模块五 · 第 34 课

事件处理

讲授 · 25 min

addEventListener(类型, 回调)
常见事件：click / input / change / submit / mouseenter / keydown
事件对象：event.target / value / key · preventDefault()
事件冒泡与事件委托（在父元素上监听）

练习 · 15 min

① 输入框实时字数统计；② 表单提交时阻止默认跳转并校验必填项、给错误提示；③ 用事件委托给一个列表的所有项（含后来新增的项）绑定点击。

验收：能解释为什么循环绑定事件不如委托一次；提交后页面不刷新。

第 34 课，事件处理。这节课的教学目标只有一个：让页面"听得见"用户。

先讲 addEventListener 三个部分：监听谁、听什么事件、听到了做什么。用"给门装门铃"来比喻，学生立刻就懂了。

然后讲几个常用事件，每个都现场演示：click 是点击；input 是输入过程中每次变化都触发，做实时字数统计就用它；change 是失去焦点且值变了才触发；submit 是表单提交。

这里有个必讲的坑：表单提交默认会刷新页面。页面上刚刚显示的东西全没了，学生一定会遇到并且一脸懵。解法就是 event.preventDefault()。现场演示一次"不写这行会刷新、写了就不刷新"，他们一辈子记得住。

最后是这节课的重头戏：事件委托。先制造问题——如果列表有 100 项，是不是要绑 100 次？而且后来新增的项还得重新绑？然后给解法：在父元素上绑一次，用 event.target 判断到底点的是哪个孩子。再用 dataset 拿到那一项的 id——伏笔回收。

这一招在后面做待办清单、留言板时会天天用，今天必须打通。

// 模块五 · 第 35 课

样式与类操作

讲授 · 25 min

element.style.xxx 与 CSS 属性名的驼峰转换
classList.add / remove / toggle / contains（推荐用法）
dataset 读写 data-* · JS 设置 CSS 变量（setProperty）
getComputedStyle 读取最终样式 · 配合 transition 做过渡

练习 · 15 min

① 实现「暗黑模式切换」按钮：切换 <body> 上的类名 + 用 CSS 变量换色；② 做一组标签，点击切换选中态（只允许一个选中）。

验收：样式写在 CSS 里，JS 只负责切类名；切换主题后刷新页面样式仍正确。

核心原则：JS 只负责「切类名」，样式规则留在 CSS 里。

第 35 课，样式和类操作。这节课要立一个原则：JS 只负责切类名，别把样式写在 JS 里。

先讲为什么。如果把颜色、尺寸都写在 JS 里，那这个页面的样式就散落在两个地方了，改一次要找半天。好的做法是：CSS 里准备好 .dark 这一套样式，JS 只负责"给 body 加上 dark 类"。一句话就讲完了。

然后讲 classList 四个方法：add、remove、toggle、contains。其中 toggle 最方便——有就删、没有就加，正好是做开关的语义。写暗黑模式用 toggle 一行就够了。

接着讲 style 直接改属性，但要说明白：属性名要用小驼峰，background-color 要写成 backgroundColor。这个是纯记忆点，让它们照着写两次就会了。同时提醒这些是行内样式，优先级最高，容易打架。

最后讲一个小技巧：用 JS 设置 CSS 变量，document.documentElement.style.setProperty('--color-primary', 'red')。这句话一敲，全站颜色一起变——第 12 课学的 CSS 变量在这里又一次兑现了。

练习的第二个任务"标签组单选"挺有意思，学生要先自己想办法实现"取消其他项"，很多人第一次会写出很笨的循环，正好引出简单逻辑的优化。

// 模块五 · 第 36 课

动态创建与表单交互

讲授 · 25 min

createElement / append / insertBefore / remove
用模板字符串批量渲染列表（与 createElement 的取舍）
表单校验：必填、长度、正则初识 · trim() 去空格
错误提示的呈现方式 · 简单防抖思路

练习 · 15 min

实现「动态留言板」：输入 → 添加 → 删除；空输入拒绝提交，超过 100 字提示，新留言出现在列表最前面。

验收：新元素确实插入了 DOM（不是只创建了对象）；重复提交不会重复绑事件。

第 36 课，动态创建元素和表单交互。这是学生第一次"用数据生成界面"。

先讲两种渲染方式。第一种是 createElement 一个个建，好处是安全、可以逐个绑定；第二种是拼模板字符串再塞进 innerHTML，好处是写起来快、看着像 HTML。两种都要讲，然后告诉他们：这个阶段用 template 字符串更直观，但心里要清楚它有 XSS 风险。

这里有个新手第一大坑：元素创建出来了，但页面上看不见。为什么？因为你只是"造了一个零件"，没有"装到车上"。createElement 只是创建，必须 append 到页面上才可见。这个坑现场一定要演示一次，写一个不 append 的例子，让学生找为什么没显示。

然后是表单校验。校验三件事：非空、长度、格式（正则初识，讲一个最简单的邮箱正则就够，不要展开）。再加一句 trim()，因为用户特别爱打多余空格。

错误提示怎么呈现？不要弹 alert，用一个提示元素跟着输入框显示文字，体验好得多。

最后提一下防抖。不做深入实现，就讲"输入框每敲一个字都触发，太频繁了，可以等它停下来再处理"，知道这个概念就行。

// 模块五 · 第 37 课

数据与状态

讲授 · 25 min

localStorage.setItem / getItem / removeItem 与 JSON 配合
数据与视图分离：改数据 → 重新渲染 → 更新 DOM
数组筛选与搜索（filter + includes）
渲染函数拆分（renderList / renderCount）· 简单模块化

练习 · 15 min

给第 36 课的留言板加两个能力：① 刷新页面数据还在（localStorage）；② 顶部搜索框能按关键词筛选留言。

验收：存的是字符串不是对象；刷新后列表与计数一致；搜索时删除功能仍正常。

第 37 课，数据与状态。这节课在讲一个前端最重要的思想：数据驱动视图。

先讲 localStorage。它会用三个方法就够：setItem、getItem、removeItem。但重点在于——它只能存字符串。所以要存数组或对象，先用 JSON.stringify 转成字符串；取出来用 JSON.parse 还原。第 30 课埋的伏笔，今天兑现。

这里有个学生的经典错误要现场演示：直接把数组塞进 setItem，取出来变成 "[object Object]"，或者变成一个奇怪的字符串。让他们先错一次，再教 JSON，效果最好。

然后是这节课的核心思想：数据驱动视图。不要"点一下加一个 DOM 元素"，而是"点一下改数据，然后照数据重画一遍列表"。

为什么这个转变重要？因为一旦数据是唯一真相，那么"删除后列表正确""刷新后状态正确""搜索后计数正确"这三个问题会自动一起解决。第 38 课做待办清单时，这个思路是决定成败的。

最后讲渲染函数拆分：写一个 render()，里面调用 renderList() 和 renderCount()。把"画界面"变成一个可以被反复调用的函数，是这节课最值钱的产出。

// 模块五 · 第 38 课 · 阶段实战

阶段实战五 · 待办清单

功能拆解 · 45 min

新增 / 删除 / 编辑任务文字
勾选完成 / 全部-未完成-已完成三种筛选
剩余未完成数量计数
localStorage 持久化 · 刷新不丢数据

验收标准

七个功能全部可用，无 console 报错
刷新后数据与勾选状态保留
使用事件委托处理列表交互
渲染逻辑集中在一个 render 函数里

这个应用可以作为结课作品的「作品展示」区块——它足够小，也足够完整。

第 38 课，阶段实战五：待办清单。这是整个课程里最有"产品感"的一节课——学生做完会很有成就感。

开场五分钟一定要让学生先自己设计数据结构。问题很简单：一条待办任务要存哪些字段？答案至少要三个——内容、是否完成、唯一 id。那个 id 是关键，因为删除和切换完成状态都要靠它来定位。如果学生用下标当 id，我提醒他们：删掉一项之后，后面的下标全变了，你就删错东西了。这个坑讲在前面，能省很多时间。

然后是实现的顺序，我建议这么排：先做"新增 + 渲染"，再做"删除"，然后"勾选"，然后"计数"，最后"筛选"和"本地存储"。每一步都是可运行的，不要一口气写完再调试。

八分钟的代码走查是这节课的重点环节。挑一个学生的代码投屏，一起看三件事：有没有重复代码可以合并？事件是循环绑的还是委托的？列表是靠"加一个删一个"还是靠"重渲染"？——这三个问题，就是"能跑"和"能维护"的差别。

最后提一句：这个应用不大，但足够完整，可以放进结课作品里当作品展示。

// module 06

模块六 · 综合项目与发布 · 第 39–40 课

第 39 课 · 项目实战（一）

选题与功能清单（MVP 三条）→ 页面结构与样式搭建 → 数据层设计（数组 + 对象 + localStorage）。

交付：项目静态页面 + 数据层脚本。

第 40 课 · 项目实战（二）与上线

交互收尾 → 调试与代码整理 → 部署上线 → 3 分钟演示与自评 → 课程回顾与进阶路线。

交付：线上可访问链接 + README。

选题建议：个人简历网站 · 读书观影清单 · 校园活动报名 · 学习打卡应用 —— 任选其一，越具体越好。

最后一个模块，综合项目与发布，两节课，第 39 和第 40 课。

这两节课的设计原则是：把前面三十八节课的东西，第一次完整地串起来。学生会第一次经历"从想法到上线"的完整流程。

关于选题，我给四个方向：个人简历网站、读书观影清单、校园活动报名、学习打卡应用。关键是"越具体越好"。如果学生说"我要做一个很酷的网站"，那一定要让他再想小一点——一个能做完的小项目，比一个做不完的大项目有价值一百倍。

两节课的分工：第 39 课只管"能看见的东西"和"数据怎么存"，第 40 课管"能动的部分"和"发出去"。这样安排是因为第 40 课要留出时间做演示，如果全都堆在最后一天，一定会拖堂。

最后强调一下上线这个动作。它只花七分钟，但它的心理价值极高——学生会第一次拿到一个链接，可以发给任何人。这门课到这里才算真正闭环。

// 模块六 · 第 39 课

综合项目实战（一）

课堂流程 · 45 min

5′ 选题 + 功能清单：只写 3 条 MVP 功能
10′ 页面结构草图 + 样式方向（配色与字号系统）
25′ 搭结构、写样式
5′ 数据层设计：数组 + 对象 + 存储方案

验收标准

页面结构与项目主题匹配，至少 4 个区块
复用自己的颜色变量与字号阶梯
响应式：手机与桌面都可用
数据层函数独立，可单独测试

提醒学生：先把三条核心功能做完，再去想「加分项」——做不完的项目等于零。

第 39 课，综合项目第一天。这节课的唯一纪律是：砍需求。

开场五分钟，我要求学生写下功能清单，然后只留三条。为什么？因为学生的通病是"想得太多、做得太少"。"三条 MVP 功能"这个限制，会逼他们想清楚"这个项目最核心的一件事是什么"。

接下来十分钟画结构和样式方向。这里有个很好的教学点：让他们把第 12 课学的颜色变量和字号阶梯直接复制过来用。这就是"复用"——前面积累的东西，今天终于收获。

中间二十五分钟编码。老师巡场时的检查顺序是：先看结构是否语义化，再看响应式有没有做，最后看代码整洁度。不要一上来就挑细节，会打击积极性。

最后五分钟做数据层设计。这一步最重要的是让学生回答一个问题："我的数据长什么样，存在哪儿？"——如果项目需要保存用户输入，那就用 localStorage；如果只是展示，那就用一个常量数组。不要为了用 localStorage 而用 localStorage。

今天的交付标准是"页面好看、数据有地方放"，交互留给下节课。

// 模块六 · 第 40 课

综合项目实战（二）与上线

课堂流程 · 45 min

5′ 交互实现收尾（渲染函数 + 事件委托）
8′ 调试与代码整理：去全局变量、加注释、统一命名
7′ 部署上线：GitHub 仓库 → 开启 Pages → 拿到链接
15′ 每人 3 分钟演示 + 自评 + 互评

结课验收

线上链接可访问，手机端能用
Console 无报错
README 写清项目说明与所用技术
演示时能讲清一个技术决策的原因

进阶路线：ES6+ 深入 → 模块化与打包 → fetch 与后端接口 → Vue / React → 工程化与 CI

第 40 课，最后一天。这节课有两个高潮，一个是"上线"，一个是"演示"。

先花十三分钟把交互收尾、把代码整理一遍。整理这八分钟不要省：去掉多余的全局变量、给函数加上说明性注释、统一命名。这一段的价值在于让学生意识到"能跑"和"写得干净"是两件事。

然后七分钟上线。建仓库、传代码、在设置里开启 Pages、等一分钟拿到网址。当学生第一次在浏览器里打开自己那个网址时——那个瞬间是整门课最有说服力的时刻。所以这一步一定要留足时间，不能让两三个学生卡在上传上。

最后十五分钟演示。每人三分钟，要求讲清三件事：这是给谁用的、它做了什么、你遇到最大的问题是什么。"讲清一个技术决策的原因"是我最看重的一条——比如"为什么我用 Grid 不用 Flex""为什么我把数据存在 localStorage 而不是每次重新算"。能解释选择，才说明真的懂了。

最后留一句话给进阶路线：这门课教的是一套可以迁移的底层能力。框架会换，Flex 和事件委托不会过期。他们接下来可以学 ES6、学打包、学请求接口、最后学 Vue 或 React——但所有这些，都建立在今天这四十节课的基础之上。

// closing

40 节课的一句话总结

主线

结构（HTML）→ 表现（CSS）→ 排布（Flex / Grid）→ 编程（JS）→ 交互（DOM）→ 交付（上线）。

一个贯穿项目：从第 1 课做到第 40 课，学生看得见自己的成长。

三个抓手

① 每节课都能看到结果 ② 每节课故意写错一次 ③ 每个练习都有可验收的交付物。

把「错误」变成教学内容，把「调试」变成核心能力。

按 O 打开总览 · T 切换主题 · S 回到演讲者视图 · R 重置计时

最后用一页把整门课收一下。

主线就是六个词：结构、表现、排布、编程、交互、交付。你现在看到的这四十节课，全部挂在这六个词上。而且它有一条贯穿线——从第 1 课的个人页，到第 24 课的落地页，到第 40 课上线，学生一直在做同一个项目。这条线让学生看得见自己的成长，也让你在每个模块开始时都有"上次做到哪了"的抓手。

三个抓手再重复一遍：每节课都能看到结果、每节课故意写错一次、每个练习都有可验收的交付物。这三条是这门课质量的下限。只要守住它们，学生的完成率和满意度就有保障。

最后一句想跟你说的是：这门课真正教给学生的不是标签和属性，是"遇到问题怎么定位、怎么查、怎么修"的能力。会调试的人，永远能自己往前走。

好，这份 deck 就到这里。你可以按 S 回到演讲者视图，或者按 O 打开总览看看全局。祝教学顺利，谢谢。

网站开发40 课时课程安排

这是一门什么样的课

面向谁

多少课时

学完拿到什么

三份教材，各用其所长

每节课的 45 分钟，固定这么用

6 个模块 · 40 节课 · 一条主线

学完这门课，学生能独立做到

看得懂

做得出来

动得起来

发得出去

模块一 · HTML 基础 · 第 1–8 课

走进网页与 HTML

讲授 · 25 min

练习 · 15 min

文本内容标签

讲授 · 25 min

练习 · 15 min

链接与图片

讲授 · 25 min

练习 · 15 min

列表与表格

讲授 · 25 min

练习 · 15 min

表单与输入控件

讲授 · 25 min

练习 · 15 min

语义化与页面结构

讲授 · 25 min

练习 · 15 min

多媒体与嵌入

讲授 · 25 min

练习 · 15 min

阶段实战一 · 个人介绍页

课堂流程 · 45 min

验收标准

模块二 · CSS 基础 · 第 9–16 课

CSS 入门

讲授 · 25 min

练习 · 15 min

选择器基础

讲授 · 25 min

练习 · 15 min

选择器进阶与层叠

讲授 · 25 min

练习 · 15 min

颜色、单位与字体

讲授 · 25 min

练习 · 15 min

文本排版

讲授 · 25 min

练习 · 15 min

盒模型

讲授 · 25 min

练习 · 15 min

背景与装饰

讲授 · 25 min

练习 · 15 min

阶段实战二 · 美化个人页

课堂流程 · 45 min

验收标准

模块三 · CSS 布局与响应式 · 第 17–24 课

display 与文档流

讲授 · 25 min

练习 · 15 min

定位

讲授 · 25 min

练习 · 15 min

浮动与清除

讲授 · 25 min

练习 · 15 min

Flex 布局（一）· 容器属性

讲授 · 25 min

练习 · 15 min

Flex 布局（二）· 项目属性与配方

讲授 · 25 min

练习 · 15 min

Grid 布局

网站开发
40 课时课程安排