tags, create time
| tags | create time | |||
|---|---|---|---|---|
|
2026-04-24 18:41 |
前端学习总览
概述
前端开发是用户与产品交互的第一触点。这个文件夹系统地梳理了从网页骨架（HTML）到样式（CSS），再到交互逻辑（JavaScript）和类型保障（TypeScript）的完整学习路径。
核心问题：为什么前端学习必须遵循 HTML → CSS → JS → TS 的顺序？如果跳过 CSS 直接写 React，会遇到什么问题？
学习路线图
graph LR
A[HTML 基础] --> B[CSS 基础]
B --> C[JavaScript 基础]
C --> D[TypeScript 基础]
D --> E[React 框架]
E --> F[Vite / 构建工具]
阶段一：网页骨架 — HTML
掌握 HTML 标签、文档结构、表单元素、语义化标签。这是所有前端知识的起点。
阶段二：网页样式 — CSS
掌握选择器优先级、盒模型、Flexbox 布局、Grid 布局、响应式设计。CSS 是前端最容易被低估的部分。
阶段三：交互逻辑 — JavaScript
掌握变量与数据类型、函数与作用域、DOM 操作、事件处理、异步编程（Promise / async-await）。JavaScript 是让页面"活起来"的语言。
阶段四：类型保障 — TypeScript
掌握类型注解、接口、泛型、联合类型、工具类型。TypeScript 是大型前端项目的工业标准。
阶段五：框架进阶 — React（已在 DEV/REACT/ 中）
在掌握 JS 和 TS 基础上，进入 React 组件化开发、状态管理、Hooks 体系。
阶段六：工程化 — Vite（已在 DEV/VITE/ 中）
学习构建工具、模块打包、开发服务器配置。
笔记索引
| 笔记 | 状态 | 说明 |
|---|---|---|
| HTML 基础 | 基础 | HTML 标签、文档结构、表单 |
| CSS 基础 | 基础 | 选择器、盒模型、Flex、Grid |
| JavaScript 基础 | 基础 | 变量、函数、DOM操作、异步 |
| TypeScript 基础 | 进阶 | 类型系统、接口、泛型 |
学习建议
- 不要跳过基础直接学框架。 React 的 Hooks 本质就是 JS 闭包 + 状态管理，不懂 JS 就看不懂 Hooks。
- CSS 是前端最难的部分之一。 Flexbox 和 Grid 需要多动手练习，不是看几篇文章就能掌握的。
- TypeScript 不是可选的。 现代前端项目中，TS 是标配，越早适应越好。