placeholder 提供對輸入域的提示值

required 規定表單提交前輸入域是否必填

pattern 規定用于驗證input域的正則表達式

min 規定輸入域允許的最小值

max 規定輸入域允許的最大值

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

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

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

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

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

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

HTML5規定可以為元素添加非標準的屬性，但要加前綴data-，為元素提供與渲染無關的信息。

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

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

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

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

dragstart

drag

dragend

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

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

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

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

James

HTML5新增了兩個與媒體相關的標簽，讓開發人員不必依賴任何插件就能在網頁中嵌入跨瀏覽器的音頻和視頻內容，這兩個標簽就是和。

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

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

Web Storage的目的是克服由cookie帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無須持續地將數據發回服務器。Web Storage的兩個主要目標是：

提供一種在cookie之外存儲會話數據的途徑

提供一種存儲大量可以跨會話存在的數據的機制

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

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

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

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

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

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

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

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

要創建Web Socket，先實現一個WebSocket對象并傳入要連接的URL:

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

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

socket.send("Hello World");

對于復雜的數據結構，在通過連接發送前，必須進行序列化:

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

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

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

要關閉Web Socket連接，可以在任何時候調用close()方法。

socket.close();

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

Geolocation API在瀏覽器中的實現是navigator.geolocation對象，這個對象包含3個方法。第一個方法是getCurrentPosition()，調用這個方法就會觸發請求用戶共享地理定位信息的對話框。成功會接收到一個Position對象參數，該對象有兩個屬性：coords和timestamp。coords對象中將包含下列與位置相關的信息：

latitude：緯度

longitude：經度

accuracy：經、緯度坐標的精度，以米為單位

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()方法基本相同，第一次調用，執行成功回調或者錯誤回調，然后，watchPosition()就地等待系統發出位置已改變的信號（它不會自己輪詢位置）。

HTML5添加的最受歡迎的功能就是元素。這個元素負責在頁面中設定一個區域，然后就可以通過JavaScript動態地在這個區域中繪制圖形。

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

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

A drawing of something.

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

如果想深入地了解這些特性，建議去Mozilla官方網站閱讀相關文檔。