HTML5知識點總結（一）

最近在複習前端的基礎知識，在這裡做一個總結，這是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	不支援	不支援

新特性