Web前台基础三剑客学习知识分享

Web前台开发基础知识学习路线分享，前台开发入门学习三大基础：HTML、CSS、JavaScript。除此之外还要学习数据可视化、Vue、React、Angular相关框架，熟练运用框架提升开发效率，提升稳固性。

HTML、CSS、JS三大部分都起什么作用？

HTML内容层，它的作用是表示一个HTML标签在页面里是个什么角色；CSS样式层，它的作用是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示；JS行为层，它的作用是当客户触发某些行为时，会给内容和样式带来什么样的改变。

HTML5+CSS3学什么？

主要是学习少量页面样式布局的内容，分为PC端网页布局和WebAPP网页布局两个方向，其中包括常见块级标签及特点、常见内联块及特点、表格常用属性、表单域常用属性、表单元素常用属性、CSS基础语法、选择器、文字样式、盒模型、CSS背景技巧、浏览器兼容、CSS hack、CSS高级技巧、BFC规范、网页开发规划及流程、CSS3编码规划、2D与3D变换、animation 动画、预解决器Less、Flex布局等内容。

JS学什么？

编写一个静态页面，实现动态效果的话就要用到JavaScript技术，JavaScript可以为网页增加各式各样的动态功能,为客户带来更流畅美观的浏览效果。

主要学习JavaScript核心语法、客户与界面交互、函数表达式、原生函数封装、JavaScript内置对象、数组与排序算法、Math与随机算法、DOM树、JavaScript特效、浏览器兼容解决、Cookie原了解析及应用、正则表达式及表单验证、构造函数、Ajax原理分析及实现、同步异步区别及实现、Ajax前后端数据交互、jQuery简介、jQuery选择器、jQuery CSS操作、jQuery html文档解决、jQuery事件、jQuery动画、jQuery插件操作、jQuery扩展、递归算法、Jquery Ajax等。

jQuery

Html+CSS的内容用以实现页面效果，是前台最基础的知识，Html+CSS这部分的内容，学习了JavaScript知识点后还不能让你胜任JavaScript编程工作，所以在有了相关的基础之后还需要进一步学习才能做好前台开发。

前台学习建议

第一：基础要硬

首先，学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，少量其余的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前台工程师必不可少的一本书，边看边用，理解js的少量基本知识，基本上很全面了，假如有时间可以读少量，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

html5

第二：框架要熟

1.框架搭建

基础差不多，那你应该也会写少量静态的页面了，包括少量样式，js的引入等等。那之后，我是直接学习了框架，框架的学习其实也是一步一步来，首先，可以看少量视频（效率低），或者者博客等等，上手搭建一个开发react/vue等框架，其实这些框架都有脚手架，假如刚开始，可以使用脚手架来搭建，之后有时间可以自己尝试着搭建。

vue技巧

2.框架入门

环境没什么问题后，即可以尝试写一个简单的todomvc，包括少量增删查显示等基本的功能，可以结合少量ui组件，效率更高，假如是react，也要理解生命周期的使用，钩子的使用，再到redux状态传输，再到接口的调用等等。

3.熟练使用

可以简单做一个项目，更加熟练的掌握，同时，这个阶段有精力，也要去看一下源码，例如，常见的虚拟dom的原理，相信前台的小伙伴都知道些。

面试题系列

我目前是在职前台开发，假如你现在也想学习前台开发技术，在入门学习前台的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我所在的前台学习交流裙：前面：42137 后面：4697。里面聚集了少量正在自学前台的初学者,转行者，初阶者，里面也有我整理的少量前台书籍PDF等，文章中的内容感兴趣的可以点此获取~

第三：基本技能具有后

当你差不多都理解后，其实，就要开始学习部署，前台怎样优化，打包，部署，上线的，同时，要理解webpack的打包原理。

总之，是一个从无到有的过程，从搭建到部署，中间的学习的东西很多，我暂时也就理解这么多，前台小伙伴可以参考，找到适合自己的学习方式。