首先對於html5是什麼意思我們都應該知道，若是不太瞭解html5，那麼你可以看一看這篇文章：html5是什嗎？html5有什麼用？，好了，在知道了html5的具體定義後，我們就來看一看html5的新特性有哪些吧。
html5的新特性有哪些？
一、html5新特性之用於繪畫的canvas元素
canvas 元素用於在網頁上繪製圖形，畫布是一個矩形地區，您可以控制其每一像素。canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加映像的方法。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
<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 屬性：描述了一個Regex用於驗證<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視頻教程。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
