前端入门学习线路

一. HTML基础

• 常用标签
• 表单

参考文档：HTML 教程 | 菜鸟教程

参考视频：黑马前端pink老师p1-p60

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili全部素材、源码、ppt、素材、讲义都在置顶留言,去下载吧~~也可以直接： https://gitee.com/xiaoqiang001/html_css_material.git 下载哈！1. web端布局：先讲解HTML5常用标签，接着讲解CSS3常见样式增加的H5C3新特性，新语法，最后讲解PC端品优购项目。以及CSS3动画 2d 3d效果2. 移动端布局：主要讲解视口、二倍图、流失布局，https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.337.search-card.all.click&vd_source=8942f873a5ef47b39a3314c7efe9db4e

二.CSS3

• 基本语法
• 选择器
• 字体属性
• 文本属性
• margin，padding
• 浮动（float），清除浮动
• 定位（相对定位与绝对定位）
• 伪元素
• 2D转换之translate
• 3D转换，透视

参考文档：CSS 教程 | 菜鸟教程

参考视频：黑嘛前端pink老师p61-p387黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili全部素材、源码、ppt、素材、讲义都在置顶留言,去下载吧~~也可以直接： https://gitee.com/xiaoqiang001/html_css_material.git 下载哈！1. web端布局：先讲解HTML5常用标签，接着讲解CSS3常见样式增加的H5C3新特性，新语法，最后讲解PC端品优购项目。以及CSS3动画 2d 3d效果2. 移动端布局：主要讲解视口、二倍图、流失布局，https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.337.search-card.all.click&vd_source=8942f873a5ef47b39a3314c7efe9db4e

三.Javascript（重中之重） 

1 ECMAScript

• 基本语法
• 变量，作用域
• 基本引用类型
• 函数的定义和调用
• 方法

2 DOM

• 什么是DOM
• 获取页面元素
• 注册事件
• 操作DOM属性
• 创建元素
• 操作DOM节点

3 BOM

• 什么是BOM
• 浏览器顶级对象window
• 页面加载事件
• 定时器
• JS执行机制
• location，navigator，history

参考文档：JavaScript 教程 | 菜鸟教程

参考视频：        JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili素材大全：https://gitee.com/xiaoqiang001/java-script.gitPPT 在我账号专栏里面网盘地址1.JavaScript基础从变量的定义与使用、流程控制语句、数组、函数、构造函数、内置对象以及对象等2.web API 讲解如何获取DOM元素，如何操作DOM 元素，BOM操作 移动端制作网页特效3. 后面还会有js高级，ES6类面向对象语法，面向对象案例https://www.bilibili.com/video/BV1Sy4y1C7ha?p=267&share_source=copy_web变量：P11～19
数据类型：P20～40
运算符：P41～54
流程控制分支结构：P55～68
循环：P69～95
数组：P96～112
函数：P113～133
作用域：P134～139
JS预解析：P140～142
对象：P143～153
内置对象：P155～186
简单数据类型和复杂数据类型：P187～190
DOM：P194～265
事件高级：P247～265
BOM：P266～286
PC端网页特效：P287～329
移动端网页特效：P331～353
本地存储：P354～357
jQuery：P358～442
数据可视化：P443～473

参考书籍：红宝书——《Javascript高级程序设计》

四.Javascript进阶 ES6

• 高阶函数
• this指向
• 原型链
• 深拷贝，浅拷贝
• 面向对象编程
• 类和对象
• 类的继承
• call，apply，bind
• 闭包
• 递归
• promise
• 遍历数组的方法

ES6

• let，const
• 数组解构赋值
• 箭头函数
• 扩展运算符
• 模板字符串
• set

 参考文档：JavaScript 教程 | 菜鸟教程

参考视频：        2019全新javaScript进阶面向对象ES6_哔哩哔哩_bilibili适合学完js基础和js API的同学。1. 面向对象和面向过程2. ES6 类语法3. 继承4. 面向对象案例5. 原型和原型链6. 组合继承7. 严格模式8. 闭包9. 递归函数10. 深拷贝浅拷贝11. 高阶函数12. call、apply、bind13. ES614. 对象解构15. 箭头函数16. 扩展运算符17. 模板字符串课程出自：http://yuhttps://www.bilibili.com/video/BV1Kt411w7MP?p=91&vd_source=8942f873a5ef47b39a3314c7efe9db4e

五.版本管理工具——git

• 常用基本操作

1. git init
2. git clone
3. git add
4. git diff
5. git commit

参考视频：【狂神说Java】Git最新教程通俗易懂_哔哩哔哩_bilibili笔记资料交流都在我们的平台：www.kuangstudy.com秦疆老师Java进阶系列课程之GIT使用带你走进GIT世界；深入浅出的讲解了GIT使用的全流程以及实战教学！狂神说Java系列，努力打造通俗易懂的教程QQ交流群 : 664386224https://www.bilibili.com/video/BV1FE411P7B3?spm_id_from=333.337.search-card.all.click

六.promise

• 自定义封装
• async与await

参考视频：尚硅谷Web前端Promise教程从入门到精通_哔哩哔哩_bilibili制作不易，大家记得点个关注，一键三连呀【点赞、投币、收藏】感谢支持~本套视频教程由浅入深，通俗易懂，对复杂的实现庖丁解牛，分步拆解，采用闯关式设计，循序渐进的讲解，更具学习的趣味性。课程内容涵盖前端与后端异步编程任务实践，让你宏观认识Promise。课程的五大部分内容：1.介绍与基本使用2.Promise的API3.Promise 中的几个关键问题4.自定义封装5.async和awahttps://www.bilibili.com/video/BV1GA411x7z1?spm_id_from=333.337.search-card.all.click

 七.Ajax

• 原生js发送AJAX请求
• Axios发送AJAX请求

参考视频：【狂神说Java】一小时掌握Ajax_哔哩哔哩_bilibili笔记资料交流都在我们的平台：www.kuangstudy.com秦疆老师SSM框架课程扩展之Ajax学习；从生活到代码，从简单到深入。风趣幽默,通俗易懂。狂神说Java交流群：664386224https://www.bilibili.com/video/BV1Kt411u7BV?spm_id_from=333.337.search-card.all.click&vd_source=8942f873a5ef47b39a3314c7efe9db4e

八.Axios

参考视频：

尚硅谷Web前端axios入门与源码解析_哔哩哔哩_bilibili制作不易，大家记得点个关注，一键三连呀【点赞、投币、收藏】感谢支持~axios是一个基于Promise的HTTP客户端，可以用在浏览器和node.js中，向服务器发送AJAX请求进行数据交换，是现在前端最热门的请求工具。教程由浅入深，内容通俗易懂，强哥为你庖丁解牛拆分细化，逐个知识点击破。不只解析了源码，还带你做源码模拟实现。通过本套教程的学习，你将掌握axios的基本与进阶API的使用、ahttps://www.bilibili.com/video/BV1wr4y1K7tq?spm_id_from=333.337.search-card.all.click&vd_source=8942f873a5ef47b39a3314c7efe9db4e

九.框架 

React全家桶

vue