揭秘HTML5和CSS3

網路的發展總是不斷地催生新技術的產生，而HTML5和CSS3是最近一直被討論的熱門話題，對於每個網路開發者尤其是前端開發者而言，都充滿了好奇與渴望。那麼HTML5和CSS3究竟有哪些讓我們眼前一亮的東西呢？我在WebRebuild北京交流會和珍珠奶茶幫上分享了《揭秘HTML5和CSS3 》，PPT在這裡：
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

HTML 5草案的前身名為Web Applications 1.0，於2004年由WHATWG提出，於2007年被W3C接納，並成立了新的HTML工作團隊。在2008年1月22日，第一份正式草案發布。 HTML 5是近十年來Web開發標準最巨大的飛躍。和以前的版本不同，HTML 5並非僅僅用來表示Web內容，它的新使命是將Web帶入一個成熟的應用平台，在HTML 5平台上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。那我們來看看HTML5的技術概覽有哪些：

HTML5新增和移除的元素

HTML5新增了許多多媒體和互動元素如video, audio，在HTML4當中如果要嵌入一個視訊或是音訊的話需要引入一大段的程式碼，還有相容各個瀏覽器，而HTML5只需要透過引入一個標籤就可以，就像img標籤一樣方便。在頁面佈局和內容實作方面HTML5新增了許多結構化標籤元素以及區塊級及語意元素，如果你要用HTML表示一個檔案的上傳進度條，在HTML5中你可以用progress這個元素來表示，它有一個value屬性描述了已經完成了多少任務，還有一個屬性max描述了這個任務一共需要多少，還可以透過DOM介面得到這個進度條的position屬性(唯讀)，也就是任務完成的百分比。 Youtube 已經在HTML5技術上做了一個嘗試， http://www.youtube.com/html5 (需要翻牆) 是用HTML5做的一個DEMO，從整個頁面原始碼來看，非常簡潔。當然HTML5也對一些元素新增了一些屬性，例如input和textarea的placeholder屬性，相當於輸入框的輸入提示，script有一個async屬性會影響腳本的載入和執行。對於所有的HTML共有的屬性我們通常把它稱作是“全域屬性”，如class, id, tabindex, title，HTML5也新增了一些全域屬性，如contenteditable, contextmenu, hidden等屬性。 HTML5也增加了對微資料的支持，如HTML5新增的item, itempro, subject等屬性。

當然HTML5也移除了一些表示頁面展現的元素，如font, center, strike等，這些本來應該是CSS來做的，所以還是很好理解的，也移除了一些影響網站可訪問性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而採用abbr來表示縮寫。 HTML5也移除了一些影響客戶端相容性的HTML熟悉，如link的rev屬性，td的scope屬性；HTML5也移除了一些表示頁面展現的屬性如一些元素的align,bgcolor屬性。

HTML5對表單的支持

HTML5 提供了強大的控制項類型如url, email, date, tel等，強大的約束屬性，如required表示必填，文件上傳的accept屬性，以及一些表單重複元素模型的支持，HTML5在提交表單的時候還可以設定提交的方式為XML提交方式，這樣伺服器端接收到的資料將是XML格式，HTML5的表單被定義為“Web Forms 2.0”，目前opera9.5+對Web Forms 2.0的支援較為完美。

點此查看Web Forms 2.0 DEMO ，需要Opera9.5+

HTML5 DOM變化

HTML5在DOM LEVEL 2 HTML方面很多都是繼承自HTMLDocument的接口，當然HTML5在DOM上也有一些值得注意的新成員，如：支持getElementsByClassName，可以根據class類名選擇元素，getSelection()將會返回當前選中的對象，在選擇器上面有兩個方法querySelector和querySelectorAll可以根據css選擇符來取得要查詢的元素，相當於YUI3中的Y.one和Y.all。

HTML5的Javascript APIs

HTML5在Javascript上新增了哪些API呢？

• Video/Audio: HTML5為Video和Audio提供了API來讓開發者控制自己的使用者介面，例如可以播放或暫停媒體內容。
• Canvas: Canvas是一個新的HTML元素，這個元素可以被Script語言(通常是JavaScript)用來繪製圖形。例如可以用它來畫圖、合成圖象、或做簡單的(和不那麼簡單的)動畫。 Canvas是個神奇的東西，它給我的第一感覺就像是在用Photoshop一樣，它的每一個方法跟Photoshop 是那麼地相似，透過canvas.getContext('2d')就可以得到這個canvas的API ，你可以透過fillStyle設定其填滿顏色或是透過strokeStyle設定其描邊顏色，甚至它畫路徑的操作跟Photoshop的鋼筆操作更是不謀而合。 Canvas在許多網站都已經有應用，例如Firefox的即時下載狀態統計，甚至還可以用canvas來寫Web Game。
• Drag&Drop: 在指示裝置的視覺媒體中，」Drag」的操作就是滑鼠按下(mousedown)並伴隨著滑鼠移動(mousemove)的事件，而」Drop」則是滑鼠釋放時觸發的事件。在Drag&Drop裡定義了DataEvent和DataTransfer接口，同時當拖曳操作發生時會觸發如dragstart, dragenter, dragleave, drop, dragend等事件。
• Web Workers: 讓Javascript多線程，可以在後台做很多工作而不會阻斷當前的瀏覽器操作。
• Geolocation: 地理位置定位，執行navigator.geolocation.getCurrentPosition(success,error)這個方法時瀏覽器會提示是否要共享你的地理位置，如果選擇共享，則會回呼success函數，success函數有一個參數是position對象，這個position對像有一個coords對象，coords對象包含了很多地理位置信息如latitude(維度)和longitude(經度)，這樣就可以知道你的具體位置了，這個功能在一些手機如Iphone上已經有廣泛的應用了。
• Application Cache: 這是HTML5對於離線應用程式的支持，透過在html元素上加上一個屬性manifest，瀏覽器會提示你是否要將資料快取到客戶端，如果使用者選擇了允許，則會按照指定的manifest檔案列表快取需要的文件，當你的網路不可用時，你還是可以使用這個應用的。對於離線應用，Google也開發了Google Gears瀏覽器擴展，不過最後Google轉投HTML5可能也是看到了HTML5儲存和離線應用的這種優勢。
• Storage: Webkit已經實作了database storage，你可以像後端操作資料庫一樣查詢資料並執行一些操作。還有一種儲存是鍵值對存儲，如sessionStorage和localStorage，可以透過setItem和getItem來儲存與取得值，相對於Cookie的儲存來說，儲存的容量要大得多。
• X-Document Messaging: 瀏覽器因為安全和隱私的原因，阻止了不同域之間文檔的通信，雖然這是一個安全限制，但是對於那些沒有危害的不同域的文檔通信帶來了很多問題，但是HTML5可以實現這種跨文檔通信，讓我們可以不用管源域是來自哪裡，同時可以防止腳本攻擊。

HTML5讓你心動了嗎？那麼HTML5什麼時候會成為標準呢？據說要等到2022年，這裡有一個很有趣的網站http://ishtml5readyyet.com/告訴你還有多少天HTML5會真正到來。