web 前端开发学习是分层递进的体系，第一阶段必须打牢 HTML CSS JavaScript 三大基础，这是所有网页的底层核心，第二阶段学习主流框架 Vue 或者 React，掌握组件化单页应用开发，第三阶段学习工程化 网络协议 状态管理 路由 接口请求这些企业项目必备知识，进阶阶段再学习 TypeScript 性能优化 浏览器原理 跨端开发，之所以要按照这个顺序学习，是因为框架本质还是封装原生 JS，如果原生基础薄弱，学框架只会只会套模板，遇到报错和复杂业务就很难独立排查，企业招聘 web 前端开发岗位，不只是要求会写页面，还要求可以独立联调接口 适配多端 处理兼容问题 参与项目构建部署，所以学习过程不能只看视频，一定要配套项目实战，把知识点串联起来，最终达到可以独立完成后台管理系统 移动端 H5 这类真实业务项目的水平。

一 第一阶段 基础三件套 入门核心

HTML

学习内容

文档基本结构 标签语义化 表单标签 表格 列表 多媒体标签 嵌套规则 表单属性 常用全局属性

重点掌握语义化标签，div header section footer nav，理解标签含义，不是单纯堆砌 div

学习目标 可以独立写出规范网页结构，理解 DOM 节点基础概念

CSS

学习内容

选择器 盒模型 浮动 定位 弹性布局 Flex 网格布局 Grid 过渡动画 伪类伪元素 响应式媒体查询 样式优先级 层叠规则

重点是盒模型和 Flex，企业项目 90% 布局都依赖 Flex，响应式适配是 web 前端开发必备能力

学习目标 可以精准还原设计稿，解决页面错位 居中 自适应等常见布局问题

JavaScript 原生

学习内容

变量 数据类型 运算符 流程控制 函数 数组对象 原型链 闭包 作用域 异步编程 Promise async await DOM 操作 BOM 事件机制 事件委托

这部分是重中之重，很多新手卡点就在 JS，web 前端开发所有交互逻辑都依靠 JS 实现

学习目标 可以独立实现表单校验 动态渲染 定时器 事件交互，理解异步原理

二 第二阶段 主流框架 企业项目核心

二选一深入学习，优先推荐 Vue，国内岗位需求量更大，想进大厂可以同时了解 React

Vue 方向

学习内容

Vue2 或者 Vue3 选项式与组合式 API 指令 组件通信 插槽 生命周期 Vue Router 路由 Pinia 状态管理 组件封装 路由守卫

React 方向

学习内容

JSX 函数组件 Hooks 组件通信 状态提升 React Router Redux 或者 Zustand 虚拟 DOM 原理

学习目标 可以搭建单页应用，实现多页面跳转，跨组件数据共享，封装通用业务组件

三 第三阶段 企业项目配套必备知识

四 第四阶段 进阶提升内容

TypeScript 给 JS 增加类型，大型项目稳定必备，现在很多公司 web 前端开发岗位已经要求 TS

性能优化 懒加载 路由分包 图片优化 首屏加载优化 防抖节流

安全相关 XSS CSRF 前端鉴权基础

跨端拓展 小程序 Electron Three.js ECharts 可视化大屏

自动化测试 单元测试 Jest

五 学习配套实战项目顺序

第一个项目 静态企业官网，练习 HTML CSS 基础

第二个项目 原生 JS 交互项目，比如待办清单 计算器，巩固 JS 原生

第三个项目 Vue 或者 React 后台管理系统，包含表格 表单 权限 接口联调，这个是求职核心项目

第四个项目 移动端 H5 商城，练习响应式和移动端适配

六 学习常见误区

误区 1 跳过原生 JS 直接学框架，后期底层原理不懂，很难进阶

误区 2 只看视频不敲代码，看懂不等于会写，web 前端开发非常依赖动手练习

误区 3 同时学 Vue 和 React，初期精力分散，建议先精通一套框架，再拓展另一套

误区 4 只学页面开发，忽略 Git 跨域 HTTP，面试和项目联调经常卡在这里

【常见问题】

问题 1 web 前端开发要学些啥，零基础需要先学 Vue 吗

回答 1 web 前端开发零基础不建议一开始就学 Vue，web 前端开发要学的内容里面，HTML CSS JavaScript 是底层基础，必须先学完原生基础，再学习 Vue 框架，直接上手框架很容易不理解底层原理。

问题 2 web 前端开发要学些啥，必须掌握 TypeScript 吗

回答 1 web 前端开发初级岗位部分公司没有强制要求 TypeScript，但是现在主流新项目大量使用 TS，web 前端开发要学的进阶内容里面 TypeScript 属于加分必备，想要长期做 web 前端开发建议尽早学习。

问题 3 web 前端开发要学些啥，需要学习后端吗

回答 1 web 前端开发核心学习内容不需要深入后端业务代码，但是 web 前端开发要学 HTTP 协议接口基础知识，如果想走全栈路线，web 前端开发可以额外学习 Node.js。

问题 4 web 前端开发要学些啥，ECharts 属于必学内容吗

回答 1 web 前端开发普通业务岗位 ECharts 不是强制必学，但是如果求职方向是可视化大屏类 web 前端开发岗位，web 前端开发要学的内容就必须包含 ECharts 图表开发。

问题 5 web 前端开发要学些啥，学习周期大概多久

回答 1 web 前端开发从零学到可以求职水平，完整掌握 web 前端开发要学的全部基础加框架加项目，一般需要四到六个月，每天坚持练习，学习速度会根据个人基础和练习强度产生差异。

【免责申明】

本文介绍 web 前端开发通用学习路线，不同公司招聘要求存在差异，前端技术框架和工具会持续迭代更新，学习内容仅作为通用参考，不代表所有企业岗位的硬性考核标准。