Sherfiter's wiki for funWeb 前端开发入门
这门课的视角是「DevTools 视角」:每章尽量从浏览器的真实行为出发(Elements 面板看 DOM、Styles 面板看优先级、Network 看请求、Performance 看渲染),而不是从规范条文出发。另一个贯穿线索是「本站自我引用」:这个 wiki 自己就是 Next.js 写的,很多概念(源码里就有完整 HTML、内容哈希文件名、ISR 再验证)可以直接在本站上眼见为实。
十讲的路线:结构(HTML)→ 皮相(CSS 两讲)→ 灵魂(JS 三讲)→ 运行时(浏览器)→ 工具链(框架与工程化)→ 全链路(前后端协作):
- 第 1 章 · HTML 结构与语义——骨架、盒子的三种分类、语义化、表单、无障碍
- 第 2 章 · CSS 基础——选择器、盒模型 border-box、层叠与优先级
- 第 3 章 · CSS 布局——定位五档、flex/grid 主力、响应式
- 第 4 章 · JavaScript 基础——值与引用、闭包、this、原型链
- 第 5 章 · DOM 与事件——DOM 四件套、事件流、事件委托
- 第 6 章 · 浏览器工作原理——渲染流水线、回流重绘、脚本三兄弟
- 第 7 章 · 现代 JavaScript——ES6+ 语法、Promise/async、ESM、事件循环
- 第 8 章 · 前端框架对比——React/Vue 两条响应式路线、虚拟 DOM 的功与过
- 第 9 章 · 前端工程化——npm、vite、构建部署、规范三件套
- 第 10 章 · 前后端协作——REST、CORS、鉴权、一次点击的完整旅程
先修:会用浏览器 F12 的程度即可,JS 零基础从第 4 章开始学。和其他课程的交叉:计网课的 HTTP 与安全章节(第 2、6、10 章反复引用)、数据库课(SQL 与事务)、操作系统课(GC 与事件循环)。教材配合:MDN(权威查询,遇到任何 API 先查它)、《JavaScript 高级程序设计》(红宝书,深入用)。