---
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]]