了解更多的前段知识请看下面我精心为您整理的前端必看的书籍，希望您喜欢!

十本学习前端必看书籍

第一本，入门

《Head first HTML&CSS》

最好的入门书。看两遍就对HTML &CSS 有个大概印象了。

此时把w3cschool作为备查手册收藏起来

第二本《CSS权威指南(第三版)》

最权威的CSS书籍，除了阅读W3C的文档外的不二选择(就是翻译有点操蛋，遇到感到难理解的地方可能还是要求助于网络资源)。有时间(无论是现在还是将来)可以反复看，并当做字典随时查。

第三本《精通CSS》

广受前辈推荐的一本书。上一本书是字典的话，这本书相当于《中学生作文大全》，汇集了一些CSS的最佳实践。

第四本《图解CSS3：核心技术与案例实践》

这本书比较新，讲解的是最新的CSS3(前三本书停留在CSS2.1时代)，CSS3也是必学的，不是什么可学可不学的最新技术。

HTML CSS值得看的书就这些(之后会有一本《CSS秘密花园》，尚在翻译中，也很值得期待)，剩下的就是自己写还有看技术博客了。接下来是JavaScript，HTML和CSS都是没有逻辑的标记型语言，JS才是真正的编程语言，评价前端工程师的水平就看这个了。

第五本《JavaScript DOM编程艺术》

最好的JS入门书籍，一目了然地告诉你如何用JS操作DOM(这是浏览器端编程的基本功)，还灌输了最符合标准的编程理念。可惜有点老，最新一版是2010年的，以至于部分内容有点过期，例如本书内经常提到“某某方法浏览器不一定支持，需要小心使用”，而这些历史遗留问题当今已经不存在了，阅读过程中无视就好。

第六本《JavaScript高级程序设计》

每个前端必看的书，此书是前端工程师科技树的关键一环。看完此书后再看看之后各类进阶书籍会比较好。

俗称红宝书，也算入门书籍，虽然是大部头(七百多页)，但至少通读一遍。

全部掌握了，你可以在网络社区里谈笑风生了，经过实践的锻炼后，面试个前端工程师的岗位应该都没问题了。

第七本《JavaScript语言精粹》

也是前端必看。薄薄一百来页，对JS的去粗取精。

第八本《你不知道的JavaScript》

这是一套丛书， 目前为止仅翻译了第一卷。每本都挺薄，深入介绍了JS中的重要概念。

第九本《JavaScript设计模式》

“设计模式”是软件工程的重要课题，相当于高考时候的答题套路。前人总结出来的应对各种问题的模板。也算是必看书籍。关于JavaScript设计模式的书籍目前也有好几本，也有国人写的，挑一两本看看就好。

第十本《高性能网站建设指南》(及其续篇《高性能网站进阶》)

告诉你真正的商业公司的前端是怎么优化一个网站的。当然优化的问题不是看看书就能解决的，最好时刻了解你的同行们的经验。

第一阶段：HTML和CSS的学习

HTML就不多说了，基础中的基础，这个都不会的小伙伴请参见HTML手册，认真学习W3C课程，稍有基础之后可以跟着视频学习《HTML+CSS基础课程》。

　 　前端开发必看的14本书

1、《CSS权威指南》第三版

这本书实在太适合小白用户了，是一本为初学者清扫障碍的书籍。同行一致认为这本书是学习CSS基础的首选。CSS界权威Meyer大师的作品，翻译水平也灰常赞!

2、《CSS那些事儿》

不用于一般技术类书籍的枯燥乏味，这本书很有意思。作者是蓝色理想经典论坛标准版荣誉版主林小志，具有多年网站设计和网站重构经验，在CSS、XHTML等前台技术方面有着深厚功底。

全书以传达CSS布局思维为中心，通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用，使读者能深入了解到如何在页面中更好地运用CSS布局。阅读本书之后将会发现，原来CSS样式居然是这么好玩的东西。

3、《精通CSS：高级Web标准解决方案》第二版

前段学习必备书籍，作者Andy Budd是国际顶尖的网页设计师，著名的Web标准倡导者，网页咨询公司Clearleft的创始人之一。

本书将最有用的CSS技术汇总在一起，总结了CSS设计中的最佳实践，讨论了解决各种实际问题的技术，重点讲解了一系列的css开发技巧，是前端开发人员必备的手册。

4、《CSS禅意花园》

这是一本令人惊叹的书!必须用一个字形容的话，那就是：美!内容编排合理,文字生动有趣引人入胜,通过一个个实例引导读者阅读，强烈推荐!

作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSS Zen Garden(CSS禅意花园)。童鞋们自己去领略吧。

第二阶段——JavaScript的学习

Javascript的书籍当然还是要看老外的，你懂得~

5、《JavaScriptDOM编程艺术》

此书绝对是入门好书，简洁优美的文笔简直是工具书中的典范啊有木有!

这本书讲述了JavaScript和DOM的基础知识，但重点放在DOM编程技术背后的思路和原则，然后将这些概念贯穿在书中的所有代码示例中，使你看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本，最后结合所讲述的内容创建了一个实际的网站。

6、《JavaScript权威指南》第6版

这本书非常适合初级、中级程序员，是学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册。

第6版涵盖HTML 5和ECMAScript 5。很多章节完全重写，紧跟当今最佳Web开发实践。本书新增章节描述了jQuery和服务器端JavaScript。

7、《JavaScript高级程序设计》第三版

《javascript权威指南》比较像一本字典，而这本《javascript高级程序设计》可以算是一本由浅入深的好读物。这两本书看完后，对javascript一定会有较为深入的了解。

作者Nicholas C. Zakas是世界顶级Web技术专家，现为雅虎公司界面呈现架构师，负责My Yahoo!和雅虎首页等大访问量站点的设计。这本书，看一遍不能算看过，至少读两三遍，每一遍都会让你有新的收获。

8、《高性能JavaScript》

本书从性能角度全面分析js，含金量非常大，很多知识都是作者通过实践总结出来的，都是经验的积累，强烈推荐!

同是Nicholas C. Zakas所写，如果看《JS高级程序设计》觉得理解不太透彻，学习较为吃力，那么我强烈建议你看看这本书，真的是极好的一本实践类书籍，言简意赅，灰常实用!

9、《JavaScript王者归来》

这本《JavaScript王者归来》不仅是一本传播知识的书，更是一本求道的书。O(∩_∩)O 有追求的程序员一定不要错过!愿神力与你同在!

它揭开了JavaScript的面纱，绕过误解和虚幻的表象，引领你探索程序王国的奥妙。这是一本探寻程序设计思想本源的“魔法典籍”，也是一本Web开发工程师们需要的案头参考书。

10、《JavaScript模式》

它绝对不是一本入门级别的书，适用于希望将自身的Javascript技巧提高到一个新层次的专业的开发人员和程序员。

《JavaScript模式》包含了实现每个讨论的模式的实践建议，并附有数个可以立即上手的范例同时还可以学到一些反模式。短小精悍，进阶必读!

11、《JavaScript设计模式》

进阶教程，得有一定功底才能看懂。反之，如果你轻而易举就能拿下此书，说明你已非等闲之辈~

本书共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识，第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用，主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。

第三阶段——jQUery的学习

12、《锋利的jQuery》第二版

入门首选，简单易懂，非常实在。《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍，对jQuery分析的逻辑非常值得学习。

第四阶段—学无止境!

如果以上书籍你全都搞定了，那么，恭喜你，你真的很厉害!到这种程度，相信你也不太需要别人推荐书籍了，不过我还是厚着脸皮推荐两本吧。

13、《高性能网站建设指南》

前端开发可以优化网站剩余70%~80%性能，这本书不算厚，几个小时就能看完，推荐前端开发工程师看看。在《高性能网站建设指南》中，作者给出了14条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。

14、《Web开发敏捷之道》第二版

Web开发敏捷之道》曾荣获Jolt大奖“最佳技术图书”奖。在第1版的内容架构基础上，第2版增加了对Rails 1.2中新特性和最佳实践的介绍。此书覆盖了rails1.2的方方面面，其本身也很"敏捷"，翻译也非常好。

   1.首先零基础学习前端先要有一个计划，了解前端要学习哪些技术。

2.做好自己的时间规划，如何快速入门前端那肯定是需要不断的提高自己的学习效率，学习过程中尽量把手机调至静音给自己一个安静的学习环境和氛围。

3.快速入门顾名思义肯定是少走弯路，在学习过程中看下自己身边有没有前端这方面的大神尽量多问，多交流，如果是没有的话，可以多去找一些前端的交流群，学习肯定是不能闭门造车。

学习是一个循序渐进的过程，前端的学习也是如此。

不论前端开发还是后端开发的学习都要求我们多动手，既要反复的看书，也把学习到的知识点第一时间去实践。前端的学习入门快要三个月，慢的要 5-6 个月左右，看个人的理解速度来评估，只要入门了不论理解能力，还是学习的速度都会有明显的提升。

在学习前端的过程中，除了要把学到的知识点第一时间去实践，也要在学习的每个阶段自己创建课题，用所学到的知识去实现课题的内容。这样可以更好有助于理解和累计一定的项目经验。

前端的学习从来不是孤军奋战，需要一个前辈的领路，也需要一个平台不断交流和思维碰撞。这样可以快速入门和少走弯路，也能让自己发现问题的根本所在。

阶段一

在学习前端之前呢，你需要一个编辑器，在网上你可以看到很多编辑器用来编写前端，甚至 Windows 系统默认的文本文档也可以作为前端代码的编辑器。俗话说，没有金刚钻怎么揽瓷器活，所以一个好的编辑器很重要，我在这里推荐给大家的编辑器是 VSCode。

思维导图

前端开发工具

一、HTML+CSS

前端的入门门槛是极低的，主要体现在 HTML 和 CSS 部分，运行环境就是浏览器，不像如 Java 需要配置开发/运行环境。

HTML 和 CSS 不是编程语言，HTML 是结构标签，CSS 是结构标签的样式配置。

HTML

属性

事件

标签

字符集

CSS

CSS基础教程

CSS样式

CSS框模型

CSS定位

CSS选择器

CSS高级

思维导图

HTML+CSS以上内容的学习用时 20天左右，再花 2 天的时间项目实践，这部分总花费时间在 22天左右。

二、HTML5+CSS3

HTML5 作为 HTML 的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。

HTML5 可以使开发者的工作大大简化，理论上单次开发就可以在不同平台借助浏览器运行，降低开发的成本，这也是产业界普遍认为 HTML5 技术的主要优点之一。

CSS3使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版，拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。

CSS3的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。

CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

HTML5

HTML5视频

HTML5音频

HTML5拖放

HTML5画布

HTML5 SVG

HTML5地理定位

HTML5 Web存储

HTML5 应用缓存

HTML5表单

CSS3

CSS3边框

CSS3背景

CSS3文本效果

CSS3字体

CSS3 2D转换

CSS3 3D 转换

CSS3 过渡

CSS3 动画

CSS3 多列

思维导图

HTML5+CSS以上内容用时 10 天左右，这部分内容是在 HTML+CSS 做的升级改进，只需要了解他们的一些特性即可，再结合这些特性做一些小项目加深学习。

请点击输入图片描述

四、JavaScript

JavaScript 是 web 开发者必学的三种语言之一，这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言，不论是概念还是设计。javascript 部分需要我们学习的知识点如下所示：

认识JavaScript

基本语法

变量

数据类型

字符串

数字

布尔

数组

对象

Null

Undefined

5. 函数

内置函数

自定义哈数

6. 运算符

7. 流程控制

8. DOM对象

String

Array

Date

Boolean

Math

Number

9. BOM对象

WIndow

Navigator

Screen

History

Location

10. 综合实例

思维导图

javascript以上内容的学习用时 35天 左右，这里推荐几本 Javascript 的书籍，如下：

《JavaScript 高级程序设计（第3版）》，俗称红宝书。前七章讲的是语言特性，是重点学习的部分，必须需要反复阅读，直至完全理解为止。DOM、事件流、表单、JSON、Ajax 与最后几章也需要重点学习，这是一些常用的 Web API。至于本书的其余部分大致读一下就可以，不做重点要求。

《JavaScript 语言精粹》，俗称蝴蝶书。很薄的一本书总页数就 147 页，花一天时间就能看完，快的话半天就能看完。这本书虽然很薄，但是承载的内容却非常的丰厚和深入。JavaScript是一门有很多坑的语言，所以这本书”取其精华，去其糟粕“就是精粹了。

《你不知道的 JS》非常精彩的一本书，将 JavaScript 的细节一网打尽。

阶段二

这部分内容是对 JavaScript 的补充学习

四、 Jquery学习

1. 基础语法

2. 选择器

基本选择器

层次选择器

过滤选择器

表单选择器

3. DOM操作

查找节点

创建节点

插入节点

删除节点

复制节点

替换节点

包裹节点

属性操作

样式操作

4. 事件

事件绑定

事件冒泡

5. 动画

show、hide

fadeIn、fadeOut

slideUp、slideDown

自定义动画animate

动画回调以及停止动画

6. 常用工具

浏览器及特性检测

数组和对象操作

Layer UI，主要学习栅格布局，图标，动画，按钮，表单，导航，选项卡，进度条，面板，表格，时间线等

7. Ajax

8. Jquery插件编写

思维导图

请点击输入图片描述

二、其他

JavaScript 进阶

DOM+BOM综合演练

网页特效

ES6 进阶

bootstrap

animate.css学习

请点击输入图片描述

以上内容的学习用时 10天左右

阶段三

这部分是框架和前后端交互技术的学习

一、Vue

Vue基础

模版语法

计算属性侦听器

Class与Style绑定

条件/列表渲染

事件处理

表单输入绑定

组件基础、注册

Prop

自定义事件

2. Vuex

State

Getter

Mutation

Action

Module

3. Vue-router

认识路由

动态路由

嵌套路由

编程式导航

路由组件传参

4. axios

认识axios

全局配置

发送POST、GET请求等

思维导图

请点击输入图片描述

二、React

认识React

React元素渲染

JSX

组件

State

Props

事件处理

条件渲染

列表

组件API

组件声明周期

思维导图

三、Node

基础

console（控制台）

crypto（加密）

debugger（调试器）

fs（文件系统）

http（网络）

os（操作系统）

path（路径）

2. 高级

NPM介绍及使用

MVC模式简介

Express框架学习

链接Mysql

链接Redis

项目实战

思维导图

Node

四、webpack

概念

主要讲什么是入口，出口，loader，插件等

2. 入口

单个入口语法

对象语法

常见场景

3. 输出

用法

多个入口起点

高级进阶

4. 模式

development

production

5. loader

实例

配置

6. 插件

剖析

用法

配置

7. 配置

基本配置

多个Target

使用其他语言配置

8. 模块

思维导图

webpack

以上内容用时 两个月 左右

阶段四（扩展部分，了解即可）

一、Mysql

阶段一

认识mysql

安装mysql

创建数据库、数据表

学习常用的SQL命令，完成增删查改

2. 阶段二

学习Mysql关联查询，子查询等

学习Mysql常用函数

学习Mysql分组、分页、排序等

3. 阶段三

学习Mysql高级查询

了解存储过程，自定义函数等

了解Mysql配置文件

二、Redis

认识Redis

学习redis的数据类型

redis常用操作

redis事务

思维导图

数据库

以上内容用时 7 天左右

阶段五

一、项目管理篇

SVN使用

认识svn

安装

生命周期

启动模式

创建版本库

检出操作

解决冲突

提交操作

版本回退

查看历史

分支

标签

2. GIT使用

认识git

安装配置

工作流程

工作区、暂存区和版本库

创建仓库

基本操作

分支管理

查看历史等

标签

github

二、扩展部分

小程序

1. 了解小程序开发流程

2. 视图容器

view

scroll-view

movable-view

cover-view

cover-image

3. 基础内容

icon

text

rich-text

progress

4. 表单组件

button

checkbox

form

input

label

picker

picker-view

radio

slider

switch

textarea

5. 导航

navigator

function-page-navigator

6. 媒体组件

audio

image

video

camera

live-player

live-pusher

7. 地图（map）

8. 画布（canvas）

9. 开放能力

open-data

web-view

ad

official-account

apicloud（移动app开发）

认识apicloud

开发工具讲解

端API

API对象

设备访问

功能扩展

界面布局

导航菜单

小程序模块

云服务对接

4. 云API

数据云API

统计云API

推送云API

云API SDK

5. 小程序模块使用

三、常用框架使用篇

iview （vue框架）

element ui （vue框架）

echarts (百度图标库)

阿里巴巴开源图标使用

Sass学习

Swiper学习

zoom.js 学习

四、综合项目实战

教务管理系统（node+express+mysql）实现

思维导图

扩展学习部分

参考资料：前端学习路线，如何学习前端

---