Skip to content

Latest commit

 

History

History
162 lines (82 loc) · 2.1 KB

map-HTML5.md

File metadata and controls

162 lines (82 loc) · 2.1 KB

HTML5 开发技能图谱

HTML5 脑图

Md 文字版

基础篇

  • HTML/CSS

  • JavaScript

  • DOM

中级篇

  • 数据格式(如JSON、XML）

  • RESTful API交互（如jQuery Ajax，Fetch API，ReactiveX)

  • 正则表达式

  • HTML语义化

  • 命令行

  • Node.js

  • DIV/CSS

  • SCSS/SASS

  • 矢量图形/矢量图形动画（如SVG）

  • 单页面应用

高级篇

  • ES6/TypeScript

  • CSS3

  • 面向对象编程

  • 函数式编程

  • MVC/MVVM/MV*

  • 安全性（如跨域）

  • 授权（如HTTP Basic，JWT等）

工程化

  • 代码质量（如JSLint，ESLint，TSLint，CSLint）

  • 代码分析（如Code Climate)

  • 测试覆盖率

  • 构建系统(gulp，grunt，webpack等）

  • 自动构建（脚本）

兼容性

  • 跨浏览器测试（如Chrome，IE，Safari，Firefox等）

  • 跨平台测试（如Windows，GNU/Linux，Mac OS等）

  • 跨设备测试（如Desktop，Android，iOS，Windows phone等）

  • 跨版本测试（同一浏览器的不同版本）

SEO

  • Sitemap(站点地图）

  • 内部链接建设

  • MicroData/MicroFormat

  • 页面静态内容生成

  • H1，H2，H3和strong使用

  • Title，Description优化

  • 页面静态内容生成

设计

  • 切页面

  • 线框图（Wireframe)

  • 响应式设计

  • 网格布局（Grid Layout)

  • Flexbox布局

性能与优化

  • PageSpeed/Yslow优化

  • 加载优化（如gzip压缩，缓存等）

  • 性能测试（特别是移动Web)

  • 可用性

  • 压缩（如Minify，Uglify，CleanCSS等）

测试

  • 单元测试

  • 服务测试

  • UI测试

  • 集成测试

调试

  • 浏览器调试

  • Debug工具

  • Wireshark/Charles抓包

  • 远程设备调试（如Chrome Inspect Devices)

软件工程

  • 版本管理（如git，svn)

  • 包管理（如npm，bower)

  • 依赖管理

  • 模块化（如CommonJS，WebPack)

前端特定

  • CSS/CSS3动画

  • JavaScript动画

  • Web字体嵌入

  • Icon字体

  • 图形和图表

  • CSS Sprite(如glue)

  • DOM操作（如jQuery，React等）

  • 模板引擎（如JSX ，Handlebars，JSP，Mustache等）