第 17 课 列表、筛选和分类

所属课程

青少年进阶营

所属模块

模块 C：校园 H5 与活动页

本课概览

• 讲解核心：当页面内容变多，如何保持清晰。
• 本课重点：信息越多，越需要分组和筛选。
• 课上产出：内容列表页。
• 示例场景：校园主题网站、活动 H5 和知识课件站

本课知识图谱

• 先把“当页面内容变多，如何保持清晰。”讲成学生能理解、能模仿的动作路径。
• 课堂页要同时照顾看懂、跟做和最后的展示输出。
• 先拿到最小可见成果，再逐步补细节，会更适合青少年课堂节奏。
• 本课重点要落在“信息越多，越需要分组和筛选。”上。

课前准备

老师准备

• 提前准备与“校园主题网站、活动 H5 和知识课件站”相关的课堂示例页或草图，方便学生先看见成品轮廓。
• 准备一张““列表、筛选和分类”的课堂演示首屏截图”作为课堂演示图。
• 准备一张“页面结构、流程关系或交互变化的示意截图”作为课堂演示图。
• 把本课阶段成果“内容列表页。”的评价标准提前写在板书或投屏页上。

学生准备

• 准备好本节课会用到的文字、图片或题目素材。
• 带着“列表、筛选和分类”相关的一个真实使用场景进入课堂，方便快速进入任务。
• 准备在课堂上记录一张草图、流程图或问题清单。

本课素材清单

• 围绕“列表、筛选和分类”准备的文字、图片或示意图各 1 组
• 本课阶段成果“内容列表页。”的示意模板
• 课堂用记录表、互评卡或检查清单 1 份
• 阶段成果模板：内容列表页。
• 参考来源：stage-2 frontend

可直接使用的素材正文

示例文本

主题：列表、筛选和分类
使用场景：校园主题网站、活动 H5 和知识课件站
本课目标：内容列表页。

示例数据 / 字段

字段示例：
- 标题
- 简介
- 图片
- 按钮文案
- 说明文字

练习题 / 操作任务

练习 1：把当前课题改写成一句 20 字以内的页面标题。
练习 2：列出这节课页面里最重要的 4 个字段或内容块。
练习 3：补出一个按钮文案和一条用户完成动作后的反馈语。

成套素材包

课堂主题：列表、筛选和分类
建议先准备 1 份适合投屏的示例页面说明、1 份课堂任务单、1 份学生可直接替换的内容模板。
如果是作品页，优先准备标题、简介、按钮文案和 3 条示例内容。

课堂练习题组

1. 把这节课的页面标题改成你自己的主题。
2. 列出本课页面最重要的 4 个信息块。
3. 写 1 条用户完成动作后的反馈语。
4. 说出本课页面最容易做乱的地方，并提出 1 个修改办法。

长正文素材

列表与状态长正文
这一类课最适合帮助学生理解“内容一多，结构就必须更清楚”。页面导语可以这样写：当活动、作品、任务、资源越来越多时，页面不能再只是往下堆。列表、筛选、分类和状态标记，都是在帮助用户更快找到自己想看的内容。
主体段一：老师可以先用最熟悉的校园例子讲。比如活动列表里，学生最关心的是时间、地点和是否还能报名；任务列表里，更重要的是当前状态，是未开始、进行中还是已完成。只要学生开始分清“信息内容”和“状态信息”，页面组织就会更成熟。
主体段二：这类课还可以顺手建立一个好习惯：不要把所有信息做成同样重。标题要更显眼，状态要更醒目，筛选项要更靠前，补充说明可以轻一点。视觉层级本身也是信息组织的一部分。
课堂追问：1. 如果没有分类，用户最容易在哪一步迷路？ 2. “进行中”和“已完成”为什么不能只放在文字说明里？ 3. 你的列表页最重要的一列信息是什么？
页面收束语：一张能被快速读懂的列表页，本身就是很强的组织能力。

页面文案建议

• 页面标题要让人一眼看懂主题。
• 按钮文案尽量写成动作，例如“开始体验”“查看详情”“继续下一步”。
• 说明文字优先用短句，不要一大段堆在一起。

可替换素材方向

• 把示例里的班级、学校、活动名替换成你自己的情境。
• 先保留结构，再替换内容，不要一开始就全部重写。
• 如果内容太多，优先保留标题、图片和最关键的一个按钮。

主视觉配图

页面示例配图

截图规划示意

60 分钟教学展开

0-15 分钟：还原真实使用场景

讲解推进

• 从“列表、筛选和分类”在真实产品里的使用场景切入，让学生知道这不是额外知识，而是完整项目的一部分。
• 结合“当页面内容变多，如何保持清晰”说明今天这一课为什么会影响作品是否稳定、可用或可发布。
• 明确本课阶段目标是完成“内容列表页”，让学生始终围绕可验证的结果推进。

本段知识点

• 先从“列表、筛选和分类”的真实使用场景入手，帮助学生知道今天为什么要学这一课。
• 先把“当页面内容变多，如何保持清晰。”讲成学生能理解、能模仿的动作路径。
• 课堂页要同时照顾看懂、跟做和最后的展示输出。

建议展示 / 截图

• “列表、筛选和分类”的课堂演示首屏截图
• 列表、筛选和分类的课堂任务卡或成果示意图

本段资料与素材

• 围绕“列表、筛选和分类”准备的文字、图片或示意图各 1 组
• 任务说明卡 1 份

本段逐字稿

【本段开场】

同学们，这一段我们先把问题收清。今天这节课叫“列表、筛选和分类”，现在要处理的核心是“当页面内容变多，如何保持清晰。”。

这一模块开始把“页面会不会用”摆到台前，重点不只是做出来，而是整理得更清楚、更稳。

先把情境放到真实使用里去想。假如现在面对的是“校园主题网站、活动 H5 和知识课件站”，第一次打开这页的人，最先会想知道什么？如果这个问题没收住，页面后面很容易越做越散。

我们先看“围绕“列表、筛选和分类”准备的文字、图片或示意图各 1 组”。看示例的时候，不是只看漂不漂亮，而是看它有没有把关键内容放到最前面。

先把“信息多了以后为什么一定要分组”讲透，让学生知道今天做的是查找效率，不是页面热闹。

这一段先别急着做满，我们先把题目、对象和结果说稳。只要开头收得清，后面就不容易做散。

这一段先不贪多，先把“给谁看、解决什么、最后留下什么结果”压成一句话。句子越短，后面页面越稳。

如果所有内容都平铺着放，别人会不会更难找？

等会儿我会先给你们看一个“全都堆在一起”的列表，再补分类和筛选。你们要重点看，清楚感是怎么被整理出来的。

这一段一直要记住：开始像一个会整理内容、记录状态和处理细节的人。只要你开始会判断顺序、分工和入口，这节课就已经不只是“跟着做”了。

如果到了这一段结束，你还只能说个大概，我们就再回到示例页和草图上收一遍。理解收清以后，速度反而会更快。

列表页先收在这里。今天最重要的，不是内容有多少，而是你已经开始会整理信息。

【本段收束】请同学们用一句话说出这一段你最确定的一点，再进入下一段。

老师演示提示词（给 Codex）

用途：把下面这段直接复制给 Codex，用来生成本段课堂演示页或功能示例。

请直接实现一个给七至八年级学生看的“带列表、状态或说明功能的网页页面”课堂开场页。 本课主题是“列表、筛选和分类”，页面场景使用“校园主题网站、活动 H5 和知识课件站”。 请直接输出可实现的网页页面，优先使用单文件 HTML（内含 CSS 和 JavaScript），不要只给方案说明。 页面必须包含：内容分组区、状态或筛选区、结果展示区、说明区。 核心内容请围绕“当页面内容变多，如何保持清晰”来实现。 页面重点突出：这一页到底在帮用户完成什么动作。 页面要让人一打开就知道这页在做什么。 首屏要有主题说明、核心内容区和一个明确入口，可以保留一个开始按钮或继续入口。 页面排版要清楚，标题醒目，分区明确，按钮和反馈明显。注意网站或 H5 的阅读节奏，信息层级要清楚，首屏和下一步入口都要明确。

课堂动作

• 先用 1 到 2 分钟让学生说出自己对“列表、筛选和分类”最直观的理解，再进入示例页。

阶段成果

• 完成本课任务目标和阶段成果的确认。

15-30 分钟：讲清关键流程与边界条件

讲解推进

• 把“信息越多，越需要分组和筛选”拆成具体流程，例如先发生什么、再检查什么、最后如何确认结果。
• 通过流程图、数据流或操作顺序说明关键节点，帮助学生建立工程化的顺序感。
• 强调常见边界条件与风险点，让学生知道哪里最容易出错、最需要回看。

本段知识点

• 列表和筛选背后其实对应一组被组织过的数据，只是当前阶段先在前端层面理解。
• 把“当页面内容变多，如何保持清晰。”拆成可观察、可操作的页面结构或流程关系。
• 先把“当页面内容变多，如何保持清晰。”讲成学生能理解、能模仿的动作路径。
• 课堂页要同时照顾看懂、跟做和最后的展示输出。

建议展示 / 截图

• 页面结构、流程关系或交互变化的示意截图
• 列表、筛选和分类的结构草图、流程图或区域标注图

本段资料与素材

• 本课阶段成果“内容列表页。”的示意模板
• 结构草图模板 1 份

本段逐字稿

【本段开场】

同学们，这一段我们先把问题收清。今天这节课叫“列表、筛选和分类”，现在要处理的核心是“当页面内容变多，如何保持清晰。”。

这一模块开始把“页面会不会用”摆到台前，重点不只是做出来，而是整理得更清楚、更稳。

先把情境放到真实使用里去想。假如现在面对的是“校园主题网站、活动 H5 和知识课件站”，第一次打开这页的人，最先会想知道什么？如果这个问题没收住，页面后面很容易越做越散。

我们先看“本课阶段成果“内容列表页。”的示意模板”。看示例的时候，不是只看漂不漂亮，而是看它有没有把关键内容放到最前面。

把列表、分类标签、筛选动作和结果区拆开，帮助学生第一次真正理解“信息整理”也是页面能力。

这一段最重要的是把页面关系和顺序讲透。先知道为什么这样排，再决定每一块写什么。

这一段最怕只顾着跟着老师往下搭，却没有把顺序想清。你们要一边看，一边试着用自己的话解释为什么这里先出现。

分类和筛选里，哪一个更像“帮人快速缩小范围”的动作？

这一段我会一直提醒大家：列表页的重点不是好看，而是找得快、看得顺。

这一段一直要记住：开始像一个会整理内容、记录状态和处理细节的人。只要你开始会判断顺序、分工和入口，这节课就已经不只是“跟着做”了。

如果到了这一段结束，你还只能说个大概，我们就再回到示例页和草图上收一遍。理解收清以后，速度反而会更快。

只要分类、筛选和结果区这三块顺了，页面就会一下子更专业。

【本段收束】请同学们用一句话说出这一段你最确定的一点，再进入下一段。

老师演示提示词（给 Codex）

用途：把下面这段直接复制给 Codex，用来生成本段课堂演示页或功能示例。

请直接实现一个给七至八年级学生看的“带列表、状态或说明功能的网页页面”结构拆解页。 本课主题是“列表、筛选和分类”，页面场景使用“校园主题网站、活动 H5 和知识课件站”。 请直接输出可实现的网页页面，优先使用单文件 HTML（内含 CSS 和 JavaScript），不要只给方案说明。 页面必须包含：内容分组区、状态或筛选区、结果展示区、说明区。 核心内容请围绕“当页面内容变多，如何保持清晰”来实现。 页面重点突出：把列表、状态、记录或说明之间的顺序讲清。 页面要把区块分工、流程顺序或阅读路径讲清。 请用分区标题、编号、箭头、步骤标签或结构图，把每一块分别负责什么写清楚。 页面排版要清楚，标题醒目，分区明确，按钮和反馈明显。注意网站或 H5 的阅读节奏，信息层级要清楚，首屏和下一步入口都要明确。

课堂动作

• 拿一个校园活动或阅读清单示例，带学生观察“分类”和“筛选”分别解决什么问题。
• 带学生一起把今天的页面、流程或知识结构画成一张简单草图，边讲边标注。

阶段成果

• 形成一张结构图、分区图或流程图草稿。

30-45 分钟：按步骤完成核心操作

讲解推进

• 按照清晰步骤完成“内容列表页”的主体部分，让学生把今天讲到的流程真正走一遍。
• 要求学生边做边记录“当页面内容变多，如何保持清晰”落在项目中的具体位置，而不是只追求最终跑通。
• 讲师及时处理最容易卡住的操作环节，并提醒学生保留关键截图、日志或流程说明。

本段知识点

• 不是所有内容都需要排序或筛选，关键要看用户是不是会拿它来查找和比较。
• 在动手环节里，把“内容列表页。”做成真正能演示的结果。
• 课堂页要同时照顾看懂、跟做和最后的展示输出。
• 先拿到最小可见成果，再逐步补细节，会更适合青少年课堂节奏。

建议展示 / 截图

• 阶段成果整理后的展示截图
• 内容列表页。正在完成中的过程截图

本段资料与素材

• 课堂用记录表、互评卡或检查清单 1 份
• 内容列表页。的半成品模板

本段逐字稿

【本段开场】

同学们，这一段我们先把问题收清。今天这节课叫“列表、筛选和分类”，现在要处理的核心是“当页面内容变多，如何保持清晰。”。

这一模块开始把“页面会不会用”摆到台前，重点不只是做出来，而是整理得更清楚、更稳。

先把情境放到真实使用里去想。假如现在面对的是“校园主题网站、活动 H5 和知识课件站”，第一次打开这页的人，最先会想知道什么？如果这个问题没收住，页面后面很容易越做越散。

我们先看“课堂用记录表、互评卡或检查清单 1 份”。看示例的时候，不是只看漂不漂亮，而是看它有没有把关键内容放到最前面。

现场做出一轮能切换分类、能筛结果的列表页，让学生看见结构怎样帮人找东西。

动手时先保最短闭环。只要今天这条线真的跑通，“内容列表页。”就已经有了很扎实的底。

动手时先保一条最短能走通的路径。只要先能点、能看、能继续，页面就已经开始像作品。

你现在的页面是在分类，还是只是在换标签颜色？

接下来我会演示切换标签以后，结果区怎样立即变化。只要这一步站住，筛选感就真的出来了。

这一段一直要记住：开始像一个会整理内容、记录状态和处理细节的人。只要你开始会判断顺序、分工和入口，这节课就已经不只是“跟着做”了。

如果到了这一段结束，你还只能说个大概，我们就再回到示例页和草图上收一遍。理解收清以后，速度反而会更快。

这一课最值得带走的，是你开始知道“整理信息”也是一种设计能力。

【本段收束】请同学们用一句话说出这一段你最确定的一点，再进入下一段。

老师演示提示词（给 Codex）

用途：把下面这段直接复制给 Codex，用来生成本段课堂演示页或功能示例。

请直接实现一个给七至八年级学生看的“带列表、状态或说明功能的网页页面”功能演示页。 本课主题是“列表、筛选和分类”，页面场景使用“校园主题网站、活动 H5 和知识课件站”。 请直接输出可实现的网页页面，优先使用单文件 HTML（内含 CSS 和 JavaScript），不要只给方案说明。 页面必须包含：内容分组区、状态或筛选区、结果展示区、说明区。 核心内容请围绕“当页面内容变多，如何保持清晰”来实现。 页面重点突出：做出一轮真正能用的功能页。 页面要做出最关键的一轮功能演示，让操作、反馈和结果连成闭环。 必须支持至少一轮真实动作，例如点击、输入、切换、提交、答题、反馈或状态变化，并且操作后立刻出现结果。 页面排版要清楚，标题醒目，分区明确，按钮和反馈明显。注意网站或 H5 的阅读节奏，信息层级要清楚，首屏和下一步入口都要明确。

课堂动作

• 讲师边投屏边带做，让学生至少独立完成一次最关键动作。

阶段成果

• 要求学生说清楚页面上哪些内容需要分类、哪些内容适合筛选或排序。
• 拿到“内容列表页。”的可演示版本。

45-60 分钟：检查规范、记录问题并沉淀方法

讲解推进

• 围绕“信息越多，越需要分组和筛选”检查结果是否稳定，包括边界输入、异常情况或不同页面之间的配合。
• 把今天的“内容列表页”沉淀成一份可复用的方法记录，方便后续课程继续调用。
• 最后统一回顾本课流程，让学生把“知道怎么做”提升到“下次还能独立重做”。

本段知识点

• 通过检查、互评和整理，让学生知道这节课的成果怎样继续进入下一课。
• 先拿到最小可见成果，再逐步补细节，会更适合青少年课堂节奏。

建议展示 / 截图

• 内容列表页。最终整理后的展示截图
• 同伴互评或发布前检查清单截图

本段资料与素材

• 检查清单 1 份
• 结尾展示顺序卡 1 份

本段逐字稿

【本段开场】

同学们，这一段我们先把问题收清。今天这节课叫“列表、筛选和分类”，现在要处理的核心是“当页面内容变多，如何保持清晰。”。

这一模块开始把“页面会不会用”摆到台前，重点不只是做出来，而是整理得更清楚、更稳。

先把情境放到真实使用里去想。假如现在面对的是“校园主题网站、活动 H5 和知识课件站”，第一次打开这页的人，最先会想知道什么？如果这个问题没收住，页面后面很容易越做越散。

我们先看“检查清单 1 份”。看示例的时候，不是只看漂不漂亮，而是看它有没有把关键内容放到最前面。

收束成一套列表页检查法，让学生最后能说出哪一种筛选最有用、哪一种分类最清楚。

最后先别急着继续加东西，我们先回到成果本身：别人能不能看懂、能不能顺着用、能不能听懂你在做什么。

整理这一段时，先别只盯细节。别人看得懂、讲得清，比一开始就面面俱到更重要。

如果这页只允许保留一个筛选动作，你最想留下哪一个？

最后我会请大家回头判断：你今天的分类到底是在帮人省力，还是只是让页面看起来更复杂。

这一段一直要记住：开始像一个会整理内容、记录状态和处理细节的人。只要你开始会判断顺序、分工和入口，这节课就已经不只是“跟着做”了。

如果到了这一段结束，你还只能说个大概，我们就再回到示例页和草图上收一遍。理解收清以后，速度反而会更快。

记住，列表页真正的价值，是帮别人更快找到他要的那一项。

【本段收束】请同学们用一句话说出这一段你最确定的一点，再进入下一段。

老师演示提示词（给 Codex）

用途：把下面这段直接复制给 Codex，用来生成本段课堂演示页或功能示例。

请直接实现一个给七至八年级学生看的“带列表、状态或说明功能的网页页面”收束展示页。 本课主题是“列表、筛选和分类”，页面场景使用“校园主题网站、活动 H5 和知识课件站”。 请直接输出可实现的网页页面，优先使用单文件 HTML（内含 CSS 和 JavaScript），不要只给方案说明。 页面必须包含：内容分组区、状态或筛选区、结果展示区、说明区。 核心内容请围绕“当页面内容变多，如何保持清晰”来实现。 页面重点突出：把页面整理成可检查、可展示、可继续复用的版本。 页面要把当前结果整理成适合展示和收束的版本。 页面里要保留结果展示、小结、检查点或下一步，让成果能够直接拿来展示。 页面排版要清楚，标题醒目，分区明确，按钮和反馈明显。注意网站或 H5 的阅读节奏，信息层级要清楚，首屏和下一步入口都要明确。

课堂动作

• 安排结对互看或小组展示，让学生把自己的结果讲成一段完整说明。

阶段成果

• 把今天的结果整理成可展示、可提交、可继续修改的版本。

课后作业

必做任务

• 围绕“列表、筛选和分类”把今天的作品再补一个更完整的细节或说明。
• 把课堂上的“内容列表页。”再补一个更完整的细节，并保留前后对比。

提交建议

• 提交本课产出：内容列表页。
• 附 2 到 3 句说明：你今天做了什么、最满意哪里、还准备改什么。

自查清单

• 我能说清楚这节课做的页面或流程是给谁用的。
• 我能指出页面里最重要的一个区块、一个动作和一个结果。
• 我保存了课堂过程中的草图、截图或记录，方便下次继续。

相关参考

• stage-2 frontend