1.語義化標(biāo)簽：

2.新增表單input輸入類型：這些新特性更好地提供了輸入控制和驗(yàn)證众旗。

3.新增表單元素：

4.新增表單屬性：

5.音頻和視頻：

• 音頻：audio
  定義聲音鹤啡，比如音樂或其他音頻流。
  支持Mp3,Wav,Ogg三種格式

• 視頻：video
  定義視頻，比如電影片段或其他視頻流运杭。
  支持MP4,WebM,Ogg三種格式

6.Canvas:

通過腳本（通常是 JavaScript）來繪制圖形（比如圖表和其他圖像）。但該標(biāo)簽只是圖形容器日矫，必須使用腳本來繪制圖形赂弓。

7.SVG 與 Canvas

SVG是指可伸縮矢量圖形(Scalable Verctor Graphics),是一種基于XML語法的圖像格式盈魁。其他圖像格式都是基于像素處理的，SVG則是屬于對(duì)圖像的形狀描述窃诉，所以SVG本質(zhì)上是文本文件杨耙，體積較小，并且不管放大多少倍都不會(huì)失真飘痛。

SVG:

• SVG 是一種使用 XML 描述 2D 圖形的語言珊膜。
• SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的宣脉。你可以為某個(gè)元素附加 JavaScript 事件處理器车柠。
• 在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象脖旱。如果 SVG 對(duì)象的屬性發(fā)生變化堪遂，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

Canvas:

• Canvas 是逐像素進(jìn)行渲染的萌庆。在 canvas 中溶褪，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注践险。如果其位置發(fā)生變化猿妈，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象巍虫。

Canvas 和 SVG的區(qū)別

Canvas

• 依賴分辨率
• 不支持事件處理器
• 弱的文本渲染能力
• 能夠以 .png 或 .jpg 格式保存結(jié)果圖像
• 最適合圖像密集型的游戲彭则，其中的許多對(duì)象會(huì)被頻繁重繪

SVG

• 不依賴分辨率
• 支持事件處理器
• 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
• 復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）
• 不適合游戲應(yīng)用

8.地理定位：Geolocation用于定位用戶信息

• HTML5 Geolocation API 用于獲得用戶的地理位置。
• 但是鑒于該特性可能侵犯用戶的隱私占遥，除非用戶同意俯抖，否則用戶位置信息是不可用的。
• 使用 getCurrentPosition() 方法來獲得用戶的位置瓦胎。

function getLocation(){
  if (navigator.geolocation){
      navigator.geolocation.getCurrentPosition(showPosition);
    }else{
      alert("瀏覽器不支持地理定位");
    }
  }
function showPosition(pos){
      var lat = pos.coords.latitude;  //緯度
      var lon = pos.coords.longitude;  //經(jīng)度
      var time = pos.timestamp; //定位時(shí)間
      var alti = pos.coords.altitude; //海拔
      var speed = pos.coords.speed; //速度
}

f

9.webStorage:

是本地存儲(chǔ)芬萍，存儲(chǔ)在客戶端尤揣，包括localStorage和sessionStorage。

• localstorage:沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)（持久化的本地存儲(chǔ)）柬祠。
• sessionstorage:針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)北戏。

cookie

• 主要用途是在保存用戶信息，比如登錄網(wǎng)站記住密碼漫蛔。
• cookie不適合大量數(shù)據(jù)的存儲(chǔ)嗜愈，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來傳遞，這使得 cookie 速度很慢而且效率也不高莽龟。對(duì)于不同的網(wǎng)站蠕嫁，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)毯盈。

cookie拌阴、localstorage、sessionstorage的區(qū)別

• 保存數(shù)據(jù)：
  localStorage.setItem(key,value);
• 讀取數(shù)據(jù)：
  localStorage.getItem(key);
• 刪除單個(gè)數(shù)據(jù)：
  localStorage.removeItem(key);
• 刪除所有數(shù)據(jù)：
  localStorage.clear();
• 得到某個(gè)索引的key：
  localStorage.key(index);

10.websocket

• WebSocket是HTML5開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
• 在WebSocket API中掌挚，瀏覽器和服務(wù)器只需要做一個(gè)握手的動(dòng)作雨席，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道吠式。兩者之間就直接可以數(shù)據(jù)互相傳送陡厘。
• 瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請(qǐng)求，連接建立以后特占，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)糙置。當(dāng)你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務(wù)器發(fā)送數(shù)據(jù)是目，并通過 onmessage 事件來接收服務(wù)器返回的數(shù)據(jù)谤饭。

結(jié)語:

簡(jiǎn)單的介紹一些HTML5新特性，在未來的學(xué)習(xí)中會(huì)繼續(xù)補(bǔ)充做進(jìn)一步的理解。
本文如果存在錯(cuò)誤的地方揉抵，歡迎指出批評(píng)~