新型前端学习成长计划路线规划

必须学习的技术和工具

很多人想学前端，但是又不知道怎么学，先学哪个，在学哪个，完全蒙圈了。

这是所有小白的通病，网上各种教程一大片，然后看了这个又看那个，左后看来看去发现还在原地，都是些重复的课程，对于未知的还是未知，而且和企业要求的目标还相差很远。

所以下面给大家理了一个比较好的学习路线，按照这个顺序去学习，一步一步的学习，节省时间，在最短时间内学会企业的刚需，学完出去找不到工作你来找我。

从事软件开发七八年了，最后你都会发现，企业用的其实也就那些主流的，一开始不要啥都想学，有些东西花了很多时间去学，最后你会发现都是鸡肋，还不如当初一开始就把主干技术学精。

下面是前端开发必须掌握的刚需技术，必须掌握，必须掌握，必须掌握，重要的事件说三遍。接下来就按照这个计划好好学习，天天向上吧！

下面有免费课程快速入门，入门了，你觉得课程还可以，就买后面的课程，想自学就自己多花点功夫多找点资料学习。嘿嘿，学习是持久战，千万不要半途而废，加油！！！！！！！！！！！！！！！！

按照这样的顺序把这些学完了，在多做几个完整的项目，前端无忧！

推荐必须了解的技术

1、前端开发你必须知道的前端开发常用的插件汇总

免费教程持续更新

1、2020年新型前端HTML5 CSS3 JS Canvas AJAX Http前后端交互（文档课件）
「课程学习目录」
第1章：HTML5理论知识和基础标签

1.01-01-HTML-入门知识
2.01-02-HTML-标记标签
3.01-03-HTML-标题标签
4.01-04-HTML-段落换行标签
5.01-05-HTML-属性
6.01-06-HTML-文本格式化标签
7.01-07-HTML-实体字符
8.01-08-HTML-超链接标签
9.01-09-HTML-超链接锚点
10.01-10-HTML-图片标签

第2章：HTML5页面排版标签

1.02-01-HTML-表格标签和属性
2.02-02-HTML-单元格属性
3.02-03-HTML-制作计算器
4.02-04-HTML-表格实现导航栏
5.02-05-HTML-表格图文排版
6.02-06-HTML-内联框架
7.02-07-HTML-内联框架案例

第3章：HTML5布局标签

1.03-01-HTML-无序列表
2.03-02-HTML-有序列表
3.03-03-HTML-自定义列表
4.03-04-HTML-列表嵌套
5.03-05-HTML-区块内联元素
6.03-06-HTML-表单input元素
7.03-07-HTML-表单其他元素
8.03-08-HTML-音视频标签
9.03-09-HTML-考试题分析

第4章：CSS3核心基础属性

1.04-01-CSS-样式引入方式
2.04-02-CSS-三种基础选择器
3.04-03-CSS-宽高尺寸属性
4.04-04-CSS-背景颜色
5.04-05-CSS-背景图片
6.04-06-CSS-文字属性
7.04-07-CSS-字体属性
8.04-08-CSS-字体大小
9.04-09-CSS-超链接属性
10.04-10-CSS-简单特效-作业1
11.04-11-CSS-后代选择器
12.04-12-CSS-作业2
13.04-13-CSS-作业7

第5章：CSS3表格列表快速排版

1.05-01-CSS-列表属性
2.05-02-CSS-一级菜单
3.05-03-CSS-显示方式
4.05-04-CSS-显示隐藏
5.05-05-CSS-简单水平二级菜单
6.05-06-CSS-多级菜单
7.05-07-CSS-表格属性
8.05-08-CSS-作业2
9.05-09-CSS-作业3
10.05-10-CSS-作业5
11.05-11-CSS-作业6

第6章：CSS3盒子模型排版技术

1.06-01-CSS-内边距
2.06-02-CSS-边框
3.06-03-CSS-边线
4.06-04-CSS-外边距
5.06-05-CSS-盒子阴影
6.06-06-CSS-作业2
7.06-07-CSS-作业4-1
8.06-08-CSS-作业4-2

第7章：CSS3浮动定位排版

1.07-01-CSS-浮动基本特性
2.07-02-CSS-清除浮动的影响
3.07-03-CSS-浮动整体居中
4.07-04-CSS-相对定位
5.07-05-CSS-固定定位
6.07-06-CSS-绝对定位
7.07-07-CSS-作业1八卦
8.07-08-CSS-作业3-1
9.07-09-CSS-作业3-2
10.07-10-CSS-作业4
11.07-11-CSS-作业5
12.07-12-CSS-综合案例-天猫-1
13.07-13-CSS-综合案例-天猫-2
14.07-14-CSS-综合案例-天猫-3
15.07-15-CSS-综合案例-天猫-4
16.07-16-CSS-综合案例-天猫-5

第8章：CSS3多样化选择器

1.08-01-CSS-子元素选择器
2.08-02-CSS-兄弟元素选择器
3.08-03-CSS-伪类选择器before和after
4.08-04-CSS-伪类选择器nth属性
5.08-05-CSS-伪类选择器表单属性
6.08-06-CSS-伪类选择器其他属性
7.08-07-CSS-属性选择器
8.08-08-CSS-作业1
9.08-09-CSS-作业2
10.08-10-CSS-作业5
11.08-11-CSS-作业6

第9章：CSS3变换动画渐变特效响应式

1.09-01-CSS-过度效果
2.09-02-CSS-2D变换效果
3.09-03-CSS-2D案例
4.09-04-CSS-3D转换
5.09-05-CSS-动画效果
6.09-06-CSS-移动的小球
7.09-07-CSS-过度逆向思维
8.09-08-CSS-线性渐变
9.09-09-CSS-径向渐变
10.09-10-CSS-响应式布局
11.09-11-CSS-线性渐变进度条
12.09-12-CSS-作业5-西游行

第10章：CSS3弹性盒子优化页面排版

1.10-01-CSS-弹性盒子flex属性
2.10-02-CSS-弹性盒子justify-content属性
3.10-03-CSS-弹性盒子align-content属性
4.10-04-CSS-弹性盒子align-items属性
5.10-05-CSS-弹性盒子align-self属性
6.10-06-CSS-弹性盒子flex-direction属性
7.10-07-CSS-弹性盒子order属性
8.10-z-CSS-考试题分析
9.10-z-CSS-实操题-第1题：日历
10.10-z-CSS-实操题-第2题：下拉菜单
11.10-z-CSS-实操题-第3题：选项块

第11章：JavaScript核心基础语法

1.11-01-JS-注释
2.11-02-JS-变量
3.11-03-JS-变量的运用
4.11-04-JS-变量的数据类型
5.11-05-JS-字符串类型
6.11-06-JS-数字类型
7.11-07-JS-布尔类型
8.11-08-JS-算术运算符
9.11-09-JS-自增自减运算符案例分析
10.11-10-JS-赋值运算符
11.11-11-JS-比较运算符
12.11-12-JS-逻辑运算符
13.11-13-JS-条件运算符
14.11-14-JS-运算符案例分析
15.11-15-JS-运算符复习回顾
16.11-16-JS-运算符优先级
17.11-17-JS-初识函数
18.11-18-JS-模拟加减乘除函数
19.11-19-JS-函数+HTML点击事件
20.11-20-JS-取值+HTML属性
21.11-21-JS-设置值+HTML属性
22.11-22-JS-作业1

第12章：JavaScript条件和循环结构

1.12-01-JS-if语句
2.12-02-JS-if-else语句
3.12-03-JS-if-elseif-else语句
4.12-04-JS-switch语句
5.12-05-JS-获取和设置HTML元素的内容
6.12-06-JS-常用四个事件
7.12-07-JS-实现登录提示功能
8.12-08-JS-注册案例（1）
9.12-09-JS-注册案例（2）
10.12-10-JS-while循环语句
11.12-11-JS-do-while循环
12.12-12-JS-for循环
13.12-13-JS-作业-2
14.12-14-JS-作业-3
15.12-15-JS-作业-4
16.12-16-JS-作业-6
17.12-17-JS-作业-7

第13章：JavaScript数组与循环操作

1.13-01-JS-数组的使用
2.13-02-JS-循环数组并显示到表格
3.13-03-JS-数组的存储模式
4.13-04-JS-数组开头添加值
5.13-05-JS-数组在任意位置插入数据
6.13-06-JS-数组在任意位置删除数据
7.13-07-JS-数组常用函数
8.13-08-JS-函数参数
9.13-09-JS-制作计算器（1）
10.13-10-JS-制作计算器（2）
11.13-11-JS-制作计算器（3）
12.13-12-JS-制作计算器（4）
13.13-13-JS-冒泡排序
14.13-14-JS-选择排序
15.13-15-JS-插入排序
16.13-16-JS-插入排序优化
17.13-17-JS-多维数组

第14章：JavaScript面向对象设计

1.14-01-JS-面向对象思想
2.14-02-JS-创建对象-方法1
3.14-03-JS-创建对象-方法2
4.14-04-JS-创建对象-方法3
5.14-05-JS-Math数学对象
6.14-06-JS-String字符串对象
7.14-07-JS-Date日期对象
8.14-08-JS-作业2
9.14-09-JS作业3-1
10.14-10-JS作业3-2

第15章：JavaScript-DOM对象和BOM对象

1.15-01-JS-BOW对象-setInterval
2.15-02-JS-BOW对象-setTimeout
3.15-03-JS-获取窗口的尺寸
4.15-04-JS-获取显示器属性
5.15-05-JS-获取网址属性
6.15-06-JS-获取历史记录属性
7.15-07-JS-获取浏览器属性
8.15-08-JS-创建添加删除元素
9.15-09-JS-左右两栏添加删除
10.15-10-JS-动态绑定事件
11.15-11-JS-页面滚动事件
12.15-12-JS-学生信息管理案例（1）
13.15-13-JS-学生信息管理案例（2）
14.15-14-JS-学生信息系统案例（3）
15.15-15-JS-学生信息系统案例（4）
16.15-16-JS-学生信息系统案例（5）
17.15-17-JS-学生信息系统案例（6）
18.15-18-JS-学生信息系统案例（7）
19.15-19-JS-复习-JS基础概念
20.15-20-JS-复习-JS函数
21.15-21-JS-复习-理解函数调用过程
22.15-22-JS-作业3-日期选择器-1
23.15-23-JS-作业3-日期选择器-2
24.15-24-JS-作业3-日期选择器-3
25.15-25-JS-作业3-日期选择器-4-动态生成日期
26.15-26-JS-作业3-日期选择器-5-向左切换月份
27.15-27-JS-作业3-日期选择器-6-向右切换月份
28.15-28-JS-作业3-日期选择器-7-调整周日的日期
29.15-29-JS-作业4-简单轮播图
30.15-30-JS-作业5-轮播图1
31.15-31-JS-作业5-轮播图2
32.15-32-JS-作业5-轮播图3
33.15-33-JS-作业5-轮播图4
34.15-34-JS-作业5-轮播图5
35.15-35-JS-作业5-轮播图6
36.15-36-JS-作业5-轮播图7
37.15-37-JS-作业5-轮播图8
38.15-38-JS-作业5-轮播图9
39.15-39-JS-作业5-轮播图10
40.15-40-JS-作业5-轮播图11

第16章：JavaScript-HTML5-Canvas

1.15-k1-01-H5-Canvas-创建抽奖转盘对象
2.15-k1-02-H5-Canvas-绘制多个弧形
3.15-k1-03-H5-Canvas-绘制多行文字1
4.15-k1-04-H5-Canvas-绘制多行文字2
5.15-k1-05-H5-Canvas-绘制图案
6.15-k1-06-H5-Canvas-绘制文字
7.15-k1-07-H5-Canvas-旋转方案1
8.15-k1-08-H5-Canvas-旋转方案2

第17章：HTTP协议AJAX基础

1.16-01-JS-发送请求消息结构
2.16-02-JS-请求的方式方法
3.16-03-JS-响应消息结构
4.16-04-JS-请求和响应状态码
5.16-05-JS-AJAX异步请求
6.16-06-JS-AJAX对象
7.16-07-JS-AJAX对象文件
8.16-08-JS-AJAX对象改造

第18章：XML和JSONP实现AJAX

1.17-01-JS-JSON语法
2.17-02-JS-AJAX获取JSON数据
3.17-03-JS-AJAX获取并显示天气
4.17-04-JS-AJAX获取并显示学生信息1
5.17-05-JS-AJAX获取并显示学生信息2
6.17-06-JS-AJAX获取并显示学生信息3
7.17-07-JS-AJAX获取并显示学生信息4
8.17-08-JS-AJAX获取并显示学生信息5
9.17-09-JS-AJAX获取并显示学生信息6
10.17-10-JS-AJAX获取并显示学生信息7
11.17-11-JS-AJAX获取并显示学生信息8
12.17-12-JS-AJAX-显示第一级：省
13.17-13-JS-AJAX-显示第二级：市
14.17-14-JS-AJAX-显示第三级：县