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

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

html5的新特性有哪些？

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

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

Your browser does not support the canvas element.

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);

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

svg有三種用法：

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

2. svg實現(xiàn)動畫。

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

說明：

（1）Canvas 通過 JavaScript 來繪制 2D 圖形。

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

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

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

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

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

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

二、html5新特性之更加豐富強大的表單

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

html5 也新增以下表單元素：

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

：用于不同類型的輸出，比如計算或腳本輸出。

HTML5 新增的表單屬性：

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

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

pattern 屬性：描述了一個正則表達(dá)式用于驗證 元素的值。

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

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

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

autofocus 屬性：是一個 boolean 屬性。規(guī)定在頁面加載時，域自動地獲得焦點。

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

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

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

實例：

您的瀏覽器不支持 audio 元素。

說明：

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

（2）在 之間你需要插入瀏覽器不支持的

（3）

（4）

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

  
  
您的瀏覽器不支持Video標(biāo)簽。

說明：

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

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

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

（4）video 元素支持多個source 元素. 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式（ 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('定位時間：',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）是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放；拖放的過程分為源對象和目標(biāo)對象。源對象是指你即將拖動元素，而目標(biāo)對象則是指拖動之后要放置的目標(biāo)位置。

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

下面給出一個實例：

#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}


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));
}



請把圖片拖放到矩形中：