前端学习方法！

最近发现有很多人都想学习前端，然而大多都是不知道从何入手，一脸的迷茫。所以作为一名已经有一定工作经验的前端工程师，我觉得是时候回报社会，分享一下我

的前端学习方法了，毕竟我也是通过网上各路大神的帮助和讲解，才能走到今天的！

首先，先说说基础。

必须声明，基础很重要。现在网上各路UI框架js框架一大堆，功能各异，看起来都很厉害的样子，就导致一些刚接触前端的，html，css，js，这三大基础性的东西都

没学会就去研究框架去了，然后就是个各种bug，UI框架效果不会改，做出来的和想象中的完全不一样，使用js框架无端报错，明明很对照着敲，却还是错，百度到怀疑人生， 

试到绝望，才终于会一丢丢，原来是少写了东西，函数用法错误，又或者是作用域错了，等等一些奇葩问题，其实这些都是基础不扎实的结果。那么重点来了，怎么才能打好基

础呢？其实很简单，就是在学习的时候就多敲代码，去w3school这个网站看完例子然后就对着dom敲，仿写各种网站，编程工具建议用hbuilder，因为是中文的比较清晰明白

易上手。

1、html和css，你必须清楚十分清楚的了解div，span，p，select，option，ul，li，input，table，form表单，等一些常用的标签都有什么样的特性，块元素还是行

内元素，都自带有什么默认样式怎么清除默认样式等，比如说select的默认样式可以通过appearance：none；清除，然后可以通过background设置新的下拉框背景图片，a标

签的默认样式可以通过text-decoration：none；清除等，然后多仿几张静态页面，比如说做一个电商网页的头部，尾部，导航栏，搜索框，登录框，商品详情，内容详情等，注

意margin负值的使用，了解盒模型，相对定位，绝对定位，固定定位，浮动，清浮动这些常用的写法要懂灵活使用，前期建议就是照着菜鸟教程或者是w3school这些网站上的

例子敲，然后可以在打开网页后按f12看该网页的html结构，想一下他们为什么这样布局，如果是你你会怎么布局，最后相信你肯定会是收益匪浅的

2、js重中之重，初学者没有编程语言基础的同样是建议去菜鸟教程或者是w3school这些网站上，按上面的指示步步敲，首先大致了解js是什么，都有什么数据类型

等，然后从定义变量开始，学会console.log打印调试，for，swich，while循环的不同点，if判断，&&，||，！等运算符的使用，数组，对象元素的增删查改都用的什么方法？

shift（）和pop这两个删除方法的区别，字符串的截取slice()、substring()、substrde这三个常用方法的 用法和区别，去重，换位置，数据类型的转换等等的方法，比如数

组、与字符串的互转可以通过join和split这两个方法，函数的创建，函数的形参实参各是什么意思，函数指针等，什么是闭包，优缺点，面向对象编程与面向过程等，比如

闭包的作用就是捕获并保存函数定义时的环境，使函数能够访问其外部作用域的变量，但外部函数无法直接改变闭包内部的变量，实现数据封装、私有变量和保持状态，为了不使闭包造成内存的泄漏，用完后应清除引用，释放内存等。ajax核心--XMLHttpRequest

对象，如何创建这个对象，然后如何通过它实现与服务器通信等，json数据格式怎么写，json如何转换成字符串等，cookie的使用，通过js对css属性的添加与删除，如何创建

html标签，获取标签类名id等，要知道页面上的大多数运动都是通过定时改变元素位置改变的，也就是通过改变position相对定位left，top的值实现的（以上这些都可以通过

在w3school上找到答案，例子可以通过百度js运动，面向对象这些关键词就可以看到很多的解释和源码了）

3、css3+html5，当你对最原始的html，css，js都有一定的了解之后就可以学习css3和html5这些新属性了，比如说css3的旋转，运动，弹性盒子布局等，html的本

地存储localstrong和存于服务器上关闭浏览器就消失的sessionStorage，视频标签video，音频标签audio、画布canvas（这个学好了可以做很多游戏）、获取用户地理位

置方法getCurrentPosition() 等的使用，这些也可以在w3school上找到实例源码，照着敲有个基本了解就可以自己写一些新东西了，这时你会发现前端是个很有趣的东西

，反正我自学的时候是这样子的。

    最后才是框架，因为如果你基础好的话，你会发现框架很好学，毕竟一切js框架都只是js方法封装合成的一个库，简单说说我对框架的理解，我认为jq是最好最成

熟的，我喜欢它强大的选择器，然后vue是数据处理方面比较小巧且方便的，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提

供驱动。bootstrap是比较多人用的且易上手的UI框架，还有其它的框架，也可以相应的去了解，在我看来jq是最好的框架，就像有人说php是最好的语言一样，莫名的喜

欢，好了不说废话了，继续说重点：框架更新是很快的，为了适应市场需求，我们必须有非常强的学习这些框架的能力，这个能力要么是天赋，要么就只能通过加强

对基础js知识的理解来达到更快学会使用框架的目的，而且js足够好完全可以自己写框架，还有如果仔细看就会发现我在说基础的时候多次提到了w3school这个

网站，我想说的是这个网站是对初学者最好的网站，因为这网站对基础知识讲解得十分详细，且系统化，一步步的十分紧凑，建议多去看，最后js推荐两本书

（”JavaScript权威指南”和“你不知道的javascript”）不懂可以上csdn搜索提问，多逛博客，个人感觉这上面的大神是真多，看看各路大神的见解也是极好的。

特别推荐尤雨溪，阮一峰，廖雪峰这三位大神的博客！

第一次写这种分享文章，后续会提供更多前端路上的知识，希望能帮到各位读者，最后再强调一句，html，css，js这三大基础真的很重要！