欢迎大家使用《Awesome HTML5资源库》,这里有丰富的HTML5资源列表,可以为编码提供方便。欢迎收藏到浏览器文件夹 (Ctrl+D) 或 直接加Github Star!!!

##资源库大纲

• 文章与标准
• 元素
  • 画布
  • 片段
  • 媒体元素
  • 表单
  • 时间日期
  • WebVTT
  • HTML Imports
• API使用
  • 推送通知
  • 权限
  • 语音识别
  • 地理位置
  • 音频
  • 加密解密
  • 视频捕获
  • 文件管理
  • 帧计时
  • 离线应用
  • 浏览器调节渲染requestidlecallback
• 语义
• 易用性
• DOM管理
  • Shadow DOM
  • 数据绑定
  • Web组件
• 客户端存储
• 性能
• 移动开发
• 沟通与协同
  • Web Sockets
  • WebRTC
• Web Workers
• Service Workers
• WebGL
• 浏览器兼容性
• 图书资源
• 游戏开发
• 视频资源
• 网站与资源
  • 官方网站
  • 网络周刊
  • Twitter微博地址
• 贡献区

##文章与标准

• 从W3C最新发布的HTML5看看他与HTML4的不同
• DOCTYPES文档类型和WPF标记样式

##元素

###画布

• W3Schools介绍canvas画布的用法
• 关于Canvas画布的教程-谋智开发者网络MDN
• Html5 Canvas各种教程-html5canvastutorials
• HTML5 Canvas速查表

###片段

• 手把手教你用HTML5 section片段

###媒体元素

• Audio、Video标签的使用
  • W3Schools audio教程
  • W3Schools video教程
  • 关于Audio、Video标签的使用-谋智开发者网络MDN
  • 关于HTML5的用户端Audio、Video资源
• embed标签
  • W3Schools embed教程
• source标签
  • W3Schools source教程
• track标签
  • W3Schools track教程

###表单

• W3S:HTML5表单元素教程
• MDN:HTML5的表单有哪些不同?

###细节

• Details细节元素
• Details细节 polyfill 元素

###时间日期

• 时间元素指南

###WebVTT

• W3C:WebVTT草稿

###HTML Imports

• HTML imports教程

##API使用

###推送通知

• 网络推送通知 - Google Chrome
• 网络推送通知 - Open Web
• W3C:推送API草稿
• 通知API

###权限

• Google:权限API

###语音识别

• HTML5 语音识别 API
• 另一个有用的介绍
• 分享Web语音API的一些经验
• 免费的声音识别库 (annyang)

###地理位置

• 使用地理位置
• HTML5应用:Geolocation地理位置

###音频

• 快速开始Web Audio API
• MDN:Web Audio API
• 手把手教你做HTML5吉他调音器

###加密解密

• 网络加密 API 草稿
• 网络加密支持一览表
• Window.crypto 加密
• W3C:下一代网络加密

###视频捕获

• 使用HTML5捕获音频视频资源
• 使用媒体捕获API

###文件管理

• MDN:从网页应用中获取指定文件
• 使用Javascript读取本地文件
• W3C:文件 API 草稿
• 文件系统 API

###帧计时

• Google Developer|Youtube:Timing API
• W3C:帧计时草稿

###离线应用

• 新手指南:如何使用应用缓存
• MDN:应用部署
• W3C:部署网页应用
• Android环境下Chrome网页应用部署

###浏览器调节渲染requestidlecallback

• GDevelopers:如何使用requestidlecallback

##语义

• W3S:Semantic语义元素
• MDN:HTML5表单中的 Sections 和 Outlines
• SM:HTML5 Semantics语义元素

##易用性

• 手把手教你认识ARIA属性
• 浅谈HTML5易用性
• 关于HTML5中Aural UI元素
• Web Accessibility Evaluation Tools List
• HTML5:Aria属性
• HTML5视频播放器的响应与易用

##DOM管理

###Shadow DOM

• 介绍Shadow DOM
• Shadow DOM 101
• Shadow DOM CSS 样式
• 高级概念和DOM API

###数据绑定

• 通过Object.observe()进行数据绑定运行

###Web组件

• 定义自定义HTML元素
• HTML imports功能
• Polymer项目
• 使用Yeoman、Polymer开发Web应用组件

##客户端存储

• 客户端存储
• 离线指南手册
• IndexedDB教程
• 真实环境下离线数据存储
• 本地存储教程

##性能

• GD:性能最佳练习
• Google:优化性能 Web 基本原则
• 教程
• Resource hints draft (preconnect and preload)
• Prefetching and prerendeding
• 图片压缩
• 文本压缩
• 资源耗时

• 可安装的网页应用
• Field guide to web applications
• 手把手教你开发 PhoneGap 应用
• Apache Cordova 教程
• PhoneGap 教程
• 移动Web应用最佳实践
• 使用Kendo UI建立移动应用
• HTML5 震动 API
• HTML5 电池状态API
• 使用HTML5 电池状态 API隐性分析
• HTML5 网络设备信息 API
• Sencha Touch 教程

##沟通与协同

###Web Sockets

• 使用WebWorkers
• 介绍Websockets

###WebRTC

• 什么是WebRTC及运行原理
• WebRTC使一切更简单
• WebRTC 数据频道介绍
• MDN:WebRTC 数据频道

##Web Workers

• Web Worker 基础篇
• web workers能有多快?
• MDN:Web Workers
• 快速开始 Web Workers

##Service Workers

• Great article on Service Workers
• Service Workers from W3

• WebGL 基本原理介绍

##浏览器兼容性

• I want to use网站
• Can I use...网站
• W3C 网页质量工具
• HTML5 测试
• HTML5 演示

##图书资源 ::书名暂不翻译,以免碍于搜索查询购买::

• Dive into HTML5
• HTML5: Up and Running
• Using the HTML5 Filesystem API
• HTML5 Game Development Insights

##游戏开发

• Mozilla Hacks:快速开始HTML5 游戏开发
• 资讯、信息以及教程
• 多达380种HTML5游戏开发资源
• 开源JS游戏引擎|欢迎投稿更新
  • Pixi.js
  • phaser
  • MelonJS
  • kiwi.js
  • Crafty
  • PhysicsJS
  • Stage.js
  • cocos2d

##视频资源

• HTML5 开发者大会
• Polymer: declarative, encapsulated, reusable components
• Web移动:更快速、更丰富、更优美
• Dart: HTML of the Future, Today!

##网站与资源

###官方网站

• HTML 官方指南(allows collaborative modification of content like wiki)
• HTML5 Rocks (news, tutorials and updates)
• HTML5 Hub (developer community including articles, discussions and open projects)
• HTML5 Gallery (a showcase of sites using HTML5 markup and API's)
• HTML5 Doctor (tutorials and articles)
• HTML5 development guide from MDN
• W3C Highlights form June 2014
• W3C Tech

###网络周刊

• HTML5 Weekly
• Open Web Platform Daily Digest
• Mozilla Hacks Weekly Articles
• Responsive Design Newsletter
• Daily Nerd

• @html5
• @html5rock
• @html5gallery
• @html5doctor
• @GameDevHTML5
• @mozhacks
• @mozappsdev
• @googlechrome

• awesome-awesomeness
• lists

##贡献区

我们欢迎您的代码,为未来更好的添砖加瓦!

原项目地址 Awesome