HTML5前端开发入门必看：零基础到项目实战、Vue/React框架讲解、就业薪资与技能路线全解析
前端开发是什么？先把它想清楚
想象一下，你打开浏览器，看到一个排版整洁、交互流畅的网页——那个页面是怎么来的？写它的人，就是前端工程师。
简单来说，前端开发就是”让人能看见、能操作”的那一层。它用的是 HTML、CSS、JavaScript 这三样东西，对应网页的结构、样式和行为。
我见过太多零基础的朋友，上来就盯着 Vue、React 这些框架看，结果越看越懵。其实这就像还没学会走路就想跑——框架只是工具，底座才是根本。今天，我们就从最基础的地方开始，一步步把这条线走完。
第一章：HTML——网页的骨架
HTML 全称是 HyperText Markup Language，超文本标记语言。它的作用很简单：告诉浏览器”这里有什么内容”。
你可以把 HTML 想象成盖房子时的钢筋骨架——它不决定房子漂不漂亮，但没有它，房子根本立不起来。
1.1 一个最基础的 HTML 页面
下面这段代码，就是所有网页的起点：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我写的第一段文字。</p>
<a href="https://www.example.com">点击访问示例网站</a>
<img src="photo.jpg" alt="一张示例图片">
</body>
</html>
这段代码里，每一行都有它的用处：
<!DOCTYPE html>：告诉浏览器”我是 HTML5 文档”，没有它，浏览器可能会用老旧的方式渲染页面<html lang="zh-CN">：整个页面的根元素，lang属性标明语言是中文<head>：存放页面的”元信息”，比如标题、编码、视口设置等，这些内容不会直接显示在页面上<meta charset="UTF-8">：指定字符编码为 UTF-8，防止中文显示成乱码<meta name="viewport" ...>：这是移动端适配的关键，没有它，手机打开网页可能会密密麻麻看不清<body>：这里面放的，才是用户在浏览器里真正能看见的内容
1.2 常用的 HTML 标签
标签是 HTML 的基本单位，就像乐高积木的每一个小块。下面这些是新手必须认识的：
| 标签 | 作用 | 示例 |
|---|---|---|
<h1> ~ <h6> |
标题，数字越大字号越小 | <h2>二级标题</h2> |
<p> |
段落 | <p>一段文字</p> |
<a> |
链接 | <a href="url">文字</a> |
<img> |
图片 | <img src="图片地址" alt="描述"> |
<div> |
分区容器，块级元素 | 用来包裹一组元素 |
<span> |
行内容器，行内元素 | 用来包裹一小段文字 |
<ul>/<ol> |
无序/有序列表 | 列清单时用 |
<li> |
列表项 | 配合 ul/ol 使用 |
<input> |
输入框 | 表单里常见的输入控件 |
<button> |
按钮 | <button>点击我</button> |
<table> |
表格 | 展示数据时用 |
<form> |
表单容器 | 收集用户输入 |
1.3 标签的两种形态：块级 vs 行内
这是一个很多初学者容易混淆的概念，我用一个生活中的例子来解释：
块级元素（Block Element） 就像一个盒子，默认独占一行，可以设置宽和高。比如 <div>、<h1>、<p>。
<div>我是一个盒子，我独占一行</div>
<div>我也是盒子，我独占下一行</div>
浏览器渲染效果：
┌─────────────────────────┐
│ 我是一个盒子，我独占一行 │
└─────────────────────────┘
┌─────────────────────────┐
│ 我也是盒子，我独占下一行 │
└─────────────────────────┘
行内元素（Inline Element） 就像一串珠子，不会独占一行，宽度由内容决定，通常不能直接设置宽高。比如 <span>、<a>、<strong>。
<p>我的名字是<span style="color:red">小明</span>，今年18岁。</p>
渲染效果：
我的名字是[小明]，今年18岁。
↑ 红色部分只占文字宽度
为什么区分这个很重要？ 因为你后面写 CSS 的时候，给行内元素设 width 和 height 是没有效果的，必须先把它转成块级元素（用 display: block）。
第二章：CSS——网页的衣服和妆容
如果 HTML 是骨架，CSS 就是让骨架变得好看的衣裳。CSS 全称 Cascading Style Sheets（层叠样式表），它控制网页的颜色、字体、间距、布局、动画等等。
2.1 三种引入 CSS 的方式
方式一：行内样式（不推荐，但要知道）
<p style="color: red; font-size: 16px;">这段文字是红色的</p>
直接把样式写在标签的 style 属性里。缺点是样式和结构混在一起，难以维护，项目大了之后会非常混乱。
方式二：内部样式表
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
写在 <style> 标签里，适合单页样式简单的场景。
方式三：外部样式表（推荐）
<head>
<link rel="stylesheet" href="styles.css">
</head>
然后在 styles.css 文件里写样式：
/* styles.css */
p {
color: blue;
font-size: 18px;
}
h1 {
color: #333;
font-size: 32px;
}
这是最推荐的方式，样式和结构分离，方便维护和复用。
2.2 选择器——找到你想装饰的元素
CSS 的核心语法是：
选择器 {
属性: 值;
}
常见的选择器：
/* 标签选择器：选中所有 p 标签 */
p {
color: #333;
}
/* 类选择器：选中 class="highlight" 的元素 */
.highlight {
background-color: yellow;
}
/* ID 选择器：选中 id="header" 的元素（ID 在整个页面中唯一） */
#header {
font-size: 24px;
}
/* 后代选择器：选中 .nav 里面所有的 li */
.nav li {
list-style: none;
}
/* 伪类选择器：鼠标悬停时改变颜色 */
a:hover {
color: red;
}
2.3 盒模型——CSS 最重要的概念
每个 HTML 元素在浏览器里都是一个”盒子”，这个盒子的结构就是盒模型：
┌─────────────────────────────────────┐
│ margin（外边距） │
│ ┌───────────────────────────────┐ │
│ │ border（边框） │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ padding（内边距） │ │ │
│ │ │ ┌───────────────────┐ │ │ │
│ │ │ │ content（内容） │ │ │ │
│ │ │ │ 这里是文字或图片 │ │ │ │
│ │ │ └───────────────────┘ │ │ │
│ │ └─────────────────────────┘ │ │
│ └───────────────────────────────┘ │
└─────────────────────────────────────┘
- content：实际的内容区域，比如文字
- padding：内容周围的空白（内边距），在边框里面
- border：边框，围绕在 padding 外面
- margin：盒子外面的空白，与其他元素的间距
理解盒模型非常重要，因为很多布局问题（比如两个元素之间出现意外的间距）都跟它有关。
一个实用技巧：在 CSS 文件最开头加这一行，可以简化盒模型的计算：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
box-sizing: border-box 的含义是：当你设置一个元素的 width 时，padding 和 border 会被算进这个宽度里，而不是在外面额外加。这能让布局计算简单很多。
2.4 布局方式——从传统到现代
Flexbox（弹性布局，最常用）
Flexbox 是现代 CSS 布局的主流方案，适合处理一行内多个元素的对齐和排列。
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
display: flex; /* 开启 flex 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
gap: 20px; /* 元素之间的间距 */
}
.item {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px; /* 让文字垂直居中 */
}
效果：三个绿色方块水平居中排列，间距 20px。
Grid（网格布局，适合复杂布局）
Grid 适合处理二维布局，比如整个页面的版式。
.page {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 三列：左边200px，中间自适应，右边200px */
grid-template-rows: 60px 1fr 80px; /* 三行：顶部60px，中间自适应，底部80px */
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
这是一种非常直观的方式，用 grid-template-areas 直接”画”出布局结构。
第三章：JavaScript——让网页”活”起来
HTML 和 CSS 决定了网页”长什么样”，而 JavaScript 决定了网页”做什么”。它是网页的交互引擎——点击按钮弹出弹窗、表单验证、动态加载数据……这些都靠 JavaScript。
3.1 变量的声明
// 声明变量（推荐用 let 和 const）
let age = 25; // 可以改变的变量
const name = "张三"; // 不可改变的常量
let isActive = true; // 布尔值
// 在 ES6 之前大家用 var，但现在不推荐了
var oldWay = "不推荐";
3.2 函数——完成某个任务的代码块
// 普通函数
function sayHello(name) {
return "你好，" + name;
}
console.log(sayHello("小明")); // 输出：你好，小明
// 箭头函数（ES6，更简洁）
const add = (a, b) => a + b;
console.log(add(3, 5)); // 输出：8
3.3 操作 DOM——修改网页内容
DOM（文档对象模型）是 JavaScript 和网页之间的桥梁。通过 DOM，JS 可以查找、修改页面上的任何元素。
<h1 id="title">原标题</h1>
<p class="content">这是段落内容</p>
<button id="btn">点击我</button>
// 获取元素
const title = document.getElementById('title');
const paragraph = document.querySelector('.content');
const button = document.getElementById('btn');
// 修改内容和样式
title.textContent = '新标题'; // 修改文字
title.style.color = 'red'; // 修改样式
paragraph.style.fontSize = '20px'; // 修改字体大小
// 添加点击事件
button.addEventListener('click', function() {
alert('按钮被点击了！');
title.textContent = '点击后改变了！';
});
3.4 条件判断和循环
// 条件判断
let score = 85;
if (score >= 90) {
console.log("优秀");
} else if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}
// 循环：遍历数组
const fruits = ['苹果', '香蕉', '橘子'];
fruits.forEach(function(fruit) {
console.log("我喜欢吃" + fruit);
});
// 输出：
// 我喜欢吃苹果
// 我喜欢吃香蕉
// 我喜欢吃橘子
3.5 异步操作——和服务器交换数据
实际项目中，JavaScript 经常需要从服务器获取数据（比如登录、读取文章列表），这个过程是异步的，不能阻塞页面。现代前端用 fetch 或 axios 来处理：
// 用 fetch 获取数据
async function loadData() {
try {
const response = await fetch('https://api.example.com/posts');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('加载失败：', error);
}
}
loadData();
async/await 的写法让异步代码看起来像同步代码一样清晰，这是 ES2017 引入的特性，现在已经是标准写法了。
第四章：Vue 和 React——现代前端框架
当你用原生 JavaScript 写越来越复杂的交互时，会发现代码越来越难维护。这时候就需要框架来帮忙了。框架提供了一套规范化的方式，让你更高效地组织代码、管理状态、构建大型应用。
目前前端最主流的两大框架是 Vue 和 React，下面分别介绍。
4.1 Vue——上手友好，适合国内开发
Vue 是中国开发者尤雨溪创建的，文档是中文的，对国内开发者非常友好。它的核心理念是渐进式——你可以只用它的一部分，也可以用它构建整个应用。
Vue 3 的基本写法
<!-- Counter.vue -->
<template>
<div class="counter">
<h2>计数器：{{ count }}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<p v-if="count >= 10" style="color: red;">超过10了！</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 响应式数据
const count = ref(0)
// 方法
const increment = () => count.value++
const decrement = () => count.value--
</script>
<style scoped>
.counter {
text-align: center;
padding: 20px;
}
button {
margin: 0 10px;
padding: 8px 16px;
cursor: pointer;
}
</style>
这段代码里有几个关键点：
<template>：HTML 模板，{{ count }}是插值表达式，数据变了，页面自动更新@click：事件绑定，等价于 JavaScript 的onclickv-if：条件渲染，count 大于等于10时才显示这段文字ref：Vue 3 的响应式 API，让数据变成”活”的——数据一变，视图自动更新<style scoped>：样式只在这个组件内生效，不会污染全局
Vue 为什么受欢迎？
- 上手简单：语法接近原生 HTML/CSS/JS，没有额外的学习负担
- 中文文档优秀：这是很多国内公司选择 Vue 的重要原因
- 生态完整：Vue Router（路由）、Pinia（状态管理）配合起来很顺手
- 性能好：Vue 3 的响应式系统用 Proxy 实现，比 Vue 2 的 Object.defineProperty 更高效
4.2 React——灵活强大，全球流行
React 由 Facebook（现 Meta）开发，是目前全球使用最广泛的前端框架。它的核心理念是组件化和声明式。
React 的基本写法（函数组件）
// Counter.jsx
import React, { useState } from 'react';
function Counter() {
// useState 是 React 的状态钩子，counter 是当前值，setCounter 是修改方法
const [count, setCount] = useState(0);
return (
<div className="counter">
<h2>计数器：{count}</h2>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)}>-1</button>
{count >= 10 && <p style={{ color: 'red' }}>超过10了！</p>}
</div>
);
}
export default Counter;
React 和 Vue 实现同样的功能，但写法有明显区别：
- React 用
useState来管理状态，Vue 用ref - React 用
onClick（驼峰命名），Vue 用@click（指令形式） - React 用 JSX 语法（在 JavaScript 里写类似 HTML 的代码），Vue 用
<template>模板 - React 的条件渲染用
&&运算符，Vue 用v-if
React 为什么流行？
- 生态系统庞大：几乎任何需求都有现成的第三方库
- 跨平台能力强：React 的思路可以延伸到 React Native（开发手机 App）
- 大厂背书：Facebook、Netflix、Airbnb 等都在用
- 招聘需求多：国内外大公司 React 岗位普遍多于 Vue
4.3 Vue vs React 该怎么选？
这是一个经常被问到的问题，我的建议是：
| 场景 | 推荐 |
|---|---|
| 国内中小公司、快速开发 | Vue |
| 想进大厂、外企 | React |
| 完全零基础，想先入门 | Vue（中文文档更友好） |
| 想做跨平台移动应用 | React（React Native） |
| 个人项目、创业公司 | 看你个人喜好，两者都能做 |
实际上，学会一个框架之后，学另一个会快很多，因为它们的核心思想是相通的：组件化、状态管理、虚拟 DOM。把原理搞懂，换框架只是语法差异。
第五章：项目实战——从0到1做一个完整的网页
光看不练假把式。下面我用一个待办事项清单（Todo List） 作为实战项目，完整走一遍从 HTML/CSS/JS 到 Vue 两个版本的过程。
5.1 原生 JavaScript 版本
这是最基础的版本，帮助你理解”没有框架时我们是怎么做项目的”。
<!-- todo.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项清单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 16px;
padding: 32px;
width: 100%;
max-width: 500px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 24px;
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#todoInput {
flex: 1;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
#todoInput:focus {
outline: none;
border-color: #667eea;
}
#addBtn {
padding: 12px 24px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
#addBtn:hover {
background: #5a6fd6;
}
ul {
list-style: none;
}
li {
display: flex;
align-items: center;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 8px;
transition: all 0.3s;
}
li:hover {
background: #e9ecef;
}
li.completed span {
text-decoration: line-through;
color: #aaa;
}
li span {
flex: 1;
cursor: pointer;
}
.delete-btn {
background: none;
border: none;
color: #e74c3c;
font-size: 20px;
cursor: pointer;
padding: 0 4px;
}
.delete-btn:hover {
color: #c0392b;
}
</style>
</head>
<body>
<div class="container">
<h1>📝 待办事项</h1>
<div class="input-group">
<input type="text" id="todoInput" placeholder="输入待办事项...">
<button id="addBtn">添加</button>
</div>
<ul id="todoList"></ul>
</div>
<script>
// 用数组存储所有待办事项
let todos = [];
const input = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const list = document.getElementById('todoList');
// 添加待办事项
function addTodo() {
const text = input.value.trim();
if (text === '') {
alert('请输入内容！');
return;
}
todos.push({
id: Date.now(), // 用时间戳作为唯一ID
text: text,
completed: false
});
input.value = '';
render();
}
// 切换完成状态
function toggleTodo(id) {
const todo = todos.find(t => t.id === id);
if (todo) {
todo.completed = !todo.completed;
render();
}
}
// 删除待办事项
function deleteTodo(id) {
todos = todos.filter(t => t.id !== id);
render();
}
// 渲染列表
function render() {
list.innerHTML = '';
todos.forEach(todo => {
const li = document.createElement('li');
if (todo.completed) {
li.classList.add('completed');
}
li.innerHTML = `
<span onclick="toggleTodo(${todo.id})">${todo.text}</span>
<button class="delete-btn" onclick="deleteTodo(${todo.id})">×</button>
`;
list.appendChild(li);
});
}
// 事件绑定
addBtn.addEventListener('click', addTodo);
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTodo();
}
});
</script>
</body>
</html>
运行这个 HTML 文件，你会得到一个功能完整的待办事项应用：可以添加、点击完成、删除。没有框架，纯靠原生 JavaScript 操控 DOM。
5.2 Vue 3 版本
同样的功能，用 Vue 3 写：
<!-- TodoApp.vue -->
<template>
<div class="container">
<h1>📝 待办事项</h1>
<div class="input-group">
<input
v-model="newTodo"
@keypress="handleKeyPress"
placeholder="输入待办事项..."
/>
<button @click="addTodo">添加</button>
</div>
<ul>
<li
v-for="todo in todos"
:key="todo.id"
:class="{ completed: todo.completed }"
>
<span @click="toggleTodo(todo.id)">{{ todo.text }}</span>
<button class="delete-btn" @click="deleteTodo(todo.id)">×</button>
</li>
</ul>
<p v-if="todos.length === 0" class="empty">暂无待办事项，添加一个吧！</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const newTodo = ref('')
const todos = ref([])
const addTodo = () => {
const text = newTodo.value.trim()
if (!text) return
todos.value.push({
id: Date.now(),
text,
completed: false
})
newTodo.value = ''
}
const toggleTodo = (id) => {
const todo = todos.value.find(t => t.id === id)
if (todo) {
todo.completed = !todo.completed
}
}
const deleteTodo = (id) => {
todos.value = todos.value.filter(t => t.id !== id)
}
const handleKeyPress = (e) => {
if (e.key === 'Enter') {
addTodo()
}
}
</script>
<style scoped>
.container {
max-width: 500px;
margin: 40px auto;
padding: 32px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
margin-bottom: 24px;
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
input {
flex: 1;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
}
input:focus {
outline: none;
border-color: #667eea;
}
button {
padding: 12px 24px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background: #5a6fd6;
}
ul {
list-style: none;
}
li {
display: flex;
align-items: center;
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 8px;
}
li.completed span {
text-decoration: line-through;
color: #aaa;
}
li span {
flex: 1;
cursor: pointer;
}
.delete-btn {
background: none;
border: none;
color: #e74c3c;
font-size: 20px;
cursor: pointer;
}
.empty {
text-align: center;
color: #999;
margin-top: 20px;
}
</style>
对比两段代码，你会发现：
- Vue 版本少了大量 DOM 操作代码。原生 JS 需要手动
document.getElementById、createElement、innerHTML，而 Vue 通过模板语法直接声明”数据长什么样”，框架帮你自动更新视图 - 代码量更少，逻辑更清晰。
v-for代替了forEach循环，v-model代替了手动同步输入框的值 - Vue 的响应式系统是核心优势。数据变了，视图自动更新，你不需要关心”怎么更新”这个细节
5.3 React 版本
// TodoApp.jsx
import React, { useState } from 'react';
import './TodoApp.css';
function TodoApp() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const addTodo = () => {
const text = input.trim();
if (!text) return;
setTodos([...todos, { id: Date.now(), text, completed: false }]);
setInput('');
};
const toggleTodo = (id) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div className="container">
<h1>📝 待办事项</h1>
<div className="input-group">
<input
value={input}
onChange={e => setInput(e.target.value)}
onKeyPress={e => e.key === 'Enter' && addTodo()}
placeholder="输入待办事项..."
/>
<button onClick={addTodo}>添加</button>
</div>
<ul>
{todos.map(todo => (
<li key={todo.id} className={todo.completed ? 'completed' : ''}>
<span onClick={() => toggleTodo(todo.id)}>{todo.text}</span>
<button className="delete-btn" onClick={() => deleteTodo(todo.id)}>×</button>
</li>
))}
</ul>
{todos.length === 0 && <p className="empty">暂无待办事项</p>}
</div>
);
}
export default TodoApp;
React 版本的差异点：
- 用
useState管理两个状态：todos列表和input输入框的值 - 数组操作用
map、filter创建新数组（React 要求不可变数据，不能直接修改原数组） - 样式用单独的 CSS 文件引入
第六章：学习路线——从零到就业的路径
知道学什么很重要，但知道按什么顺序学更重要。下面是一张经过无数开发者验证的学习路径：
阶段一：打基础（1-2个月）
HTML → CSS → JavaScript 基础
这一阶段的目标是：能独立写出一个静态页面，理解基本的 JS 语法（变量、函数、条件、循环、DOM 操作）。
判断标准：你能不看教程，从零写一个个人博客首页吗？如果能，基础阶段完成。
阶段二：深入 CSS 和 JS（1个月）
CSS 进阶（Flexbox、Grid、动画）
JavaScript 进阶（ES6+、异步、闭包、原型链）
这个阶段要补的知识点：
- CSS：响应式布局（媒体查询）、CSS 动画、BFC（块级格式化上下文）
- JS：Promise、async/await、模块化、闭包、this 指向
阶段三：学框架（2-3个月）
Vue 或 React（二选一深入，另一个了解即可）
配套工具：Vite / Webpack、路由、状态管理
建议先学 Vue，因为中文文档友好、上手快，能建立信心。之后再学 React，你会发现很多概念是相通的。
阶段四：项目实战（1-2个月）
做 3-5 个完整的项目，每个项目都要有”从无到有”的完整过程：
| 项目 | 技术栈 | 复杂度 |
|---|---|---|
| 个人博客 | Vue + 纯静态 | ⭐ |
| 天气应用 | Vue + API 调用 | ⭐⭐ |
| 电商前台 | React + 状态管理 | ⭐⭐⭐ |
| 后台管理系统 | Vue + 路由 + 表格 | ⭐⭐⭐ |
| 实时聊天应用 | React + WebSocket | ⭐⭐⭐⭐ |
阶段五：就业准备（1个月）
- 整理项目作品，部署到线上（可以用 Vercel、Netlify 免费部署）
- 准备简历，突出项目经验和技能栈
- 刷面试题（前端常见面试题在牛客网、LeetCode 都有）
第七章：就业薪资——现实情况如何？
这是很多初学者最关心的问题。我根据近年的招聘数据和行业观察，给你一个客观的参考：
国内一线/新一线城市（北上广深杭）
| 经验 | 月薪范围（人民币） | 说明 |
|---|---|---|
| 应届生/实习 | 6K - 12K | 大厂校招可达 15K+ |
| 1-3年经验 | 12K - 25K | 中级前端，能独立负责模块 |
| 3-5年经验 | 25K - 45K | 高级前端，能带小团队 |
| 5年以上 | 40K - 80K+ | 资深/专家，通常带团队或做架构 |
二线城市（成都、武汉、南京等）
| 经验 | 月薪范围（人民币） | 说明 |
|---|---|---|
| 应届生 | 5K - 10K | |
| 1-3年 | 10K - 20K | |
| 3-5年 | 20K - 35K |
自由职业/远程
- 初级外包项目：5K - 15K/月（不稳定，但门槛低）
- 有经验的自由开发者：20K - 50K/月（需要积累客户资源）
- 远程工作（为海外公司）：\(2000 - \)5000/月（需要英语能力）
真实情况是：前端行业的薪资分化比较严重。会写 HTML/CSS 的人很多，薪资偏低；但精通框架、有项目经验、懂性能优化和工程化的开发者，薪资非常可观。所以不能只停在”会写页面”的层面，要往深了走。
第八章：给零基础学习者的几个真心话
1. 不要贪多，先精通一个
很多人同时学 HTML、CSS、JS、Vue、React，结果哪个都不精。建议顺序：先把 HTML/CSS/JS 基础打扎实，再学一个框架，然后再扩展。
2. 代码一定要亲手写
看教程觉得”懂了”，一动手就”废了”。每个例子都要自己在电脑上敲一遍，报错、调试、解决——这个过程才是真正的学习。
3. 学会用浏览器调试
按 F12 打开开发者工具，学会看 Network（网络请求）、Console（控制台报错）、Elements（DOM 结构）。这是前端工程师的”体检仪”，不会用等于瞎子摸象。
4. 坚持比天赋重要
前端学习曲线前期比较平缓，中期会有一道”坎”（通常是在学框架或异步的时候），跨过去之后会越来越顺。很多人就是在这道坎上放弃了。
5. 关注真实项目
面试的时候，HR 最看重的是”你做过什么”。从第一个阶段开始，就试着做一个属于自己的小项目，哪怕只是一个简单的个人主页。随着学习深入，项目会越来越复杂，这些就是你的作品集。
前端开发是一条”先难后易”的路。刚开始接触 HTML、CSS、JavaScript 的时候，你可能会觉得满屏的代码让人头大。但一旦你理解了它们的逻辑，你会发现——编程其实是一种思维方式，一种把想法变成现实的能力。
当你第一次看到自己写的代码在浏览器里跑起来，那种成就感是无可替代的。希望这篇文章能帮你少走一些弯路，祝你在前端这条路上走得更稳、更远。