一、HTML5簡介

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現代浏覽器已經具備了某些 HTML5 支援。

2014年10月29日，網際網路聯盟宣布，經過幾乎8年的艱辛努力，HTML5标準規範終于最終制定完成了，并已公開釋出。

HTML5不僅僅是超文本标記語言的新版本，而是一整套浏覽器新API的綜合：

新的語義标簽。我們知道HTML就是超文本标記語言，負責描述的是文檔的語義、結構。HTML5中，提供了非常多的新的标簽，<header>、<section>、<footer>、<nav>、<aside>、<article>、<address>等等。豐富了表單元素。

新的本地存儲。HTML如果想往用戶端存儲東西（不是伺服器），隻能通過cookie。HTML5中提供了一個新的API，叫做本地存儲，可以讓浏覽器輕松的在用戶端本地存儲資料。

裝置相容特性。HTML5提供了移動設定的所有相容的API方案，浏覽器獲得攝像頭、陀螺儀、蜂鳴器等等的權利。對于PC浏覽器，還加上了全屏API和拖放API。

連接配接特性。HTTP是無連接配接的，你的浏覽器和伺服器之間沒有長久連結，HTML5中提出了web socket特性，可以讓浏覽器和伺服器實時連結！比如制作聯機對戰的俄羅斯方塊。

新的音頻、視訊。曾幾何時，Flash一統網頁中的音視訊，此時HTML5提出了新的video和audio标簽。可以讓網頁輕松的，不通過安裝任何插件（比如不用安裝Adobe Flash Player）網頁播放視訊、音頻。

新的畫布和svg：制作網頁的banner、遊戲，可以不用Flash了！現在有了Canvas！我們要用canvas制作手機遊戲，比如開心愛消除、Flappy Bird。

性能與內建特性：比如XMLHTTPRequest對象出了2代版本，我們可以獲得進度的API。HTML現在提供了網頁性能的API，能夠檢測HTTP請求的擁堵、序列等等。

新的樣式表：CSS3來了！炫酷爆了！

HTML5不是HTML的新版本，而是包含HTML、CSS、JavaScript、浏覽器的一整套API！

是以HTML5簡稱為H5有道理！不用刻意強調是HTML，因為HTML就是一個超文本标記語言，除了描述語義，什麼都沒有！但是你看見沒有HTML5幹到了HTTP！

1.1相容性如何？

HTML5的相容程度到底怎麼樣了呢？

相容性測試：www.webqianduan.cn/css3test/

Chrome

Firefox

IE 11

IE9

IE8

HTML5的實作，特别依賴浏覽器！是以現在PC端大家都在審慎使用HTML5，但是在移動端，HTML5已經火爆全球！！！整個微信中充斥HTML5小頁面！婚禮請柬、炫酷頁面。

華為P9、iPhone中的測試：

量化評分網站：http://html5test.comHTML5一共555個新特性，每個小點算一個，不分權重。

特性相容性查詢網站https://caniuse.com/HTML5所有特性（包括CSS3新屬性，選擇器）都能夠進行查詢，可以精确的告訴你什麼浏覽器相容，什麼不相容。

統計研究院：

http://tongji.baidu.com/

http://tongji.baidu.com/data/

二、HTML5骨架和文法改變

2.1HTML5新骨架

<!DOCTYPE html>  →DTD極大簡化DTD的書寫
<html>
<head>
    <meta charset="UTF-8" />   →字元集設定
    <title>Document</title>
</head>
<body>

</body>
</html>

這個DTD是IE67不支援，IE8開始支援。

<!DOCTYPE html>

IE8開始支援，如果為了更大使用者相容，還要寫以前的寫法

2.2HTML5新的語言規定

1、HTML5中，屬性的引号可以省略（除了有很多屬性的）

2、HTML5中标簽不分大小寫

<DiV>标簽不分大小寫</dIv>

3、HTML5中，自封閉标簽可以省略“/”關閉符号

<br>

4、HTML5中，type類型可以不寫

XHTML系列，在HTML5誕生之後就停止維護了，在HTML5中規範都放寬了标準，但是IE678對上面的支援不好。

作為老一代前端工程師，我們要保持風骨，在HTML5中也要以XHTML1.0的規範嚴格要求自己。

三、HTML5新增語義化标簽

3.1新布局标簽

傳統布局風格：

<div class="header"></div>
<div class="nav"></div>
<div class="main"></div>
<div class="footer"></div>

HTML5推出了新的大綱标簽，都是雙标簽，都有div的性質，塊級元素，是容器

以下是HTML5新的布局标簽：

<header></header>   頭部的語義
<footer></footer>   尾部的意義
<nav></nav>         導航語義
<main></main>       主體内容
<article></article> 文章語義
<section></section> 區域語義，代替div
<aside></aside>     側邊語義

上面這些标簽，都是塊級元素，沒有任何預設樣式，容器級标簽，可以包裹任何東西，在語義上都比div大，它們能包裹div，但是div不能包裹它們。

新的提綱标簽，IE9開始相容，IE8還是不能用這些标簽，移動端中可以嗷嗷用，因為手機沒有IE。

<header class="header">
    <h1 class="logo"></h1>
    <section class="right">
    </section>
</header>
<nav>
    <ul>
        <li>導航</li>
        <li>導航</li>
        <li>導航</li>
        <li>導航</li>
    </ul>
</nav>
<section class="content">
    <aside>側邊欄</aside>
    <main>
        <article>
            <header><h2>文章标題</h2></header>
            <section>
                文章内容
            </section>
        </article>
    </main>
</section>
<footer>
    底部
</footer>

3.2新的小語義标簽

之前XHTML1.0中語義标簽隻有：p、ul、ol、dl、table等，HTML5極大豐富了語義标簽

● 位址Address：

<address>廣州市天河區棠東東路禦富科貿園D座108 點選檢視百度地圖</address>

●縮寫詞語義 abbr：

<p>咱們出去玩的時候，記得帶有<abbr title="GPS是英文Global Positioning System（全球定位系統）">GPS</abbr>的手機哈！</p>

●引用語義 cite：

<p>程式員一般不會老年癡呆，因為程式員都死得早，沒有老年。<cite>中科院社會調查局2017年報告</cite></p>

程式語義：code：

<code>
    for(var i = 0;i < 100;i++){
        if(i % 2 == 0){
            while(){
                console.log()
            }
        }
    }
</code>

● 資料和資料标題，figure和figcaption：

資料就是資料圖檔、表格。其實普通圖檔也可以稱為資料。

<figure>定義媒介内容的分組，以及它們的标題。

<figcaption>定義 figure 元素的标題。

<figure>
    <img src="images/1.jpg" >
    <figcaption>這個是我最喜歡的明星，但是有人了</figcaption>
</figure>

●<details> 标簽用于描述文檔或文檔某個部分的細節。

與 <summary> 标簽配合使用可以為 details 定義标題。标題是可見的，使用者點選标題時會顯示出 details。

open 屬性規定 details 是可見的。

<details open="open">
    <summary>中南海</summary>
    <address>北京市西城區南長街81号</address>
    <img src="img/znh.jpg" alt="">
</details>

●對話框語義 dialog

規定 dialog 元素是活動的，使用者可與之互動。

<dialog open>
    <p>您好</p>
    <p>我很好</p>
</dialog>

●保留格式語義 pre：

沒有空白折疊現象了

<pre>
    for(var i = 0 ; i < 100 ; i ++){
        if(i % 2 == 0){
            while(true){

            }
        }
    }
</pre>

●定義語義dfn：

<p><dfn>什麼是浮雲</dfn>一般暗指遊子，浮雲遊子意，落日故人情。</p>

●鍵盤按鍵語義 kbd：

定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中

p>在QQ中，截圖的快捷鍵是<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>A</kbd></p>

●高亮語義 mark

<mark> 标簽定義帶有記号的文本，突出顯示。

<p>明天天氣很熱，注意<mark>保暖</mark></p>

●引用語義 q：

<p>我們學生必須<q>好好學習，天天向上</q></p>

浏覽器在引用的周圍插入了引号。

●注釋語義，拼音語義：ruby 、rp、rt：

<ruby>定義 ruby 注釋。

<rt>定義 ruby 注釋的解釋。

<rp>定義若浏覽器不支援 ruby 元素顯示的内容（可選）

<ruby>
    漢<rp>(</rp><rt>hàn</rt><rp>)</rp>
    子<rp>(</rp><rt>zǐ</rt><rp>)</rp>
</ruby>

●定義樣本文本 samp

<p>
    有錢人基本長得醜 <samp>馬雲</samp>
    不過張的醜的不一定是有錢人<samp>我</samp>
</p>

●小号文本 small

<p>極品雷事利驅使，淡定繼續做<small>獵奴</small></p>

●時間 time

●變量語義 var

<p>二進制一次方程：<var>x</var> = <var>y</var>+ 2</p>

●換行機會 wbr

<p>On the second Friday of term Anthony Bevan, whom all his world called "Bruiser Bevan," House<wbr>master of "B. House" in Hamchester College, sat at dessert with three of his prefects.</p>

●菜單語義 menu：

<menu type="context">
    <menuitem>蕃茄炒番茄</menuitem>
    <menuitem>洋芋炒馬鈴薯</menuitem>
    <menuitem>番薯煮地瓜</menuitem>
</menu>

●<meter>标簽定義已知範圍或分數值内的标量測量。也被稱為尺度

帶有目前值以及 min、max、high、low 屬性的測量範圍：

<h1>顯示度量：</h1>
<p>張三的分數：<meter min="0" low="40" high="90" max="100" value="95"></meter></p>
<p>李四的成績：<meter min="0" low="40" high="90" max="100" value="65"></meter></p>
<p>王五的成績：<meter min="0" low="40" high="90" max="100" value="35"></meter></p>

●<progress>标簽标示任務的進度（程序）

請結合 <progress> 标簽與 JavaScript 使用，來顯示任務的進度。

下載下傳進度：<progress value="22" max="100"></progress>

●模版存放盒子 template

<template>
    <p><%p%></p>
    <span><%sp%></span>
</template>

就是<script type="text/template"></script>浏覽器自動給這個标簽隐藏：

3.3選項清單分組标簽

<select>
    <optgroup label="明星">
        <option>張學友</option>
        <option>劉德華</option>
        <option>黎明</option>
        <option>郭富城</option>
    </optgroup>
    <optgroup label="汽車">
        <option>奧拓</option>
        <option>比亞迪</option>
        <option>衆泰</option>
    </optgroup>
</select>

四、HTML5新表單元素

4.1HTML5表單輸入類型

類型	說明
type="email"	限制使用者輸入必須為Email格式
type="url"	限制使用者輸入必須為網址格式
type="date"	限制類型為日期
type="time"	限制類型為時間
type="month"	限制類型為月份
type="week"	限制類型為星期
type="number"	限制使用者輸入必須為數字
type="range"	滑動條表單，value滑動條的值，min=’0’ max=’100’屬性限制範圍
type="color"	顔色選擇表單 value的值必須為完整的16進制 value="#ffffff"
type="datetime-local"	本地時間
type="search"	搜尋

以上大部分表單元素類型，在手機浏覽器顯示效果都不一樣，在觸摸屏鍵盤顯示效果也不一樣。

4.2 HTML5表單屬性

●autofocus屬性

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

注釋：autofocus 屬性适用于所有 <input> 标簽的類型。

●required屬性

required 屬性規定必須在送出之前填寫輸入域（不能為空）。

注釋： required屬性适用于以下類型<input>标簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

執行個體：

●placeholder屬性

placeholder 屬性提供一種提示，描述輸入域所期待的值。

注釋：placeholder 屬性适用于以下類型的 <input> 标簽：text, search, url, telephone, email 以及 password。

提示文本會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：

●autocomplete 屬性

autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。

注釋：适用于 <form> 标簽，以及以下類型的 <input> 标簽：text, search, url, telephone, email, password, datepickers, range 以及 color。

當使用者在自動完成域中開始輸入時，浏覽器應該在該域中顯示填寫的選項：

<form action="http://www.baidu.com" autocomplete="on">
    <p><input type="text" name="user1" ></p>
    <p><input type="text" name="user2" ></p>
    <p><input type="email" autocomplete="off" ></p>
    <input type="submit" >
</form>

●multiple 屬性

multiple 屬性規定輸入域中可選擇多個值。

注釋：multiple 屬性适用于以下類型的 <input> 标簽：email 和 file。

●form 屬性

form 屬性規定輸入域所屬的一個或多個表單。

注釋：form 屬性适用于所有 <input> 标簽的類型。

form 屬性必須引用所屬表單的 id：

<form action="" id="user_form">
</form>
<input type="text" name="name" form="user_form" />

●pattern屬性

pattern 屬性規定用于驗證 input 域的模式是正規表達式。

注釋：pattern 屬性适用于以下類型的 <input> 标簽：text, search, url, telephone, email 以及 password。

下面的例子是驗證11位手機号碼：

●min、max 和 step 屬性

min、max 和 step 屬性用于為包含數字或日期的 input 類型規定限定（限制）。

max 屬性規定輸入域所允許的最大值。

min 屬性規定輸入域所允許的最小值。

step 屬性為輸入域規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）。

注釋：min、max 和 step 屬性适用于以下類型的 <input> 标簽：date pickers、number 以及 range。

下面的例子顯示一個數字域，該域接受介于 0 到 10 之間的值，且步進為 3（即合法的值為 0、3、6 和 9）：

注：屬性和屬性值一樣的情況下，可以省略不寫值。

4.3 HTML5表單元素

●datalist 元素

定義和用法：

<datalist> 标簽定義選項清單。請與 input 元素配合使用該元素，來定義 input 可能的值。

datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值清單。

請使用 input 元素的 list 屬性來綁定 datalist。

清單是通過 datalist内的option 元素建立的。

如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id：

<input type="url" list="url_list" />
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

輸入内容: <input type="text" list="cur" />
<datalist id="cur">
    <option value="奧迪汽車">奧迪</option>
    <option value="奧利奧餅幹">奧利奧</option>
    <option value="迪奧汽車">迪奧</option>
    <option value="寶馬汽車">寶馬</option>
    <option value="悍馬汽車">悍馬</option>
    <option value="寶寶汽車">寶寶</option>
    <option value="衆泰汽車">衆泰</option>
    <option value="大衆汽車">大衆</option>
</datalist>

五、HTML5音頻（audio）

5.1音頻格式

5.2音頻标簽

基本寫法：

相容寫法：

<audio controls>
    <source src="music/yinyue.mp3">
    <source src="music/yinyue.ogg">
    <a href="http://www.baidu.com">您的浏覽器太舊了，請更新！</a>
</audio>

5.3音頻标簽屬性

六、HTML5視訊（video）

6.1視訊格式

6.2視訊标簽文法

基本文法：

相容文法：

<video controls>
    <source src="video/movie.mp4" type="video/mp4">
    <source src="video/movie.ogg" type="video/ogg">
    <a href="http://www.baidu.com">您的浏覽器太舊了，請更新！</a>
</video>

6.3視訊标簽屬性

音頻和視訊标簽JS的API大全：

6.4音頻/視訊标簽JavaScript API

6.4.1事件監聽

當視訊播放或停止時觸發的事件

v.onpause = function(){}

v.onplay = function(){}

6.4.2方法

play() 播放音頻/視訊

pause() 暫停音頻/視訊

load() 重新加載音頻/視訊元素

注意：這是原生JS的方法，不能直接用jQuery，但可以間接使用。

$()[0].play() 通過[0]把選中的元素轉換成原生對象就可以使用這些方法了。

6.4.3音頻視訊JS API屬性

paused 設定或傳回音頻/視訊是否暫停

muted 設定或傳回音頻/視訊是否靜音

currentTime 設定或傳回音頻/視訊中的目前播放位置（以秒計），制作加速減速播放

playbackRate 設定或傳回音頻/視訊播放的速度

duration 傳回目前音頻/視訊的長度（以秒計）

volume 設定或傳回音頻/視訊的音量 1.0最高音量（預設）0.5一半音量（50%） 0.0靜音

七、HTML5本地存儲

7.1 本地存儲簡介

在用戶端存儲資料

HTML5 提供了兩種在用戶端存儲資料的新方法：

localStorage - 沒有時間限制的資料存儲
sessionStorage - 針對一個 session 的資料存儲

之前，這些都是由 cookie 完成的。但是 cookie 不适合大量資料的存儲，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

HTML5 使用 JavaScript 來存儲和通路資料。

7.2 localStorage文法

localStorage 方法存儲的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。localStorage 和sessionStorage分别是本地存儲和會話存儲，統稱本地存儲。

存儲資料：localStorage.setItem(‘key’,’value’);

讀取資料：localStorage.getItem(‘key’)

存儲資料：sessionStorage.setItem('testKey','這是一個測試的value值'); // 存入一個值

讀取資料：sessionStorage.getItem('testKey'); //傳回testKey對應的值

删除指定資料：localStorage.removeItem(‘key’);

清空所有資料：localStorage.clear()

本地存儲資料庫會自動的為每一個網站（IP位址）建立一個獨立的表格，在同一個網站（IP位址）下資料是可以共享的，但是不能跨域。不能跨浏覽器存儲，每個浏覽器都有自己的小資料庫，Chrome存儲的，火狐看不見。

localStorage是簡單的資料庫，沒有查詢功能，不能用sql操作，隻能簡單的存儲、讀取k-v對。

sessionStorage 浏覽器視窗一旦關閉，資料就丢失了

localStorage存儲的資料，永遠不丢失，關機，重新開機都不會導緻資料丢失，除非清除了浏覽器記錄

7.3使用JSON持久資料

很明顯，如果隻能存儲字元串，這個資料威力不大，是以存儲字元串意義不大，我們要存儲JSON對象。

資料庫隻能存儲字元串，是以存儲JOSN的時候會顯示object

localStorage.setItem('iqianduan.cn_json',{"a":100,"b":200})

此時就要進行一個轉換：

把JSON變為字元串 → 存儲 → 讀取 → 把字元串轉為JSON對象

JSON.parse() 把字元串轉為對象

JSON.stringify() 把對象轉為字元串

btn[0].onclick = function(){
   //要存儲的資料
   var data = {"a":100,"b":200,"c":300,"d":[1,2,3,4]}
   //存儲之前，把資料轉為字元串
   var dataStr = JSON.stringify(data);
   //存儲資料
   localStorage.setItem('iqianduan.cn',dataStr);
   //讀取
   var str = localStorage.getItem('iqianduan.cn');
   //轉為JSON對象
   var dataObj = JSON.parse(str);
   console.log(dataObj.a)
}

當我們上面的政策都會了，此時JSON可以非常複雜，本地存儲是沒有位元組限制的，此時JSON用字元串儲存不會變形。

多次儲存同一個key會覆寫，所有要追加内容到本地資料庫的時候，一定要先：讀取→修改→再存儲：

btn[0].onclick = function(){
   //要存儲的資料
   var data = {"a":100,"b":200,"c":300,"d":[1,2,3,4]}
   //存儲之前，把資料轉為字元串
   var dataStr = JSON.stringify(data);
   //存儲資料
   localStorage.setItem('iqianduan.cn',dataStr);
   //讀取
   var str = localStorage.getItem('iqianduan.cn');
   //轉為JSON對象
   var dataObj = JSON.parse(str);
   //改變資料
   dataObj.c = 999;
   dataObj.e = 888;
   console.log(dataObj)
   //修改，再存儲新的值
   var dataStr = JSON.stringify(dataObj);
   localStorage.setItem('iqianduan.cn',dataStr);
}

八、自定義屬性和classList

8.1 classList

參考手冊：http://www.runoob.com/jsref/prop-element-classlist.html

classList 屬性傳回元素的類名，作為 DOMTokenList 對象。

該屬性用于在元素中添加，移除及切換 CSS 類。

classList 屬性是隻讀的，但你可以使用 add() 和 remove() 方法修改它。

方法	描述
add(class1, class2, ...)	在元素中添加一個或多個類名。如果指定的類名已存在，則不會添加
remove(class1, class2, ...)	移除元素中一個或多個類名。注意：移除不存在的類名，不會報錯
toggle(class, true\|false)	在元素中切換類名。第一個參數為要在元素中移除的類名，并傳回 false。如果該類名不存在則會在元素中添加類名，并傳回 true。第二個是可選參數，是個布爾值用于設定元素是否強制添加或移除類，不管該類名是否存在。注意： Internet Explorer 或 Opera 12 及其更早版本不支援第二個參數。
contains(class)	傳回布爾值，判斷指定的類名是否存在。可能值： true - 元素包已經包含了該類名 false - 元素中不存在該類名

<button>按鈕</button>
<p class="border">這是一段文字</p>
<script type="text/javascript">
    var btn = document.querySelector("button");
    var p = document.querySelector("p");
            
    btn.onclick = function(){
        //p.className = "border red";//我們之前的處理方法 為了不丢失之前的類名 我們在增加類名的時候把之前的所有類名重寫一遍
                
        console.log(p.classList);//該标簽的所有類名集合
                
        //元素.classList.對應的方法()
        p.classList.add("red");//增加類(他不會覆寫之前的類名)
        p.classList.remove("border");//删除類(他不會覆寫之前的類)
        p.classList.toggle("fs");//切換類
                
        console.log(p.classList.contains("red"));//判斷是否有該類
    }
</script>

8.2 自定義屬性

新的HTML5标準允許你在普通的元素标簽裡，嵌入類似data-*的屬性，來實作一些簡單資料的存取。它的數量不受限制，并且也能由javascript動态修改，也支援CSS選擇器進行樣式設定。這使得data屬性特别靈活，也非常強大。有了這樣的屬性我們能夠更加有序直覺的進行資料預設或存儲。

<!--
    在html5之後我們建議自定義屬性前面加data
    <p data-自定義屬性名稱="屬性值"></p>
-->
<p data-zdy="這是我自定義的屬性">這是一個段落标簽</p>
        
<script type="text/javascript">
    var p = document.querySelector("p");
    console.log(p.dataset.zdy);//擷取自定義屬性
    p.dataset.other = "我設定的另一個自定義屬性";//設定自定義屬性
</script>

文章都是本人學習時的筆記整理，希望看完後能對您有所幫助，歡迎大家提意見，多多交流。

也有些文章是轉載的，如果存在轉載文章且沒有标注轉載位址的，請與我聯系，馬上處理。

自由轉載-非商用-非衍生-保持署名。

前端筆記之HTML5&amp;CSS3（上）新特性&amp;音頻視訊&amp;本地存儲&amp;自定義屬性