一、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新屬性，選擇器）都能夠進行查詢，可以精確的告訴你什麼瀏覽器相容，什麼不相容。
統計研究院：
二、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開始支援，如果為了更大使用者相容，還要寫以前的寫法
|
<meta charset="UTF-8" /> |
2.2HTML5新的語言規定
1、HTML5中，屬性的引號可以省略（除了有很多屬性的）
|
<div title=你好 id=box class="box1 box2"></div> |
2、HTML5中標籤不分大小寫
|
<DiV>標籤不分大小寫</dIv> |
3、HTML5中，自封閉標籤可以省略“/”關閉符號
|
<img src="" alt="" > <input type="" name=""> <br> |
4、HTML5中，type型別可以不寫
|
<style></style> <link rel="stylesheet" href=""> <script></script> |
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
|
<p>每天<time datetime="2017年4月14日17:22:22">9點整</time>上課</p> |
●變數語義 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> 標籤的型別。
|
<input type="text" autofocus> |
●required屬性
required 屬性規定必須在提交之前填寫輸入域（不能為空）。
註釋： required屬性適用於以下型別<input>標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
例項：
|
<input type="text" required> |
●placeholder屬性
placeholder 屬性提供一種提示，描述輸入域所期待的值。
註釋：placeholder 屬性適用於以下型別的 <input> 標籤：text, search, url, telephone, email 以及 password。
提示文字會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：
|
<input type="text" placeholder="請輸入內容"> |
●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。
|
<input type="file" name="img" multiple /> |
●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位手機號碼：
|
<input type="text" pattern="^[\d]{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）：
|
<input type="number" name="points" min="0" max="10" step="3" /> |
注：屬性和屬性值一樣的情況下，可以省略不寫值。
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></audio> |
基本寫法：
|
<audio src="music/yinyue.ogg" autoplay controls loop></audio> |
相容寫法：
<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></video> |
基本語法：
|
<video src="video/pian.mp4" controls autoplay loop></video> |
相容語法：
<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>