html5的新特性是什么

本文將為大家詳細(xì)介紹“html5的新特性是什么”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“html5的新特性是什么”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

html5的新特性有哪些？

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

canvas 元素用于在網(wǎng)頁(yè)上繪制圖形，畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。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>

下面來(lái)說(shuō)一下關(guān)于svg的內(nèi)容：svg是用于描述二維矢量圖形的一種圖形格式。

svg有三種用法：

1. 把svg直接當(dāng)成圖片放在網(wǎng)頁(yè)上。

2. svg實(shí)現(xiàn)動(dòng)畫。

3. svg圖片的交互和濾鏡效果。

說(shuō)明：

（1）Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形。

（2）Canvas 是逐像素進(jìn)行渲染的。

（3）在 canvas 中，一旦圖形被繪制完成，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制，包    括任何或許已被圖形覆蓋的對(duì)象。

（4）svg是一種使用 XML 描述 2D 圖形的語(yǔ)言。

（5）svg基于XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的。您可以為某個(gè)元素附加 JavaScript 事件處理器。

（6）在svg中，每個(gè)被繪制的圖形均被視為對(duì)象。如果svg對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

更多關(guān)于canvas和svg的內(nèi)容可以參考：HTML5 canvas和HTML5 內(nèi)聯(lián)SVG

二、html5新特性之更加豐富強(qiáng)大的表單

html5 擁有多個(gè)新的表單 Input 輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。

html5 也新增以下表單元素：

<datalist>：元素規(guī)定輸入域的選項(xiàng)列表，使用 <input> 元素的 list 屬性與 <datalist> 元素的 id 綁定。

<keygen>：提供一種驗(yàn)證用戶的可靠方法，標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。

<output>：用于不同類型的輸出，比如計(jì)算或腳本輸出。

HTML5 新增的表單屬性：

placehoder 屬性：簡(jiǎn)短的提示在用戶輸入值前會(huì)顯示在輸入域上。即我們常見(jiàn)的輸入框默認(rèn)提示，在用戶輸入后消失。

required  屬性：是一個(gè) boolean 屬性。要求填寫的輸入域不能為空

pattern 屬性：描述了一個(gè)正則表達(dá)式用于驗(yàn)證<input> 元素的值。

min 和 max 屬性：設(shè)置元素最小值與最大值。

step 屬性：為輸入域規(guī)定合法的數(shù)字間隔。

height 和 width 屬性：用于 image 類型的 <input> 標(biāo)簽的圖像高度和寬度。

autofocus 屬性：是一個(gè) boolean 屬性。規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。

multiple 屬性：是一個(gè) boolean 屬性。規(guī)定<input> 元素中可選擇多個(gè)值。

三、html5新特性之用于媒介的video和audio元素

1、html5提供了播放音頻文件的標(biāo)準(zhǔn)，即使用<audio>元素

實(shí)例：<audio controls>

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>

說(shuō)明：

（1）control 屬性供添加播放、暫停和音量控件。

（2）在<audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本 。

（3）<audio> 元素允許使用多個(gè) <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個(gè)支持的音頻文件。

（4）<audio>元素支持三種音頻格式文件: MP3, Wav, 和 Ogg。

2、html5提供了一種通過(guò)video元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標(biāo)簽。
</video>

說(shuō)明：

（1）control 提供了 播放、暫停和音量控件來(lái)控制視頻。也可以使用dom操作來(lái)控制視頻的播放暫停，如 play() 和 pause() 方法。

（2）video元素提供了width和height屬性控制視頻的尺寸.如果設(shè)置的高度和寬度，所需的視頻空間會(huì)在頁(yè)面加載時(shí)保留。如果沒(méi)有設(shè)置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時(shí)保留特定的空間，頁(yè)面就會(huì)根據(jù)原始視頻的大小而改變。

（3）標(biāo)簽之間插入的內(nèi)容是提供給不支持video元素的瀏覽器顯示的。

（4）video 元素支持多個(gè)source 元素. 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式（ MP4, WebM, 和 Ogg）。

四、html5新特性之html5地理定位

HTML5 Geolocation（地理定位）用于定位用戶的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于獲取當(dāng)前的位置數(shù)據(jù)
    watchPosition: fn  監(jiān)視用戶位置的改變
    clearWatch: fn  清除定位監(jiān)視
}　　　

獲取用戶定位信息：

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log('用戶定位數(shù)據(jù)獲取成功')
      　　　　//console.log(arguments);
      　　　　console.log('定位時(shí)間：',pos.timestamp)
      　　　　console.log('經(jīng)度：',pos.coords.longitude)
      　　　　console.log('緯度：',pos.coords.latitude)
      　　　　console.log('海拔：',pos.coords.altitude)
      　　　　console.log('速度：',pos.coords.speed)
},    //定位成功的回調(diào)
function(err){ 
 　　　　console.log('用戶定位數(shù)據(jù)獲取失敗')
      　　　　//console.log(arguments);
}        //定位失敗的回調(diào)
)

五、html5新特性之html5拖放

拖放（Drag 和 drop）是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放；拖放的過(guò)程分為源對(duì)象和目標(biāo)對(duì)象。源對(duì)象是指你即將拖動(dòng)元素，而目標(biāo)對(duì)象則是指拖動(dòng)之后要放置的目標(biāo)位置。

想要了解更多拖放中的內(nèi)容可以參考：HTML拖放

下面給出一個(gè)實(shí)例：

<!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>請(qǐng)把圖片拖放到矩形中：</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存儲(chǔ)

在客戶端存儲(chǔ)數(shù)據(jù)：

html5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

（1）localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)：localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。

（2）sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)：sessionStorage 方法針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。

七、html5新特性之html5應(yīng)用程序緩存

使用 HTML5，通過(guò)創(chuàng)建 cache manifest 文件，可以輕松地創(chuàng)建 web 應(yīng)用的離線版本。

什么是應(yīng)用程序緩存（Application Cache）？

HTML5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可進(jìn)行緩存，并可在沒(méi)有因特網(wǎng)連接時(shí)進(jìn)行訪問(wèn)。

應(yīng)用程序緩存為應(yīng)用帶來(lái)三個(gè)優(yōu)勢(shì)：

（1）離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們

（2）速度 - 已緩存資源加載得更快

（3）減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過(guò)或更改過(guò)的資源。

八、html5新特性之html5 Web Workers

當(dāng)在 HTML 頁(yè)面中執(zhí)行腳本時(shí)，頁(yè)面的狀態(tài)是不可響應(yīng)的，直到腳本已完成。

web worker 是運(yùn)行在后臺(tái)的 JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等等，而此時(shí) web worker 在后臺(tái)運(yùn)行。

九、html5新特性之html5服務(wù)器發(fā)送事件

html5服務(wù)器發(fā)送事件（server-sent event）允許網(wǎng)頁(yè)獲得來(lái)自服務(wù)器的更新。

Server-Sent 事件 - 單向消息傳遞

Server-Sent 事件指的是網(wǎng)頁(yè)自動(dòng)獲取來(lái)自服務(wù)器的更新。

以前也可能做到這一點(diǎn)，前提是網(wǎng)頁(yè)不得不詢問(wèn)是否有可用的更新。通過(guò)服務(wù)器發(fā)送事件，更新能夠自動(dòng)到達(dá)。

十、html5新特性之html5 WebSocket　

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

如果你能讀到這里，小編希望你對(duì)“html5的新特性是什么”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！