有关HTML5开发的资源集合

资源来自：https://github.com/maxzhang/maxzhang.github.com/issues/12

html5并非一个什么很新鲜的东东了，首先不要有概念上的误区，我想题主说的html5是指一个泛概念，html5是由下面几个技术组成的一个总体：

HTML5 ~= HTML + CSS + JS

推荐一个PPT可让你全面了解HTML5：http://slides.html5rocks.com/

---

HTML部分包括你们已经熟知的HTML4.01 Standard http://www.w3.org/TR/html401/
还有就是即将成为Standard的 HTML 5 Candidate Recommendation http://www.w3.org/TR/html5/

HTML5 是在 HTML4的基础上增长了更多的语义化标签，好比：

<header>
<nav>
<section>
// 这有太多了，就不一一细说

而且在原有Tag上，扩展了更多的标记属性，好比：

<input type="text" required />
<input type="email" value="some@email.com" />

HTML5除此以外，还引入了不少新的标签和属性，好比：WebApp开发方向的progress、无障碍浏览ARIA 、作SEO优化Microdata等等。

• W3C HTML标准列表：http://www.w3.org/standards/techs/html#w3c_all

---

CSS部分也是一样的，你们已经熟知的CSS2 Standard http://www.w3.org/TR/CSS2/
W3C最新的是CSS Level3 标准，因为CSS3包含的内容很是多，文档都是分开的，暂时没办法给出全部的标准地址，先贴一部分经常使用的标准吧：

• W3C CSS标准列表：http://www.w3.org/standards/techs/css#w3c_all
• CSS Selector CSS选取器 http://www.w3.org/TR/2013/WD-selectors4-20130502/
• Transition 动画过渡效果 http://www.w3.org/TR/2013/WD-css3-transitions-20131119/
• Animation 页面动画 http://www.w3.org/TR/2013/WD-css3-animations-20130219/

---

JS部分对于HTML5来讲主要体如今 Web API 方面，全部 API 都是 BOM对象，下面我也列出一些常见的标准地址：

W3C JavaScript API标准列表：http://www.w3.org/standards/techs/js#w3c_all
Touch Events 触摸手势事件：http://www.w3.org/TR/touch-events/
Geolocation 地理位置：http://www.w3.org/TR/geolocation-API/
Web Storage Web存储：http://www.w3.org/TR/webstorage/

---

经过上面的内容，大概已经了解HTML5是个什么东西了，下面就来讲说HTML5开发APP能够使用的一些资源。其实HTML5开发与以往的Web 并无本质的区别，主要差异体如今HTML5的一些新特性并无被老旧类库很好的支持，这样就须要一些更现代的类库来使用HTML5作开发。

首先是 JS库/框架，

轻量级库包括

• Zepto.js http://zeptojs.com/ 这个一个在移动端很好用的轻量级库，很是小巧，可是功能也很简单；
• jQuery 2.0 http://jquery.com/ 这里说的是2.0之后的版本，仅支持一些高级浏览器，使用不少HTML5的特性，虽然在移动端开发体积相对zepto较大了些，可是做为一个基础库来讲确实使人爱不释手；

App框架（下面的框架不单单只能用来移动端开发）

• jQuery Mobile http://jquerymobile.com/ 和jQuery是同样的编程思想，使用起来很是方便，包含浏览历史管理、视图导航渲染、UI组件等功能；
• App Framework https://github.com/01org/appframework/ 与jQuery Mobile很是类似的一个框架，实际我也没有使用过，看过了API，基本与jQuery Mobile相似；
• Sencha Touch http://www.sencha.com/products/touch/ Sencha的产品，在我使用Ext的时候就已经很是喜欢，是彻底web组件化的思路，用来作企业应用开发很是的棒，可是，也有不少缺点，好比体积、复杂、性能等等；

MVC框架

• Backbone http://backbonejs.org/ MVC框架我只推荐Backbone，并非由于Backbone有多好，但对于移动端开发来讲，Backbone的体积是相对小巧的，而且功能也十分简单，很容易上手，AngularJS实在是太大太复杂了；

UI框架

• Bootsrap 3 http://getbootstrap.com/ 这个不用多说了吧，用来构建HTML/CSS的；
• Pure CSS http://purecss.io/ 与Bootstrap同样的东东；

工具库（说到工具，实在是太多了，我没办法一一列出来，视乎到这的时候才离题主的问题近了一些）

• iScroll https://github.com/cubiq/iscroll 模拟区域滚动，在移动端开发中使用
• pointer.js https://github.com/borismus/pointer.js 触摸手势工具，用来兼容Pointer Event Model与Touch Event Model；
• Deeptissue.js http://deeptissuejs.com/ 触摸手势工具，扩展各类手势事件
• QUO.js http://quojs.tapquo.com/ 同上
• hammer.js https://github.com/EightMedia/hammer.js/ 也是手势工具，但这是一个jQuery plugin；
• spin.js http://fgnass.github.io/spin.js/ 加载中动画小工具
• css3patterns http://lea.verou.me/css3patterns/ 使用css3绘制背景
• svgpatterns http://philbit.com/svgpatterns/ 使用svg绘制背景
• textillate.js http://jschr.github.io/textillate/ 各类文字动画效果
• Effeckt.css http://h5bp.github.io/Effeckt.css/dist/ 各类CSS3的动画效果
• JPlayer http://www.jplayer.org/ 音视频播放工具

CSS3代码生成工具

• http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/see-also.htm IE官方提供的一个工具，很是好用，功能不少；
• http://cubic-bezier.com 贝塞尔曲线
• http://the-echoplex.net/flexyboxes/ flexbox布局
• http://cssarrowplease.com/ css3箭头
• http://heartcode.robertpataki.com/canvasloader/ canvas loading
• http://www.css88.com/tool/css3Preview/Transform.html transform变形
• http://www.responsivewebcss.com/ 响应式布局
• http://nmsdvid.com/snippets/ @media工具
• http://css3ps.com/ PhotoShop CSS3 plugin

最后分享几个我收集的移动端开发资源，虽然是移动端开发，可是移动端开发目前是最贴近HTML5技术的方向

• https://github.com/exfork/mobileTech
• https://github.com/exfork/Mars