67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
|
---
|
||
|
|
tags: [前端, 全栈, 学习路线]
|
||
|
|
create time: 2026-04-24 18:41
|
||
|
|
---
|
||
|
|
|
||
|
|
# 前端学习总览
|
||
|
|
|
||
|
|
## 概述
|
||
|
|
|
||
|
|
前端开发是用户与产品交互的第一触点。这个文件夹系统地梳理了从网页骨架（HTML）到样式（CSS），再到交互逻辑（JavaScript）和类型保障（TypeScript）的完整学习路径。
|
||
|
|
|
||
|
|
核心问题：为什么前端学习必须遵循 HTML → CSS → JS → TS 的顺序？如果跳过 CSS 直接写 React，会遇到什么问题？
|
||
|
|
|
||
|
|
## 学习路线图
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
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 是标配，越早适应越好。
|
||
|
|
|
||
|
|
## 关联笔记
|
||
|
|
|
||
|
|
- [[30.areas/finance/Investment lessons/2024.Current trading lessons.md]]
|