HTML5 开发技能图谱skill-map

# 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等）