学完一部分，就用这一部分做一部分，而不是期末一次性交。你选一个项目，先只用 HTML 搭骨架；学完 CSS 再给它穿衣服；学完 JS 再让它动起来。三段各交一次，每次只考刚学的知识，压力小、痕迹清、进步看得见。
学完单元一~三（HTML 标签全 8 族）后做。只用语义标签把页面结构写对，不写样式、不写脚本。
→学完单元四~五（CSS 9 族）后做。外部样式表统一美化、布局、响应式，三档设备不破版。
→学完单元六~八（JS 8 族）后做。事件 + DOM + 存储让页面可交互，可持久化。
→把三阶段合并、补响应式与发布，对应课程标准综合实战（6 学时）。
app.js 里加逻辑。每一层只干自己该干的活，这是评分与自查的底线。单页个人枢纽，串接「关于我 / 简历 / 作品图库 / 留言待办」。和课程案例库的白板·简历·图库同一套思路，学完即能对标案例。
以图片为主的展示站：相册网格 + 分类 + 点击放大。偏视觉，表单少，适合喜欢排版的同学。
学习笔记 / 作业集站点：按周归档、标签检索、进度条。内容驱动，结构清晰，最易拿满分。
目标：打开页面，内容齐全、阅读顺序正确、无样式也不乱——只是朴素。
style 属性、写 <style>、写 <script> 逻辑、用 <div> 套一切（必须用语义标签）。header / nav / main / section / article / footer 五大语义区齐全h1~h3 层级正确，每页仅一个 h1a 链接带可读文字；img 全部带 altul/ol/dl 至少各用一处（导航/列表/术语）table 或 dl 呈现简历技能（结构数据）form + label(for) + input/textarea/button 留言区lang="zh-CN"、meta charset、viewport 三件套齐全index.html 能正常显示全部内容label 关联目标：把阶段一的裸结构变成「好看、整齐、手机不破版」的页面。只允许改 style.css，不改 HTML 语义结构。
style、在 HTML 里加 <style>、改标签语义（只能加 class）。:root 定义一组设计变量（颜色/间距/圆角），全站复用box-sizing:border-box 统一盒模型:hover / :focus 至少一种伪类Flexbox 做导航/卡片内排布，Grid 做作品墙980px 与 680px 两个断点，三档不破版目标：让页面"活"起来。只允许在 app.js 里写逻辑，不碰 HTML 结构、不写死样式。
onclick 内联事件、用 document.write、改阶段二的样式表。submit 阻止默认刷新；click 增删；输入校验render() 统一渲染localStorage 持久化，刷新不丢console.log，能自查报错| 阶段 | 对应单元 | 核心考核知识点（标签/属性/API） |
|---|---|---|
| 一·HTML | 单元一~三 | 语义标签h1~h6a/img 可访问性列表table/dlform/label字符实体 |
| 二·CSS | 单元四~五 | 变量:root选择器/伪类盒模型文本字体FlexGrid响应式@media过渡 |
| 三·JS | 单元六~八 | DOM事件函数数组/对象localStorage调试 |
每阶段评分维度：知识用对（40%）+ 完成度（40%）+ 规范整洁（20%）。提前用对下一阶段知识不加分但也不扣分；但越界（如在阶段一写 CSS）会在「规范整洁」里扣分，因为它破坏了分层练习的目的。
style 属性（-规范分）；阶段二用内联样式或改语义（-规范分）；阶段三用内联 onclick（-规范分）；三档设备任一破版（-完成度）；控制台报错（-完成度）。三次作业共用同一个文件夹，每次在上次基础上加一层，方便看到生长轨迹：
项目名_学号_姓名（如 个人工作台_20240101_张三）index.html；阶段二交整个文件夹；阶段三交整个文件夹.zip 上传，不要传散文件；图片放 images/ 子目录笔记.md：写「我用了哪些标签/属性、踩了什么坑、怎么解决的」<!-- Phase1 -->），证明是按节奏写的web/作业-starter/ 发给学生作统一起点，可保证所有人从同一结构出发，阶段一评分只看"语义用得对不对"，极大降低批改主观性。作业-starter/，评分有标尺、代写难藏身。