前端学习路线：三件套

是什么

HTML / CSS / JavaScript 是一切框架的地基。这条路线按「每个阶段有明确产出物」设计——学完一个阶段的标准不是「看完了」，而是「做出来了」。

路线总览

阶段1 HTML → 阶段2 CSS → 阶段3 JS 核心 → 阶段4 DOM 与事件 → 阶段5 异步 → 阶段6 工具与工程
（2 周）    （3 周）      （4 周）         （2 周）          （2 周）     （持续）

阶段 1：HTML（约 2 周）

学：常用标签（文本/列表/表格/表单）、语义化标签（header/nav/main/article）、属性与嵌套规则 做：纯 HTML 写一个个人简历页 + 一个注册表单 过关标准：能不看教程手写出结构正确的表单；能解释为什么用 <nav> 而不是 <div>

阶段 2：CSS（约 3 周）

学：盒模型 → Flex → Grid → 定位 → 响应式（媒体查询） 做：临摹两个页面：一个博客首页（文章流），一个后台仪表盘（侧栏 + 卡片网格） 过关标准：脱离教程能实现布局基础里的三个页面骨架 配套：UI 设计分区从此刻开始同步读——写 CSS 的同时建立审美标准

阶段 3：JS 核心（约 4 周）

学：变量与类型 → 函数 → 数组/对象常用方法（map/filter/reduce）→ 解构 → 模板字符串 → ES 模块 做：三个纯 JS 小工具：TodoList（数据增删改查）、单位换算器、简易计算器 过关标准：map/filter/reduce 能互相改写；能解释引用类型和值类型的区别

阶段 4：DOM 与事件（约 2 周）

学：querySelector、事件监听、事件冒泡与委托、classList 操作 做：给阶段 3 的 TodoList 加上交互：回车添加、点击完成、悬停删除 过关标准：明白 Vue 的 @click 底下是什么；会用事件委托处理列表点击

阶段 5：异步（约 2 周）

学：Promise → async/await → fetch 调接口 → JSON 处理 做：调一个免费公开 API（天气/电影列表），渲染成卡片页，含加载态和错误态 过关标准：能说清「为什么接口请求不能同步等」；页面会处理 loading / error / 空数据三种状态

阶段 6：工具与工程（持续）

学：npm 与 package.json → Vite 创建项目 → Git 基础（见工程化分区） 做：用 Vite 重写 TodoList，代码推到 GitHub 过关标准：npm run dev 跑起来后，能解释目录里每个文件是干嘛的

学完之后

→ Vue 3 学习路线。三件套阶段的产出物（TodoList、API 卡片页）会在 Vue 阶段用框架重写一遍，对比着学理解最深。

通用原则

卡住超过 40 分钟就问 AI 或搜，但看懂答案后要关掉答案自己重写一遍。路线可以调速度，唯一不能省的是每阶段的「做」。