最近在複習前端的基礎知識，在這裡做一個總結，這是HTML5篇。
新特性
- 取消了過時的顯示效果標記
<font></font>和<center></center>… - 新增語義化標籤
- 新增多媒體標籤（video視訊,audio音訊）
- 增加更多表單型別
- 新增canvas繪圖示籤
- 增加了標籤拖動、資料儲存等一些API
HTML5優缺點
優點
- 提高可用性和改進使用者的友好體驗；
- 可以給網站帶來更多的多媒體元素（視訊和音訊）；
- 可以很好的替代FLASH和Sliverlight;
- 當涉及到網站的抓取和索引的時候，對於SEO很友好；
- 將被大量應用於移動應用程式和遊戲；
- 可移植性好。
缺點
該標準並未能很好的被瀏覽器所支援。因新標籤的引入，各瀏覽器之間將缺少一種統一的資料描述格式，造成使用者體驗不佳。
1、刪除或重定義了哪些標籤
1.1 刪除的標籤
純表現的元素
besefont、 big、center、 font、s、strike、tt、u
對可用性產生負面影響的元素
frame、frameset、noframes
產生混餚的元素
acronym、 applet、 isindex、dir
1.2 重定義標籤
顯示不變，只是表達的含義進行了重新定義的標籤
| 標籤 | 備註 |
|---|---|
| b | 代表內聯文字，通常是粗體，沒用傳遞表示重要的意思 |
| i | 代表內聯文字，通常是斜體，沒有傳遞表達重要的意思 |
| dd | 可以同detailsy與figure一同使用，定義包含文字，dialog亦可使用 |
| dt | 可以同details與figrue一同使用，彙總細節，dialog也可用 |
| hr | 表示主題結束，而不是水平線，雖然顯示相同 |
| menu | 重新定義使用者介面的選單，配合commond或者menuitem使用 |
| small | 表示小字型，例如列印註釋或則法律條款 |
| strong | 表示重要性而不是強調符號 |
2、新增了哪些標籤
2.1 結構標籤（塊狀元素）——有意義的div
| 標籤 | 備註 |
|---|---|
| article | 標記定義一篇文章 |
| header | 標記定義一個頁面或一個區域的頭部 |
| nav | 標記定義導航連結 |
| section | 標記定義一個區域 |
| aisde | 標記定義頁面內容的側邊欄 |
| hgroup | 標記定義檔案中一個區塊的相關資訊 |
| figure | 標記定義一組媒體內容以及他們的標題 |
| figcaption | 標記定義figure元素的標題 |
| footer | 標記定義一個頁面或一個區域的底部 |
| dialog | 標記定義一個對話方塊（會話框）類似微信 |
2.2 多媒體標籤
| 標籤 | 備註 |
|---|---|
| video | 標記定義一個視屏 |
| audio | 標記定義音訊內容 |
| source | 標記定義媒體資源 |
| canvas | 標記定義圖片 |
| embed | 標記定義外部的可互動的內容或外掛，比如flash |
標籤的意義：多媒體標籤的出現意味著多媒體的發展以及支援不適用外掛的情況下即可操作媒體檔案，極大提升了使用者體驗。
2.3 Web應用標籤
狀態標籤
| 標籤 | 備註 |
|---|---|
| meter | 實時狀態顯示：氣壓、氣溫。 例：<meter value=”0.3″></meter>30% |
| progress | 任務過程：安裝、 載入。 例：<progress></progress> |
列表標籤
| 標籤 | 備註 |
|---|---|
| datalist | 為input標記定義一個下拉選單，配合option |
| details | 標記定義一個元素的詳細內容，配合summary |
| summary | 標籤為<details> 元素定義一個可見的標題。當使用者點選標題時會顯示出詳細資訊。 |
Menu
| 標籤 | 備註 |
|---|---|
| menu | 命令列表（目前所有的主流瀏覽器都不支援） |
| menuitem | menu命令列表的標籤（只有FireFox9.0+支援） |
| command | menu標記定義一個命令按鈕（只有IE9支援） |
2.4 其他標籤
註釋標籤
| 標籤 | 備註 |
|---|---|
| ruby | 標記定義註釋或音標 |
| rp | 告訴那些不支援ruby的元素的瀏覽器如何去顯示 |
| et | 標記定義對rubyd 註釋內容文字 |
其他標籤
| 標籤 | 備註 |
|---|---|
| mark | 標記定義有標記的文字（黃色選中狀態） |
| output | 標記定義一些輸出型別，計算表單結果配合oninput事件 |
| keygen | 標記定義表單裡生成的鍵值（加密資訊傳送） |
| time | 標記定義一個日期/時間，目前所有主流的瀏覽器都不支援 |
2.5 語義化標籤相容性
對於不支援HTML5語法的瀏覽器（如：IE8及以下版本瀏覽器），要想使用這些新標籤，需要那個通過JavaScript建立該標籤。具體做法如下（以<header>標籤為例）：
- 在CSS中設定標籤樣式為塊級
header { display: block; }- 通過JavaScript的DOM方式建立該標籤
document.createElement(`header`);由於HTML5新增的標籤很多， 如果用上述方法建立標籤也比較麻煩，所以我們可以通過簡單引用html5shiv.js檔案解決這個問題。
3、多媒體
3.1 音訊
<audio src="" controls autoplay="autoplay" loop></audio>
<!--
controls: 在頁面顯示音訊控制元件
autoplay="autoplay": 自動播放（谷歌瀏覽器不支援音訊自動播放）
loop: 迴圈播放
-->3.2 視訊
<video src="" controls autoplay muted loop></video>
<!--
controls: 在頁面顯示音訊控制元件
autoplay=`autoplay`: 自動播放（谷歌瀏覽器與`muted`屬性同用可自動播放）
muted: 配合`autoplay`可以做到谷歌瀏覽器自動播放，但是，是靜音狀態
-->不同格式音視訊的相容性
<video controls autoplay loop>
<source src="1.mp4">
<source src="1.ogg">
對不起，您的瀏覽器不支援，請升級。
</video從上至下播放瀏覽器第一個可支援的視訊格式。
4、表單元素
自帶格式驗證
| 型別 | 備註 |
|---|---|
<input type="email"> |
郵箱 |
<input type="number"> |
數字 |
<input type="url"> |
地址 |
<input type="range"> |
滑塊 |
<input type="color"> |
顏色 |
<input type="time"> |
時間 |
| …… |
<form autocomplete="on" novalidate></form>
<!--
autocomplete: on表示開啟智慧提示；off表示關閉智慧提示
novalidate: 關閉智慧驗證
--><form action="" method="get" id="fm">
<input type="text" value="" autofocus placeholder="請輸入名字" required>
<input type="submit" value="提交">
</form>
<input type="text" name="name" form="fm">
<!--
autofocus: 自動獲取焦點
placeholder: 文字框提示資訊
required: 該屬性出現，當前的表單元素必須有驗證
form: 該屬性出現在表單標籤中，值設定為form標籤的ID值，該標籤可以提交
--><input type="text" value="" list="url_list">
<datalist id="url_list">
<option value="https://www.baidu.com">百度</option>
<option value="https://www.google.com">谷歌</option>
<option value="https://www.youku.com">優酷</option>
<option value="https://www.qq.com">騰訊</option>
</datalist>5、自定義屬性
<div id="dv" data-name="名字" data-age="20" data-user-sex="男"></div>HTML5通過 “data-屬性名” 的方式建立自定義屬性。
JavaScript 通過dataset物件獲取自定義屬性。
注：獲取dataset中的屬性名需要改成駝峰式命名，如 user-sex 改為 userSex
var dv = document.getElementById(`dv`)
var dt = dv.dataset;
var str = ``
str = dt.name + `,` + dt.age + `,` + dt.userSex;
dv.innerText = str;執行上方程式碼或 點選這裡 檢視列印結果
6、讀取檔案
通過 FileReader 介面讀取檔案內容。
<input type="file" id="f1">
<input type="submit" id="btn1" value="上傳">var f1 = document.querySelector(`#f1`);
var btn1 = document.querySelector(`#btn1`);
btn1.onclick = function(){
// 獲取上傳檔案
var fl1 = f1.files[0];
// 讀取檔案，建立讀取檔案的物件
var fReader = new FileReader();
// 讀取檔案
fReader.readAsText(fl1);
// 開始讀取檔案的載入事件
fReader.onload = function() {
var style= document.createElement(`style`);
var result = fReader.result;
style.innerHTML = result;
document.querySelector(`head`).appendChild(style)
}
}新建 style.txt 檔案，編輯內容：
#btn1{
width: 70px;
height: 30px;
border: none;
background-color: green;
font-size: 14px;
color: #fff;
}執行程式，上傳 style.txt 檔案，檢視樣式變化。
點選此處 快速執行
7、網路狀態檢測
7.1 navigator.onLine
var state = window.navigator.onLine;
// 返回布林值，網路聯通為true，反之為false
if(state){
alert(`線上`)
}else{
alert(`離線`)
}主流瀏覽器都支援。
7.2 document.ononline
window.ononline=function(){
alert(`連線上了`)
}
window.onoffline=function(){
alert(`斷網了`)
}瀏覽器支援情況：
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ononline | 不支援 | IE8（IE11 已廢棄） | 3.0 | 不支援 | 不支援 |