HTML5和CSS3中的互動新特性

尛沫發表於2014-05-08
HTMLCSSS3

當文章的標題是一幅用Photoshop製作的圖片，那麼勢必在搜尋引擎中無法搜尋到，而且由於圖片的體積不算小，可能在網速慢的時候不得不耐心地等待圖片的重新整理。所以，我們來談談有沒有一種新的方法可以避免這些缺點。

什麼是HTML5和CSS3

HTML和CSS並不難理解。HTML為構成網頁的主要語言，通過這種語言，我們可以向計算機說明網頁格式、內容、顯示效果等等；而CSS則是專門用來控制網頁顯示效果的語言。

HTML5的新特性

  1. 新的內容標籤
    HTML4中的內容標籤級別相同，無法區分各部分內容。而HTML5中的內容標籤互相獨立，級別不同，搜尋引擎以及統計軟體等均可快速識別各部分內容。

  2. 更好的表格體系
    現在，你可以拋棄JavaScript或者是PHP，只通過HTML5來定義表格。你可以定義每個表格單元的輸入格式，也可以定義這個單元是否是必填的等等。

  3. 音訊、視訊API
    HTML5不但允許你在網頁中直接整合視訊、音訊，同時更提供了一套功能豐富的API用來控制媒體播放，而這些用來控制媒體播放的元素也都是可以被編輯的。因此，HTML5在視訊以及音訊層面上實際已經可以替代常用的Flash外掛了。

  4. 畫布(Canvas) API
    在網頁中繪製圖形一直是個大難題，我們不得不借助Flash、Silverlight等外掛。然而HTML5允許你直接在網頁上進行繪圖，甚至允許你與網頁生成更多的互動，例如繪製圖形、放大縮小，等等。圖例是一個用HTML5製作的小遊戲。

  5. 地理(Geolocation) API
    HTML5提供了地理資訊的應用介面GeolocationAPI。通過這個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的相容性是十分必要的。

本文為Anyforweb技術分享部落格，需要了解網站建設相關，請訪問anyforweb.com。

相關文章