html5中新增了哪些新特性
小編給大家分享一下html5中新增了哪些新特性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
專(zhuān)注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作 、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)定陶免費(fèi)做網(wǎng)站 提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
html5的新特性：1、用于繪畫(huà)的canvas元素；2、用于媒介回放的video和audio元素；3、對(duì)本地離線存儲(chǔ)的更好的支持；4、新的特殊內(nèi)容元素，比如article、header、nav等；5、新的表單控件，比如date、time等。
一、HTML5概念：
1、什么是HTML5：
（1）HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)；
（2）HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
2、HTML5的起步：
（1）HTML5 是 W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟） 與 WHATWG 合作的結(jié)果
（2）為 HTML5 建立的一些規(guī)則：
a.新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript
b.減少對(duì)外部插件的需求（比如 Flash）
c.更優(yōu)秀的錯(cuò)誤處理
d.更多取代腳本的標(biāo)記
e.HTML5 應(yīng)該獨(dú)立于設(shè)備
f.開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明
3、新特性：
（1）用于繪畫(huà)的 canvas 元素
（2）用于媒介回放的 video 和 audio 元素
（3）對(duì)本地離線存儲(chǔ)的更好的支持
（4）新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
（5）新的表單控件，比如 calendar、date、time、email、url、search
二、HTML5視頻：
1、Web 上的視頻：
（1）大多數(shù)視頻是通過(guò)插件（比如 Flash）來(lái)顯示的，然而，并非所有瀏覽器都擁有同樣的插件
（2）HTML5 規(guī)定了一種通過(guò) video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法
2、視頻格式：
（1）Ogg格式：
帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
（2）MPEG4格式：
帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
（3）WebM格式：
帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
3.如何工作：
（1）示例代碼：
... （2）controls 屬性供添加播放、暫停和音量控件，可加入寬度和高度， 與 之間插入的內(nèi)容是供不支持 video 元素的瀏覽器顯示的
（3）video 元素允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式：
Your browser does not support the video tag.
4.各瀏覽器對(duì)不同格式的支持情況：
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
5. 標(biāo)簽的屬性：
屬性 值 描述
autoplay autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放
controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕
height pixels 設(shè)置視頻播放器的高度
loop loop 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放
preload preload 如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性
src url 要播放的視頻的 URL
width pixels 設(shè)置視頻播放器的寬度
三、HTML 5 Video + DOM：
1、使用 DOM 進(jìn)行控制：
（1）HTML5 元素同樣擁有方法、屬性和事件；
（2）方法用于播放、暫停以及加載等。其中的屬性（比如時(shí)長(zhǎng)、音量等）可以被讀取或設(shè)置。其中的 DOM 事件能夠通知您，比方說(shuō)， 元素開(kāi)始播放、已暫停，已停止，等等
2.方法、屬性以及事件：
方法 屬性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width
在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數(shù)據(jù)已加載后，其他屬性才可用
四.HTML5 音頻:
1、Web 上的音頻:
（1）大多數(shù)音頻是通過(guò)插件（比如 Flash）來(lái)播放的。然而，并非所有瀏覽器都擁有同樣的插件
（2）HTML5 規(guī)定了一種通過(guò) audio 元素來(lái)包含音頻的標(biāo)準(zhǔn)方法
（3）audio 元素能夠播放聲音文件或者音頻流
2.audio 元素支持的三種音頻格式：
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
3.如何工作：
（1）示例代碼：
（2）control 屬性供添加播放、暫停和音量控件， 與 之間插入的內(nèi)容是供不支持 audio 元素的瀏覽器顯示的
（3）audio 元素允許多個(gè) source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式：
Your browser does not support the audio tag.
（4） 標(biāo)簽的屬性：
屬性 值 描述
autoplay autoplay 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放
controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕
loop loop 如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放
preload preload 如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性
src url 要播放的音頻的 URL
五.HTML5 拖放：
1.拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分：
（1）拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置
（2）在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放
2.拖動(dòng)相關(guān)設(shè)置：
（1）設(shè)置元素為可拖放：
首先，為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true ：
（2）規(guī)定拖動(dòng)元素：
ondragstart 和 setData()
ondragstart 屬性調(diào)用了一個(gè)函數(shù)，drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類(lèi)型和值：
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
} 數(shù)據(jù)類(lèi)型是 “Text”，值是可拖動(dòng)元素的 id (“drag1”)
（3）放到何處 - ondragover：
ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)；
默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。
調(diào)用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault() （4）進(jìn)行放置 - ondrop：
當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生 drop 事件；
ondrop 屬性調(diào)用了一個(gè)函數(shù)，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
} （5）注意點(diǎn)：
a.調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)）
b.通過(guò) dataTransfer.getData(“Text”) 方法獲得被拖的數(shù)據(jù)。該方法將返回在 setData() 方法中設(shè)置為相同類(lèi)型的任何數(shù)據(jù)
c.被拖數(shù)據(jù)是被拖元素的 id (“drag1”)
d.把被拖元素追加到放置元素（目標(biāo)元素）中
3.拖動(dòng)示例代碼：
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));
}
六.Canvas：
1.什么是Canvas：
（1）HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像
（2）畫(huà)布是一個(gè)矩形區(qū)域，您可以控制其每一像素
（3）canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法
2.創(chuàng)建canvas元素：
示例代碼：
3. 通過(guò) JavaScript 來(lái)繪制：
（1）canvas 元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成：
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
//getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法 （2）使用 id 來(lái)尋找 canvas 元素，然后，創(chuàng)建 context 對(duì)象，然后進(jìn)行繪制
（3）fillRect 方法擁有參數(shù) (0,0,150,75)：
在畫(huà)布上繪制 150x75 的矩形，從左上角開(kāi)始 (0,0)
（4）可以通過(guò)canvas繪制出點(diǎn)、線條、圓、漸變背景、圖像
七.內(nèi)聯(lián) SVG：
1.什么是SVG:
（1）SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
（2）SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形
（3）SVG 使用 XML 格式定義圖形
（4）SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失
（5）SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
2.SVG 的優(yōu)勢(shì)：
（1）SVG 圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改
（2）SVG 圖像可被搜索、索引、腳本化或壓縮
（3）SVG 是可伸縮的
（4）SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
（5）SVG 可在圖像質(zhì)量不下降的情況下被放大
3.把 SVG 直接嵌入 HTML 頁(yè)面：
八.Canvas vs SVG：
1.SVG：
（1）SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言
（2）SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器
（3）在 SVG 中，每個(gè)被繪制的圖形均被視為對(duì)象。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形
2.Canvas：
（1）Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形
（2）Canvas 是逐像素進(jìn)行渲染的。
（3）在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包括任何或許已被圖形覆蓋的對(duì)象
3.Canvas 與 SVG 的比較：
（1）Canvas：
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結(jié)果圖像
最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪
（2）SVG：
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用 DOM 的應(yīng)用都不快）
不適合游戲應(yīng)用
九.地理定位：
1.定位用戶的位置：
（1）HTML5 Geolocation API 用于獲得用戶的地理位置
（2）鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的
2.使用地理定位：
（1）使用 getCurrentPosition() 方法來(lái)獲得用戶的位置
（2）返回用戶位置的經(jīng)度和緯度的代碼示例：
（3）示例代碼解釋?zhuān)?/p>
檢測(cè)是否支持地理定位
如果支持，則運(yùn)行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息
如果getCurrentPosition()運(yùn)行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個(gè)coordinates對(duì)象
showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度
3.處理錯(cuò)誤和拒絕：
（1）getCurrentPosition() 方法的第二個(gè)參數(shù)用于處理錯(cuò)誤。它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)
（2）示例代碼：
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
} （3）錯(cuò)誤代碼：
Permission denied - 用戶不允許地理定位
Position unavailable - 無(wú)法獲取當(dāng)前位置
Timeout - 操作超時(shí)
4.在地圖中顯示結(jié)果：
（1）如需在地圖中顯示結(jié)果，您需要訪問(wèn)可使用經(jīng)緯度的地圖服務(wù)，比如谷歌地圖或百度地圖
（2）示例代碼：
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML=" 5.getCurrentPosition() 方法 - 返回?cái)?shù)據(jù)：
（1）若成功，則 getCurrentPosition() 方法返回對(duì)象。始終會(huì)返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會(huì)返回其他下面的屬性
（2）屬性：
屬性 描述
coords.latitude 十進(jìn)制數(shù)的緯度
coords.longitude 十進(jìn)制數(shù)的經(jīng)度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米計(jì)
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，從正北開(kāi)始以度計(jì)
coords.speed 速度，以米/每秒計(jì)
timestamp 響應(yīng)的日期/時(shí)間 6.Geolocation 對(duì)象 - 其他有趣的方法：
（1）watchPosition() - 返回用戶的當(dāng)前位置，并繼續(xù)返回用戶移動(dòng)時(shí)的更新位置（就像汽車(chē)上的 GPS）
（2）clearWatch() - 停止 watchPosition() 方法
十. Web 存儲(chǔ)：
1.在客戶端存儲(chǔ)數(shù)據(jù)：
（1）HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：
localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)
（2）之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器 的請(qǐng)求來(lái)傳遞，這使得 cookie 速度很慢而且效率也不高
（3）在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能
（4）對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問(wèn)其自身的數(shù)據(jù)
（5）HTML5 使用 JavaScript 來(lái)存儲(chǔ)和訪問(wèn)數(shù)據(jù)
2.localStorage 方法：
（1）localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用
（2）如何創(chuàng)建和訪問(wèn) localStorage：
localStorage.lastname="Smith";
document.write(localStorage.lastname);
（3）對(duì)用戶訪問(wèn)頁(yè)面的次數(shù)進(jìn)行計(jì)數(shù)的例子：
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
3.sessionStorage 方法：
（1）sessionStorage 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除
（2）如何創(chuàng)建并訪問(wèn)一個(gè) sessionStorage：
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
（3）對(duì)用戶在當(dāng)前 session 中訪問(wèn)頁(yè)面的次數(shù)進(jìn)行計(jì)數(shù)的例子：
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
十一.HTML 5 應(yīng)用程序緩存：
1.什么是應(yīng)用程序緩存：
（1）HTML5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可進(jìn)行緩存，并可在沒(méi)有因特網(wǎng)連接時(shí)進(jìn)行訪問(wèn)
（2）應(yīng)用程序緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：
a.離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
b.速度 - 已緩存資源加載得更快
c.減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。
（3）使用 HTML5，通過(guò)創(chuàng)建 cache manifest 文件，可以輕松地創(chuàng)建 web 應(yīng)用的離線版本
2.HTML5 Cache Manifest 實(shí)例:
帶有 cache manifest 的 HTML 文檔（供離線瀏覽）的示例：
The content of the document......
重慶分公司
重慶分公司