很棒的 HTML5 
¶
精选的 HTML5 资源列表. 灵感来自 awesome-php 和 awesome-python
Articles and standards¶
- HTML 5.3 - 当前的 HTML5 规范
- Progressive enhancement
- The extensible web manifesto
- Differences between HTML5 and HTML4 from W3C
Multimedia capabilities¶
Audio¶
- Getting started with the Web Audio API
- Web Audio API at MDN
- Making a Guitar Tuner with HTML5
- Audio visualisation with the Web Audio API and React
Media Capture¶
Picture in Picture¶
Speech Synthesis¶
Voice Recognition¶
- Web speech API demo
- Using the Web Speech API
- Experimenting with the Web Speech API
- Free voice recognition library (annyang)
Virtual Reality¶
Web animations¶
Elements¶
Canvas¶
Head¶
Sectioning¶
Media Elements¶
- 音频和视频
- audio tag from W3Schools
- video tag from W3 Schools
- Tutorial from MDN
- Capturing audio and video in HTML5
- 嵌入标签
- Brief description from W3 Schools
- 来源标签
- Brief description from W3 Schools
- 跟踪标签
- Brief description from W3 Schools
Forms¶
Details¶
Time¶
WebVTT¶
HTML Imports¶
Development APIs¶
Permissions¶
Geolocation¶
Cryptography¶
- Web Cryptography API draft
- Table of web cryptography support
- Window.crypto
- Cryptography next steps from W3C
File¶
- Using files from web applications (MDN)
- Reading local files in JavaScript
- File API Draft
- File system API
Frame timing¶
requestIdleCallback¶
requestAnimationFrame¶
Web payments¶
Semantics¶
- Semantic elements from W3Schools
- Sections and Outlines of an HTML5 from MDN Document
- HTML5 Semantics from Smashing Magazine
- Lesser known semantics element from W3C & Opera
Accessibility¶
- Excellent intro to accessibility from Google's fundamentals
- Accessibility checklist for web developers
- ARIA from MDN
- Great Accessibility Style Guide
- Designing for Cognitive Differences
- Guide on how HTML elements are supported by screen readers
- Top 25 Accessibility Testing Tools for Website
- Web Accessibility Evaluation Tools List from W3
- Pa11y - automated accessibility testing
- Aria in HTML
- Accessible and Responsive HTML5 Video Player
DOM Management¶
Shadow DOM¶
Data Binding¶
Web Components¶
- Custom elements v1: reusable web components
- The power of web components
- Polymer project
- A Quick Introduction To Polymer
- Building web components using Polymer and ES6 classes
- Demythstifying Web Components
- HTML imports
- Building Webapps with Yeoman and Polymer
Progressive web apps¶
- Intro to PWAs
- An Extensive Guide To Progressive Web Applications
- The Business Case for Progressive Web Apps
Service Workers¶
- Service Worker fundamentals
- ServiceWorkies - Learn SWs playing a game
- The Service Worker Cookbook
- Making a Service Worker: a case study (Smashing Magazine)
- Service workers explained
- Service Worker Libraries, Totally Tooling Tips
- ServiceWorker: Revolution of the Web Platform
Offline caching¶
- The Offline Cookbook
- Instant-loading Offline-first (Progressive Web App Summit 2016)
- Offline Storage for Progressive Web Apps (article by Addy Osmani)
- A Beginner's Guide to Using the Application Cache
Push Notifications¶
Client side storage¶
- Client-Side Storage
- Offline Cookbook
- Introduction to IndexedDB
- Real-World Off-Line Data Storage
- Local storage tutorial
Performance¶
- Accelerated Mobile Pages (AMP)
- Google developers best practices
- Optimizing performance from Google Web Fundamentals
- Resource hints draft (preconnect and preload)
- Prefetching and prerendeding
- Image compression
- Text compression
- Resource timing spec
Mobile¶
- The Web App Manifest (Google's fundamentals)
- Field guide to web applications
- Apache Cordova tutorial
- PhoneGap from Scratch
- Best practices for mobile web apps
- Build mobile apps with Kendo UI
- HTML5 Vibration API
- HTML5 Battery Status API
- Privacy analysis of the HTML5 Battery Status API
- HTML5 Network Information API
- Sencha Touch tutorials
Communications and interoperability¶
Web Sockets¶
WebRTC¶
- What is WebRTC and how does it work
- WebRTC made simple
- WebRTC data channels tutorial
- WebRTC data channels from MDN
Web Workers¶
WebGL¶
Browser compatibility¶
Books¶
- Dive Into HTML5
- HTML5: Up and Running
- Using the HTML5 Filesystem API
- HTML5 Game Development Insights
- Web Design Playground: HTML & CSS The Interactive Way
Game development¶
- Getting started with HTML5 Game Development from Mozilla Hacks
- HTML 5 game development video series by Mozilla
- Info, news and tutorials
- Over 380 resources on HTML5 game development
- 开源 JavaScript 游戏引擎
- Pixi.js
- Phaser
- MelonJS
- Kiwi.js
- Crafty
- PhysicsJS
- Stage.js
- Cocos2d
Bootcamp¶
Learn coding for free online Free online cources
Videos and Keynotes¶
- HTML5 Developer Conference
- Polymer: declarative, encapsulated, reusable components
- Making the mobile web fast, feature-rich, and beautiful
- Dart: HTML of the Future, Today!
Websites and resources¶
Websites¶
- HTML5 Rocks （新闻、教程和更新）
- HTML5 Gallery （使用 HTML5 标记和 API 的网站展示）
- HTML5 development guide from MDN
- W3C Highlights form June 2014
- HTML5 Please （了解何时可以使用 HTML5 功能）
- Keen HTML （学习 HTML 的免费互动课程）
- A Complete Guide to the Table Element
Weekly news¶
Twitter¶
Other awesome lists¶
Contributing¶
随时欢迎您的贡献！