零基础的前端开发初学者应如何系统地学习？

来自：知乎

链接：http://www.zhihu.com/question/19834302

A：学习背景

开始网站开发，起先是从手机网站的UBB语法开始的，也因此有了深入学习的兴趣。为了让学习的热情膨胀，我有意的培养这一爱好 ，定位了自己要成为一名优秀的网站开发员的目标。

作为一名只有高中水平的零基础初学者，周围也没有掌握相关知识的朋友，打算自学的我只有通过google,baidu来了解要学习网站开发所需要的知识点。
目前掌握的知识点

了解到网站分为前端和后端。

前端方面：由于我是从UBB语法上开始的，我一开始就选择了学习的XML，后来学到，schema的一知半解，到后来的DOM就出现了瓶颈，于是放下这个开始学习HTML，CSS,可是一直都觉得简单，也就当看电影一样一气呵成，便开始了学习Javascript，一直坚持到了自己能编写一些简单的效果，也在这里进一步的了解了DOM，此时我觉得可以进行一些进阶级的网站效果设计，可是忽然发现我对HTML+CSS原来是如此不堪，我并不能很好的用它们去编排内容，更或者说我连从哪下手去设计都不知……为此我迷茫了很久，又回过头来学习一遍，我才发现自己脑子里的知识点是一片混乱！

由于我是断网自学（手机上网看文字的内容还是很方便的），原因是为了不让自己在网络上分散了学习上的那份专注。所以对于图片等素材是很是欠缺的。我也知道前端对于熟悉PS，AI，Flash等图行工具很重要，可是我看了这么多教程，就是找不到学习的窃门，只能对图片进行一些简单处理，Flash更是难点重重，我就一直想不明白，用鼠标键盘怎么画出那么好看的动画。。。。。。

后端方面：我选择了PHP，MySQL。由于前面学Javascript的经验，学PHP也不是很难，学完了一些基础语法，MySQL也了解了建库建表，可就是一直没用过，这也是因为前面的知识点一直没找到突破口，所以也就没打算怎么去深入学习后台知识。

B：问题

一、怎样编写标准的HTML+CSS，对于这些规范的标准很是不解，对于编写代码(包括js，php)有哪些好的习惯?我一直没有给自己写的代码注释，也许是目前自己写的都是太简单了。

二、从Javascript , xml 上我都对DOM这一知识点上了解不深，是不是一种面向对象的知识，我该怎么去形象通俗的了解面向对象？

三、我该如何去系统的整合我现在的HTML+CSS+Javascript+xml+PHP+MySQL的知识，或者说是如何系统的学习，作为一名单独的自学者，我很是迷茫这一点！???

四、图形工具（PS,AI,Flash）方面，有没有一个好的学习建议或窍门？

五、从未来的互联网发展趋势来看，还有哪些知识点是网站开发者需要掌握的?

C：后记

个人对自己的点评：1）可能是约束力不够，搞得知识面混杂。2)有点好高骛远了，基础没劳固就想开发？3)急功求成，对于一个23岁没收入的青年来说，如果不能早日学成，是个很可怕的事，压力啊！

在此我也讲讲发这一篇像博文般问题的原由，知乎作为中国首家专注社交问答类的网站，我认为这必然有它的出彩之处。这里牛人前辈也是特别的多，所以我想单纯的提出问题，还不如上百度算了，这里提倡社交式的问答，问题问的不止是要答案，还要是着重于社交这一点，所以我加入了对问题背景的产生，更好的让人了解了我的现状，对回答应该有所帮助。

同时我也是想着能否找到一些与我一样的初学者，相互提高；或者是偏重图形工具的人能与我形成互补，希望以后能有合作的机会。

------------------2014年9月22日----------------

坐在一个完全与编程无关的职位上，我对着电脑，想了好久，这个问题的发出两年多了，让我认识了好多朋友，大部分都是在校的学生，你们都正当年，我很开心看到你们这么热情的学习心态，同时我也想让其它更多看到这个问题的人，好好珍惜学习的机会。我是没有适当的条件的，我没有在编程开发这条路上坚持到我成长成为一个工程师。现在的我依然感到有点惋惜，因为，我即将开始一场属于自己的事业，必然的选择了与互联网，网站开发建设有关，呵呵，大家也别笑我没这能力还去搞这玩意，具体我做什么的就不在这里表露了;。

顺便说一下，有心找我学习编程知识，共同进步的人，可能要失望了，但是，这些都不会阻碍我们能成为朋友，而且从社会经验来讲，我这草根人物，很多经验会适合很多人，有兴趣的不妨也可以问一下。联系我邮箱就行。

在此最后，真心感谢用心回答这个问题的答主们，您们辛苦了！感谢您们为这么多迷茫在这条路上的学习者提供了这么好指引，声明，我不是来骄情式的感恩，我是诚心的，没有饿过的人，永远无法知道饥饿者对给他们一块面包的人那种感恩的心。

还有一些回复，一些点赞的事，我就不锦上添花了，希望能理解。谢谢。

张帅，大前端

网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：

基础知识：

1、html + css 这部分建议在 w3school 在线教程 上学习，边学边练，每章后还有小测试。 之后可以模仿一些网站做些页面。

2、javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。

进阶：

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、css。截至今日（2015.12.08），天猫、淘宝、支付宝都已停止对ie6,7的支持，未来相信大多数网站都会停止对ie6，7的支持，ie8的市场份额也不像两年前那么高了，webkit内核已成为市场主流。对于css的学习，我推荐分三块：“基础概念”，“css2.1规范”，“css3规范”。必看 精通CSS（第2版） (豆瓣)，看完这本书你应该对：盒子模型，流动，block，inline，层叠，样式优先级，等概念非常了解了。这本确实有些年头了，但基础概念部分讲述非常清晰，可以称之为经典。ie6，7相关的内容可以不看。css3的部分可以参考：CSS3实用指南 (豆瓣)。这本书同样有些老，只是最新出版的书中没发现有特别好的。
2、javascript。上面提到内容还不足以让你胜任js编程。在有了基础之后，进一步学习内容包括：
a) 框架。推荐jQuery，简单易用，在w3school简单学习js后，直接上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与web开发学习的精髓部分。补充： 可以使用 codecademy 学习 javascript，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b) javascript 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《object oriented javascript》，应该有中文版。对与函数式编程可以参考这篇文章：JavaScript 中的函数式编程实践
c) javascript 语言内部机制。必须弄清如下概念：js中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this'指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。另外，你必须理解json。

d) dom编程，这个web前端工程师的核心技能之一。必读《dom编程艺术》，另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。

e) ajax编程，这是另一核心技术。ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对ajax有良好的封装，编程并不复杂。

f) es5, es6。现在开发js大部分基于es5的，ie8以下通过es5-shim。但利用一些工具，现在已经可以直接写es6代码了，尤其在reactjs，nodejs类型的项目中。对于从es5，es6每个阶段js发生了哪些变化都需要系统学习，学习顺序建议是 JavaScript基础 -> es5 -> es6，越靠前的越重要。一些参考链接：ECMAScript 5 compatibility tableECMAScript 6入门ES5 ? 张鑫旭

3、html5。需要了解html都提供了哪些api，然后项目中用起来。这部分没有什么难理解的，关键在于能用html5解决业务问题。

再进一阶 · 代码层面：

有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1易维护，2可测试，3高性能，4低流量（移动端）。

1、易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是css,html,js。对于js代码，你最好了解设计模式，重构，MVC等内容。

2. 可测性。

3. 高性能。必读《高性能javascript》

4. 低流量。移动端关注比较多。

再进一阶 · 工程层面：

前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用svn和git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用grunt、gulp等前端构建工具。

然后呢？

以上内容只是简单说了前端学习的顺序。前端工程师应该有的知识结构请参考这里：JacksonTian/fks · GitHub

补充：

对于前段开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。
1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。

2、后端。应该说前段工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是php了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如php的ci, yii, yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。

3、Android和ios开发。时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。对于学有余力的同学，应该了解Native开发的基本流程，至少了解到界面构建的技术。

如果你以上内容你都已掌握，想加入一个牛B的前端团队，可以私信我。坐标：杭州·天猫·前端
（以上内容最初发布于2012年上半年，快三年了，修改过几次，我会持续维护，希望对后来人有帮助。加油、共勉！）

彭晟杰，#FIXME

首先你已经不是零基础了。

其实这种事情没有什么捷径，亲自动手，一步一步来即可，不能好高骛远。

Step 1：用 HTML + CSS 模仿几个漂亮的静态页面。当你看到现在大部分的网页都觉得能大概猜到怎样做，并且花时间真的能做出来的时候，即可进入下一步。注意，这个时候请你不要管浏览器兼容性或者太过注意代码的优雅结构，因为没必要。做到能兼容现代浏览器，内容和样式基本完全分离即可。这大概需要半个月到一个月的学习时间。

Step 2：用 HTML + CSS + JS 写几个有交互的页面。例如，你可以写一个漂亮的注册页面，它能够验证各种输入是否符合条件并且有一个用原生 JS 实现的日期选择器（Date Picker）。或者，写一个漂亮的，有动画的相册。注意，这个阶段请使用原生 JavaScript。同样的，兼容现代浏览器即可。这大概需要半个月的学习时间。

Step 3：入门一门后端语言。按照你的情况，就 php 吧。有了上面的经验，php 入门之后，相信你能够做一个漂亮的无用户留言版了。请把数据存贮在文件中，因为你还没有学习 SQL 嘛。这大概需要半个月的时间，如果你学习能力强，一个星期也不是没有可能。

Step 4：入门一个关系数据库。比如说 MySQL。DDL 和 CRUD ，请一定要熟练。恩，这个阶段不要谈什么优化，那是扯淡。现在，你大概可以做一个多用户的博客程序了。这大概需要半个月的时间。

你看，两个半月不到你就可以成为一个初级的 Web 开发者了。博客做好之后，你可以尝试造更多的轮子。比如：带简单的用户权限的论坛程序、简单的记账工具，等等，做你喜欢做的任何小程序都行。在这个过程中，你会变成一个熟练的初级程序员，或者，你为了偷懒，会学会 jQuery，Smarty 等框架。

有一天，你发现你靠写小程序提高不了水平了。接下来就要学习真正的干货了。

• 学习 C 语言。别问我为什么，我就是觉得一个程序员应该要学过 C 语言，牛逼不牛逼是另外一会事儿，况且很多书都是用的 C 语言描述。别光学语法，弄清编译是什么，链接是什么，指针是又怎么一会事儿。
  

• 学习数据结构和简单的算法。你看，你学完 C 语言就能学数据结构和算法了，我难以想象用 php 来描述数据结构和算法会有多么地奇怪。如果你觉得学了之后还是不知道数据结构究竟是什么，有什么用，那证明你还没有真的学到。
  

• 学习一门面向对象的静态编程语言。推荐 Java。学得有多好，就看你花了多少时间了。请务必仔细阅读各类相关书籍，深刻领会面向对象的重要编程思想（不过，切忌迷信面向对象编程）。
  

• 学习操作系统和计算机网络。至少一些基本的概念需要弄清楚，具体的细节，没有必要过于纠结。

Okay...以上都可划为「不求甚解」的阶段，接下来就可以选一个方向（前端，或者后端）「求甚解」了。在「求甚解」的阶段里，我这里就不细说了，也没法儿细说，并且你到了这个阶段，一般是不需要别人告诉你需要学什么了。所以，我只说在进入这个阶段之前，或者刚刚进入这个阶段时，最好去做的一些事情：

看书或文档抛弃中文译本，借助各种工具阅读英文原版。

学习使用 Unix-like 系统。

学会提问[1]。

订阅科技博客，了解业界正在发生什么事情。

Happy hacking！
[1] 提问的智慧：http://www./smart-questions/smart-questions-zh.html

罗奇，phper

张帅的回答令我明确了很多东西，写了一篇文章总结了盒子模型，流动，block，inline，层叠，样式优先级，等概念
有兴趣的同学欢迎阅读指正：http://my.oschina.net/proloki/blog/99457

董飞，Learning without limit

其实前端我接触的并不多，但现在不是提倡Full Stack全栈工程师嘛。如果你掌握下面的会让你如鱼得水，不需要被UI,UE人员优先级而影响。

• Ruby on Rails：在web2.0时代，RoR一下子获得很多创业公司的青睐，开发者将Rails作为一个框架来创建数据库支持的Web应用，它本身是一个完整的解决方案，通过默认的标准实践（convention）可以很大的加快开发效率，无缝的整合所有子组件以提供给开发者一个统一的接口。当时Twitter早期也是用这个框架写的，但这个也是双刃剑，在性能和内部机制上很难调节。

• Django：Python的前端管理框架，直接生成管理页面。有人经常那上面的作为PK相比于 Django、Pylon 等 Python 框架，Ruby on Rails 是否有很大的技术优势？
  

• Smarty：PHP的一种模板语言，很容易上手。
  

• Bootstrap：Twitter提出的HTML，CSS和JS框架，让你的web app容易适配到各种平台，比如手机上。
  

• JQuery：Javascript的最流行的库，可以做一些Ajax调用。
  

• HTML5：就是下一代的HTML标准，增加了一些兼容的便签，使得在手机和浏览器中阅读效果一致。对应的是Native APP，就是原生的从底层开始写的APP。当年Facebook是走HTML5的路，发现不对劲，性能很差，体验糟糕。赶紧转变成Native APP才让它重新赢得市场。
  

• Node.js：js写的后端服务器，处理高并发场景性能佳，使用 Node.js 的优势和劣势都有哪些？ 特别适合移动的服务器端。 Socket.IO是其中一个组件，为了在浏览器和移动设备上创建实时应用而产生的，它可以模糊不同传输机制之间的差异
  

• D3：各种可视化的效果，确实非常酷。
  

• Impress：js基于CSS3转换和过渡、工作于现代浏览器、并受prezi.com的理念启发的演示工具。
  

• Backbone.js：前端的MVC，为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。

• Meteor：一个构建在 Node.js 之上的平台，用来开发实时网页程序。Meteor 位于程序数据库和用户界面之间，保持二者之间的数据同步更新。因为 Meteor 是基于 Node.js 开发的，所以在户端和服务器端都使用 JavaScript 作为开发语言。而且，Meteor 程序的代码还能在前后两端共用。

黑猫，http://

对于你说的 “图片等素材是很是欠缺的。”我觉得这个不是阻碍。
不必去精通PS，现在的网页除了那种设计感强的宣传页，其实对图片的要求并不高，需要的时候用用PS就OK了，要求高的可以交给专业美工。
但是对于设计理论，配色排版知识等还是有必要去深入学习，多看看国外优秀设计，上上花瓣之类的网站。所以希望你不要闭门造车，还是去牵一根网线吧。
框架了解即可，只要你熟悉了js，框架什么的上手还不简单？框架屏蔽简化了很多东西，比如ajax的实现原理，建议去深入下，这部分涉及到的东西比较重要。学习还是要把基础打好。我就见过很多用jQuery的人，基本原理都搞不清楚，脱离框架连选择元素都不会，这样自然是不可取的。
面向对象这一块，对于没有面向对象语言实战基础的人来说是不知道怎么去学。这个就可以去学别人的库，看别人是怎么使用面向对象的，了解这样的好处，然后自己模仿模仿。
一定要善用开发者工具。firefox的firebug和Chrome的F12都是很好的选择，用好了这个必会发现他带给你的帮助比看一本书更多。你把firebug摸透了你还担心对DOM理解不够？
考虑到未来，html5和css3是必须学习的。