如今大熱的HTML5到底美在哪裡？HTML5到底能為實際的移動開發帶來哪些改變？來自阿裡雲雲手機服務運營部的前端開發工程師分享了他眼中的HTML5之美，主要講訴HTML5的常見原理並從CSS、JavaScript和框架三個方面做了細致講解。
說到HTML5一般都會提到它新增了一些新的標簽，這些標簽能夠減少文檔的大小，也可以節省一些CSS定義，但是這個好處不足以說明HTML5在技術變革上帶來的影響，我們還是先要明白HTML5的原理到底是怎樣的，它帶來的變革為什麼會這麼大？
常見的原理HTML5的產生以及它的設計完全是遵循了一些常見的原理，這些原理在李松峰老師的博客上有詳細地闡述。
首先第一條原理是：發送時保守、接受時開放。
作為工程師，發送給浏覽器的文檔應該盡量的嚴謹，但是浏覽器作為接收方，應該持有一個開放的姿態，而不會因為某個文檔有問題，到浏覽器窗口裡面就不顯示了，只是留下一片空白給用戶。既然HTML存在標簽沒有正常閉合的可能性，也存在屬性丟失的情況，只要文檔沒有產生二義性，浏覽器應該猜測到最終的行為並做出正確處理，在技術層面浏覽器有理由這麼做。
第二，避免不必要的復雜性。我們在編寫的HTML的時候，可能會定義一個很長行長的文檔類型聲明，這個文檔類型聲明是給浏覽器看的，如果能夠簡化它，在說創作的時候能省下一些時間，而且也不用浪費力氣去記那些難記的字符。實際上，省略大多數字符，浏覽器也能按照我們期望的那樣去運行。
還有script標簽，我們可能會設置它的type為“text/javascript”，實際上也是不必要，如果type屬性沒有被聲明，默認就按JavaScript處理。類似的東西有很多，在文檔裡面能省掉的我們就應該大膽地省掉，這樣不僅是在創作這個文檔的時候，能夠給我們帶來這些方便，而且在共同維護的時候也能帶來一些益處。
第三，網絡價值同達到網絡用戶數量的平方成正比。現在HTML5這麼火，很多人就拿它跟Flash去做對比，說Flash多麼多麼爛，說HTML5多麼多麼好。實際上我們創作的內容最後是給用戶去看的，如果這個東西用戶覺得好，不管用什麼技術我覺得都是次要的。
最後我們要的是將服務推送到用戶面前，而不是要說某種技術多麼好，可以殺死另一個技術。實際上在這裡，它們的協同工作才是符合HTML5的設計思想，在這個層面上我覺得Flash也是HTML5中的一員。
第四，大多數人的意見和可運行的代碼。沒有HTML5規范的時候，浏覽器廠商可以各自為陣，可以加入了自己的標准，雖然這些標准不是W3C制定的，但是大多人都有這些需求，它們能解決實際問題。所以也刺激W3C加入到這些標准的制定中去。
技術細節CSS有位測試工程師報了個bug給開發工程師。說頁面上的單選框樣式太難看了，建議改一下，換個顏色。開發工程師當時就暈倒了，說這個是浏覽器默認的，改不了。改不了怎麼辦？只能把bug打回去。
基於CSS3的特性，現在完全可以改變浏覽器控件的默認外觀。
然後是布局。改變樣式是CSS的強項，也是它的職責所在。我們可以使用百分比做彈性布局。現在設備比較多，有iPad、iPhone、還有其各種屏幕尺寸的安卓，假如我想用HTML5的技術做一個應用，適用於所有平台，這個時候百分百肯定是不夠的，而精准的彈性布局又顯得很重要。
CSS3有一個box-flex的屬性，假設有個容器，裡面有三個div，在設置了margin的同時將它們的box-flex設置成1，看到的效果就是三個元素均等分，我還可以改變它的比例，比如將第一個元素固定寬度，剩下的兩個元素也可以均等分。除了從左往右布局，使用cloumn-count可以做到從上往下布局。
box-flex可以解決一部分屏幕適配的問題，如果想做到更精准的布局，比如說在小屏幕下的布局是一個樣子，大屏幕下可能加入了更多的元素，或者更復雜了，甚至大小、顏色、位置都變了。這個時候可以使用Media Queries的技術。我們可以先定義某個樣式，然後在某種屏幕上面覆蓋默認樣式，或者完全使用另一套樣式。
除了CSS3這些奇妙的屬性，用它來設計一些復雜背景也是非常適合的。這裡有一個我同事開發的Chrome插件叫Coda Cola，他還為這個插件做了一個分享的網站。別人根據這個插件，做出了一些比較酷的CSS效果，可以再分享出來。
JavaScript
說了CSS3，再說說JavaScript。大家說JavaScript美嗎？好像我們對它的印象也不是很好。不僅前端，後端對JavaScript的象也好不到哪去，甚至會更糟糕。
首先它的執行效率比較慢。
然後它的API接口比較爛，比如我要查找某個元素，可以用getElementById，getElementsByTagName, 這麼一長串。除了很長，我還要把第三個參數指定為false。現在做應用的話，我們一般都會選擇用框架來幫助自己進行開發，從那些復雜的語法中解脫出來。
再者，JavaScript調試比較困難，JavaScript邊解釋變執行，代碼一多，方法之間的調用層級變深，如果出錯，就很難定位到錯誤所在。特別是在沒有firebug等調試工具之前，找錯誤有時候就跟做噩夢一般。 JavaScript雖然有這麼多弊病，但是它現在還在快速發展。到現在，我們有很多種的框架可以選擇，這裡面肯定有大家喜愛的框架。但在HTML5的到來的時刻，我們有一些更好的選擇。比如說做元素查找，以前可能用到框架，現在不用框架，使用原生的API也可以很方便地做到。這是第一點，就是有些功能不再需要框架做支持了。
第二，JavaScript中加入一些新的特性，比如說LocalStorage。沒有LocalStorage的時候，我們可以使用Cookie在客戶端記錄一些用戶相關的數據，但是Cookie記錄的容量有限，而且 HTTP請求會攜帶cookie數據。在需要保存大量數據或者設計離線應用的時候，LocalStorage就非常有用了，LocalStorage的容量比較大，在移動平台上，至少有2M的存儲空間。
框架雖然說有了一些原生的API，也有了一些新的功能，但是在開發的時候，我們還是要借助一些框架來提高工作效率。有一個叫Zepto的框架，是我們在項目中經常會用到的框架。它的API幾乎跟jQuery一樣，跟jQuery相比，Zepto去除了一些移動平台上不必要的代碼。除此之外，它還支持了 tap、swipe等手勢。 在移動平台上，我們也可以使用Canvas技術做一些游戲。
在移動互聯網上，手機跟PC有一些特征上的差異。用到手機特有的功能，我們可以做一些很有意思的東西。比如說我想獲得地理定位，還有傳感器、查詢通訊錄、拍照，這些都是手持設備特有的功能，雖然W3C有制定這些API的規范，但是目前沒有浏覽器已經完整實現。如果使用PhoneGap的話，我們就能使用到這些API了。