前端网页开发学习路径：HTML、CSS 与 JavaScript 实战指南

阶段 2：现代布局（必须精通）

• Flexbox（最常用布局方式）
  • flex-direction、justify-content、align-items、align-content、flex-grow/shrink/basis、order
• Grid（二维布局神器）
  • grid-template-columns/rows、gap、grid-auto、place-items、minmax()、auto-fit、auto-fill
• CSS 变量：--var-name
• 计算函数：calc()、min()、max()、clamp()
• 宽高比：aspect-ratio
• 间距：gap（flex 和 grid 都支持）

阶段 3：响应式与移动优先

• 移动优先写法
• 媒体查询（@media）
• 相对单位：rem、em、vw、vh、vmin、vmax、%
• 容器查询（@container）——2024 年后越来越重要

阶段 4：视觉与交互

• 圆角、阴影（box-shadow、多层阴影）
• 渐变（linear-gradient、radial-gradient）
• 滤镜（filter: blur、brightness、contrast、drop-shadow）
• 毛玻璃（backdrop-filter: blur）
• 过渡（transition）
• 动画（@keyframes + animation）
• 2D/3D 变换（transform: translate、rotate、scale、skew、perspective）

阶段 5：常见特效写法

• 居中（flex、grid、absolute+transform）
• 等高布局
• 图片宽高比自适应
• 文字溢出省略
• 自定义滚动条
• 暗黑模式（prefers-color-scheme）
• Loading 骨架屏（skeleton）

3. JavaScript：操作页面、处理交互、获取数据

阶段 1：基础语法

• 变量（let、const、var）
• 数据类型与转换
• 运算符、条件、循环
• 函数（声明、表达式、箭头函数、参数默认值、剩余参数）
• 作用域、闭包
• 数组常见方法（push/pop/shift/unshift、splice、slice、map、filter、reduce、forEach、find、some、every）
• 对象（解构、展开运算符、Object 方法）

阶段 2：DOM 与事件

• 获取元素（getElementById、querySelector、querySelectorAll）
• 操作内容（textContent、innerHTML、innerText）
• 属性操作（setAttribute、dataset）
• 类操作（classList.add/remove/toggle/contains）
• 创建/插入/删除元素（createElement、append、prepend、remove、insertAdjacentHTML）
• 事件（addEventListener、removeEventListener）
• 事件对象（event.target、event.preventDefault、event.stopPropagation）
• 事件委托
• 事件冒泡与捕获

阶段 3：异步与数据交互

• setTimeout / setInterval
• Promise（then、catch、finally、Promise.all、Promise.race）
• async/await
• fetch API（GET、POST、处理 JSON、处理错误）
• JSON 操作
• localStorage / sessionStorage

阶段 4：常用现代特性

• 模块化（import/export）
• 解构赋值
• 模板字符串
• 可选链 ?. / 空值合并 ??

三、推荐学习路径与资源

阶段性目标 + 推荐项目

1. 第 1–2 周：HTML + CSS 基础 → 完成一个个人主页（简历式）
2. 第 3–5 周：CSS 布局 + 响应式 → 完成多端适配的产品展示页（PC + 手机）
3. 第 6–8 周：CSS 特效 + JavaScript 基础 → 完成动态轮播图 + Tab 切换 + 表单验证
4. 第 9–12 周：JS DOM + 事件 + 异步 → 完成Todo List（增删改查 + 持久化）或电影/图书搜索页（调用公开 API）
5. 12 周以后：综合项目（博客、后台管理系统、电商首页、小程序式 H5）

核心免费资源

• MDN Web Docs（最权威）
• freeCodeCamp Responsive Web Design 认证（免费、有项目）
• 《CSS 世界》（张鑫旭）——中文最经典 CSS 书
• 《JavaScript 高级程序设计》（第 4 版）——红宝书
• YouTube：Kevin Powell（CSS）、Web Dev Simplified、Traversy Media
• B 站：黑马程序员、尚硅谷、coderwhy、千古前端图文
• 练习平台：codepen.io、frontendpractice.com、cssbattle.dev、codier.io

四、学习节奏总结

每天做比每天学更重要。每天写代码 > 看教程；每天写一个完整小组件 > 学很多零散知识；先做出页面，再追求美观和性能。