JavaScript 進階知識 - HTML5篇

1. 認識HTML5

HTML5並不僅僅只是作爲HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成爲第一個將Web做爲應用開發平臺的HTML語言。

HTML5定義了一系列新元素，如新語義標籤、智能表單、多媒體標籤等，可以幫助開發者創建富互聯網應用，還提供了一系列Javascript API，如地理定位、重力感應、硬件訪問等，可以在瀏覽器內實現類原生應用，甚至結合Canvas我們可開發網頁版遊戲，同時結合CSS3的過渡、轉換、動畫等特性，可以極大的增強用戶體驗，提升開發功能的可應用性。

我們日常討論的H5其實是一個泛稱，它指的是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平臺。

2. 語法規範

隨着Web技術的更新，HTML也先後經歷了HTML4.01、XHTML1.0、HTML5幾個重要的版本，在版本的演變過程中新增或廢棄了一些屬性，同時對語法規範也做了一些調整，爲了能夠保證瀏覽器可以兼容不同版本語法規範的，我們可以使用<!DOCTYPE>指示瀏覽器應該如何處理我們的HTML。

常用的DOCTYPE聲明：

1、HTML5

<!DOCTYPE html>

2、HTML 4.01 Strict

4.01的嚴格版本，該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

3、HTML 4.01 Transitional

該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

4、HTML 4.01 Frameset

該DTD等同於HTML 4.01 Transitional，但允許框架集內容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

5、XHTML 1.0 Strict

該DTD包含所有HTML元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。必須以格式正確的XML來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

6、XHTML 1.0 Transitional

該DTD包含所有HTML元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets）。必須以格式正確的XML來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

7、XHTML 1.0 Frameset

該DTD等同於XHTML 1.0 Transitional，但允許框架集內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

8、XHTML 1.1

該DTD等同於XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的ruby支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

3. 語義化標籤

HTML5提供了新的元素來創建更好的頁面結構：

標籤	描述
`<article>`	定義頁面獨立的內容區域（文章）。
`<aside>`	定義頁面的側邊欄內容（側邊欄）。
`<bdi>`	允許您設置一段文本，使其脫離其父元素的文本方向設置。
`<command>`	定義命令按鈕，比如單選按鈕、複選框或按鈕
`<details>`	用於描述文檔或文檔某個部分的細節
`<dialog>`	定義對話框，比如提示框
`<summary>`	標籤包含`details`元素的標題
`<figure>`	規定獨立的流內容（圖像、圖表、照片、代碼等等）。
`<figcaption>`	定義`<figure>`元素的標題
`<footer>`	定義`section`或`document`的頁腳。
`<header>`	定義了文檔的頭部區域
`<mark>`	定義帶有記號的文本。
`<meter>`	定義度量衡。僅用於已知最大和最小值的度量。
`<nav>`	定義導航鏈接的部分。
`<progress>`	定義任何類型的任務的進度。
`<ruby>`	定義`ruby`註釋（中文注音或字符）。
`<rt>`	定義字符（中文注音或字符）的解釋或發音。
`<rp>`	在`ruby`註釋中使用，定義不支持`ruby`元素的瀏覽器所顯示的內容。
`<section>`	定義文檔中的節（`section`、區段）。
`<time>`	定義日期或時間。
`<wbr>`	規定在文本中的何處適合添加換行符。

本質上新語義標籤與<div>、<span>沒有區別，只是其具有語義性，使用時除了在HTML結構上需要注意外，其它和普通標籤的使用無任何差別，可以理解成<div class="nav">相當於<nav>。不要好奇，它只是一個標籤！

儘量避免全局使用header、footer、aside等語義標籤。

4. HTML5 瀏覽器支持

對於目前主流的瀏覽器來說，都已經支持HTML5了，但是到了Internet Explorer 9，IE纔開始支持HTML5，對於之前的舊版本，我們就需要考慮到兼容性問題。

1、將 HTML5 元素定義爲塊元素

HTML5 新增了幾個具有語義化的標籤，這些標籤都是塊級元素，在不支持HTML5新標籤的瀏覽器裏，會將這些新的標籤解析成行內元素(inline)對待，所以我們只需要在初始化的時候將其轉換成塊元素(block)即可使用。

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

2、通過 js 動態創建標籤

在IE9版本以下，並不能正常解析這些新標籤，但是卻可以識別通過document.createElement('tagName')創建的自定義標籤，於是我們的解決方案就是將HTML5的新標籤全部通過document.createElement('tagName')來創建一遍，這樣IE低版本也能正常解析HTML5新標籤了。

<style>
    header,section,nav...{
        display:block;
    }
</style>

<script type="text/javascript">
      document.createElement("header");
      document.createElement("section");
      document.createElement("nav");
                 .
                 .
                 .
</script>

注意：通過document.createElement創建出來的標籤時行內元素，所以同樣的需要將它們轉換成塊級元素。

3、Shiv 解決方案

在實際開發中我們更多采用的是通過檢測IE瀏覽器的版本來加載第三方的一個JS庫來解決兼容問題，這個庫文件會幫自動通過document.createElement('tagName')創建所有HTML5的新標籤。針對IE瀏覽器html5shiv是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作爲父節點包裹子元素，並且不能應用CSS樣式的問題。

引入本地html5shiv.min.js文件：

<!--[if lte IE 8]>
     <script type="text/javascript" src="html5shiv.min.js"></script>
<![endif]-->

lte：表示小於等於；當瀏覽器版本小於等於IE8的時候，引用html5shiv.min.js文件。

引入遠程靜態資源庫：

<!--[if lte IE 8]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

以上的註釋代碼只有在IE瀏覽器下次纔會識別裏面的內容，其他瀏覽器直接當註釋識別。

完整示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兼容性處理</title>
<!--[if lte IE 8]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
 
<body>
 
<h1>我正在處理兼容性</h1>
 
<article>我在IE下也能顯示</article>
 
</body>
</html>

注意：html5shiv.js引用代碼必須放在<head>元素中，因爲IE瀏覽器在解析HTML5新元素時需要先加載該文件。

5. 表單

伴隨着互聯網富應用以及移動開發的興起，傳統的Web表單已經越來越不能滿足開發的需求，所以HTML5在Web表單方向也做了很大的改進，如拾色器、日期/時間組件等，使表單處理變的更加高效。

5.1 表單控件

html5中新增的一些表單控件，例如email屬性的輸入框，它可以檢測你的輸入內容是否符合一個郵箱的格式，自動進行表單校驗。

1、表單域：form

我們都知道<form>標籤用於爲用戶輸入創建HTML表單。表單能夠包含input元素，比如文本字段、複選框、單選框、提交按鈕等等。表單還可以包含menus、textarea、fieldset、legend和label元素。

表單用於向服務器傳輸數據。

在html5中<form>表單域添加了兩個新的屬性："autocomplete: no/yes"、"novalidate"：

autocomplete：規定是否啓用表單的自動完成功能，默認on。（自動完成允許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在字段中填寫的選項。）。
novalidate：如果使用該屬性，則提交表單時不進行驗證（關閉控件自動校驗功能）。

2、郵箱：email

<form>
    郵箱：<input type="email" name="email">
</form>

效果圖：

3、網址：url

協議、域名都要輸入進去（https://www.baidu.com，如果直接www.baidu.com會提示輸入錯誤的），否則觸發表單校驗。

<form>
    網址：<input type="url" name="url">
</form>

效果圖：

4、數字：number

輸入表單數number屬性的時候，在表單尾部會有一個上下的箭頭，用來選擇數字。另外表單裏的step屬性表示：點擊的時候每一次增加或減少的步數；max屬性表示：增加到的最大範圍，min屬性表示減小到的最小範圍。

<form>
    年齡：<input type="number" name="" step="3" max="120" >
</form>

效果圖：

5、電話號碼：tel

<form>
     電話號碼： <input type="tel" name="tel">
</form>

6、顏色：color

<form>
    郵箱：<input type="color" name="color">
</form>

效果圖：

7、時間：time

<form>
     時間：<input type="time" name="time">
</form>

效果圖：

8、日期：date

<form>
     日期： <input type="date" name="date">
</form>

效果圖：

9、時間日期：datetime

<form>
     時間日期： <input type="datetime" name="datetime">
</form>

10、周：week

<form>
     周： <input type="week" name="week">
</form>

效果圖：

11、月：month

<form>
     月： <input type="month" name="month">
</form>

效果圖：

12、滑塊：range

max：規定允許的最大值，min：規定允許的最小值。

<form>
    滑塊： <input type="range" name="range" min="1" max="20">
</form>

效果圖：

5.2 表單元素

不是所有瀏覽器都支持HTML5新的表單元素的，但是不影響使用，即使不支持仍然可以顯示常規的表單。

1、datalist

在Web設計中,經常會用到如輸入框的自動下拉提示,這將大大方便用戶的輸入。在以前，如果要實現這樣的功能，必須要求開發者使用一些Javascript的技巧或相關的框架進行ajax調用，需要一定的編程工作量。但隨着HTML5的慢慢普及，開發者可以使用其中的新的DataList標記就能快速開發出十分漂亮的AutoComplete組件的效果。

datalist有點類似於select下拉菜單，datalist元素規定輸入域的選項列表。列表是通過datalist內的 option元素創建的。如需把datalist綁定到輸入域，請用輸入域的list屬性引用datalist的id：

<p>
    瀏覽器版本：<input list="words">
</p>

<datalist id="words">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
    <option value="Sogou">
    <option value="Maxthon">
</datalist>

效果圖：

5.3 表單屬性

在HTML5中， <form>和<input>標籤添加了幾個新屬性。其中<form>標籤的autocomplete、novalidate屬性，我們在上面都講過了，現在我們來看看<input>提供了哪些新的屬性。

1、autocomplete 自動完成

autocomplete屬性規定form或input域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。

提示：autocomplete屬性有可能在form元素中默認是開啓的，而在input元素中是關閉的。需要手動添加"on"。

示例代碼：

<input type="text" autocomplete="on">

2、placeholder 佔位符

placeholder屬性提供一種提示（hint），描述輸入域所期待的值。簡短的提示在用戶輸入值前會顯示在輸入域上。

示例代碼：

用戶名：<input type="text" placeholder="請輸入用戶名">

效果圖：

3、autofocus 自動獲得焦點

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

示例代碼：

用戶名：<input type="text" name="username" autofocus>

4、multiple 多文件上傳

multiple屬性是一個boolean屬性。multiple屬性規定<input>元素中可選擇多個值。

示例代碼：

<form action="xxx.php">
  選擇圖片: <input type="file" name="img" multiple>
  <input type="submit">
</form>

此時上傳文件時就可以同時上傳多個文件了。

5、form 綁定輸入域

當一個輸入表單input，不在一個表單域form中的時候。通過form屬性和表單域的id可以將輸入表單綁定到表單域中。

示例代碼：

<form action="xxx.php" id="form1">
    用戶名: <input type="text" name="username"><br>
    <input type="submit" value="提交">
</form>
    密碼: <input type="text" name="pwd" form="form1">

點擊提交按鈕，表單域外部的“密碼”輸入框內容也會提交。

6、required 必填項

required屬性是一個boolean屬性。required屬性規定必須在提交之前填寫輸入域（不能爲空）。

示例代碼：

用戶名: <input type="text" name="usrname" required>

7、pattern 自定義驗證

pattern屬性描述了自定義一個正則表達式用於驗證<input>元素的值。

示例代碼：

<form action="">
    用戶名: <input type="text" name="username" pattern="[A-Za-z]{3}" title="三位英文字母">
    <input type="submit">
</form>

效果圖：

5.4 表單事件

這裏給大家介紹兩個表單事件oninput：用戶輸入的時候觸發的事件；oninvalid：表單驗證無法通過時候觸發的事件

示例代碼：

<form action="">
    用戶名：<input type="text" name="username" id="user">
    <!-- 限定密碼格式只能是數字 -->
    密 碼： <input type="text" name="pwd" id="pwd" pattern="\d+">
    <input type="submit">
</form>

<script type="text/javascript">
    var user = document.getElementById('user');
    var pwd = document.getElementById('pwd');
    
    // 用戶輸入的時候觸發
    user.oninput = function(){
        alert(1);
    }
    // 驗證無法通過的時候觸發
    pwd.oninvalid = function(){
        alert(2);
    }
</script>

效果圖：

當驗證無法通過的時候，可以通過setCustomValidity方法添加或修改提示內容：

pwd.oninvalid = function(){
    this.setCustomValidity("密碼格式錯誤"); 
}

效果圖：

5.5 表單樣式

這裏主要是說下如何修改placeholder的默認樣式。

火狐： input::-moz-placeholder{}
谷歌： input::-webkit-input-placeholder {}

通過雙僞元素選擇器，即可改變placeholder文字的樣式。

6. 多媒體標籤

在HTML5之前，在網頁上播放音頻/視頻的通用方法是利用Flash來播放，但是大多情況下，並非所有用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/視頻播放變的非常複雜，並且移動設備的瀏覽器並不支持Flash插件。

6.1 音頻

HTML5通過<audio>標籤來解決音頻播放的問題。

示例代碼：

<!-- 通過src指定音頻文件路徑即可 -->
<audio src="./xxx.mp3"></audio>

播放格式

由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考：

處理兼容性

在<audio>與</audio>之間你需要插入瀏覽器不支持的<audio>元素的提示文本。<audio>元素允許使用多個 <source>元素。<source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件。

<audio>
    <!-- 通過source標籤指定多格式音頻文件 -->
    <source src="xxx.ogg" type="audio/ogg">
    <source src="xxx.mp3" type="audio/mpeg">
    <source src="xxx.wav" type="audio/wav">
    您的瀏覽器不支持 audio 元素。
</audio>

音頻控制屬性

通過附加屬性可以更友好控制音頻的播放.

autoplay 自動播放
controls 是否顯示控制條
loop 循環播放

6.2 視頻

HTML5通過<video>標籤來解決音頻播放的問題。

示例代碼：

<!-- 通過src指定視頻文件路徑即可 -->
<audio src="./xxx.mp4"></audio>

播放格式

由於版權等原因，不同的瀏覽器可支持播放的格式是不一樣的，如下圖供參考:

處理兼容性

<video width="320" height="240" controls>
    <source src="xxx.mp4" type="video/mp4">
    <source src="xxx.ogg" type="video/ogg">
    您的瀏覽器不支持Video標籤。
</video>

6.3 音頻/視頻方法

通過附加屬性可以更加友好的控制音頻、視頻的播放。

1、autoplay 自動播放

autoplay屬性設置或返回音視頻是否在加載後即開始播放。

設置autoplay屬性：

audio|video.autoplay=true|false

返回autoplay屬性：

audio|video.autoplay

啓用自動播放，並重載視頻：

var video=document.getElementById("video1");
video.autoplay = true;
video.load();

2、buffered 已緩衝部分

buffered屬性返回TimeRanges對象。TimeRanges對象表示用戶的音視頻緩衝範圍。緩衝範圍指的是已緩衝音視頻的時間範圍。如果用戶在音視頻中跳躍播放，會得到多個緩衝範圍。

返回值：

TimeRanges對象，表示音視頻的已緩衝部分。

TimeRanges對象屬性：

length - 獲得音視頻中已緩衝範圍的數量
start(index) - 獲得某個已緩衝範圍的開始位置
end(index) - 獲得某個已緩衝範圍的結束位置

注意：首個緩衝範圍的下標是0。

示例代碼：

獲得視頻的第一段緩衝範圍（部分），以秒計：

var video = document.getElementById("video1");
alert("Start: " + video.buffered.start(0) + " End: " + video.buffered.end(0));

3、controls 是否顯示控制條

controls屬性設置或返回瀏覽器應當顯示標準的音視頻控件。

設置controls屬性：

audio|video.controls=true|false

返回controls屬性：

audio|video.controls

啓用視頻控件：

var video = document.getElementById("video1");
video.controls = true;

4、currentSrc 返回當前資源的URL

currentSrc熟悉返回當前音頻/視頻的URL。如果未設置音頻/視頻，則返回空字符串。

獲得當前視頻的URL：

video = document.getElementById("video1");
alert(video.currentSrc);

5、currentTime 當前播放位置（時間s）

屬性	描述
`autoplay`	資源加載完成後自動播放視頻或音頻
`buffered`	返回表示音頻/視頻已緩衝部分的`TimeRanges`對象
`controls`	是否顯示控制條
`currentSrc`	返回當前音頻/視頻的`URL`
`currentTime`	設置或返回音頻/視頻中的當前播放位置（以秒計）
`defaultMuted`	設置或返回音頻/視頻默認是否靜音
`defaultPlaybackRate`	設置或返回音頻/視頻的默認播放速度
`duration`	返回當前音頻/視頻的長度（以秒計）
`ended`	返回音頻/視頻的播放是否已結束
`error`	返回表示音頻/視頻錯誤狀態的`MediaError`對象
`loop`	設置或返回音頻/視頻是否應在結束時重新播放
`mediaGroup`	設置或返回音頻/視頻所屬的組合（用於連接多個音頻/視頻元素）
`muted`	設置或返回音頻/視頻是否靜音
`networkState`	返回音頻/視頻的當前網絡狀態
`paused`	設置或返回音頻/視頻是否暫停
`playbackRate`	設置或返回音頻/視頻播放的速度
`played`	返回表示音頻/視頻已播放部分的`TimeRanges`對象
`preload`	設置或返回音頻/視頻是否應該在頁面加載後進行加載
`readyState`	返回音頻/視頻當前的就緒狀態
`seekable`	返回表示音頻/視頻可尋址部分的`TimeRanges`對象
`seeking`	返回用戶是否正在音頻/視頻中進行查找
`src`	設置或返回音頻/視頻元素的當前來源
`startDate`	返回表示當前時間偏移的`Date`對象
`textTracks`	返回表示可用文本軌道的`TextTrackList`對象
`videoTracks`	返回表示可用視頻軌道的`VideoTrackList`對象
`volume`	設置或返回音頻/視頻的音量

7. DOM 擴展

7.1 獲取元素

html5中新添了兩個查找元素的屬性，分別是：querySelector，querySelectorAll。

<ul>
     <li class="one"><a href="#">文字1</a></li>
     <li class="two"><a href="#">文字2</a></li>
     <li class="three"><a href="#">文字3</a></li>
</ul>

<script type="text/javascript">
    //獲取元素的方式
    var a= document.querySelector(".one a");
    a.style.color="red";
    
    //通過該方式可以將所有對應的元素選中 返回的是一個僞數組
    var a1= document.querySelectorAll("a");  

</script>

7.2 類名操作

html5中新添加了一個操作類名的對象：classList。我們可以通過它裏面的方法對元素的類進行操作。

1、添加類（add）

添加類的時候，獲取到元素之後，通過classList的add方法添加一個類名，但是一次只能添加一個類名，否則會報錯。

<style type="text/css">
    .bgc {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .fonts{
        font-size: 26px;
    }
</style>

<div>文字</div>

<script type="text/javascript">
      var div=document.querySelector("div");
          // 添加樣式 只能單獨添加
          div.classList.add("bgc");    
        div.classList.add("fonts");
</script>

2、移除類（remove）

移除類的時候，獲取到元素之後，通過classList的remove方法移除一個類名。

<style type="text/css">
    .bgc {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
    .fonts{
        font-size: 26px;
    }
</style>

<div class="bgc fonts">文字</div>

<script type="text/javascript">
      var div=document.querySelector("div");
          // 移除樣式 只能單獨移除
          div.classList.remove("bgc");    
        div.classList.remove("fonts");
</script>

3、切換類（toggle）

當元素上沒有某個類時，它就新增這個類；如果元素已經有了這個類，它就是刪除它，就是切換操作。

<style type="text/css">
    .bgc {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>

<div class="bgc">文字</div>

<script type="text/javascript">
      var div=document.querySelector("div");
          // 切換樣式 因爲元素已經有“bac”這個類名了，所以這裏是移除的功能
          div.classList.toggle("bgc");
</script>

4、是否存在某個類（contains）

判斷獲取的元素中是否存在某個類名，返回值爲true或者false。

<style type="text/css">
    .bgc {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>

<div class="bgc">文字</div>

<script type="text/javascript">
      var div=document.querySelector("div");
          // 判斷元素是否擁有某個類名
          div.classList.contains("bgc");    // true
</script>

7.3 自定義屬性

HTML5規定可以爲元素添加非標準的屬性，但要添加前綴data-，目的是爲元素提供與渲染無關的信息，或者提供語義信息。這些屬性可以任意添加、隨便命名，只要以data-開頭。

如：

<p data-info="tags"></p>

獲取自定義屬性（dataset['自定義屬性名稱']）

通過Node.dataset['info'] 我們便可以獲取到自定義的屬性值。

<p data-info="describe" data-num="123">這是一段描述</p>

<script>
    var tag = document.querySelector('p');
    var data = tag.dataset;

    console.log(data);   // 打印的是一個對象 DOMStringMap
    console.log(data['info']);  // "describe"
    console.log(data['num']);  // "123"
</script>

Node.dataset是以對象形式存在的，當我們爲同一個DOM節點指定了多個自定義屬性時，Node.dataset則以鍵值對的形式存儲了所有的自定義屬性的值。

設置自定義屬性（dataset['自定義屬性名稱']="設定屬性值"）

通過過Node.dataset['info']="值" 我們便可以設置自定義的屬性值。

<p data-info="describe" data-num="123">這是一段描述</p>

<script>
    var tag = document.querySelector('p');
    var data = tag.dataset;

    data['name'] = "Ryan";
    console.log(data);     // 多了一個name屬性
</script>

注意

當自定義屬性中除了data-之外中間出現“-”連接符時，設置和獲取的時候需要將屬性名轉成駝峯的格式才能正常的設置和獲取。

<p data-my-info="information">這是一段描述！</p>

<script>
    var tag = document.querySelector('p');
    var data = tag.dataset;

    data['myInfo'] = "info";
    console.log(data);     // {myInfo:"info"}
</script>

8. 網絡狀態

我們可以通過window.navigator.onLine來檢測，用戶當前的網絡狀況，返回一個布爾值

通過給window綁定監聽事件，可以監測瀏覽器的一些狀態信息

網絡從無到有時觸發“online”方法

window.addEventListener('online', function(){
    // online是網絡從無網到有網的 時候觸發
})

網絡從有到無時觸發“offline”方法

window.addEventListener('offline', function(){
    // online是網絡從有網到無網的時候觸發
})

9. 地理定位

在HTML規範中，增加了獲取用戶地理信息的API，這樣使得我們可以基於用戶位置開發互聯網應用，即基於位置服務 (Location Base Service)

9.1 獲取地理信息方式

獲取地理信息的方式一共有三種分別是：

IP地址
三維座標
- GPS（Global Positioning System，全球定位系統）
- Wi-Fi
- 手機信號
用戶自定義數據

如下表：

下表對不同獲取方式的優缺點進行了比較，瀏覽器會自動以最優的方式去獲取用戶地理位置

數據源	優點	缺點
`IP` 地址	任何地方都可以用，在服務器端處理	不精確（經常出錯，一般精確到城市級）運算代價大
`GPS`	很精確	定位時間長，耗電量大；室內效果差；需要額外硬件設備支持
`Wi-Fi`	精確，可在室內使用，簡單、快捷	在鄉村這些`Wi-Fi`接入點少的地區無法實現用
手機信號	相當準確，可在室內使用，簡單、快捷	需要能夠訪問手機或其 `modem` 設備
用戶自定義	可獲得比程序定位服務更準確的位置數據，用戶自行輸入可能比自動檢測更快	可能很不準確，特別是當用戶位置變更後

9.2 隱私

HTML5 Geolocation規範提供了一套保護用戶隱私的機制。必須先得到用戶明確許可，才能獲取用戶的位置信息。

9.3 使用地理定位

有兩個方法都可以獲取到當前的地理定位，只是功能上稍微有點區別。

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) // 方法：獲取當前地理信息

navigator.geolocation.watchPosition(successCallback, errorCallback, options) // 重複獲取當前地理信息

當成功獲取地理信息後

會調用succssCallback，並返回一個包含位置信息的對象position。

position.coords.latitude  // 緯度
position.coords.longitude // 經度

成功對象position：

屬性	描述
`coords.latitude`	十進制數的緯度
`coords.longitude`	十進制數的經度
`coords.accuracy`	位置精度
`coords.altitude`	海拔，海平面以上以米計
`coords.altitudeAccuracy`	位置的海拔精度
`coords.heading`	方向，從正北開始以度計
`coords.speed`	速度，以米/每秒計
`timestamp`	響應的日期/時間

當獲取地理信息失敗後

會調用errorCallback，並返回錯誤信息error

返回無符號的、簡短的錯誤碼，詳見下表：

值	相關聯的常量	描述
1	`PERMISSION_DENIED`	用戶不允許地理定位
2	`POSITION_UNAVAILABLE`	無法獲取當位置
3	`TIMEOUT`	超時操作

示例代碼：

獲取當前位置的經緯度

window.navigator.geolocation.getCurrentPosition(function(position){
    // 緯度
    var lat = position.coords.latitude;
    // 經度
    var long = position.coords.longitude;

    console.log('你當前的緯度爲：' + lat + '經度爲：' + long)

},function(err){  // 錯誤時回調信息
    if(err.code == 1){
        alert('沒有權限')
    }else if(err.code == 2){
        alert('內部錯誤');
    }else{
        alert('超時')
    }
},{
    // 超時設置
    timeout: 5000
});

9.4 百度地圖的用法

結合百度地圖的API，我們可以使用它上面的一些功能，比如在地圖上定位等等等...

進入百度地圖開放平臺官網：

網址：http://lbsyun.baidu.com/

找到Web開發 -> javascript API

直接找到示例DEMO，複製源代碼，需要獲取密鑰（自己申請，需要一到兩個工作日）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微軟雅黑";
        }
    </style>
    <script type="text/javascript" src="你申請的祕鑰"></script>
    <title>地圖展示</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap"); // 創建Map實例
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設置中心點座標和地圖級別
    map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
    map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的
    map.enableScrollWheelZoom(true); //開啓鼠標滾輪縮放
</script>

獲取當前所在位置，設置到地圖上

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微軟雅黑";
        }
    </style>
    <script type="text/javascript" src="你申請的祕鑰"></script>
    <title>地圖展示</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    window.navigator.geolocation.getCurrentPosition(function (pos) {
        // 緯度
        var lat = pos.coords.latitude;
        // 經度
        var long = pos.coords.longitude;

        console.log('你當前的緯度爲：' + lat + '經度爲：' + long)

        // 百度地圖API功能
        var map = new BMap.Map("allmap"); // 創建Map實例
        map.centerAndZoom(new BMap.Point(long, lat), 15); // 初始化地圖,設置中心點座標和地圖級別
        map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
        map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的
        map.enableScrollWheelZoom(true); //開啓鼠標滾輪縮放

    }, function (err) {
        if (err.code == 1) {
            alert('沒有權限')
        } else if (err.code == 2) {
            alert('內部錯誤');
        } else {
            alert('超時')
        }
    }, {
        // 超時設置
        timeout: 5000
    });
</script>

效果圖：

10. WEB 存儲

隨着互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，爲了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由於其存儲大小隻有4k左右，並且解析也相當的複雜，每一次發送請求都會攜帶上cookie，會造成帶寬的浪費，給開發帶來諸多不便，HTML5規範則提出解決方案。web存儲的含義是將數據存儲到用戶的電腦上，這樣可以緩解服務器的壓力，並且提高體驗。

10.1 特性

設置、讀取方便
容量較大，sessionStorage約5M，localStorage約20M
只能存儲字符串，可以將對象JSON.stringify()轉成字符串後存儲

10.2 方法詳解

setItem(key, value)設置存儲內容
getItem(key)讀取存儲內容
removeItem(key)刪除鍵值爲key的存儲內容
clear()清空所有存儲內容
key(n)以索引值來獲取鍵名
length 存儲的數據的個數

示例代碼：

// 在本地存儲了一個鍵爲：username 值爲 Ryan's 的這個一個對象
// 在chrome的控制檯的application裏面的Storage可以查看
window.localStorage.setItem('username1',"Ryan's");
window.localStorage.setItem('username2',"Levi's");

window.sessionStorage.setItem('username1',"Ryan's");
window.sessionStorage.setItem('username2',"Levi's");

// 索引鍵的名字
alert(window.localStorage.key(0));
alert(window.sessionStorage.key(0));

// 取數據 
alert(window.localStorage.getItem('username1'));
alert(window.sessionStorage.getItem('username1'));

// 獲取本地數據的長度
alert(window.localStorage.length);
alert(window.sessionStorage.length);

// 刪除數據
window.localStorage.removeItem('username1');
window.sessionStorage.removeItem('username1');

// 清空所有的數據
window.localStorage.clear();
window.sessionStorage.clear();

10.3 sessionStorage

特點：

生命週期爲關閉當前頁面窗口
不能多窗口下數據共享（同源策略）
通過跳轉可以解決，頁面跳轉的時候可以通過session實現數據共享

10.4 localStorage

特點：

生命週期爲永久有效，除非手動刪除或用代碼刪除
可以多窗口共享（同源策略）
一些不涉及到安全的一些數據（不要太過龐大）都可以存儲到本地

示例代碼：

window.localStorage.setItem('age',18)

效果圖：

10.5 差異性

比較cookie，session，local三者之間的相同點和不同點

相同點：

都是存儲數據，存儲在web端，並且都是同源

不同點：

（1）cookie只有4K大小並且每一次請求都會帶上cookie體驗不好，浪費帶寬
（2）session和local直接存儲在本地，請求不會攜帶，並且容量比cookie要大的多
（3）session是臨時會話，當窗口被關閉的時候就清除掉，而local永久存在，cookie有過期時間
（4）cookie和local都可以支持多窗口共享，而session不支持多窗口共享但是都支持a鏈接跳轉的新窗口

11. 文件讀取

通過FileReader對象我們可以讀取本地存儲的文件，可以使用File對象來指定所要讀取的文件或數據。其中File對象可以是來自用戶在一個<input>元素上選擇文件後返回的FileList對象，也可以來自由拖放操作生成的DataTransfer。

1、FileList 對象

由於HTML5中我們可以通過爲表單元素添加multiple屬性，因此我們通過<input>上傳文件後得到的是一個FileList對象（僞數組形式）。

2、FileReader 對象

HTML5新增內建對象，可以讀取本地文件內容。var reader = new FileReader;可以實例化一個對象。

var data = file.files[0];
// 創建一個讀取對象
var fr = new FileReader();
// 讀取文件

fr.readAsDataURL(data);

readAsDataURL()以DataURL形式讀取文件

3、事件監聽

onload當文讀取完成時調用

fr.addEventListener('load', function(){
    //獲取讀取的結果  
    //result屬性裏面存儲的就是讀取文件的結果
    var result = fr.result;    
})

完整代碼：

<input type="file" multiple name="" id="">
<button>點擊讀取文件</button>

<script type="text/javascript">
var btn = document.querySelector('button');
var file = document.querySelector('input[type="file"]');
var fr = [];
btn.onclick = function(){        
    // 讀取文件
    for(var i = 0; i < file.files.length; i++){
        fr[i] = new FileReader();
        fr[i].readAsDataURL(file.files[i]);
    }
    // fr.readAsDataURL(data);
    // 讀取文件是一個耗時的操作，所以需要用事件監聽讀取完畢，
    // load事件是文件讀取完畢之後觸發的事件
    for(var j = 0; j < fr.length; j++){
        fr[j].addEventListener('load', function(){
            //獲取讀取的結果  
            //result屬性裏面存儲的就是讀取文件的結果
            console.log(fr);
            var result = this.result;    
            // 創建圖片對象
            var img = document.createElement('img');
            img.src = result;
            document.body.appendChild(img); 
        })
    }    
}

</script>

12. 拖拽

在HTML5的規範中，我們可以通過爲元素增加draggable="true"來設置此元素是否可以進行拖拽操作，其中圖片、鏈接默認是開啓的。

1、拖拽元素

頁面中設置了draggable="true"屬性的元素，可以被拖拽，其中<img>、<a>標籤默認是可以被拖拽的。

2、目標元素*

頁面中任何一個元素都可以成爲目標元素。

3、事件監聽

根據元素類型的不同，需要設置不同的事件監聽：

（1）、拖拽元素

ondrag 應用於拖拽元素，整個拖拽過程都會調用
ondragstart 應用於拖拽元素，當拖拽開始時調用
ondragend 應用於拖拽元素，當拖拽結束時調用

（2）、目標元素

ondragenter 應用於目標元素，當拖拽元素進入時調用
ondragleav 應用於目標元素，當鼠標離開目標元素時調用
ondragver 應用於目標元素，當停留在目標元素上時調用
ondrop 應用於目標元素，當在目標元素上鬆開鼠標時調用

示例代碼： 將圖片拖拽到瀏覽器內顯示在div內

<style>
    .info {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        line-height: 500px;
        text-align: center;
        transform:translate(-50%,-50%);
        box-shadow: 0 0 10px 2px rgba(0,0,0,.5); 
        border-radius: 5px;
    }
    .info img {
        width: 100%;
        height: 100%;
    }
</style>

    
<!-- 目標元素 -->
<div class="info">將圖片拖拽至此</div>
    

<script type="text/javascript">
    var info = document.querySelector('.info');
    // 獲取html元素
    var oHtml = document.documentElement;

    // 問題：瀏覽器默認會將外部拖拽的文件直接打開，我們需要阻止掉
    // 將外部文件拖拽進瀏覽器裏面鬆開鼠標的時候其實就是在html頁面上觸發了drop事件，我們只需要在drop事件的時候阻止默認事件
    oHtml.ondrop = function(e){
        // 阻止默認事件
        e.preventDefault();
    }
    /*drop事件默認是被阻止的，所以還需要在dragover的時候阻止默認事件*/
    oHtml.ondragover = function(e){
        e.preventDefault();
    }

    info.ondrop = function(e){
        // 獲取外部拖拽進來的文件
        // console.log(e);
        var data = e.dataTransfer.files[0];        
        var fr = new FileReader();
        fr.readAsDataURL(data);
        fr.addEventListener('load',function(){
            var result = fr.result;
            var img = document.createElement('img');
            img.src = result;
            info.innerHTML = '';
            info.appendChild(img);
        })
    }
</script>

效果圖