2019年最全的web前端知识体系汇总

必学(前端三剑客)

· HTML: https://developer.mozilla.org/zh-CN/docs/Web/HTML

· CSS: https://developer.mozilla.org/zh-CN/docs/Web/CSS

· JavaScript: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

UI布局框架

· Bootstrap: http://getbootstrap.com/

· antd: https://ant.design/index-cn

· Foundation: http://foundation.zurb.com/

· Uikit: http://www.getuikit.com/

· Web Components:http://css-tricks.com/modular-future-web-components//

构建工具/包管理器

· Grunt: http://gruntjs.com/

· Yeoman: http://yeoman.io/

· Bower: http://bower.io/

· NPM: https://www.npmjs.org/

css预处理器

· Less: http://lesscss.org/

· Sass: http://sass-lang.com/

· Stylus: http://stylus-lang.com/

数据可视化

· Web图形开发: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Graphics

· Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

· WebGL: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

网络

· HTTP: https://developer.mozilla.org/zh-CN/docs/Web/HTTP

· TCP/IP详解卷1: 协议 http://www.52im.net/topic-tcpipvol1.html

浏览器

· 浏览器API/DOM: https://developer.mozilla.org/zh-CN/docs/Web/API

· 浏览器扩展: https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions

调试工具

· Chrome：https://developers.google.com/chrome-developer-tools/

· Firebug: https://getfirebug.com/

· HTTPWatch: http://www.httpwatch.com/

· Fiddler: http://www.telerik.com/fiddler

· IE Developer Toolbar

· Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

代码优化

· CSS Lint: http://csslint.net/

· JSHint: http://www.jshint.com/

· JSLint: http://www.jslint.com/

代码规范

· Code Guide: http://alloyteam.github.io/code-guide/

· 编写可维护的CSS: http://segmentfault.com/a/1190000000388784/

· GJS编码规范指南: http://alloyteam.github.io/JX/doc/specification/google-javascript.xml

· jQueryJS规范: http://contribute.jquery.org/style-guide/js/

HTML模块化

· html5boilerplate: http://html5boilerplate.com/

CSS模块化

· Normalize.css: http://necolas.github.io/normalize.css/

· OOCSS:http://www.oocss.cc/ http://oocss.org/

· CssReset:http://www.cssreset.com/

文档工具

· JSDoc: https://github.com/jsdoc3/jsdoc

· Jekyll: http://jekyllrb.com/

模拟数据

· mockjs: http://mockjs.com/

WEB框架/服务器

· Node: http://nodejs.org/

· Express: http://expressjs.com/

· Egg: https://eggjs.org/zh-cn/

· ThinkJS: https://thinkjs.org/

· Apache: http://httpd.apache.org/

· Nginx: http://nginx.org/

WEB安全

· XSS(跨站脚本攻击):

· CSRF(跨站点伪造请求攻击):

· 跨iframe攻击:

· Clickjacking安全漏洞:

测试框架

· Jasmine: http://pivotal.github.io/jasmine/

· QUnit: http://qunitjs.com/

· mocha: http://visionmedia.github.io/mocha/

编辑器

· WebStorm: http://www.jetbrains.com/webstorm/

· sublime text: http://www.sublimetext.com/

· vscode: https://code.visualstudio.com/

常用库/框架

· ReactJs: https://reactjs.org/docs/getting-started.html

· Redux: https://redux.js.org/

· React Router: https://github.com/ReactTraining/react-router#readme

· Mobx: https://mobx.js.org/

· Vue: https://cn.vuejs.org/

· vue-cli: https://cli.vuejs.org/zh/guide/cli-service.html

· vue-router: https://cn.vuejs.org/v2/guide/routing.html

· vuex: https://vuex.vuejs.org/

· Angular: https://angularjs.org/

· Angular(中文): https://www.angularjs.net.cn/

· jQuery: http://www.w3school.com.cn/jquery/index.asp

· Axios: http://www.axios-js.com/

· GMU: http://gmu.baidu.com/

· Hammer.js: http://eightmedia.github.io/hammer.js

· QuoJS: http://quojs.tapquo.com/

· Zepto: http://zeptojs.com/

· Swipe: http://swipejs.com/

· jQuery Mobile: http://jquerymobile.com/

· KendoUI:http://www.telerik.com/kendo-ui

· Goratchet:http://goratchet.com/

· D3:http://d3js.org/

· Three.js: https://threejs.org/

其他库

· KINETIC:http://kineticjs.com/

· Particles.js--web中创建炫酷的浮动粒子的库:

· Fullpage.js—快速实现全屏滚动特性:

· Highlight.js—web 语法高亮:

· Waypoints.js—滚动到某个元素位置时触发一个功能:

· Typed.js—打字机效果:

· Chart.js—使用 JavaScript 创建漂亮的图表

· Instantclick—能够明显加速网站加载时间，鼠标 hover 时预加载资源

· Chartist—另一个图表库

· Motio—一个基于动画和平移的雪碧图库

· Animsition—CSS 实现动画过渡的 jQuery 插件

· Barba.js—流式页面过渡

· TwentyTwenty—一个对比图片的可视化 diff 工具

· Vivus.js—在 SVG 上绘制动画

· Wow.js—滚动时展现动画

· Scrolline.js—页面滚动时显示滚动进度

· Velocity.js—快速流畅的 JavaScript 动画

· Animate on scroll—漂亮的页面滚动元素动画

· Handlebars.js—Javascript 模板

· jInvertScroll—视差滚动

· One page scroll—又一个页面滚动库

· Parallax.js—对智能设备方向变化做出响应的视差引擎

· Typeahead.js—搜索补全

· Dragdealer.js—炫酷拖拽

· Bounce.js—创建炫酷的 CSS3 动画

· Pagepiling.js—全屏滚动

· Multiscroll.js—两列垂直反向滚动

· Favico.js—动态 favicon

· Midnight.js—固定头部切换效果

· Anime.js—动画库

· Keycode—获取键盘按键的 JavaScriptkeycode

· Sortable—拖拽插件

· Flexdatalist—自动补全

· Slideout.js—移动应用侧滑导航

· Jquerymy—使用 jQuery 实现双向数据绑定

· Cleave.js—实时格式化输入内容

· Page—客户端单页应用路由

· Selectize.js—用来添加 tag 的 Hybrid 选择框

· Nice select—创建漂亮的选择框的 jQuery 库

· Tether—使用固定定位来创建相关元素

· Shepherd.js—为应用创建新手引导

· Tooltip—tooltip 提示框

· Select2—Jquery 选择框插件

· IziToast—通知弹窗实现

· IziModal—模态框实现

其他资源

· XMind 思维导图: http://www.xmind.net/

· PxCook 设计图自动标注工具: https://www.fancynode.com.cn/pxcook

· 图标库: https://www.iconfont.cn/