前端自学学习路线（新手向）

前端自学学习路线（新手向）

很多想自学前端的人不知道从哪里开始下手，前端需要学哪些东西也不是很清楚，这篇博客就是我个人对从0开始学习前端的路线的一些建议。

基本路线

首先要明白前端最基本的三个工具：HTML CSS JS，建议先从HTML学起，然后CSS，最后学习JS，

HTML是页面，CSS是样式，JS是灵魂，至于这三个具体是什么。。。不懂的直接去百度吧，我就不凑字数了

理由：

• CSS是为HTML服务的，所以先学，JS是对CSS和HTML的操作，所以放在最后面学习

• HTML和CSS比较简单，对于零基础的人也不难掌握，而JS难度比较高一点

HTML

HTML中要学习的就是各种各样的标签，如h系列，还有div，以及表单，表格的使用，这些都不难掌握，多练即可熟练掌握，而这些也是一个页面最基本最重要的东西。

注意：

• 要对每个标签的语义都烂熟于心，标签语义化是很重要的，如h系列是标题，table是表格，form是表单

• 标签不能乱用，嵌套的时候不要弄乱了

• div是没有语义的标签，但是很重要，一般用来当容器。

CSS

CSS是给页面添加样式，使页面更加美观，在这部分主要学习的是各种各样的属性，如height，width，还有各种选择器，如标签选择器，选择器的作用简单来说就是将选择器里的属性加到对应的标签上，在这一部分，浮动，定位可能是比较难一点的地方，不过也是多加练习就能熟练掌握。

注意：

• 添加样式的时候要注意优先级，有些属性没加上很可能就是优先级的问题

• 要注意清除浮动带来的影响

JS

为什么说JS是一个页面的灵魂，因为你掌握了HTML和CSS就可以写出一个静态页面，但是如果你需要给页面添加各种功能，需要动态的渲染数据，或者加一些炫酷的特效，想要前后台交互，这时候就需要用到JS了，从这里开始就会难一点了。学习的时候要有心理准备，但如果你有其他编程语言的基础，你会发现JS比C语言，JAVA简单很多。

首先你要明白JS是由哪几部分组成的

• ECMAscript： JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

• DOM：（document object model 文档对象模型）一套操作页面元素的API

• BOM：（browser object model 浏览器对象模型）一套操作浏览器功能的API

学的话，肯定先学ECMAscript，因为他是JS的标准。首先需要学习的JS的数据类型，然后掌握JS的基本语法。

对数组，对象之类的要弄明白，而基本语法，for语句，if语句都是很重要的，emmm，不能这么说，应该说所有语法和数据类型都很重要。

学完后可以尝试写写冒泡排序，如果你能很清楚它的实现思路，可能你对for语句以及数组掌握的可能就差不多了

然后学习DOM，DOM其实就是操作页面元素的一组API，什么是API？简单来说就是借口，其实就是预先定义好的一些方法，函数，你可以拿来使用实现某些功能。而DOM就是用来操作页面元素的API，什么是页面元素？就是指你的HTML页面，你可以用DOM去操作这个页面，如创建删除标签，修改页面样式

最后学习BOM，BOM是操作浏览器的API，你可以操作screen或者history等。

最后

如果你前面这些都掌握的很好了，就可以去进阶的学习一些框架和一些库。多学些插件，锻炼自己查文档的能力。掌握如jquery，Vue，angular，react，bootstrap这些框架。因为实际开发的过程中，不可能让你直接写原生JS，更多的是使用各种各样的框架，这时候就需要你看文档的能力，快速的掌握一门框架。