placeholder 提供對輸入域的提示值

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

pattern 規(guī)定用于驗證input域的正則表達式

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

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

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

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

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

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

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

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

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

可以通過元素的dataset屬性訪問自定義屬性的值。

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

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

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

dragstart

drag

dragend

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

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

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

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

James

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

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

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

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

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

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

Web Storage常用的兩個對象分別是localStorage和sessionStorage。

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

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

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

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

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

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

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

要創(chuàng)建Web Socket，先實現(xiàn)一個WebSocket對象并傳入要連接的URL:

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

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

socket.send("Hello World");

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

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

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

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

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

socket.close();

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

Geolocation API在瀏覽器中的實現(xiàn)是navigator.geolocation對象，這個對象包含3個方法。第一個方法是getCurrentPosition()，調(diào)用這個方法就會觸發(fā)請求用戶共享地理定位信息的對話框。成功會接收到一個Position對象參數(shù)，該對象有兩個屬性：coords和timestamp。coords對象中將包含下列與位置相關(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()方法。這個方法與getCurrentPosition()方法基本相同，第一次調(diào)用，執(zhí)行成功回調(diào)或者錯誤回調(diào)，然后，watchPosition()就地等待系統(tǒng)發(fā)出位置已改變的信號（它不會自己輪詢位置）。

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

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

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

A drawing of something.

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

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