HTML5知識點總結（一）

最近在複習前端的基礎知識，在這裏作一個總結，這是HTML5篇。

新特性

1. 取消了過期的顯示效果標記<font></font>和<center></center>...
2. 新增語義化標籤
3. 新增多媒體標籤（video視頻,audio音頻）
4. 增長更多表單類型
5. 新增canvas繪圖標籤
6. 增長了標籤拖動、數據存儲等一些API

HTML5優缺點

優勢

1. 提升可用性和改進用戶的友好體驗；
2. 能夠給網站帶來更多的多媒體元素（視頻和音頻）；
3. 能夠很好的替代FLASH和Sliverlight;
4. 當涉及到網站的抓取和索引的時候，對於SEO很友好；
5. 將被大量應用於移動應用程序和遊戲；
6. 可移植性好。

缺點

該標準並未能很好的被瀏覽器所支持。因新標籤的引入，各瀏覽器之間將缺乏一種統一的數據描述格式，形成用戶體驗不佳。

---

一、刪除或重定義了哪些標籤

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.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>標籤爲例）：

1. 在CSS中設置標籤樣式爲塊級

header { display: block; }

1. 經過JavaScript的DOM方式建立該標籤

document.createElement('header');

因爲HTML5新增的標籤不少， 若是用上述方法建立標籤也比較麻煩，因此咱們能夠經過簡單引用html5shiv.js文件解決這個問題。

三、多媒體

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

從上至下播放瀏覽器第一個可支持的視頻格式。

四、表單元素

自帶格式驗證

類型	備註
<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>

查看效果

五、自定義屬性

<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;

執行上方代碼或 點擊這裏 查看打印結果

六、讀取文件

經過 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.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	不支持	不支持