Web前端工程师学习路线

Web前端工程师不是一个新职业，但无疑是一个热门职业，“DIV+CSS”布局已成了众多网站的选择。那怎样才能成为一名合格的Web前端工程师，Web前端工程师的学习路线又是怎样的呢。

Web前端工程师需要协调协调前端设计师、后端程序员实现网站页面或程序的界面美化、交互体验。如今，HTML5、CSS、JavaScript、JQuery、Ajax是Web前端工程师的核心技术，另外，作为一个合格的前端工程师还需要熟悉互联网交互设计能力、熟悉后端服务器运行环境和数据通信协议、掌握响应式布局框架、Bootstrap、AngularJS等最新的JS框架技术。

基础：HTML,、CSS学习

主要学习HTML标签、属性和事件，学习使用CSS来控制网页的样式和布局。

基础知识点：HTML 基本格式、文本、图像、超链接、表格、列表、表单、框架等；

CSS 基础语法、框模型与背景、文本格式化、表格、显示与定位、动画、过渡、2D/3D 转换、CSS 优化等。

超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。因此，Web前端工程师必须掌握HTML的基本结构和常用标记及属性。

HTML 的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味。

在学习了HTML之后，我们只是掌握了各种“原材料”的制作方法，要想盖一幢楼房就还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化。开始CSS学习。

CSS是英文Cascading Style Sheets的缩写，叫做层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。

同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习，我们就可以顺利完成“一幢楼房”的建设。

进阶：Javascript，jQuery

做HTML5开发，主要使用JS语言，所以学习JS非常有必要，必要时还要学习一些JS库。如jQuery。

基本知识点：JS语法、函数、DOM对象、事件处理等。

JQuery：语法、选择器、JQuery HTML操作、jQuery CSS操作、事件、元素、特效、JQuery Traversing、JQuery常用Plug-in、JQuery扩展、JQuery Mobile

JavaScript是一种在客户端广泛使用的脚本语言，在JavaScript当中提供了一些内置函数、对象和DOM操作，借助这些内容可以来实现一些客户端的特效、验证、交互等，使页面看起来不那么呆板。

JavaScript的兼容性和复杂性有时候的确让人头疼，还好有“大神”做了封装。

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

高级：AJAX ，JSON ，XML

ajax是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax 的核心是 JavaScript 对象 XmlHttpRequest。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成(网络传输速率)。

框架扩展学习：Bootstrap，jQuery UI，jQuery EasyUI ，jQuery Mobile

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。

拓展：

10大H5、Js 3D游戏引擎和框架

22款最佳JavaScript框架盘点

常用开发工具：Dreamweaver，Notepad++，Photoshop

10款Web程序员必备的在线CSS工具

Web前端工程师其他技术：

调试工具：Firebug 

UI 交互设计：Photoshop设计工具、原型工具AP、互联网UI交互设计理论

HTTP协议：服务器端组件原理、HTTP请求（GET、POST、PUT、DELETE等）、HTTP响应、Cookie原理、Session原理、Restful协议

服务端：Java服务器端技术简介及Tomcat服务器、PHP服务器端技术简介及Apache服务器、.NET服务器端技术简介及IIS服务器

响应式布局：使同一份代码快速，有效适配手机，平板和PC设备。

Web前端技术刚入门时比较快，但想要精通在后续学习中速度则会降下来。因为前端工程师在工作中接触面比较光，在知识体系上就有一定的广度，但要成为一个有竞争力的工程师在核心技术上也要有深度，有时就牵涉到取舍的问题。另外，WEB前端技术日新月异，入了门想要有一定的发展就需要不断的学习与调整。

附两张Web前端工程师学习图：

 

本文转载自：http://www.devstore.cn/new/newInfo/4757.html 。感谢作者的无私奉献。