HTML5有哪些新特性、移除了哪些元素？

（一）.H5新特性

增強了圖形渲染、影音、數據存儲、多任務處理等處理能力主要表現在

1)  繪畫 canvas;

類似windows自帶的畫圖板，可繪制線、框、路徑、圖……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法。

畫圖需要的要素

a)   筆，用筆可以畫線、圓、矩形、文本等

b)   顏色

c)   畫板

由於畫布案例比較多，代碼比較復雜，請看視頻學習http://www.chuanke.com/3885380-190205.html 

2)  本地離線存儲 localStorage

長期存儲數據，瀏覽器關閉后數據不丟失;

1.特點

數據永久存儲，沒有時間限制；大小限制5M(夠用了)；只存儲字符串。

2.數據存取方式

 

1.  
   localStorage.a = 3;//設置a為"3"
2.  
   localStorage[ "a"] = "sfsf";//設置a為"sfsf"，覆蓋上面的值
3.  
   localStorage.setItem( "b","isaac");//設置b為"isaac"
4.  
   var a1 = localStorage["a"];//獲取a的值
5.  
   var a2 = localStorage.a;//獲取a的值
6.  
   var b = localStorage.getItem("b");//獲取b的值
7.  
   var b2= localStorage.key(0);//獲取第一個key的內容
8.  
   localStorage.removeItem( "c");//清除c的值
9.  
   localStorage.clear(); //清除所有的數據

 

推薦使用：

getItem()

setItem()

removeItem()

3.事件監聽

 

1.  
   if(window.addEventListener){
2.  
   window.addEventListener("storage",handle_storage,false);//
3.  
   } else if(window.attachEvent){ //兼容IE
4.  
   window.attachEvent("onstorage",handle_storage);
5.  
   }
6.  
   function handle_storage(e){
7.  
   }

 

對象e為localStorage對象，Chrome、Firefox支持差，IE支持較好。

3)  sessionStorage的數據在瀏覽器關閉后自動刪除;操作參考localStorage

4)  用於媒介回放的 video和 audio 元素;

5)  語意化更好的內容元素，比如article、footer、header、nav、section;

6)  表單控件，calendar、date、time、email、url、search;

7)  新的技術webworker(專用線程)

8)  websocketsocket通信

9)  Geolocation 地理定位

（二）移除的元素

純表現的元素

 

•   <basefont> 默認字體，不設置字體，以此渲染
•   <font> 字體標簽
•   <center> 水平居中
•   <u> 下划線
•   <big> 大字體
•   <strike> 中橫線
•   <tt> 文本等寬

 

框架集

•   <frameset>
•   <noframes>
•   <frame>

Html5新增了 27 個元素，廢棄了 16 個元素，根據現有的標准規范，把 HTML5 的元素按優先級定義為結構性屬性、級塊性元素、行內語義性元素和交互性元素 4 大類。

結構性元素主要負責web上下文結構的定義

section：在 web 頁面應用中，該元素也可以用於區域的章節描述。

header：頁面主體上的頭部， header 元素往往在一對 body 元素中。

footer：頁面的底部（頁腳），通常會標出網站的相關信息。

nav：專門用於菜單導航、鏈接導航的元素，是 navigator 的縮寫。

article：用於表現一篇文章的主體內容，一般為文字集中顯示的區域。

級塊性元素主要完成web頁面區域的划分，確保內容的有效分割。

aside：用於表達注記、貼士、側欄、摘要、插入的引用等作為補充主體的內容。

figure：是對多個元素進行組合並展示的元素，通常與 ficaption 聯合使用。

code：表示一段代碼塊。

dialog：用於表達人與人之間的對話，該元素包含 dt 和 dd 這兩個組合元素， dt 用於表示說話者，而 dd 用來表示說話內容。

行內語義性元素主要完成web頁面具體內容的引用和描述，是豐富內容展示的基礎。

meter：表示特定范圍內的數值，可用於工資、數量、百分比等。

time：表示時間值。

progress：用來表示進度條，可通過對其 max 、 min 、 step 等屬性進行控制，完成對進度的表示和監事。

video：視頻元素，用於支持和實現視頻文件的直接播放，支持緩沖預載和多種視頻媒體格式。

audio：音頻元素，用於支持和實現音頻文件的直接播放，支持緩沖預載和多種音頻媒體格式。

交互性元素主要用於功能性的內容表達，會有一定的內容和數據的關聯，是各種事件的基礎。

details：用來表示一段具體的內容，但是內容默認可能不顯示，通過某種手段（如單擊）與 legend 交互才會顯示出來。

datagrid：用來控制客戶端數據與顯示，可以由動態腳本及時更新。

menu：主要用於交互菜單（曾被廢棄又被重新啟用的元素）。

command：用來處理命令按鈕。

*移除的元素

 純表現的元素：basefont，big，center，font,s，strike，tt，u；

 對可用性產生負面影響的元素：frame，frameset，noframes；