HTML & CSS
前端开发 · 预计 3-4 周 · 4 阶段
HTML 负责语义结构、CSS 负责视觉呈现，是所有前端技能的底层。路线图覆盖语义化标签、Flex/Grid 布局、响应式设计与动画，最后进入预处理器与设计系统，打好扎实的布局功底。
学后可投：网页制作前端开发工程师UI 还原工程师
学习进度：已完成 0 / 4 阶段0%
下一阶段目标：HTML 语义化基础（完成当前阶段后自动推进）
学习路线图按顺序学完每一阶段
点击阶段节点直达学习内容；绿色=已完成，彩色=当前阶段
1
当前阶段HTML 语义化基础
2-3 天难度 入门
核心知识点
常用标签与语义化（header/main/section）表单元素与 input 类型HTML 属性与全局属性可访问性基础（aria）
本阶段学习内容
要点速记
- 语义化：header/main/article 表结构，删掉 class 后文档仍清晰
- label 必须用 for 关联 input（可访问性关键）
- input 类型自带校验：email/number/date
- 能用原生 HTML 语义就不用 aria
本阶段练习题（点击选项作答）
1. 语义化标签的核心价值不包括？
2. label 与 input 关联的正确写法？
练习任务
- 手写一个语义完整的文章页
- 实现一个完整注册表单（含校验属性）
本阶段验收标准
手写语义化文章页 + 完整注册表单，通过 W3C 校验
2
CSS 基础与盒模型
2-3 天难度 入门
核心知识点
选择器与优先级盒模型与 margin 塌陷定位（relative/absolute/fixed）文本排版与字体
本阶段学习内容
要点速记
- box-sizing: border-box 让 width 包含 padding/border
- 垂直 margin 折叠：相邻 margin 取最大值不叠加
- absolute 定位找最近的非 static 祖先，不一定是 relative
- 选择器优先级：!important > 内联 > id > class > 标签；同级后写赢
本阶段练习题（点击选项作答）
1. box-sizing: border-box 的效果是？
2. vertical margin 折叠规则是？
3. position: absolute 的定位参考是？
练习任务
- 还原一个电商商品卡片（含价格/按钮/评分）
- 用 CSS 画一个太极图（练习定位与圆角）
本阶段验收标准
还原电商商品卡；用纯 CSS 画出一个太极图
3
Flexbox / Grid 布局
3-5 天难度 初级
核心知识点
Flex 主轴/交叉轴与对齐Grid 网格与区域命名两栏/三栏经典布局居中技巧全集
本阶段学习内容
要点速记
- Flex 一维：justify-content 主轴 / align-items 交叉轴
- flex: 1 = 均分剩余空间，最常用伸缩写法
- Grid 二维：grid-template-columns 定义列，grid-column 控制跨列
- Grid 管版面，Flex 管行内对齐，组合使用
本阶段练习题（点击选项作答）
1. flex: 1 的含义是？
2. Grid 与 Flex 的选型说法正确的是？
练习任务
- 用 Flex 实现圣杯布局
- 用 Grid 实现 12 宫格相册墙
- 实现一个响应式导航栏
本阶段验收标准
用 Flex 实现圣杯布局，用 Grid 实现 12 宫格相册墙
4
响应式与工程化
4-7 天难度 中级
核心知识点
媒体查询与断点rem/em/vw 单位与移动端适配CSS 动画与过渡预处理器（Sass）与 Tailwind
本阶段学习内容
要点速记
- 响应式移动优先：先写小屏，再用 min-width 媒体查询增强
- rem 相对根元素字号，适合全局缩放；vw/vh 相对视口
- 性能动画只动 transform 和 opacity
- prefers-reduced-motion 尊重用户关闭动效
本阶段练习题（点击选项作答）
1. 移动优先的响应式写法是？
2. CSS 动画性能最佳实践是？
练习任务
- 把一个页面做成手机/平板/桌面三端适配
- 用 Tailwind 重写个人主页
- 给页面加 3 个交互动画
本阶段验收标准
同一页面手机/平板/桌面三端适配，含 3 个交互动画
怎么学
学习方法与实操建议，配合路线图按阶段推进
- 1MDN 是最好的查漏补缺文档，配合 Codepen 即时练习
- 2每个布局知识点都动手还原一个真实界面（如导航栏、卡片、表单页）
- 3用浏览器 DevTools 反复调试样式，理解盒模型与层叠规则
- 4做完一个完整静态页面（如个人主页）作为阶段验收
学完能做什么
- 手写语义化页面，通过 W3C 校验
- 用 Flex/Grid 完成任意常见布局
- 独立实现响应式与动效
面试常见问题6 题
常见误区
- 1用 div 堆一切，毫无语义
- 2死记代码不看盒模型与层叠规则
- 3不会用 DevTools 调试样式
- 4跳过移动端适配，只做桌面版
学习节奏建议
预计 3-4 周，共 4 个阶段。
每阶段按标注时长安排：先读参考文档掌握核心知识点，再完成练习任务，通过 验收标准后标记完成进入下一阶段。
当前为游客模式，进度保存在本设备；登录后可云端同步、多端续学。
当前进度
0%
0 / 4 阶段
进行中
进行中
下一阶段：HTML 语义化基础