2023年最新前端学习路线【超详细版】
第一个月、HTML+CSS
第1周安排：
是了解前端入门的第一步，要学会IDE插件安装和使用，掌握H5语法和基础标签的应用，学完本周可以进行简单的页面搭建。
- 1、了解前端行业发展
- 2、了解HTML5对于网页的意义
- 3、学习常用标签/属性，进行结构搭建
- 4、掌握无序列表/有序列表/自定义列表
- 5、学习表单标签/属性，能创建常见表单结构
- 6、掌握标签嵌套规则/行内元素/块元素的使用
- 7、学习VSCode开发工具使用，能创建简单网页
学习资源：
课程：前端HTML5+CSS3+移动Web全套教程
第2周安排：
CSS3是网页的"美容师"，本周开始学习CSS3样式，掌握语法结构、选择器、盒子模型、文本和字体样式设置，能够对网页进行简单的样式开发。
- 1、掌握CSS3的基本语法和使用
- 2、掌握CSS3各类型选择器/样式属性，进行快速开发
- 3、学习文本、字体等常见属性
- 4、盒子模型核心知识讲解，深入理解原理
- 5、掌握行内元素和块级元素设置与转换
学习资源：
课程：前端HTML5+CSS3+移动Web全套教程
第3周安排：
简单的样式开发还不够，通过掌握浮动、定位、边框、背景样式以及2D&3D转换，以及布局技巧。能够进行特殊图形绘制，开发更美观的网页效果。
- 1、浮动与定位核心知识，灵活运用实现网页布局
- 2、常见布局方法，解决布局常见问题
- 3、如何绘制圆角边框/阴影框/图片边框等特殊图形
- 4、掌握元素扭曲/移位/旋转，更自由的装饰HTML
- 5、BFC规范和浏览器差异
第4周安排：
CSS3也能实现炫酷的网页动态效果，结合企业级上线“旅游网”项目，综合运用前面所学的知识，完成穷游首页排版布局和CSS3动画特效开发。
- 1、大项目：结合H5/CSS3，完成PC小兔仙首页布局开发
- 2、掌握不同布局结构与技巧
- 3、掌握过渡的使用与缓动效果，实现常见小案例
- 4、运用动画效果，实现炫酷动画效果
第一个月课程表汇总：
前端HTML5+CSS3+移动Web全套教程，零基础学前端web首选黑马程序员
一个月详细的课程表，结合思维导图时间安排学习！
| 课程目录 | 详情 |
|---|---|
| HTML认知 | 1. HTML的基本语法 2. HTML的排版标签3. 绝对路径和相对路径4. HTML的多媒体标签5. HTML的链接标签6. 案例：招聘案例、今日热词案例 |
| HTML基础 | 1. HTML的列表标签 2. HTML的表格标签3. HTML的表单系列标签4. HTML的语义化布局标签 5. HTML的字符实体6.案例：学生信息表格案例、会员注册表单案例 |
| CSS基础选择器+字体文本样式 | 1. CSS的引入方式 2. CSS的标签、类、ID、通配符选择器3. CSS的字体相关样式4. CSS的文本相关样式5. CSS的水平居中技巧6. Chrome调试工具的使用7. 案例：新闻网页案例、卡片居中案例 |
| CSS选择器进阶+背景相关属性+元素显示模式+三大特性 | 1. CSS的后代、子代、并集、交集选择器 2. emmet基本语法3. hover伪类选择器4. CSS的背景相关属性5. 三种常见的元素显示模式6. CSS三大特性：继承性7. CSS三大特性：层叠性8. 案例：五彩导航案例 |
| CSS盒子模型 | 1. CSS三大特性：优先级 2. CSS的权重叠加计算方法3. 盒子模型的组成部分4. 盒子模型的边框、内边距、外边距的作用和代码实现5. 外边距折叠现象6. 案例：新浪导航案例、网页新闻列表案例 |
| CSS浮动 | 1. CSS的结构伪类选择器 2. 伪元素的基本使用3. 标准流的排布规则4. 浮动的特点和使用5. 清除浮动的常见方法6. 案例：小米布局案例、网页导航案例 |
| CSS定位+装饰 | 1. 定位的特点和使用 2. 垂直对齐方式3. 边框圆角完成正圆和胶囊按钮效果4. 元素显示隐藏切换效果5. CSS完成三角形效果6. CSS的链接伪类选择器7. CSS的焦点伪类选择器8. CSS的属性选择器9. 案例：卡片模块hot图标案例、导航二维码居中定位案例 |
| 小兔鲜 项目前置样式+项目搭建 | 1. 精灵图的使用 2. CSS的背景图片大小属性3. 文字和文本阴影效果4. SEO三大标签5. 项目结构搭建和基础公共样式6. 实战：实现 「小兔鲜儿项目」 header模块开发 |
| 小兔鲜 header+footer+主体内容 | 1. 实战：实现 「小兔鲜儿项目」 header模块开发 2. 实战：实现 「小兔鲜儿项目」 网站入口xtx-entry模块开发3. 实战：实现 「小兔鲜儿项目」 新鲜好物面板xtx-new-goods模块开发 |
| CSS3高级 | 1. 平面转换 2. 空间转换3. 动画 |
| Flex布局模型 | 1. Flex布局模型的使用 2. 项目：小兔鲜儿-移动端3. 项目：小兔鲜儿-PC端 |
| 移动端网页适配方案 | 1. Rem基本使用 2. Rem + 媒体查询适配3. Rem + flexible适配4. Rem适配原理5. 项目：游乐园6. vw/vh基本使用7. vw/vh适配原理8. 项目：B站 |
| 响应式 | 1. 媒体查询基本使用 2. 媒体查询实现响应式网页效果3. Bootstrap框架基本使用4. Bootstrap框架栅格系统5. 项目：腾讯全端 |
第二个月、JavaScript
黑马程序员JavaScript全套教程，Web前端必学的JS教程，零基础入门JavaScript
黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作
第5周安排
JS是网页编程的第一步，本周开始学习JS编程语言，掌握基础语法结构、变量声明和命名规则、数据类型、表达式和操作符，学完本周内容可以进行简单的JS代码编写。
- 1、掌握JS基本语法使用
- 2、掌握JS变量声明与提升的机理
- 3、掌握JS运算符操作与表达式
- 4、学习基本数据类型和复杂数据类型使用
- 5、深入理解数据类型转换与检测
第6周安排
本周继续深入学习JS编程语言，掌握条件分支语句、循环语句和数组，学完本周内容可以用简洁的代码实现强大功能。
- 1、掌握if，if elseif，switch等条件分支语句使用
- 2、掌握for、while、do while循环语句使用
- 3、掌握数组基本使用和常用方法
- 4、break和continue语句的特点及应用
- 5、运用数组知识，学习基本算法
- 6、使用简单的逻辑实现复杂业务逻辑
第7周安排
如想实现更炫的动态效果，那么操控网页元素很重要，通过掌握函数编程、DOM操作、事件以及BOM对象，让你能实现典型的触发和动态交互效果。
- 1、掌握DOM操作和DOM事件
- 2、掌握函数基础与函数高级应用
- 3、掌握BOM浏览器对象模型，与浏览器“对话”
- 4、掌握函数封装，提升编码质量
第8周安排：
面向对象是开发中非常重要的思想，在本周我们将开始运用面向对象思想进行程序开发，编写高质量代码，解决企业级编程协同问题。
- 1、学习this规则与使用
- 2、掌握构造函数概念以及创建、调用与使用
- 3、理解原型和原型链的关系与运用
- 4、闭包和作用域应用
- 5、熟练使用面向对象思想进行DOM编程
- 6、掌握JS模块化编程方式，编写高质量代码
- 7、掌握模块化开发技巧，解决企业级编程协同问题
- 8、贪吃蛇案例
第9周安排：
第九周可以利用电商项目来完成一个实战开发了，从0到1完成一个具备CSS3动画和JS特效的多特效旅游网页。掌握企业常见的网页开发方式和各类特效实现方案。
上面课程中，我们给出的案例是京东的网站开发；
- 1、结合H5/CSS3/JS，完成PC端课程中首页特效开发
- 2、项目动画效果分析，帮助更快梳理思路
- 3、实现典型JS特效效果：Banner轮播图、返回顶部动画、垂直菜单
- 4、学习正则表达式，完成常见手机号、邮箱、姓名等功能验证
- 5、完成京东网页开发
课程表：
| 阶段 | 详细内容 |
|---|---|
| JavaScript基础语法 | 变量、数据类型、运算符、类型转称、函数、对象、流程控制、数组、Math、内置函数 |
| WebAPI | 宿主环境、节点查找、节点操作、节点关系、事件、事件流、事件委托、间歇函数、高阶函数、伪数组、执行环境、自执行函数、命名空间、排序、延时函数、正则、表单、自定义属性、重绘、回流、预加载、懒夹在、生命周期； |
| JavaScript高级 | 字面量构造函数、单体对象、面向对象、原型、class、getter、setter、柯里化、解构、箭头函数、Object、Array、const、严格模式、闭包 |
第三个月、ES6学习安排
黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程
补充一下，模块化知识在上面链接当中的228集开始，大家可以从228集开始看到258集。
第10周安排：
ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操作。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，能够更便捷的编写代码，提高开发效率
- 1、ES6基本语法与使用
- 2、掌握ES6中变量和常量的使用与区别
- 3、学习可以嵌入表达式的字符串字面量--模板字符串
- 4、掌握箭头函数的特点与应用
- 5、掌握如何自动解析数组或对象中的值
- 6、掌握参数默认值的使用
- 7、了解对象字面量更加简洁与灵活的表达方式
第11周学习安排
本周将继续学习ES6的基础，通过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深入的了解数据的遍历。
- 1、剩余参数与展开运算符的对比进行学习
- 2、了解如何实现减少逻辑或操作符的使用
- 3、认识ES6中新增的数据结构
- 4、了解ES6中新增的方法
- 5、了解遍历原理，以及学习新的循环方式
- 6、了解如何运用ES6 Promise进行异步编程
- 7、掌握Class基本语法的使用
- 8、掌握更加清晰与便捷的对象继承方式、面向对象的高级思想
写到这里不再按照周给大家做规划了，因为学习到这里大家已经输入成功入门前端了。可以自行安排接下来的学习时间了，你只需要接下来我们需要学什么内容即可。
第四个月、前端进阶学习之Ajax
web前端必备技能Ajax/Git/node.js/mysql/vue.js详细教程
| 本阶段需要学习内容 |
|---|
| Ajax的作用、原生Ajax、同步异步、http协议、ajax封装 |
| git历史、git与svn、git基本使用、分支、远程仓库、git冲突以及解决方案 |
| 项目初始化、前后端分离开发、工具的使用、用户的注册/登录/退出等 |
| ES6简介、新增语法、内置对象扩展等 |
| node.js环境安装、如何使用node.Js运行的代码...具体内容见课程 |
| 静态和动态网站、http模块使用、请求响应原理、HTTP协议、处理页面请求等 |
| MySQL的概念、基本的增删改查等，以及利用Node.js操纵Mysql |
| express的概念、express的安装、后端路由、静态资源托管等； |
web前端必备技能Ajax/Git/node.js/mysql/vue.js详细教程
| 重点内容 |
|---|
| git基本概念 |
| 安装并且配置 |
| 基本操作 |
| GitHub |
| 远程仓库 |
| SSH访问 |
| 本地分支操作 |
全面系统讲解 Node.js 中最核心的、必知必会的概念，能够基于模块化的开发思想优化项目代码，编写出高效、健壮的代码，同时培养出 Node.js 的编程思维。
web前端必备技能Ajax/Git/node.js/mysql/vue.js详细教程
| node基础 |
|---|
| 环境配置 |
| fs模块 |
| path模块 |
| hettp模块 |
| 模块化 |
| commonJS |
| 模块的分类 |
| 模块的作用域、成员共享，加载机制 |
接下来要学习数据库的基本使用：
web前端必备技能Ajax/Git/node.js/mysql/vue.js详细教程
第五个月、热门框架
然后就是热门框架：
2021最全最新版VUE2.0+VUE3.0全套教程（上部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程
2021最全最新版VUE2.0+VUE3.0全套教程（中部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程
2021最全最新版VUE2.0+VUE3.0全套教程（下部），前端vuejs必备教程_从入门到精通vue项目实战挑战高薪，人类高质量课程
| 课程亮点 |
|---|
| 工程化开发，现在市场还是直接引入 vue.js 到 html 页面， 开发中不用这个方式，我们是直接按照工程化的方式进行讲解。 |
| 案例驱动教学，精心设计的 4 大案例，保证每一位学生听得懂、写得出、能实践。 |
| 深入浅出地讲解 Vue2 / Vue3 中的指令、组件、侦听器与计算属性，以及生命周期、数据共享、动态组件、插槽、路由等核心技术点。 |
| 同时，涵盖了 axios 在 Vue 项目中的最佳实践方案；以及 Vant 组件库的主题自定制方案。 |
| 最后一天的 Vue 基础收尾案例，助力学生更加轻松的过渡到 Vue 项目课的学习。 |
Vue 3.0 官方文档(英文) | Vue 3.0 官方文档中文 |
Composition-API手册 | Vuex 4.0 | Vue3 新动态
第六个月、小程序-uni-app
了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。
黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
黑马程序员Web前端教程_零基础玩转微信小程序
6.2 uni-app
理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程
最后一个月！学习安排
本阶段是深入理解组件化和模块化开发的思想，三大主流框架之一，满足企业招聘中的岗位要求。
TypeScript 基础+高级
前端热门教程推荐|五天从零基础学会TypeScript
面试准备：
面试是通往成功就业的关键一步，本周包含布局基础以及JS和ES6等常见考点和经典面试题分析，带你把知识串成线，掌握前端面试技巧，顺利通关基础技能面试。
- 1、H5语义化/CSS布局/定位/图文样式/响应式面试解题技巧
- 2、原型和原型链的5个原则与面试解题技巧
- 3、变量类型/计算/构造函数的面试解题技巧
- 4、作用域和闭包的执行上下文/this面试解题技巧
- 5、异步和单线程/常见的内置对象面试解题技巧
- 6、DOM本质/节点操作/BOM操作面试解题技巧
- 7、AJAX与事件解面试题技巧
框架、小程序以及全栈相关内容也是面试必考。本周带大家梳理的常见考点和经典面试题分析，理清面试解题方法论，完成最后一厘米的冲刺。
- 1、Vue.js原理/MVVM面试解题技巧
- 2、组件生命周期/父子组件传值面试解题技巧
- 3、组件异步加载/缓存/抽离公共逻辑面试解题技巧
- 4、React基础语法/事件面试解题技巧
- 5、React组件生命周期/父子组件通讯面试解题技巧
- 6、React函数组件与class组件区别面试解题技巧
- 7、Redux/react-router面试解题技巧