Html5-Skillmap专题

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