HTML5和CSS3中的交互新特性

當文章的標題是一副用photoshop製做的圖片，那麼勢必在搜索引擎中沒法搜索到。而且由於圖片的體積不算小。可能在網速慢的的時候不得不耐心的等待圖片的刷新。

因此。咱們來談談有沒有一種新的方法可以避免這些缺點。

 

什麼是HTML5和CSS3

 

HTML和CSS並不難理解。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提供了地理信息的應用接口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的兼容性是十分必要的。