有關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