HTML5新特性

2014年10月29日，W3C(萬維網聯盟)宣佈，HTML5標準規範制定完成。做爲一種超文本標記語言，HTML已經成爲了Web上使用的通用標記語言，而在此次HTML5的規範中，爲開發者帶來了一些使人興奮的新特性。

下面簡單地介紹下這些新特性，包括但不限於：

• 語義化標籤
• 加強型表單
• DOM擴展
• 原生拖放
• 媒體元素
• Web Socket
• Web Storage
• 地理位置
• canvas繪圖

語義化標籤

HTML 語義化是指僅僅從 HTML 元素上就能看出頁面的大體結構，好比須要強調的內容能夠放在 <strong>標籤中，而不是經過樣式設置 <span>標籤去作。不一樣瀏覽器對 HTML 元素的解析可能有差別，HTML 語義化即是在拋開樣式以後，頁面能有一個友好的展現效果。咱們力求讓頁面有良好的結構，讓頁面的元素有含義，同時利於被搜索引擎解析，利於 SEO。HTML 語義化的建議：

• 少使用無心義的 <div>、<span>標籤；
• 在 <label>標籤中設置 for 屬性和對應的 <input>關聯起來；
• 設置<img>標籤的 alt 屬性，給<a>標籤設置 title 屬性，利於 SEO；
• 在頁面的標題部分使用<h1>~<h6> 標籤，不須要給它們加多餘的樣式；
• 與表單、有序列表、無序列表相關的標籤不要單獨使用。

HTML5 也新增了一些語義化的元素，咱們經過標籤名就能判斷標籤內容。

語義元素的名稱其實也很好理解，下面是它們的做用和用法：

• <header>標籤一般放在頁面或頁面某個區域的頂部，用來設置頁眉；
• <nav>標籤能夠用來定義導航連接的集合，點擊連接能夠跳轉到其餘頁面；
• <article>標籤中的內容比較獨立，能夠是一篇新聞報道，一篇博客，它能夠獨立於頁面的其餘內容進行閱讀；
• <section>標籤表示頁面中的一個區域，一般對頁面進行分塊或對內容進行分段，<section>標籤和 <article>標籤能夠互相嵌套；
• <aside>標籤用來表示除頁面主要內容以外的內容，好比側邊欄；
• <footer>標籤位於頁面或頁面某個區域的底部，用來設置頁腳，一般包含版權信息，聯繫方式等。

加強型表單

在HTML5前的表單標籤中，對於一些功能支持的不夠好，好比：文本框提示信息、表單校驗、日期選擇控件、顏色選擇控件、範圍控件、進度條、標籤跨表單等功能，HTML5中這些經常使用的基本功能直接加到了新的表單標籤中。

新的表單中添加了不少輸入型控件，好比：number、url、email、range、color、date等，經過input的type屬性使用。例如：

<input type="number" name="demo" min="1" max="100" step="2"/>
複製代碼

同時，還添加了placeholder、required、pattern、min、max、height、width等表單屬性。

• placeholder 提供對輸入域的提示值
• required 規定表單提交前輸入域是否必填
• pattern 規定用於驗證input域的正則表達式
• min 規定輸入域容許的最小值
• max 規定輸入域容許的最大值
• multiple 輸入域能夠選擇多個值，適用於email和file類型

HTML5標準的表單中添加了不少功能，雖然這些功能都是以前經常使用的功能，但對於開發者來講，這確實是一件很不錯的事情。

DOM擴展

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-，爲元素提供與渲染無關的信息。

<div id="div" data-age="2019" data-name="James"></div>
複製代碼

能夠經過元素的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屬性，表示元素是否能夠拖動。

<img src="smile.gif" draggable="false" alt="smile"/>
<div draggable="true">James</div>
複製代碼

媒體元素

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

<!-- 視頻 -->
<video src="video.mp4" id="myVideo">Video Player</video>

<!-- 音頻 -->
<audio src="song.mp3" id="myAudio">Audio Player</audio>
複製代碼

使用這兩個元素時，至少要在標籤中包含src屬性，指向要加載的媒體文件。並不是全部的瀏覽器都支持全部媒體格式，因此能夠指定多個不一樣的媒體來源，此時使用<source>元素而不用指定src屬性。

<audio>和<video>包含不少屬性，包括autuplay、controls、src等，還能夠觸發不少事件，讓開發人員在使用少許HTML和JavaScript的狀況下編寫出自定義的音頻/視頻播放器。

Web Storage

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

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()就地等待系統發出位置已改變的信號（它不會本身輪詢位置）。

Canvas繪圖

HTML5添加的最受歡迎的功能就是<canvas>元素。這個元素負責在頁面中設定一個區域，而後就能夠經過JavaScript動態地在這個區域中繪製圖形。

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

要使用<canvas>元素，必須先設置其width和height屬性，指定能夠繪圖的區域大小。出如今開始標籤和結束標籤中的內容是後備信息，若是瀏覽器不支持<canvas>元素，就會顯示這些信息。

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
複製代碼

結語

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

若是想深刻地瞭解這些特性，建議去Mozilla官方網站閱讀相關文檔。