WEB前台看似简单，实则不然。有很多复杂的知识点要学。对于零基础前台的小伙伴来说，一份详细的前台学习知识点大纲尤为重要。 下面，不多说，直接上干货(全网最全，没有之一) PS:文末有惊喜(全阶段视频教程+学习资料)。如果需要，可以从博主那里免费获得。整理出来并不容易。希望对你的学习有帮助！Web前台学习路线(包括每个阶段的详细知识点)适合零基础的朋友。 第一阶段:首页的重建。这个阶段主要针对零基础的朋友，专业零基础初学者，了解互联网和Web相关技术。 学完这一阶段的内容，可以具备以下技能:具备静态网站设计制作能力，可以实现PC端和手机端的布局；了解开发工具、浏览器调试控制台等的使用。会用裁剪软件做页面，比如PhotoShop对HTML5和CSS3的新特性有深入的了解和掌握；可实现响应式布局，一套代码可适配PC、手机、平板设施。 现阶段具体学习目录和详细知识点如下:PC端网站布局知识点:◆ HTML基础、CSS基础、CSS核心属性◆ CSS样式分层、继承、盒子模型◆容器、溢出和元素◆浏览器兼容和宽高适配◆定位、锚点和透明◆图片整合◆表单、 CSS属性和滤镜”HTML5+CSS3基础知识点:◆ HTML5新增元素和属性◆表单字段增强元素◆ CSS3选择器◆文本字体相关样式◆ CSS3位移和变形解决方案◆ CSS3 2D转换和过度动画◆ CSS3 3D转换和关键帧动画◆弹性框模型◆媒体查询WebApp页面的响应式设计布局知识点:◆手机页面设计规范◆手机页面裁剪◆流式布局(100%布局) ◆比例缩放布局(rem布局)◆响应式布局◆REM/VW的使用◆ flexbox详解◆手机复位、1px边框、高清图片◆淘宝手机页面适配方案第二阶段:前后页交互。 这个阶段当然主要是针对零基础的高级内容。学完这一阶段的内容，你可以具备以下技能:可以独立完成常见的网页特效，如标签页、弹出框、轮播图片等。 有编程思维能力，能独立思考逻辑，能使用算法和数据结构进行开发和训练。 了解前后台的分工，以及前后台如何配合完成一个高质量的项目。 掌握jQuery库的基本使用，了解其实现原理，会使用jQuery插件。 掌握ES6到ES10提供的新语法和特性，深入理解promise和模块化编程，手写promise规范即可实现。 掌握前端工程工具，如git、gulp、webpack等。，来构建和开发项目。 现阶段具体学习目录和详细知识点如下:原生JavaScript交互函数开发知识点:基本语法◆循环语句◆函数和数组◆字符串和日期◆ BOM和DOM ◆事件◆拖放效果◆ cookie存储◆正则表达式◆ Ajax ◆面向对象基础◆体育和游戏开发◆面向对象高级和ES 5/ES6/ ES7应用知识点:◆ Promise ◆设计模式(观察者模式等。)◆原型链◆构造器◆执行上下文栈和执行上下文◆变量对象和活动对象◆作用域链◆闭包◆ this ◆ ES5 ◆ ES6 ◆ ES7JavaScript工具库自主开发的知识点:◆ DOM库◆事件库◆ AJAX库。◆原型与继承库◆ MVVM核心库◆基于SPA的路由库jQuery经典交互特效开发知识点:◆时间轴特效◆标签页切换特效◆网页定位导航特效◆滑动门特效◆焦点图片轮播特效◆导航栏菜单特效◆弹出图层特效◆倒计时效果◆抽奖效果PHP+MySQL后台基础知识点:◆ Apache ◆ PHP ◆ MySQL ◆详细 HTTP (S)协议讲解◆ Ajax advanced、跨域和deferred◆Apache和Nginx环境的调试和配置◆接口的定义◆ Mock data ◆ Restful ◆前后台联调◆前台安全(XSS、CSRF、 JSON注入)前台工程和模块化应用的知识点:◆Gulp◆web pack◆NPM◆Linux command◆Git/SVN◆CommonJS◆AMD◆CMD◆ES6模块化PC端全栈开发项目知识点:◆大主页 列表和介绍页面◆展示和交互特效◆搜索◆登录和注册◆购物车◆ jQueryUI和jQuery Easyui◆Bootstrap(ACE)◆high contracts/E Charts◆美术模板◆ Velocity ◆ Smarty ◆云平台系统前台构建第三阶段:Node.js+前台框架该阶段的课程主要针对基础合作伙伴的高级内容。 学习完这一阶段的知识，可以具备以下技能:能够独立完成前后台相关功能，胜任H5全栈开发工程师岗位。 懂工程，自动编译，脚手架等。，并实现一个小型开发工具。 掌握企业流行的框架，能够快速高效的使用，能够配合后台工作人员进行高效开发。 掌握移动Web App的开发模式，能够独立构建项目体系。 掌握小程序云的开发，了解无服务器无服务器技术和多终端适配方案。 掌握React-native和Flutter的混合开发方法，能够独立搭建混合应用app。 掌握桌面应用和可视化大数据，实现复杂的数据展现项目。 现阶段具体学习目录和详细知识点如下:本人目前从事前台开发工作。如果你现在也想学习前台开发技术，如果遇到任何关于学习方法、学习路线、学习效率等方面的问题。入门过程中可以申请加入我的前台学习交流裙三千人:前:851中:231末:348。 有少量初学者裙档正在自学前台。还有少量我在做前台技术期间整理的前台学习手册、前台面试问题、前台开发工具、PDF文档、书籍和教程。如果需要，可以自己下载。 Node.js后台开发1、Node.js详情◆开发环境调试M ◆模块和包管理工具M ◆ CommonJS模块M ◆ URL地址解析M ◆ QueryString参数解决方案M ◆ HTTP模块M ◆ HTTP爬虫M ◆请求方法M ◆事件模块M ◆文件fs模块M ◆流流模块M ◆原生路由和参数接收M ◆读取图片文件M ◆ npm scriptsM ◆ Yarn和PM2M II、 MongoDB◆ MongoDB细节和环境调试◆常用数据库命令◆集合聚合◆文档文档操作◆聚合查询◆ NodeJS连接MongoDB III、GraphGL◆ GraphQL初探:从REST到graph GL◆GraphQL安装◆准备数据源◆构建graph QL服务器◆数据查询iv、 Express◆ express的Express◆基于Express的项目的安装和创建Express 4.1x初始化项目详情◆路由介绍◆模板引擎EJS ◆模板引擎Pug(Jade) V. Koa2◆ Koa2 start ◆路由◆请求数据获取◆静态资源加载◆ cookie/ Session ◆模板引擎◆文件上传◆数据库MySQL ◆ JSONP实现◆测试调试VI . 测试框架mocha◆搭建框架◆ Asserting assert ◆项目测试◆运行多个测试七、即时通讯项目◆socket及通信流程介绍◆基于net模块的Socket实现◆ WebSocket ◆ http://socket.io八、Node.js高级全栈项目课程内容:◆基于M station +Node.js+MongoDB高级全栈项目的Vue.js前台框架开发。Vue.js开发基础知识点:◆ WebApp开发基础(Webstorage、移动事件、UI组件、Zepto、IScroll、Swiper) ◆ MVVM模式◆前台组件化◆单个文件组件◆组件间的值传递◆ Vue实例◆ E19Vue实例生命周期◆ Vue模板语法◆计算属性、 方法和侦听器◆计算属性的getter和setter◆Vue中的样式绑定◆ Vue中的条件渲染◆Vue中的列表渲染◆VUE中的set方法◆父子组件间的数据传递◆组件参数验证和非props特性◆将本机事件绑定到组件上◆在非父组件和子组件间传递值◆在VUE中使用插槽◆作用域插槽◆动态组件和v-once指令◆Vue动画应用程序Vue.js开发WebApp项目 知识点:◆环境配置◆项目代码详情Vue中单个文件组件和路由◆单页面应用VS多页面应用◆ Mint UI ◆ Element UI ◆项目的联调， 测试并发布上线React前台框架React开发的基础知识点:◆React简介◆React开发环境的准备◆React中的组件◆ JSX语法◆拆分组件间的值传递◆React开发工具的安装和使用Proptypes和DefaultProps的应用◆ props、 与StateRender函数的关系◆深入了解React虚拟DOM中的Diff算法◆ react中ref的使用◆React的生命周期函数及使用场景◆用Charles模拟本地数据◆React中实现CSS动画效果◆ react-tran Sition-group实现动画Redux概念及工作流程简介actionCreator Reducer的编写◆动作类型的拆分◆Action的统一创建◆ UI组件及， 组件和无状态组件◆使用Redux-thunk中间件实现ajax数据请求◆使用redux-saga中间件◆使用React-redux中间件开发WebApp项目知识点:◆ Ant设计组件库◆ React Router 4 routing ◆编写项目组件◆使用I Mmutable.js管理store中的数据◆项目的联合调试、测试和发布。 线上混合开发(Hybrid，RN)微信官方账号开发知识点:◆微信微信官方账号◆订阅号基本功能◆用百度BAE快速在线代码部署◆用Git在线代码部署◆微信官方账号开发权限及功能访问◆微信JSSDK接口API ◆微信场景项目开发及各种混合应用开发课程访问:◆独立原生nav active Hybrid(iOS， Android) ◆第三方混合框架Cordova/ Phone gap ◆第三方混合框架MUI+HTML5 DingTalk企业电子应用(支付宝小程序) 课程内容:◆ E应用开发简介◆ E应用开发流程◆ E应用开发基础◆ E应用开发实用小程序开发微信小程序开发知识点:◆微信小程序初探◆你必须学会小程序入门◆小程序组件体验◆小程序大功能◆实际项目将带你攻克多端小程序开发知识点:◆支付宝小程序◆百度小程序◆字节跳动小程序原生 app开发React原生知识点:◆ React原生项目导航初探◆ React原生项目文本框◆React原生项目滚动分页面◆React原生颤振开发其他组件知识点:◆开发准备◆快速入门◆界面结构◆基础组件◆布局◆视图◆条子◆路由◆表单◆按钮◆输入◆对话框◆状态管理◆网络请求◆动画◆测试， 发布和部署Angular前台框架知识点:◆基础和高级TypeScript ◆开发环境配置◆ Hello World ◆架构、模块和组件◆模板◆元数据、数据绑定和数据显示◆表单◆服务和指令◆依赖注入◆路由◆ Ionic 3框架大数据可视化知识点:◆基础数据可视化Echars、Hignchars简介◆ D3.js高级◆ D3.js选择集和数据◆ D3.js高级应用工具:NVD3、n3-charts 具体提取？不要放在内容里。学习伙伴可以大胆跟主博客！哈哈哈！