聯網的發展總是在不斷地催生新技術的產生，而 HTML5 和 CSS3 是最近一直被討論的熱門話題，對于每個互聯網開發者尤其是前端開發者而言，都充滿了好奇與渴望。那么 HTML5 和 CSS3 究竟有哪些讓我們眼前一亮的東西呢？

HTML5

HTML 5 草案的前身名為 Web Applications 1.0，于 2004 年被 WHATWG 提出，于 2007 年被 W3C 接納，并成立了新的 HTML 工作團隊。在 2008 年 1 月 22 日，第一份正式草案發布。HTML5 是近十年來 Web 開發標準最巨大的飛躍。和以前的版本不同，HTML5 并非僅僅用來表示 Web 內容，它的新使命是將 Web 帶入一個成熟的應用平臺，在 HTML5 平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。那么我們來看一下 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”，目前 Opera 9.5+ 對 Web Forms 2.0 的支持較為完美。

HTML5 DOM 變化

HTML5 在 DOM LEVEL 2 HTML 方面很多都是繼承自 HTMLDocument 的接口，當然 HTML5 在 DOM 上也有一些值得注意的新成員，如：支持 getElementsByClassName，可以根據 class 類名選擇元素，getSelection() 將會返回當前選中的對象，在選擇器上面有兩個方法 querySelector 和 querySelectorAll 可以根據 CSS 選擇符來獲取要查詢的元素，相當于 YUI 3 中的 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 在很多網站都已經有應用，甚至還可以用 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 會真正到來。

CSS3

CSS3 對于我們 Web 開發者來說不只是新奇的技術，更重要的是這些全新概念的 Web 應用給我們帶來更多無限的可能性，也極大地提高了我們的開發效率。我們將不必再依賴圖片或者 JavaScript 去完成圓角、多背景、用戶自定義字體、3D 動畫、漸變、盒陰影、文字陰影、透明度等提高 Web 設計質量的特色應用。

CSS3 在選擇器上面的支持

利用屬性選擇器我們可以根據屬性值的開頭或結尾很容易選擇某個元素，利用兄弟選擇器可以選擇同級兄弟結點或緊鄰下一個結點的元素，利用偽類選擇器可以選擇某一類元素，CSS3 在選擇器上的豐富支持讓我們可以靈活的控制樣式，而不必為了選擇某些元素給他們加上如”odd”或”even”這樣的類名。

CSS3 在樣式上的支持

有一個調查說開發者最期待 CSS3 的特性是什么，最后票數最多的是“圓角”，不錯，圓角這個功能可以給我們這些前端工程師省去很多時間和精力去切圖拼湊一個圓角。CSS3 還支持陰影，盒陰影以及文本陰影，漸變，之前你可能是通過IE的濾鏡看到過，其實 CSS3 實現起來更加方便。@font-face 可以自定義字體，如果用傳統的方式，VD 把一個帶有特殊文字的設計圖給你讓你來實現的話你可能會把它做成一個圖片，而通過 CSS3 用 @font-face 就可以了。CSS3 對于連續文本換行也新增了一個屬性 word-wrap，你可以設置其為 normal（不換行）或 break-word（換行），這解決了連續英文字符出現頁面錯位的問題，也不需要后端去截取這個連續字符。使用 CSS3 你還可以給邊框加背景，這在 iPhone 上也有應用的例子。CSS3 在背景上支持背景調整大小，如當你用一張大圖要做一個小的元素背景時可以通過 background-size 來調整背景圖的大小來適應這個元素。CSS3 支持 opacity，rgba 和 hsl/a，opacity 和 rgba 的區別是 opacity 設置的透明對其內容也會產生影響，而 rgba 只對你應用的元素產生影響。CSS3 在布局上對于盒模型提供了支持，可以設置 box-sizing 為 content-box 或 border-box，應用為 content-box 就是正常的模式，而應用為 border-box 和 IE5.5 的盒模型很相似，即元素的寬度包括 border 和 padding，這個在布局上可能會比較方便，不用去管到底這個元素會占用多大的寬度，而用 content-box 還需要手動計算一下這個元素實際占用的寬度。

CSS3 對于動畫的支持

CSS3 支持的動畫類型有：transform（變換）、transition（過渡）和 animation（動畫）。你可以對特定的屬性設置 transition，transiton 和 animation 的區別不大，animation 的動畫是自己定義的，面向的更多的是腳本開發者，往往更加復雜。

為了使用大部分 CSS3 特性，我們不得不與原來的屬性一起使用生產商專有擴展。原因是直到現在，大部分瀏覽器只支持部分 CSS3 屬性。最常見的私有屬性是用于 Webkit 核心瀏覽器的（比如 Safari），它們以 -webkit- 開始，以及 Gecko 核心的瀏覽器（比如，Firefox），以 -moz- 開始，還有 Konqueror（-khtml-）、Opera（-o-）以及 Internet Explorer（-ms-）都有它們自己的屬性擴展（目前只有 IE 8 支持 -ms- 前綴）。

那我們在開發中該如何去用 CSS3 呢？

我覺得首先是遵循一個優雅降級的原則，比如前面談到的圓角，我們可以針對 Firefox 和 Safari 等這些支持圓角的瀏覽器中應用 CSS 圓角，而那些不支持 CSS 圓角的瀏覽器則顯示為直角。其次就是對于不支持 CSS3 的瀏覽器可以使用 JavaScript 來實現，如 CSS3 任何元素支持 :hover 偽類，我們就可以對只支持鏈接 :hover 的 IE6 用 JS 來實現。最后就是在向用戶或老板推廣新技術的同時也要關注他們的目標與可行性，不能為了技術而技術。

希望本文能幫助到您！

點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注 ｛我｝，享受文章首發體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信 我 回復“教程”！

原文鏈接：https://fed.taobao.org/blog/2009/12/18/html5-and-css3-demystification/

作者：空雁