開發(fā)者和老板都要知道的HTML5的那些事
1. HTML5 標簽沒什么大不了的.
理解這句話你需要先了解HTML 5。它僅僅是一個html4.01的一個升級版本？或者是它是完全不同的新版本(無處不在的大肆宣傳可能會讓你有這種感覺）？答案是兩種理解都有部分正確。HTML 5包括許多簡化和附加的網(wǎng)頁標記，所以稱它為升級版本也是公平的（雖然也有一些大的補充標簽，如視頻<video>和畫布< canvas>）。但是，HTML 5也可以被認為是一個技術(shù)組合，包括一整套和HTML 5標簽交互的API。還有CSS 3，為HTML 5帶來了一些強大的新風格和動畫效果。
如果你已經(jīng)很熟悉html 4，那大多數(shù)新的標簽會很容易使用。
2. HTML 5的力量源泉是JavaScript.
雖然我們都聽到的總是“HTML 5″, 但真正的無名英雄是JavaScript和一套新的API。這些API包括獲取地理位置(Geolocation)，圖形繪制(a drawable canvas)，個性化的視頻體驗(custom video experiences)，拖放，大量的本地存儲(local storage)，甚至多線程（更像是當前的應(yīng)用程序）。這只是已經(jīng)命名的一些API而已。
過去幾年，Javascript的名聲可不好，其實它是一個復雜和強大的語言?，F(xiàn)在，它也是一個快速的語言，在過去十年里，速度得到近似100倍的改善（還會得到更多的改善）。當然，它仍然有它的內(nèi)傷，但通過了解它們就可以有避免的方法。如果你知道他們。它也很容易入門。
所以，如果你想運用HTML 5，你就要JavaScript。
3. 標準來自哪里并不重要(It’s not which standards document an API comes from that is important).
當我們寫”Head First HTML5 Programming”時，常聽到”Geolocation并不是HTML5正式規(guī)格的一部分!” 是的. 但它是W3C的正式標準之一，而且事實上這并不重要。重要的是多少現(xiàn)在的瀏覽器已經(jīng)支持Geolocation 了？我們更在意這個。
當然，這里有一個時間的問題。但當我們寫代碼時，重要的是“用戶需要它嗎？(Will it be there for my users)“
4. 怎么知道該不該上HTML5了(How to know if you should embrace HTML5 now).
如果你的用戶使用移動設(shè)備，你就應(yīng)該考慮使用HTML 5。HTML 5瀏覽器是在大量的智能手機和平板上很普遍了。如果你的用戶主要在桌面電腦上使用，你也應(yīng)該去好好研究一下HTML 5。但是如果他們使用的是舊版本的瀏覽器，那就需認真評估一下了。
無論何時，你想要了解瀏覽對HTML 5支持的情況，都可以借助下面這些很棒的資源來了解。包括：
Wikipedia’s Comparison of Web Browsers page and Comparison of Layout Engines page.
WHATWG’s Implementations in Web Browsers wiki page.
當然，你也要盡量在各個瀏覽器上測試一下你的應(yīng)用程序或網(wǎng)頁。
5. 進退自如: 優(yōu)雅降級和功能檢查(graceful degradation and feature detection).
通過JavaScript有許多方法可以用來檢測HTML5的支持能力。通過創(chuàng)建一個對象，通過檢查屬性，通過使用自定義方法如<video>的canPlayType方法，這些都可以。
不用說，如果用戶的瀏覽器不支持新特性，你需要提供備用方案。(比如，使用圖片或flash來代替HTML5的video和canva, 或者顯示一段信息告訴用戶為什么沒看到預期的效果。). 有沒有更好的方法呢?
有的. Modernizr JavaScript library 是一個開源庫，可以很方便的檢查HTML5和CSS3的支持情況，并加載相似的資源, 如不同的JavaScript腳本, CSS文件, 圖片等等，取決于支持的程度.
6. <video>標簽很簡單; 可是編碼呢?
通過增加一個<video>元素到您的網(wǎng)頁,就可以輕松地在網(wǎng)頁上播放視頻，并且不需要其它插件。但說到視頻格式，不幸的是，支持的協(xié)議很少。今天，支持三個不同的格式:WebM，MP4，以及Ogg，而至于是哪一個，和取決于你使用的瀏覽器。如果你的用戶集中在某個平臺，相對比較容易。比如，針對iPad用戶，你只需要提供MP4格式就可以了。如果你想支持所有流行的瀏覽器，那么你就要提供所有三種格式的內(nèi)容。
怎么做？你可以使用<video>和<source>同時提供三種視頻文件。如果都不支持，你當然還要提供一個備案。
所以，將視頻放到網(wǎng)頁很容易了，但如何讓用戶得到可以真正播放的視頻仍然有些麻煩。
7. <canvas>標簽并不只是為了繪圖.
<canvas>為HTML添加了一個二維的繪圖區(qū)域。乍一看，<canvas>適于創(chuàng)建一個簡單的繪圖程序，可以使用線，弧，和矩形。
事實上，如果看一下演示<canvas>的網(wǎng)站，你會看到它被用于任何基礎(chǔ)繪圖、交互式繪圖應(yīng)用、制作動畫、游戲，甚至渲染三維場景。
一個有趣的應(yīng)用是視頻處理。你可以從player取得幀數(shù)據(jù)(frame data)并加以處理，而后寫入到一個<canvas>上顯示出來。同樣的，你可以在游戲中使用一個canvas提供圖像的雙緩沖。
所以，不要小瞧了<canvas>，它是HTML 5一個強大的新功能，可以用于各種圖形應(yīng)用, 在現(xiàn)代的瀏覽器中的JavaScrip的性能提升也足以應(yīng)付圖像和視頻處理需求。
8. CSS3支持通常由JavaScript提供的動畫效果.
通過CSS3，我們可以輕松實現(xiàn)以前只能通過JavaScript實現(xiàn)的網(wǎng)頁效果。
例如，當鼠標劃過時，需要組件可以淡入淡出，以前必須寫復雜的JavaScript代碼或者使用一個UI庫(jQuery,scriptaculous)。而通過CSS3,你就不再需要寫代碼了。
Transition(過渡) 和 transform(轉(zhuǎn)換) 是CSS3中的新特性，你能通過它們創(chuàng)造有趣的效果和動畫。比如你可以使用元件不透明性(opacity)的過渡(transition)實現(xiàn)淡化的效果。還可以通過轉(zhuǎn)換(transform)函數(shù)實現(xiàn)多個元件的旋轉(zhuǎn)和縮放。組合起來就可以創(chuàng)造出很酷的動畫效果。
9. JSON主導新的內(nèi)容格式.
2004年XML就努力統(tǒng)治世界，然而到現(xiàn)在還沒有達成。
目前很多開發(fā)商正使用JSON取代XML。JSON可以使用與代碼相同的格式和序列化(serialized)的對象。當?shù)玫竭h程的JSON數(shù)據(jù)，可以從瀏覽器本身得到快速的解析。每一個瀏覽器都內(nèi)置了JSON的對象和兩個方法：stringify (字串化):用來從一個對象生成JSON數(shù)據(jù)字串，parser(解析): 用來從字串創(chuàng)建一個對象。
今天JSON被廣泛應(yīng)用在網(wǎng)絡(luò)服務(wù)應(yīng)用程序，如FaceBook和Twitter。而且，由于XHR有跨域的限制，許多網(wǎng)絡(luò)服務(wù)的都實現(xiàn)了JSONP(JSON with Padding)。它本身是一個簡單的概念，但非常實用。
10. XHTML已死，卻又永生(XHTML is dead, long live XHTML).
隨著XHTML 2的逝去和HTML 5的崛起，XHTML早已失去了網(wǎng)絡(luò)語言的領(lǐng)先地位。但并不意味著你不能使用XHTML,事實上，我們叫它XHTML5。
記住，XHTML和HTML之間的差異是XHTML使用嚴格的語法。受益的是它是可擴展的（因為它是XML）, 缺點是XHTML過于嚴格，發(fā)揮的沒有其他語言那么好（如CSS和JavaScript）， 也并不是為構(gòu)建Web應(yīng)用而設(shè)計的。
所以，現(xiàn)在寫XHTML5，添加命名空間(namespace)和使用規(guī)范的語法就可以了。
原文鏈接：http://www.mhtml5.com/2012/07/5235.html
【編輯推薦】
