知识体系流程图前端知识体系主要分为基础知识、框架库、开发环境、运行环境四个部分。主要目的是把学到的知识点联系起来，让知识被赋予生命力。对于我来说，基本都是零散的学习前端知识，没有系统的学习整个前端，忽略了很多基础知识。因此，构建前端学习路径和方法，建立知识框架。可能不全，欢迎留言补充。1.基础知识1.1HTML（超文本标记语言[HyperTextMarkupLanguage]）语义标签，属性形式验证数据-*属性HTML多媒体视频（video）音频（audio）SVGCanvasHTML5拖放WebWorker浏览器缓存机制H5存储HTML5离线缓存HTML渲染过程重绘和回流图websocket1.2CSS（层叠样式表[CascadingStyleSheets]）选择框模型定位，浮动BFC动画过渡弹性布局2D，3D转换边框，圆角背景，渐变文字效果，CSS3字体多列CSS伪类CSSHACK媒体查询CSS预处理语言1.3JavaScript：是一种功能优先的轻量级解释型或即时编译型编程语言。数据类型基本类型引用类型流程控制语句内置对象变量、作用域原型、原型链函数事件this指针单线程和事件循环DOMBOM形式脚本面向对象正则Ajax和跨站技术ES6let和const命令解构SymbolSet和Map数据结构arrowFunctionProxyPromiseClassSyntax模块错误处理与调试错误处理调试常见错误1.4算法1.5数据结构JSONXML1.6面向对象1.7设计模式单例模式工厂模式建造者模式原型模式观察者模式策略模式构造器模式混合模式1.8计算机基础网络协议http协议DNS2。框架和库敏捷开发框架库2.1web库jQuery,zepto,SwiperVue,React,AngularUI组件库BootstrapReact:Ant-design,Blueprint,Material-UI,React-BootstrapVue:Element,iview,vuetify,vue-beauty、Vux、VantAngular:ng-zorrobackboneWeUIlayui跨站平台react-nativeFlutterElectron可视化组件EchartsD3chartFlotthreeHighChartsSigmaMyHeatMap小程序WeUIiViewWeAppWuxWeAppmpvuewepyTaro2.2nodeExpresshapiKoaeggLoopbackKeystone3。开发环境3.1代码管理gitsvn3.2IDEWebStormsublinevscode3.3构建工具webpackGruntGulp3.4调试工具谷歌firebug3。5测试3.6部署测试3.7linux4。运行环境4.1响应式布局4.2性能优化压缩MergeRequestCache避免重定向...4.3Web安全同源策略XSS跨站攻击CRSF跨站请求伪造SQL注入...4.4Tour兼容性CSShack渐进增强，优雅降级JavaScript4.5节点5。书籍推荐《HTML5秘籍》《CSS权威指南 第三版》《CSS实战手册》《CSS禅意花园》《JavaScript高级程序设计 第三版》《JavaScript权威指南（第六版）》《JavaScript DOM编程艺术》《ECMAScript6入门》《你不知道的javascript 【上】【中】【下】》《HTTP权威指南》《深入浅出 node》学习网站MDNgithub菜鸟教程w3school想不
