溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細介紹“html5的新特性是什么”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“html5的新特性是什么”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
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 屬性：描述了一個正則表達式用于驗證<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的新特性是什么”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
