结合个人经验总结的介绍方法，总结从零基础到前台基本功的道路、学习方法和资料。 因为能力有限，不能保证一切。只是给初学者一个参考，让初学者少走弯路。 随着互联网的快速发展和激烈竞争，客户体验成为重要的关注点，导致专业前端工程师成为热门职业。各大公司对前端工程师的需求非常大，要求也越来越高，优秀的前端工程师非常稀缺。 个人感觉前台入门相对容易，但是打好基础后系统学习，坚持学习，成为优秀的前台工程师只是时间问题。 学习任何知识最重要的是兴趣。如果学了一段时间不喜欢，强迫自己学可能会很痛苦，效果也不会好。毕竟这很可能是未来很多年生存的技能。 但是随着互联网行业的发展，前台一定是Web开发人员需要学习的知识，有时候没有专业的前台工程师来配合，所以即使不做专门的前台工程师，掌握基本的前台技能也会给工作带来便利。 必备技能以下是我认为自己在入门阶段应该掌握的基本技能:HTML4、HTML5语法、标签和语义。 CSS2.1，CSS3规范，结合HTML实现各种布局和效果。 Ecma-262定义的javascript的语言核心，native client javascript，DOM操作，HTML5新增函数。 一个成熟的客户端javascript库，推荐jquery。 一种服务器端语言:如果你有服务器端开发的经验，可以用你已经会的语言。如果没有服务器端开发经验，熟悉Java可以选择Servlet，不熟悉可以选择PHP。如果能实现简单的登录注册功能就足够支持前台开发了，后续可能还需要继续学习。最基本的要求是实现简单的功能模拟。 掌握以上基本技能后，你就可以快速学习工作中需要的技能。 开发基础工具合适的工具可以有效提高学习效率，专注于知识本身，在问题出现时快速定位并处理。以下是我认为有必要的前端开发工具:文本编辑器:推荐Sublime Text，支持各种插件、主题和设置，简单易用。浏览器:推荐谷歌Chrome，可以快速升级。为前台各种标准提供了非常好的调试工具:推荐Chrome自带的Chrome develop tools。可以轻松查看DOM结构和样式，通过控制台输出调试信息，调试javascript，查看网络和其他辅助工具:PhotoShop编辑图片，选择颜色，测量fireworks的大小。AlloyDesigner比较大小，还有之前的Chrome develop工具，FQ工具:灯笼，壁虎行走学习法，学习目标法:入门阶段反复阅读中文版经典书籍，书中每个例子都是用手实现，在浏览器中查看效果。 有了积极的基础后，可以在网上搜索各种教程和demo，了解各种函数的实际用法和常用函数的实现方法。 阅读HTML、CSS、Javascript标准，全面提升知识点 多看前台人的博客和文章，提高对知识的理解。 善用搜索引擎 目的:对之前知识点中的重要概念进行记忆，结合自己的学习经验得到自己的理解。 熟悉常用功能的实现方法，如常用的CSS布局、Tab控件等。 入门之路在整个学习过程中，HTML CSS JavaScript很多地方会需要互相结合，在实际工作中也是一样。简单的功能模块需要三者结合才能实现。 这是动手学习的重要组成部分。书本重在讲解知识点，例子可能不够充分。所以要用搜索引擎找到少量简单的教程，跟着做实现功能。 以下是几个不错的教程网站。可以搜索各大公司前台校招笔试面试问题作为练习题或者别人总结的前台面试问题和个人总结的面试问题(有参考答案)。 原生javascript是一个需要掌握的技能。在掌握原生javascript的基础上，建议掌握jQuery，在实际工作中非常有用。这方面的书包括学习jQuery或者去jQuery官网的。 建立一个账号，保存平时学习中的各种代码和项目。 在你有了积极的基础之后，你可以建立个人博客，记录学习过程中遇到的问题和解决方法，这样你就可以为自己咨询，也可以帮助别人。 经常实用地用谷歌搜索英文资料应该总能找到来自http://stackoverflow.com/,的高质量答案，你可以直接在这里搜索问题。如果你有精力的话，注册一个账号为别人答疑解惑，也可以大大提高你的个人能力。 看完经典书籍，可以打开上一节必备基本功的链接。 认真阅读相应标准，全面掌握知识。 目前在做前台开发。如果你现在想学习前台开发技术，并且遇到任何关于学习方法、学习路线、学习效率等方面的问题。入门过程中可以申请加入我的前台学习交流裙::603: 985: 993。 有少量初学者裙档正在自学前台。还有少量我在做前台技术期间整理的前台学习手册、前台面试问题、前台开发工具、PDF文档、书籍和教程。如果需要，可以自己下载。 有了之前的基础继续提升之后，前台基本就是入门了。这个时候每个人心里可能都有少量的学习方向，如果还是没有的话。 可以参考上一部分必备技能中提到的两项，从中选取少量进行开发学习。 以下是几个好的方面:Grunt:前台自动化工具，提高工作效率less css:优秀的css前置解析器bootstrap:优秀的CSS框架，对于没有设计师的团队来说非常好，结合less就能完美工作。requirejs:AMD标准模块加载器，Node.js，前台模块化趋势的必备工具:Javascript也可以做后端，AngularJS:单页面应用移动web开发的好工具:智能手机的普及使得手机上的流量逐渐赶上了PC端的JavaScript。内存管理:SPA的长期运行需要注意内存泄露的问题。高性能JavaScript(Build faster application interfaces)加速你的网站的最佳实践:重要技能的语言基础JavaScript:作用域链、闭包、运行时上下文、这个原型链、继承NodeJS基础和通用APICSS:选择器浏览器兼容性和破解CSS布局的常用方法和原理(box model、BFC、IFC等。)CSS 3，比如动画，渐变等。HTML:语义标签。还有一些东西不是敲代码就能搞定的。实习的时候感触良多。这些都是我遇到过的，感觉自己做的不好的事情。我对商业的思考:我在这方面非常缺乏，所以我把它放在最前面。在打字之前，我要多思考业务沟通和沟通技巧。这一点非常重要。前台需要同时和项目经理、产品、交互、后端打交道。沟通不畅会导致很多无用功，耽误项目。 知识管理和时间管理:输入和输出的平衡，输出是最好的输入。 如何做好推荐人，参与社团，做好沟通，做好记录？ 对新技术的渴望和尝试的勇气。 啃书可以入门，但是书上很多东西都过时了。在啃书的同时，要时刻关注技术的新动向。 下面是几本我觉得不错的书:《JavaScript高级编程》:可以作为入门书，但也是进阶书。可以快速吸收基础，等提升了再回来重读JavaScript权威指南:不适合入门，但很有必要。如果你什么都不知道，就去查。非常有帮助的《编写可维护的JavaScript》和:《Node.js开发指南》:一本很好的Nodejs入门书籍《以简单的方式》:Nodejs高级书籍，必备的JavaScript异步编程:了解JS异步编程概念JavaScript模式和JavaScript设计模式:JavaScript代码模式和设计模式，把开发思维变成JavaScript，一本非常好的书JavaScript框架设计:使用轮子的时候，要知道轮子是怎么转的。详细讲解，从源码层面讲解框架各部分的实现，用一个已有的框架阅读，可以学到很多东西。不要让我思考:网页设计的概念，理解客户行为，非常好。CSS禅园:经久不衰的一本书，它也传达了网页设计的理念和设计中应该注意的问题。高性能JavaScript和高性能HTML5:强调性能的书籍。不仅有性能优化，还有很多原理层面的东西值得学习。HTML5 canvas核心技术:我正在看的一本书，对于canvas的使用，动画的实现，以及动画框架的开发，都很有帮助。HTTP权威指南:HTTP协议是必须的，前台开发调试时经常会涉及到响应式网页设计的知识。技术本身并不难，重要的是响应式网页的设计理念，以及移动优先的思想，JavaScript语言的精髓:一本旧书，一本普及JavaScript开发思维的好书。非常适合入门。几个不错的网站github:没什么好说的。多看别人的源代码，多上传自己的源代码，向世界各地的大牛学习codepen:感受前台之美的必去之地。里面有很多很酷的效果和优秀的插件:echojs: stackoverflow和segmentfault，快速了解js新资讯的网站:基本上各种问题都可以在上面回答。Google Web Foundations:每篇文章都适合仔细阅读静态文件:打开CDN，非常好用iconfont:阿里的矢量logo库，很不错。它支持CDN，支持项目html5 rocks:一个很好的网站，很多浏览器的新功能和前沿技术。可以找到文章css招数:如何灵活使用CSS，了解CSS的新特性。这里可以满足你的JavaScript秘密花园，新手必看。非常好。w3cplus:一个前台学习网站，里面的文章质量相当不错。节点学校:一个不错的节点学习网站，learn git分支:一个git学习网站，互动性很强。前台炖菜:一个前台文章参考的社区，里面有很多关于正则表达式的优秀文章:《正则表达式入门教程》，很值得一看各路大牛的博客:太多了，就不贴了。知乎上各种各种规格的官网都有，不知道什么时候看标准前台的定位。前台的定位关系到你需要吸收什么样的知识和技能，决定了你在技术界需要对什么特别敏感。 如果你认为前台只是停留在切页满足交互和视觉的要求，那么你对前台的认识还处于初级阶段。 在阿里面试的最后，我问了考官这个问题:前台技术日新月异，范围不断扩大和拓宽，标准越来越丰富。似乎任何天线都可以伸出很远。 如何给前台一个合适的位置？考官给我分析了半天，然后总结成一句话，就是客户和网站的链接，客户体验的创造者(原话不是这样，但大致意思就是这样)。 也就是说，前台的最终目的其实是创造客户体验，提升客户体验，关注客户体验。 无论你是从交互设计、性能优化还是提高工作流程效率开始，你最终都是在努力创造和提升客户体验，最终你都要展示出来。 我觉得这个总结很有道理(当然“客户体验”这个词太宽泛了，不仅仅是前端工程师的范畴。比如开发后端，优化了一个数据解决流程，提升了整体性能，这也是对客户体验的提升) 现在的前端工程师，必然会接触到很多比切页、实现视觉需求、实现交互等更深层次的问题。，比如前端自动化、图像编程、性能优化等。，然后再往后推一点到PHP/JSP/ASP/nodeJs。在过去，背景模板一般属于背景类别。现在，随着前端架构的发展，可能会要求您编写后台模板的代码。需要使用后台语言(PHP/Java/C#等。)，也就是所谓的大前台(不过，这和前台的定位并不相悖。大前台还是解决与客户接触的部分，优化客户体验) 也许最常见或谈论最多的是node。其实这些技术都是可以选择的。bat三家公司中，据说百度用PHP比较多，阿里用node比较多。 以上是我对前台的粗浅认识和衍生的技术路线。学习一个领域，掌握其整体趋势是相当重要的。