HTML5 入門詳解
1. 認識HTML5
HTML5並不只僅只是做爲HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成爲第一個將Web作爲應用開發平臺的HTML語言。
HTML5定義了一系列新元素，如新語義標籤、智能表單、多媒體標籤等，能夠幫助開發者建立富互聯網應用，還提供了一系列Javascript API，如地理定位、重力感應、硬件訪問等，能夠在瀏覽器內實現類原生應用，甚至結合Canvas咱們可開發網頁版遊戲，同時結合CSS3的過渡、轉換、動畫等特性，能夠極大的加強用戶體驗，提高開發功能的可應用性。javascript
咱們平常討論的H5實際上是一個泛稱，它指的是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平臺。php
2. 語法規範
隨着Web技術的更新，HTML也前後經歷了HTML4.01、XHTML1.0、HTML5幾個重要的版本，在版本的演變過程當中新增或廢棄了一些屬性，同時對語法規範也作了一些調整，爲了可以保證瀏覽器能夠兼容不一樣版本語法規範的，咱們可使用<!DOCTYPE>指示瀏覽器應該如何處理咱們的HTML。
經常使用的DOCTYPE聲明：css
一、HTML5html
<!DOCTYPE html>
二、HTML 4.01 Stricthtml5
4.01的嚴格版本，該DTD包含全部HTML元素和屬性，但不包括展現性的和棄用的元素（好比font）。不容許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
三、HTML 4.01 Transitionaljava
該DTD包含全部HTML元素和屬性，包括展現性的和棄用的元素（好比font）。不容許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
四、HTML 4.01 Framesetgit
該DTD等同於HTML 4.01 Transitional，但容許框架集內容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
五、XHTML 1.0 Strictweb
該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">
六、XHTML 1.0 Transitionalajax
該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">
七、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">
八、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，對於以前的舊版本，咱們就須要考慮到兼容性問題。
一、將 HTML5 元素定義爲塊元素
HTML5新增了幾個具備語義化的標籤，這些標籤都是塊級元素，在不支持HTML5新標籤的瀏覽器裏，會將這些新的標籤解析成行內元素(inline)對待，因此咱們只須要在初始化的時候將其轉換成塊元素(block)便可使用。
header, section, footer, aside, nav, main, article, figure {
display: block;
}
二、經過 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建立出來的標籤時行內元素，因此一樣的須要將它們轉換成塊級元素。
三、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中新增的一些表單控件，例如
一、表單域：form
咱們都知道<form>標籤用於爲用戶輸入建立HTML表單。表單可以包含input元素，好比文本字段、複選框、單選框、提交按鈕等等。表單還能夠包含menus、textarea、fieldset、legend和label元素。
表單用於向服務器傳輸數據。
在html5中<form>表單域添加了兩個新的屬性："autocomplete: no/yes"、"novalidate"：
-
autocomplete：規定是否啓用表單的自動完成功能，默認on。（自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。）。 -
novalidate：若是使用該屬性，則提交表單時不進行驗證（關閉控件自動校驗功能）。
二、郵箱：email
<form>
郵箱：<input type="email" name="email">
</form>
效果圖：
三、網址：url
協議、域名都要輸入進去（https://www.baidu.com，若是直接www.baidu.com會提示輸入錯誤的），不然觸發表單校驗。
<form>
網址：<input type="url" name="url">
</form>
效果圖：
四、數字：number
輸入表單數number屬性的時候，在表單尾部會有一個上下的箭頭，用來選擇數字。另外表單裏的step屬性表示：點擊的時候每一次增長或減小的步數；max屬性表示：增長到的最大範圍，min屬性表示減少到的最小範圍。
<form>
年齡：<input type="number" name="" step="3" max="120" >
</form>
效果圖：
五、電話號碼：tel
<form>
電話號碼： <input type="tel" name="tel">
</form>
六、顏色：color
<form>
郵箱：<input type="color" name="color">
</form>
效果圖：
七、時間：time
<form>
時間：<input type="time" name="time">
</form>
效果圖：
八、日期：date
<form>
日期： <input type="date" name="date">
</form>
效果圖：
九、時間日期：datetime
<form>
時間日期： <input type="datetime" name="datetime">
</form>
十、周：week
<form>
周： <input type="week" name="week">
</form>
效果圖：
十一、月：month
<form>
月： <input type="month" name="month">
</form>
效果圖：
十二、滑塊：range
max：規定容許的最大值，min：規定容許的最小值。
<form>
滑塊： <input type="range" name="range" min="1" max="20">
</form>
效果圖：
5.2 表單元素
不是全部瀏覽器都支持
HTML5新的表單元素的，可是不影響使用，即便不支持仍然能夠顯示常規的表單。
一、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>提供了哪些新的屬性。
一、autocomplete 自動完成
autocomplete屬性規定form或input域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。
提示：autocomplete屬性有可能在form元素中默認是開啓的，而在input元素中是關閉的。須要手動添加"on"。
示例代碼：
<input type="text" autocomplete="on">
二、placeholder 佔位符
placeholder屬性提供一種提示（hint），描述輸入域所期待的值。簡短的提示在用戶輸入值前會顯示在輸入域上。
示例代碼：
用戶名：<input type="text" placeholder="請輸入用戶名">
效果圖：
三、autofocus 自動得到焦點
autofocus屬性是一個boolean屬性。autofocus屬性規定在頁面加載時，域自動地得到焦點。
示例代碼：
用戶名：<input type="text" name="username" autofocus>
四、multiple 多文件上傳
multiple屬性是一個boolean屬性。multiple屬性規定<input>元素中可選擇多個值。
示例代碼：
<form action="xxx.php"> 選擇圖片: <input type="file" name="img" multiple> <input type="submit"> </form>
此時上傳文件時就能夠同時上傳多個文件了。
五、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">
點擊提交按鈕，表單域外部的「密碼」輸入框內容也會提交。
六、required 必填項
required屬性是一個boolean屬性。required屬性規定必須在提交以前填寫輸入域（不能爲空）。
示例代碼：
用戶名: <input type="text" name="usrname" required>
七、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指定視頻文件路徑便可 --> <video src="./xxx.mp4"></video>
播放格式
因爲版權等緣由，不一樣的瀏覽器可支持播放的格式是不同的，以下圖供參考:
處理兼容性
<video width="320" height="240" controls>
<source src="xxx.mp4" type="video/mp4">
<source src="xxx.ogg" type="video/ogg">
您的瀏覽器不支持Video標籤。
</video>
6.3 音頻/視頻方法
經過附加屬性能夠更加友好的控制音頻、視頻的播放。
一、autoplay 自動播放
autoplay屬性設置或返回音視頻是否在加載後即開始播放。
設置autoplay屬性：
audio|video.autoplay=true|false
返回autoplay屬性：
audio|video.autoplay
啓用自動播放，並重載視頻：
var video=document.getElementById("video1");
video.autoplay = true;
video.load();
二、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));
三、controls 是否顯示控制條
controls屬性設置或返回瀏覽器應當顯示標準的音視頻控件。
設置controls屬性：
audio|video.controls=true|false
返回controls屬性：
audio|video.controls
啓用視頻控件：
var video = document.getElementById("video1");
video.controls = true;
四、currentSrc 返回當前資源的URL
currentSrc熟悉返回當前音頻/視頻的URL。若是未設置音頻/視頻，則返回空字符串。
得到當前視頻的URL：
video = document.getElementById("video1");
alert(video.currentSrc);
五、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。咱們能夠經過它裏面的方法對元素的類進行操做。
一、添加類（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>
二、移除類（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>
三、切換類（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>
四、是否存在某個類（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。
一、FileList 對象
因爲HTML5中咱們能夠經過爲表單元素添加multiple屬性，所以咱們經過<input>上傳文件後獲得的是一個FileList對象（僞數組形式）。
二、FileReader 對象
HTML5新增內建對象，能夠讀取本地文件內容。var reader = new FileReader;能夠實例化一個對象。
var data = file.files[0]; // 建立一個讀取對象 var fr = new FileReader(); // 讀取文件 fr.readAsDataURL(data);
readAsDataURL()以DataURL形式讀取文件
三、事件監聽
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"來設置此元素是否能夠進行拖拽操做，其中圖片、連接默認是開啓的。
一、拖拽元素
頁面中設置了draggable="true"屬性的元素，能夠被拖拽，其中<img>、<a>標籤默認是能夠被拖拽的。
二、目標元素
頁面中任何一個元素均可以成爲目標元素。
三、事件監聽
根據元素類型的不一樣，須要設置不一樣的事件監聽：
（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>
效果圖
相關文章
- 1. HTML5入門詳解
- 2. HTML入門詳解+語法詳解
- 3. HTML5-CSS3入門
- 4. html5入門
- 5. Html5入門
- 6. html5:canvas入門！
- 7. HTML5入門
- 8. [html5入門-1]html5樣式的引入
- 9. Anaconda入門詳解
- 10. Anaconda 入門詳解
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • 免費ARP詳解 - TCP/IP教程
- • YAML 入門教程
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML5入門詳解
- 2. HTML入門詳解+語法詳解
- 3. HTML5-CSS3入門
- 4. html5入門
- 5. Html5入門
- 6. html5:canvas入門！
- 7. HTML5入門
- 8. [html5入門-1]html5樣式的引入
- 9. Anaconda入門詳解
- 10. Anaconda 入門詳解