HTML5 & CSS3的新交互特性

什麼是HTML5和CSS3

 HTML和CSS並不難理解。HTML爲構成網頁的主要語言。經過這種語言，咱們能夠向計算機說明網頁格式、內容、顯示效果等等。而CSS則是專 門用來控制網頁顯示效果的語言。這時候問題出來了，爲何咱們要單獨使用CSS呢，HTML不是同樣能夠控制Web頁面的顯示效果麼？爲了回答這個問題， 我舉個簡單的例子：

有沒有發現若是一旦形容的事情過多，想要把事情描述清楚的時候，咱們不得不重複大量的信息？頁面語言也是同樣，在這種狀況下顯得雜亂無章，很是難以 理出頭緒。經過將控制顯示效果的語言集成到CSS裏，咱們不但能夠保證頁面語言主體部分的簡潔，並且能夠很是方便的複用各類語言集合。

HTML5和CSS3是HTML和CSS的最新版本，它們目前均未肯定標準，可是已經公佈的新特徵已經讓咱們心動不已。

HTML 5的新特新

1. 新的內容標籤

HTML4中的內容標籤級別相同，沒法區分各部份內容。而HTML5中的內容標籤互相獨立，級別不一樣，搜索引擎以及統計軟件等都可快速識別各部份內容。

2. 更好的表格體系

如今，你能夠拋棄JavaScript或者是PHP，只經過HTML5來定義表格。你能夠定義每一個表格單元的輸入格式，也能夠定義這個單元是不是必填的等等。

3. 音頻、視頻API

HTML5不但容許你在網頁中直接整合視頻、音頻，同時更提供了一套功能豐富的API用來控制媒體播放，而這些用來控制媒體播放的元素也都是能夠被編輯的。所以，HTML5在視頻以及音頻層面上實際已經能夠替代經常使用的flash插件了。

4. 畫布(Canvas) API

在網頁中繪製圖形一直是個大難題，咱們不得不借助flash、silverlight等插件。然而HTML5容許你直接在網頁上進行繪圖，甚至容許你與網頁生成更多的交互，例如繪製圖形、放大縮小，等等。圖例是一個用HTML5製做的小遊戲。

5. 地理(Geolocation) API

HTML5提供了地理信息的應用接口Geolocation API。經過這個API，網頁能夠經過IP，GPS等方式來得到用戶的地理信息；同時用戶也能夠選擇是否關閉這個功能。

6. 網頁存儲(Web storage) API

HTML5提供了網頁存儲的API，方便Web應用的離線使用。除此以外，新的API相對於cookie也有着高安全性，高效率，更大空間等優勢。

7. 拖拽釋放(Drag and drop) API

咱們能夠經過HTML5的Drag and drop API來完成網頁中的拖拽釋放效果，避免了以往的網頁在拖拽釋放過程當中須要不停修改元素的位置，代碼繁多的弊端。

CSS3 新特性

1. RGBa

CSS3的RGBa新特性容許你對每一個元素進行色彩以及透明度的設置。而原來經常使用的opacity命令只能對元素及其子元素進行設置。

2. Multi-column layout

CSS3新提供的多欄佈局選擇器無需HTML佈局標籤便可生成多欄佈局，同時‘欄數’、‘欄寬’以及‘欄間距’都是能夠定義的。

3. Round corners

圓角功能多是CSS3提供的最實用的功能了。經過Border-radius，你能夠沒有任何難度的給指定的HTML元素添加圓角。而且你還能夠定義圓角的大小，以及哪一個角是圓角，哪一個角不是圓角。

4. @font-face

當網頁顯示某種用戶沒有安裝的字體時，CSS3提供的@font-face功能會自動的、默默地幫用戶從網絡上下載相應字體。從而讓設計師更加自由的發揮，而不用考慮用戶的機器是否安裝了相應字體。

5. 其餘特性

此外，CSS3還給咱們帶來了漸變、防止字符串過長溢出、多重背景以及用圖片來做爲元素邊框等功能。

利用好CSS3，你能夠更快捷的獲得以往用不少插件才能獲得的效果。同過使用元素自己來取代大部分圖片，網頁的加載速度會獲得提高，這些本來是圖片的內容，也能夠被搜索引擎檢索到。

HTML5和CSS3的兼容性

HTML5和CSS3的標準並未正式完成，各家瀏覽器對其支持程度也不盡相同。瞭解HTML5和CSS3的兼容性是十分必要的。下面的鏈接是一個專門跟蹤HTML5和CSS3兼容性的網站，有興趣的朋友能夠點擊查看：

http://www.findmebyip.com/litmus