跳转至

01 - 前端学习路径

目标：系统学习前端开发，能独立开发Web应用

时间：4-6周

核心原则：从基础到框架，循序渐进

🎯 前端是什么？

前端开发 = 用户能看到和交互的部分

Text Only
用户打开网页 → 浏览器加载HTML/CSS/JS → 显示界面 → 用户交互

你的代码：
- HTML: 网页的骨架（结构）
- CSS: 网页的样式（外观）
- JavaScript: 网页的行为（交互）

📚 学习路径

阶段1：基础三件套（2周）

Text Only
Week 1: HTML + CSS
    ↓
Week 2: JavaScript基础
    ↓
小项目：个人简历网页

阶段2：现代前端工具（1周）

Text Only
Week 3:
    - ES6+新特性
    - npm/yarn包管理
    - Webpack/Vite构建工具
    ↓
小项目：待办事项应用

阶段3：前端框架（2-3周）

Text Only
Week 4-5: React/Vue（选一个深入学习）
    - 组件化开发
    - 状态管理
    - 路由
    ↓
Week 6:
    - 项目实战
    - 部署上线

🛠️ 开发环境搭建

1. 安装VS Code

下载：https://code.visualstudio.com/

推荐插件： - Live Server（实时预览） - Prettier（代码格式化） - ESLint（代码检查） - Auto Rename Tag（自动重命名标签）

2. 安装Node.js

下载：https://nodejs.org/

验证安装：

Bash
node --version
npm --version

3. 浏览器开发者工具

Chrome/Firefox按F12打开： - Elements: 查看和修改HTML/CSS - Console: 执行JavaScript - Network: 查看网络请求 - Sources: 调试代码

📖 详细学习内容

Week 1: HTML + CSS

HTML基础

HTML
<!-- 基本结构 -->
<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <!-- 常用标签 -->
    <h1>标题</h1>
    <p>段落</p>
    <a href="https://example.com">链接</a>
    <img src="image.jpg" alt="图片">

    <!-- 列表 -->
    <ul>
        <li>无序列表项</li>
    </ul>

    <!-- 表单 -->
    <form>
        <input type="text" placeholder="输入文字">
        <button type="submit">提交</button>
    </form>
</body>
</html>

学习重点： - 语义化标签（header, nav, main, article, footer） - 表单元素和验证 - 多媒体标签（audio, video）

CSS基础

CSS
/* 选择器 */
h1 { color: blue; }           /* 元素选择器 */
.class { font-size: 16px; }   /* 类选择器 */
#id { margin: 10px; }         /* ID选择器 */

/* 盒模型 */
.box {
    width: 200px;
    height: 100px;
    padding: 20px;      /* 内边距 */
    border: 1px solid;  /* 边框 */
    margin: 10px;       /* 外边距 */
}

/* 布局 */
.container {
    display: flex;           /* Flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}

/* 响应式 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

学习重点： - Flexbox布局 - Grid布局 - 响应式设计（媒体查询） - CSS变量

Week 2: JavaScript基础

基础语法

JavaScript
// 变量
let name = 'Alice';      // 可变
const PI = 3.14;         // 不可变

// 函数
function greet(name) {
    return `Hello, ${name}!`;
}

const add = (a, b) => a + b;  // 箭头函数

// 条件
if (age >= 18) {
    console.log('Adult');
} else {
    console.log('Minor');
}

// 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// 数组操作
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((a, b) => a + b, 0);

DOM操作

JavaScript
// 获取元素
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');

// 修改内容
element.textContent = '新文本';
element.innerHTML = '<strong>加粗</strong>';

// 修改样式
element.style.color = 'red';
element.classList.add('active');

// 事件监听
element.addEventListener('click', function(event) {
    console.log('被点击了！');
});

// 创建元素
const newDiv = document.createElement('div');
newDiv.textContent = '新元素';
document.body.appendChild(newDiv);

异步编程

JavaScript
// Promise  // Promise异步操作容器：pending→fulfilled/rejected
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// async/await
async function getData() {  // async定义异步函数；await等待Promise完成
    try {  // try/catch捕获异常
        const response = await fetch('https://api.example.com/data');  // await等待异步操作完成
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

Week 3: 现代工具

ES6+新特性

JavaScript
// 解构赋值
const { name, age } = person;
const [first, second] = array;

// 展开运算符
const newArray = [...oldArray, 4, 5];  // ...展开运算符：展开数组/对象
const newObject = { ...oldObject, newKey: 'value' };

// 模块化
// math.js
export const add = (a, b) => a + b;
export default class Calculator {}

// main.js
import Calculator, { add } from './math.js';

// 类
class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a sound`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks`);
    }
}

npm包管理

Bash
# 初始化项目
npm init -y

# 安装依赖
npm install lodash
npm install --save-dev webpack  # 开发依赖

# 运行脚本
npm run build
npm start

Week 4-5: React框架

React基础

JSX
// 函数组件
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// 使用Hook
import { useState, useEffect } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                +1
            </button>
        </div>
    );
}

// 列表渲染
function TodoList({ todos }) {
    return (
        <ul>
            {todos.map(todo => (  // map转换每个元素；filter筛选；reduce累积
                <li key={todo.id}>{todo.text}</li>
            ))}
        </ul>
    );
}

状态管理（Redux Toolkit，推荐方式）

JavaScript
// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({  // const不可重新赋值；let块级作用域变量
    name: 'counter',
    initialState: { count: 0 },
    reducers: {
        increment: (state) => { state.count += 1; },  // 箭头函数：简洁的函数语法
        decrement: (state) => { state.count -= 1; },
    },
});

export const { increment, decrement } = counterSlice.actions;  // 解构赋值：从对象/数组提取值

const store = configureStore({
    reducer: counterSlice.reducer,
});

// 使用
store.dispatch(increment());
console.log(store.getState());  // { count: 1 }

🎯 学习检查点

Week 1结束后：

  • 能用HTML搭建网页结构
  • 能用CSS实现常见布局
  • 能做出响应式页面

Week 2结束后：

  • 理解JavaScript基础语法
  • 能操作DOM元素
  • 能处理用户事件

Week 3结束后：

  • 理解ES6+新特性
  • 会使用npm管理依赖
  • 能配置简单的构建工具

Week 4-5结束后：

  • 理解组件化开发思想
  • 能使用React/Vue开发应用
  • 理解状态管理

Week 6结束后：

  • 完成一个完整的前端项目
  • 能将项目部署上线

📚 推荐资源

在线教程

  • MDN Web Docs（最权威）
  • freeCodeCamp（免费实践）
  • JavaScript.info（深入JS）

书籍

  • 《JavaScript高级程序设计》
  • 《CSS揭秘》
  • 《React设计模式与最佳实践》

练习平台

  • CodePen（在线写代码）
  • Frontend Mentor（实战项目）
  • LeetCode（算法，也有前端题）

🚀 下一步

完成前端基础学习后，进入 01-JavaScript深度理解.md 深入学习JavaScript核心机制！

记住：前端是用户的第一印象，好的前端让产品更有价值！ 🎨