1、HTML/HTML5基础：

《Web标准实战》 比较简单，适合入门

《Web标准设计》

《深入浅出HTML》

HTML基础没必要看什么书，只要看看基础视频，代码打熟就好了，其实不论是不是基础，学的知识点都要通过敲代码来牢记以及熟悉。

2、高健壮性CSS

2.1、学习基础知识，包括大部分常用属性、选择器的用法，要对大多数标签有个基础概念,在日常使用的基础上，尝试学习浏览器兼容性问题，要知道兼容性的主要问题及解决方法

2.2、深入理解盒子模型，区分块级元素、行内元素，有几个比较重要的属性：display、float、position，一定要弄清楚区分盒子、行内盒子的概念另外可以考虑学一些预编译语言：sass、less，都很简单

2.3、学习常用框架，可以使用bootstrap构建项目

2.4、学习框架的代码组织方式包括：12格栅系统、组件化、组件的风格化等

2.5、学习CSS 3的新功能，特别是动画效果、选择器

2.6、认真学习一些CSS对象化思想，学习编写简洁性、高复用性、高健壮性的CSS

2.7、有空的话，可以看看所谓的扁平化设计，还有简洁性

2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念学习方法：

1、多看别人的代码，一些设计的不错的网站就是很好的学习素材

2、一定要学会使用grunt、gulp压缩CSS

3、display + position + float 可以组合出很复杂的效果，多想想盒子模型

4、尝试在不用float，且position不为absolute的情况下实现等高、等宽等布局推荐书籍：

1、《图灵程序设计丛书:HTML5与CSS3设计模式》

2、《Web开发技术丛书:深入理解Bootstrap》

3、《高流量网站CSS开发技术》

4、《CSS设计彻底研究》 这个一定要

5、《Web开发技术丛书:深入理解Bootstrap》

6、可以找一些专门讲SASS的书，但是我没找到

7、《CSS权威指南(第3版)》

3、深入学习JS

3.1、重新学习JS语法，注意：表达式（特别是函数访问表达式）、语句、类型（包括类型判断)注意，这个时候主要倾向于“原生”JS哦，不要使用框架

3.2、深入理解JS的“一级函数”、对象、类的概念,学会使用函数来构造类、闭包，学会用面向对象的方式组织代码

3.3、深入理解JS的作用域、作用域链、this对象（在各种调用形式中，this的指向）理解函数的各种调用方法（call、apply、bind等）

3.4、理解对象、数组的概念理解对象的“[]”调用，理解对象是一种“特殊数组”理解for语句的用法深入理解JS中原始值、包装对象的概念（重要）

3.5、学习一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，加分点有：backbone、angularjs、ejs、jade通过比较多个框架的使用方法，想清楚“JS语言极其灵活”这一事实总结常见用法，提高学习速度学习模块化开发（使用require.js、sea.js等）

3.6、适当看一些著名框架的源码，比如jQuery（不建议看angularjs，太复杂了）重要的是学习框架中代码的组织形式，即设计模式

3.7、了解JS解释、运行过程，理解JS的单线程概念深入理解JS事件、异步、阻塞概念

3.8、理解浏览器组成部件，理解V8的概念学习V8的解释-运行过程在V8基础上，学会如何提高JS性能学会使用chrome的profile进行内存泄露分析学习方法：

1、提高对自己的要求，要有代码洁癖

2、适当的时候看看优秀框架的源码，特别是框架的架构模式、设计模式

3、多学学设计模式

4、学习原生JS、DOM、BOM、Ajax推荐书籍：

1、《O’Reilly精品图书系列:JavaScript权威指南(第6版)》 必看

2、《JavaScript设计模式》

3、《WebKit技术内幕》

4、《JavaScript框架高级编程:应用Prototype YUI Ext JS Dojo MooTools》

5、《用AngularJS开发下一代Web应用》

6、《精通JavaScript》 第三部分非常好

7、《JAVASCRIPT语言精髓与编程实践》 这本书对原型和继承做了非常精辟的解释，网上大部分关于原型的文章都是参考此书的。

8、《悟透javascript》 这本书第一章是介绍原型和继承的，第三章也介绍了跨域的一个解决方法，还有就是作者对程序和人生的理解哲学很有深度。

9、《JavaScript权威指南》 这本书就不用说了

10、《高性能网站建设指南 》 这类书有两本不同版本，都是关于web性能优化的

11、《JavaScript语言精粹》 进阶的好书

12、《JavaScript设计模式 》 进阶的好书

SEO;

《SEO教程：搜索引擎优化入门与进阶》 这本书有些地方我认为说得不大确切，但是总体还不错。

6、跨终端

6.1、理解混合APP的概念

6.2、理解网页在各类终端上的表现

6.3、理解网页与原生app的区同，重在约束

6.4、理解单页网站，特别要规避页面的内存泄露问题

6.5、入门nodejs，对其有个基础概念，知道它能做什么，缺点是什么推荐书籍：

1、《单页Web应用:JavaScript从前端到后端 》

2、《Web 2.0界面设计模式》

3、《响应式Web设计:HTML5和CSS3实战》

4、工具学会使用grunt进行JS、CSS、HTML 压缩，特别是模块化js开发时候的压缩会用PS进行切图、保存icon入手sublime、webstorm学会使用chrome调试面板，特别是：console、network、profile、element

进阶：

4、性能

1.1、理解资源加载的过程包括：TCP握手连接、HTTP请求报文、HTTP回复报文

1.2、理解资源加载的性能约束，包括：TCP连接限制、TCP慢启动

1.3、理解CSS文件、JS文件压缩，理解不同文件放在页面不同位置后对性能的影响

1.4、理解CDN加速

1.5、学会使用HTTP头控制资源缓存，理解cache-control、expire、max-age、ETag对缓存的影响

1.6、深入理解浏览器的render过程推荐书籍：

1、《Web性能权威指南》

2、雅虎网站页面性能优化的34条黄金守则

5、HTTP及TCP协议族

2.1、学习http协议，理解http请求-响应模式

2.2、理解http是应用层协议，它是构建在TCP/IP协议上的

2.3、理解http报文（请求-响应报文）

2.4、理解http代理、缓存、网关等概念，指定如何控制缓存

2.5、理解http协议内容，包括：状态码、http头、长连接（http1.1）

2.6、学习http服务器的工作模型，对静态文件、CGI、DHTML的处理流程有个大致概念推荐书籍：

1、《HTTP权威指南》

2、《TCP/IP详解》

3、《图解TCP/IP(第5版)》

最后把学习web前端分几个阶段

第一阶段：HTML网页开发

简介

• 通过学习html基础知识点，结合案例演示，进行实战项目，制作pc版页面和手机响应式页面

• 了解企业网页开发流程、代码书写的规范标准、网站性能优化、浏览器各版本兼容等问题处理

实战项目

• 主流平台前端项目

涉及知识点

• html标签、html5新增标签、css样式、css3样式、媒体查询等

适合人群

• 前端零基础的小白，想学前端但又不知道怎么入门的同学

• 基础不牢固，缺乏系统学习的大学生、转行人士等

第二阶段：Javascript

简介

• 通过学习JavaScript基础变量、运算符、数据类型，函数，DOM高级操作，实现前端的数据处理与响应用户的各种操作

• 学习ajax数据交互，与JSON数据处理，对象解析与面向对象开发，实现网页异步更新

实战项目

• 2018互联网各大名企封装插件，开发组件等

涉及知识点

• jQuery、ajax、面向对象、http传输协议等

适合人群

• 已具备HTML基础知识与JS基本操作的在校大学生、在职程序员、前端爱好人员等

第三阶段：H5高级项目开发

简介

• 基于原生JavaScript之上，学习高级3D应用场景

• H5游戏开发与大数据图形处理

• webapp底层交互设计

• JS-SDK微网站实战开发

• LBS定位系统实战，异步交互与实时通信引擎

实战项目

• 各大主流webAPP开发项目

涉及知识点

• canvas、js高级应用、JS-SDK、H5新增技术

适合人群

• 已具备熟练的前端开发技术，缺乏H5开发经验的在校大学生、在职程序员等

想系统学习的，关注后，回复“系统学习”便可获得学习方案