经常看到很多同学在前台学习的时候很迷茫，不知道应该用什么样的学习路线入门，进阶到前台。 每次遇到这种问题，我也会参考自己的学习经验，但是我发现这是一个常见的问题，问题很多。 作为一名程序员，我不能容忍重复无味的工作，所以我会在前台系统的总结和参考我的学习路线，希望对你有所帮助。 前言前台学习是一个螺旋上升的过程。既要反复看书，又要抓紧时间实战。 如果你只看一本书，你会忘记的，所以你必须把阅读和写代码结合起来。 只要努力学习，大概三个月就能走到前台。 之后还给了你进阶路线，帮你提升前台技能。 我把入门阶段和进阶阶段分为六个阶段，并标注了相应阶段所需的大致学习时间。 前台入门前台开发入门主要需要学习HTML，CSS，JavaScript。 之后学习前台主流框架的使用，根据所学内容开发一个实战的小项目。 当你把这些都学了，理解透彻了，你就真的在前台了。 第一阶段:HTML+CSS前台对新手还是挺友好的。由于刚开始学习只需要一个浏览器，所以推荐Chrome。 HTML和CSS可以直接在浏览器中运行，浏览器就是它们的运行环境。 也可以使用编辑器，推荐VSCode，这是前台开发中使用最多的编辑器。 HTML(超文本标记语言)和CSS(层叠样式表)其实都不是编程语言。 HTML的中文名字叫超文本标记语言，其实就是少量的标签。 CSS中文叫层叠样式表，是少数样式的配置。 先学HTML，很简单。 HTML有很多标签，不要在刚入门的时候沉迷于记忆这些标签，你也记不住。 只要你要整体浏览，知道有哪些标签，它们的作用是什么，有一个整体的印象。 css学习过程中千万不要剥离HTML学习。 当你知道了html的重要性(从页面开发的角度来说，它可以看作是后续实现好的css和js编码的基础，相当于程序中的数据结构，一个好的设计可以让你事半功倍)，你才能称得上是一个合格的页面开发。对于新人来说，我建议你不要在细节上花太多的钱，哪怕是记忆和浏览，除了几个关键概念，比如布局，盒子模型，单元。 第二阶段:JavaScript已经学习了HTML和CSS，可以开始学习JavaScript了。 这也是一个至关重要的阶段。 JavaScript主要包括三个部分:语言基础(ECMAScript)、DOM和BOM。如果你是初学者，你会想这是什么，为什么要返回这三样东西。 然后开始学，学完了就知道了。其实也没那么难。 JavaScript这几年变化很快，但初学者要摒弃浮躁的氛围，静下心来打好扎实的基础。 记住:我是初学者，玩的是JavaScript和jQuery。这些工具只使用一个编辑器和一个浏览器，这就足够了。别碰其他东西。阶段3:前台框架入门。学完前台三件，打好大树的基础，就可以开始扩展技能树，学习前台框架了。 目前前台的主流框架主要是React，Vue，Angular。 选哪个框架？可以去知乎或者其他网站搜索，然后根据个人喜好进行选择。 一般在React和Vue中选一个。 React的开发体验更类似于编写原生JavaScript，需要你有很好的JavaScript基础。 Vue引入了模板，并将许多实现封装到API中。你需要记住并调用API进行开发。因为很多都是封装的，学起来比较容易，但是编程的感觉稍微弱一点。 两者都是优秀的框架。新人不用担心选择哪个框架。学了一个，另一个就好学了。 如果你不知道选哪个，我推荐你先学React。 前台进阶成功入门前台开发完成后，将开始进阶部分，主要是加深对各种知识的理解，夯实计算机领域的基础，拓展技能树，提高项目开发和宏观的理解和控制能力。 高级前台需要终身学习。学习永远不会太晚。阶段4:高级语言基础。这个阶段是加深对编程语言的理解，阅读更高级的书籍。进阶必读书籍:你不懂JavaScript，第一册，第二册，第二册:必须买书，涵盖JavaScript的所有疑难问题和细节。 它是一个基于原始GitHub的开源电子书。英语水平高的可以看英文原版。 JavaScript忍者秘籍:必须买书深入讲解JavaScript的核心知识点。 伟大的JavaScript工程师:从宏观的角度，推荐阅读JavaScript语言和前台工程师需要掌握的几个技能。 JavaScript函数式编程指南:学习函数式编程的思想JavaScript函数式编程:也是一本函数式编程思想的好书JavaScript设计模式:学习JavaScript设计模式，推荐读JavaScript设计模式与开发实践:另一本同等权重的设计模式书，推荐读Sharp jQuery:《jQuery》现在很少用，除非是老项目或者某个作家写的小东西。 但是，这本书值得买。学习jQuery的优秀思想，也可以学习它的源代码，对你的进阶很有帮助。 第五阶段:高级框架和学习边界通过第三阶段，你已经掌握了前台框架的基本使用，开发了完整的项目流程。 然后在框架和学习边界的高级阶段，可以学习框架周围的生态，社区总结的优秀组件，以及各种有用的工具库。 自己造几个轮子，用框架搭建自己的开源项目，了解Webpack，Gulp、Babel、ESLint等工具的使用、思路和原理等。带着问题阅读框架源代码，学习性能优化，养成良好的编程习惯，拓展技术边界，学习Node.js等后台相关技能..推荐阅读书籍:以下推荐书籍均为知名书籍，你可以根据自己的技能树选择需要阅读的书籍。 不要逐字阅读整本书，而是在每本书里学习你需要的东西。 很多都是很有名的好书，有精力尽量多买多研究。 Webpack相关:《简单来说Web Pack》《Web Pack实战:入门，与React高级调优相关:深入React技术栈，深入了解React和Redux，实用了解Redux，React学习手册，React快速开发，React的设计模式和最佳实践，与Vue相关:Vue.js实际实践，Vue.js实际开发，Vue.js和Vue.js实际了解js权威指南，Vue.js从初学者到项目实践， Vue.js前端开发基础与项目实践、Vue.js项目开发实践、Vue.js快速入门、Vue.js前端开发、Node.js相关:狼书1、狼书2、Node学习指南、大Node.js De.js实战、Node.js开发指南、Node一学就能用、Node与Express开发风格与布局相关:Bootstrap实战、Bootstrap客户手册、响应式Web设计:HTML5与CSS3实战性能相关:Web性能权威指南、 高性能网站建设指南PW A:实用PWA开发，实用PWA:面向下一代的渐进式Web APP，其余:SVG的本质，对SVG的深刻理解，前台架构的设计，重构:改进现有代码的设计，同构JavaScript应用开发，阶段6:计算机基础知识高级编程，即计算机基础知识，算法，数据结构，计算机。 在这里，我只推荐最好的经典书籍，每一本都是必读书。 学好这些内容，就可以选择大厂了。 数据与算法:剑指offer、程序员金典访谈(第6版)、编程之美、漫画算法、算法图、程序员代码面试指南、大话数据结构、趣味算法、学习JavaScript数据结构与算法、数据结构与算法:JavaScript描述计算机网络:HTTP/ 2基础教程、HTTPS权威指南、计算机网络:自顶向下方法、图文并茂的HTTP、图文并茂的TCP/IP、详细的TCP/IP讲解、UNIX网络编程操作系统:深入了解计算机系统、现代操作系统、UNIX环境的高级编程和Lin综上所述，你已经完成了从初级到高级的前台开发。 希望我的参考对你有帮助。如果觉得有用，可以收藏这篇文章，参考给有需要的朋友。 让我们一起学习，一起进步！