首先對于html5是什么意思我們都應該知道，若是不太了解html5，那么你可以看一看這篇文章：html5是什么？html5有什么用？，好了，在知道了html5的具體定義后，我們就來看一看html5的新特性有哪些吧。

html5的新特性有哪些？

一、html5新特性之用于繪畫的canvas元素

canvas 元素用于在網頁上繪制圖形，畫布是一個矩形區域，您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

 canvas id= myCanvas width= 200 height= 100 >
 script type= text/javascript var c=document.getElementById( myCanvas var cxt=c.getContext( 2d var img=new Image()img.src= /i/eg_flower.png cxt.drawImage(img,0,0); /script 
下面來說一下關于svg的內容：svg是用于描述二維矢量圖形的一種圖形格式。
svg有三種用法：
把svg直接當成圖片放在網頁上。
svg實現動畫。
svg圖片的交互和濾鏡效果。
說明：
（1）Canvas 通過 JavaScript 來繪制 2D 圖形。 
（2）Canvas 是逐像素進行渲染的。 
（3）在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包 括任何或許已被圖形覆蓋的對象。
（4）svg是一種使用 XML 描述 2D 圖形的語言。
（5）svg基于XML，這意味著 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。
（6）在svg中，每個被繪制的圖形均被視為對象。如果svg對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。
更多關于canvas和svg的內容可以參考：HTML5 canvas和HTML5 內聯SVG
二、html5新特性之更加豐富強大的表單
html5 擁有多個新的表單 Input 輸入類型。這些新特性提供了更好的輸入控制和驗證。
html5 也新增以下表單元素：
 datalist ：元素規定輸入域的選項列表，使用 input 元素的 list 屬性與 datalist 元素的 id 綁定。
 keygen ：提供一種驗證用戶的可靠方法，標簽規定用于表單的密鑰對生成器字段。
 output ：用于不同類型的輸出，比如計算或腳本輸出。
HTML5 新增的表單屬性：
placehoder 屬性：簡短的提示在用戶輸入值前會顯示在輸入域上。即我們常見的輸入框默認提示，在用戶輸入后消失。
required 屬性：是一個 boolean 屬性。要求填寫的輸入域不能為空
pattern 屬性：描述了一個正則表達式用于驗證 input 元素的值。
min 和 max 屬性：設置元素最小值與最大值。
step 屬性：為輸入域規定合法的數字間隔。
height 和 width 屬性：用于 image 類型的 input 標簽的圖像高度和寬度。
autofocus 屬性：是一個 boolean 屬性。規定在頁面加載時，域自動地獲得焦點。
multiple 屬性：是一個 boolean 屬性。規定 input 元素中可選擇多個值。
三、html5新特性之用于媒介的video和audio元素
1、html5提供了播放音頻文件的標準，即使用 audio 元素
實例： audio controls 
 source src= horse.ogg type= audio/ogg  source src= horse.mp3 type= audio/mpeg 您的瀏覽器不支持 audio 元素。 /audio 
說明：
（1）control 屬性供添加播放、暫停和音量控件。
（2）在 audio 與 /audio 之間你需要插入瀏覽器不支持的 audio 元素的提示文本 。
（3） audio 元素允許使用多個 source 元素. source 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。
（4） audio 元素支持三種音頻格式文件: MP3, Wav, 和 Ogg。
2、html5提供了一種通過video元素來包含視頻的標準方法。
 video width= 320 height= 240 controls  source src= movie.mp4 type= video/mp4  source src= movie.ogg type= video/ogg 您的瀏覽器不支持Video標簽。 /video 
說明：
（1）control 提供了 播放、暫停和音量控件來控制視頻。也可以使用dom操作來控制視頻的播放暫停，如 play() 和 pause() 方法。
（2）video元素提供了width和height屬性控制視頻的尺寸.如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。
（3）標簽之間插入的內容是提供給不支持video元素的瀏覽器顯示的。
（4）video 元素支持多個source 元素. 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式（ MP4, WebM, 和 Ogg）。
四、html5新特性之html5地理定位
HTML5 Geolocation（地理定位）用于定位用戶的位置。
window.navigator.geolocation { getCurrentPosition: fn 用于獲取當前的位置數據 watchPosition: fn 監視用戶位置的改變 clearWatch: fn 清除定位監視} 
獲取用戶定位信息：
navigator.geolocation.getCurrentPosition( function(pos){ console.log( 用戶定位數據獲取成功 ) //console.log(arguments); console.log( 定位時間： ,pos.timestamp) console.log( 經度： ,pos.coords.longitude) console.log( 緯度： ,pos.coords.latitude) console.log( 海拔： ,pos.coords.altitude) console.log( 速度： ,pos.coords.speed)}, //定位成功的回調function(err){  console.log( 用戶定位數據獲取失敗 ) //console.log(arguments);} //定位失敗的回調)
五、html5新特性之html5拖放
拖放（Drag 和 drop）是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放；拖放的過程分為源對象和目標對象。源對象是指你即將拖動元素，而目標對象則是指拖動之后要放置的目標位置。
想要了解更多拖放中的內容可以參考：HTML拖放
下面給出一個實例：
 !DOCTYPE HTML  html  head  style type= text/css #div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} /style  script type= text/javascript function allowDrop(ev)ev.preventDefault();function drag(ev)ev.dataTransfer.setData( Text ,ev.target.id);function drop(ev)ev.preventDefault();var data=ev.dataTransfer.getData( Text ev.target.appendChild(document.getElementById(data)); /script  /head  body  p 請把圖片拖放到矩形中： /p  div id= div1 ondrop= drop(event) ondragover= allowDrop(event) /div  br /  img id= drag1 src= /i/xxx.gif draggable= true ondragstart= drag(event) /  /body  /html 
六：html5新特性之html5 Web存儲
在客戶端存儲數據：
html5 提供了兩種在客戶端存儲數據的新方法：
（1）localStorage - 沒有時間限制的數據存儲：localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。
（2）sessionStorage - 針對一個 session 的數據存儲：sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。
七、html5新特性之html5應用程序緩存
使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。
什么是應用程序緩存（Application Cache）？
HTML5 引入了應用程序緩存，這意味著 web 應用可進行緩存，并可在沒有因特網連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
（1）離線瀏覽 - 用戶可在應用離線時使用它們
（2）速度 - 已緩存資源加載得更快
（3）減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
八、html5新特性之html5 Web Workers
當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能。您可以繼續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行。
九、html5新特性之html5服務器發送事件
html5服務器發送事件（server-sent event）允許網頁獲得來自服務器的更新。
Server-Sent 事件 - 單向消息傳遞
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。
十、html5新特性之html5 WebSocket 
WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過 TCP 連接直接交換數據。當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，并通過 onmessage 事件來接收服務器返回的數據。
關于后面這幾個特性的更多內容大家可以去看一看：HTML5 完整版手冊
以上就是給大家總結的十個html5的新特性，當然了，如果想更深入的學習html5，這里給大家推薦關于html5視頻教程。
相關推薦：
HTML5新特性dataset的使用方法
HTML5 中的一些有趣的新特性
以上就是html5的新特性有哪些？html5新特性的總結的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。