placeholder 提供對(duì)輸入域的提示值

required 規(guī)定表單提交前輸入域是否必填

pattern 規(guī)定用于驗(yàn)證input域的正則表達(dá)式

min 規(guī)定輸入域允許的最小值

max 規(guī)定輸入域允許的最大值

multiple 輸入域可以選擇多個(gè)值，適用于email和file類型

HTML5標(biāo)準(zhǔn)的表單中添加了很多功能，雖然這些功能都是之前常用的功能，但對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，這確實(shí)是一件很不錯(cuò)的事情。

HTML5增加的getElementByClassName()方法是最受人歡迎的一個(gè)方法，可以通過(guò)document對(duì)象及所有HTML元素調(diào)用該方法。

//取得類中包含"username"和"current"的元素
var allCurrentUsernames = document.getElementByClassName("username current")

//取得id為"myDiv"的元素中帶有類名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected")

使用這個(gè)方法可以更方便地為帶有某些類的元素添加事件處理程序，而不必再局限于使用ID或標(biāo)簽名(getElementsByTagName)。

HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要加前綴data-，為元素提供與渲染無(wú)關(guān)的信息。

可以通過(guò)元素的dataset屬性訪問(wèn)自定義屬性的值。

var div = document.getElementById("div")
//取得自定義屬性的值
var age = div.dataset.age;
var name = div.dataset.name;

HTML5還為DOM作了其他擴(kuò)展，包括classList屬性、焦點(diǎn)管理、HTMLDocument變化、字符集屬性、插入標(biāo)記等。

最早在網(wǎng)頁(yè)中引入JavaScript拖放功能的是IE4，HTML5以IE的實(shí)例為基礎(chǔ)制定了拖放規(guī)范。拖放事件可以控制拖放相關(guān)的各個(gè)方面，拖動(dòng)某元素時(shí)，將依次觸發(fā)下列事件：

dragstart

drag

dragend

拖放通常伴隨著數(shù)據(jù)變化，為了在拖放操作時(shí)實(shí)現(xiàn)數(shù)據(jù)變換，IE5引入了dataTransfer對(duì)象，它是事件對(duì)象的一個(gè)屬性，用于從被拖動(dòng)元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。dataTransfer對(duì)象有兩個(gè)主要方法：getData()和setData()，getData()可以獲取由setData()保存的值。

//設(shè)置和接收文本數(shù)據(jù)
event.dataTransfer.serData("name", "James")
var name = event.dataTransfer.getData("name")

同時(shí)，還能通過(guò)dataTransfer來(lái)確定被拖動(dòng)的元素及作為放置目標(biāo)的元素能夠接收什么操作。

默認(rèn)情況下，圖像、鏈接和文本是可以拖動(dòng)的，HTML5為所有HTML元素規(guī)定了一個(gè)draggable屬性，表示元素是否可以拖動(dòng)。

James

HTML5新增了兩個(gè)與媒體相關(guān)的標(biāo)簽，讓開(kāi)發(fā)人員不必依賴任何插件就能在網(wǎng)頁(yè)中嵌入跨瀏覽器的音頻和視頻內(nèi)容，這兩個(gè)標(biāo)簽就是和。

使用這兩個(gè)元素時(shí)，至少要在標(biāo)簽中包含src屬性，指向要加載的媒體文件。并非所有的瀏覽器都支持所有媒體格式，所以可以指定多個(gè)不同的媒體來(lái)源，此時(shí)使用元素而不用指定src屬性。

和包含很多屬性，包括autuplay、controls、src等，還可以觸發(fā)很多事件，讓開(kāi)發(fā)人員在使用少量HTML和JavaScript的情況下編寫(xiě)出自定義的音頻/視頻播放器。

Web Storage的目的是克服由cookie帶來(lái)的一些限制，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時(shí)，無(wú)須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。Web Storage的兩個(gè)主要目標(biāo)是：

提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的途徑

提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制

Web Storage常用的兩個(gè)對(duì)象分別是localStorage和sessionStorage。

sessionStorage對(duì)象存儲(chǔ)某個(gè)特定會(huì)話的數(shù)據(jù)，該數(shù)據(jù)只保持到瀏覽器關(guān)閉。因?yàn)閟essionStorage綁定于某個(gè)服務(wù)器會(huì)話，所以文件在本地運(yùn)行時(shí)是不可用的。下面展示了怎么使用sessionStorage:

sessionStorage.setItem("name", "James");
var name = sessionStorage.getItem("name")

localStorage對(duì)象在HTML5規(guī)范中作為持久保存客戶端數(shù)據(jù)的方案，目的是跨越會(huì)話存儲(chǔ)對(duì)象，但有特定的訪問(wèn)限制。要訪問(wèn)同一個(gè)localStorage對(duì)象，頁(yè)面必須來(lái)自同一個(gè)域名(子域名無(wú)效)，使用同一種協(xié)議，在同一個(gè)端口上。

localStorage.setItem("name", "James");
var name = localStorage.getItem("name")

與其他客戶端數(shù)據(jù)存儲(chǔ)方案類似，Web Storage同樣也有限制，這些限制因?yàn)g覽器而異。對(duì)于localStorage和sessionStorage，有的瀏覽器會(huì)設(shè)置每個(gè)來(lái)源5MB的限制，有的瀏覽器會(huì)設(shè)置2.5M的限制。

Web Sockets的目標(biāo)是在一個(gè)多帶帶的持久連接上提供全雙工、雙向通信。使用標(biāo)準(zhǔn)的HTTP服務(wù)器無(wú)法實(shí)現(xiàn)Web Sockets，只有支持這種協(xié)議的專門(mén)服務(wù)器才能正常工作。

未加密的連接不再是http://而是ws://，加密的連接也不再是https://而是wss://。使用自定義協(xié)議而不是HTTP協(xié)議的好處是，能夠在客戶端和服務(wù)器之間發(fā)送非常少量的數(shù)據(jù)，而不必?fù)?dān)心HTTP那樣字節(jié)級(jí)的開(kāi)銷。

要?jiǎng)?chuàng)建Web Socket，先實(shí)現(xiàn)一個(gè)WebSocket對(duì)象并傳入要連接的URL:

var socket = new WebSocket("ws://www.example.com/")

Web Socket打開(kāi)之后，就可以通過(guò)連接發(fā)送和接收數(shù)據(jù)。要向服務(wù)器發(fā)送數(shù)據(jù)，使用send()方法并傳入任意字符串，例如：

socket.send("Hello World");

對(duì)于復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，在通過(guò)連接發(fā)送前，必須進(jìn)行序列化:

//將數(shù)據(jù)序列化為一個(gè)JSON字符串，再發(fā)送到服務(wù)器
const message = {
  name: "James",
  age: "2019",
  date: "2019-01-01"
}
socket.send(JSON.stringify(message));

接下來(lái)，服務(wù)器要讀取其中的數(shù)據(jù)，就要解析接收的JSON字符串。當(dāng)服務(wù)器向客戶端發(fā)來(lái)消息時(shí)，WebSocket對(duì)象就會(huì)觸發(fā)message事件。

socket.onmessage = function(event) {
 const data = event.data;
 
 //處理數(shù)據(jù)
}

要關(guān)閉Web Socket連接，可以在任何時(shí)候調(diào)用close()方法。

socket.close();

通過(guò)地理定位(geolocation)API，JavaScript代碼能夠訪問(wèn)到用戶的當(dāng)前位置信息。當(dāng)然，訪問(wèn)之前用戶必須同意共享其地理位置信息。

Geolocation API在瀏覽器中的實(shí)現(xiàn)是navigator.geolocation對(duì)象，這個(gè)對(duì)象包含3個(gè)方法。第一個(gè)方法是getCurrentPosition()，調(diào)用這個(gè)方法就會(huì)觸發(fā)請(qǐng)求用戶共享地理定位信息的對(duì)話框。成功會(huì)接收到一個(gè)Position對(duì)象參數(shù)，該對(duì)象有兩個(gè)屬性：coords和timestamp。coords對(duì)象中將包含下列與位置相關(guān)的信息：

latitude：緯度

longitude：經(jīng)度

accuracy：經(jīng)、緯度坐標(biāo)的精度，以米為單位

navigator.geolocation.getCurrentPosition(position => {
  drawMapAt(position.coords.latitude, position.coords.longitude);
}, error => {
  console.log("Error Code:" + error.code);
  console.log("Error Message:" + error.message);
});

如果希望跟蹤用戶的位置，可以使用watchPosition()方法。這個(gè)方法與getCurrentPosition()方法基本相同，第一次調(diào)用，執(zhí)行成功回調(diào)或者錯(cuò)誤回調(diào)，然后，watchPosition()就地等待系統(tǒng)發(fā)出位置已改變的信號(hào)（它不會(huì)自己輪詢位置）。

HTML5添加的最受歡迎的功能就是元素。這個(gè)元素負(fù)責(zé)在頁(yè)面中設(shè)定一個(gè)區(qū)域，然后就可以通過(guò)JavaScript動(dòng)態(tài)地在這個(gè)區(qū)域中繪制圖形。

元素最早是蘋(píng)果公司推出的，當(dāng)時(shí)主要用在其Dsahboard文件中（最新的Mac已經(jīng)棄用了這個(gè)軟件）。

要使用元素，必須先設(shè)置其width和height屬性，指定可以繪圖的區(qū)域大小。出現(xiàn)在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容是后備信息，如果瀏覽器不支持元素，就會(huì)顯示這些信息。

A drawing of something.

上面只是簡(jiǎn)單地介紹了下HTML5所帶來(lái)的一些新特性，淺嘗則止并不深入，這些新特性在平時(shí)的開(kāi)發(fā)中也給我們帶來(lái)了很大的便利性。

如果想深入地了解這些特性，建議去Mozilla官方網(wǎng)站閱讀相關(guān)文檔。