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

• 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：模态框实现