前端学习路线-k6k4.com

前几日微信小程序开始内测的消息一出，很多人就预测前端技术人才会越来越吃香，在此简单整理一下前端学习的基本路线。下图是我网上下载的一个思维导图：

第一阶段：HTML

超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，我们必须掌握HTML的基本结构和常用标记及属性。HTML 的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味。

第二阶段：CSS

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。

第三阶段：JavaScript

JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等，使我们的页面看起来不那么呆板。但做出来的效果在有些平台不兼容。因此还需接下来的学习阶段。

第四阶段：JQuery

jQuery 是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便快捷，大大节省了我们开发的时间，提高了开发速度，这也充分体现了其 write less,do more的核心宗旨。

第五阶段：Bootstrap

前端开发，有很多重复操作，可以将每一个单独部件模块化，当需要的时候组合在一起就可以。因此就需要学习前端框架。

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。

第六阶段：响应式布局

响应式布局需要自己就结合所学知识练习总结经验。

附上几个学习前端的有用的网站：

1、 http://www.w3schools.com/

2、 http://www.w3cfuns.com/

3、http://htmldog.com/

4、 https://www.webdesign.org/

5 、http://www.webdevelopersnotes.com/

6、http://www.htmlcodetutorial.com/

7、http://jquery.com/

8、http://www.echoecho.com/javascript.htm

9、http://www.webappers.com/

10、http://www.tizag.com/

11、http://htmlite.com/

12、http://www.academictutorials.com/

个人资料

Lily
等级：6
文章：24篇
访问：1.3w
排名： 17

推荐圈子

前端技术