前端学习路线

第一步

安装开发工具：sublime（文本编辑器）、webstorm（JS IDE）、Visual Studio Code（web代码编辑器），Hbuilder（我比较喜欢用的国产IDE）。

HTML：理解如何浏览和创建网页、基本的语法规范、常用的标签及属性（包括HTML5新增的标签及属性，如块级标签<nav></nav>等）、网页之间的链接和跳转（三种方式：a标签、link标签、form表单）、标签节点和层级节点。

CSS：基本语法和三种书写位置（行内CSS、内部CSS、外部CSS）、选择器（标签选择器、id选择器、类选择器）和格式化排版（利用块级元素以及定位属性进行排版）、盒模型的高级用法（padding、margin以及元素大小）、常用布局模型（流动模型、浮动模型、层模型）。

JS：基础语法以及变量（所有变量都用var定义）、数据类型和数据类型转换、条件判断（if、switch）、循环语句（while、for）、函数（函数的定义方式、js的内置函数）、数组和集合等js的内置对象。

第二步

DOM（文档对象模型）+BOM（浏览器对象模型）：DOM的基本结构（父子关系、兄弟关系）、节点对象操作（getElementByName、getElementById等）、事件的特性及使用（change、click、blur等）、常见的DOM内置对象（alert、confirm等）、常见的BOM功能（open、close等）。

网页特效与进阶：在网页特效中常用的编程接口（onFocus、onSelect等）、动画编程（onload、hover等）、事件对象和冒泡（useCapture）、缓动框架封装（参考：https://www.cnblogs.com/yongshaoye/p/7102644.html）和旋转木马案例（参考：https://www.cnblogs.com/forlina/p/4313065.html）、正则表达式及其应用。

Jquery：选择器、基本操作API（中文API网址：https://www.jquery123.com/）、插件机制（jQuery.extend()：扩展对象方法）、原理分析（参考：https://blog.csdn.net/liupc123123/article/details/2661

4337）。

第三步

HTML5+CSS3：语义化结构、多媒体、本地存储（HTML5连接本地数据库）、常见API（HTML5：http://www.dcloud.io/docs/api/index.html、CSS3：http://phpstudy.php.cn/css3/）、CSS3选择器（参考：http://www.w3school.com.cn/cssref/css_selectors.asp）、CSS3边框、背景、阴影、CSS3过渡和动画（参考：https://blog.csdn.net/XIAOZHUXMEN/article/details/52003135）、CSS3伸缩布局（参考：https://www.cnblogs.com/fxycm/p/4649648.html）、Canvas（画布元素）。

服务端编程：端的概念、web服务器的概念、服务器搭建（参考：https://www.cnblogs.com/W-Kr/p/5455862.html）、XML与json。

PHP：PHP基础语法（参考：http://www.w3school.com.cn/php/php_syntax.asp）、PHP服务端编程基础（参考：https://www.cnblogs.com/hope666/p/6919487.html）。

AJAX：基本编程接口（参考：https://blog.csdn.net/u013279840/article/details/52786348）、异步数据交互（参考：https://blog.csdn.net/bug_money/article/details/54645396）、模板引擎的使用（参考：https://www.cnblogs.com/sw1990/p/5851377.html）。

借鉴：https://www.cnblogs.com/chengjian-physique/p/8076356.html