1、HTML5:
HTML4.1
網頁開發：
結構: html4.0
樣式：css css2
行為：js
HTML5: 是HTML4的升級版本(狹義)
結構：html5
樣式：css3
行為：js API 有所增強 地理定位 web存儲 拖拽
HTML5廣義的概念: 代表著瀏覽器技術發展的一階段，HTML5+CSS3+js API 一套前端技術的組合；
2、新增語義化標簽
header 頭部
nav 導航
section 區域
aside 側邊欄
article 文章
footer 底部
progress 進度條
3、表單
表單類型： type="text"
email
tel
url
search
number step:步長
color
range value max min
time
date
month
week
有兼容性問題
表單元素：
<input type="search" list="sex"/>
數據列表
<datalist id="sex">
<option>男</option>
<option>男</option>
<option>男</option>
</datalist>
<output></output> 輸出信息
<keygen/> 生成密鑰的 用于表單安全傳輸
<meter></meter> 度量器 max min value low high
<progress></progress> 進度條 max min value
表單屬性：
placeholder:提示文字
autofocus:自動聚焦
autocomplete：自動完成（填充） on 開啟（默認） off 取消提示
required:必填
multiple: 多選
novalidate: 關閉表單的默認驗證功能 用于form
pattern: 自定義正則驗證 pattern="\D+";
表單事件：
oninput:當用戶輸入時 觸發
oninvalid:當驗證不通過是觸發-->設置驗證不通過時的提示文字
4、多媒體
之前：
在網頁上播放 多媒體 必須依賴于第三方 插件
mediaplay:
快播：
falsh插件：
H5里面提供了 視頻 和 音頻的標簽
audio video
5、DOM拓展
document 對象 文檔對象
當在瀏覽器中 打開一個頁面后， 瀏覽器首先會來解析我們的 網頁，把解析出來的數據，存放到一個DOM對象中；
document.getElmentById();
在H5中 DOM新增的功能：
jquery---
$('.box');
$('#box');
$('div.box);
$('div p');
獲取單個元素：
document.querySelector('.box‘);
獲取所有符合條件的元素： 返回的數組
document.querySeletorAll('.box');
控制類名的API：
node.classList.add();添加類名
node.classList.remove()；刪除類名
node.classlist.contains();判斷是否包含指定的類名
node.classList.toggle()；切換指定的類名
1、視頻
屬性：
paused: 視頻的播放暫停狀態
duration:視頻的總時長
currentTime:當前播放時間
放法：play() 播放
pause()暫停
oncanplay： 當視頻加載完成之后
ontimeupdate: 當視頻當前時間 改變之后觸發
全屏：
video.webkitRequsetFullScreen();
2、拖拽：
1、需要設置拖拽：draggable="true"
2、拖拽元素：
ondragstart: 拖拽開始
ondragend:拖拽結束
ondragleave: 當鼠標拖拽離開 被拖拽元素時
ondrag: 當拖拽時，持續觸發
3、目標元素：
ondragenter:當被拖拽元素進入目標元素時
ondragleave:當鼠標進入目標元素時
ondragover: 當被拖拽元素在目標元素上時，持續觸發
--> e.preventDefault(); 阻止拖拽的默認行為；
ondrop:當在目標元素上松開鼠標時觸發；
認識HTML5
前面我們學習的html是什么？
Html4.0
網頁開發： html? 結構 4.0
Css ->樣式 2.0
Js ? 行為 用戶交互
HTML5 是html4.0 升級版
結構 Html5 、樣式 css3 、行為: API 都有所增強
HTML5并不僅僅只是做為HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成為第一個將Web做為應用開發平臺的HTML語言。
HTML5定義了一系列新元素，如新語義標簽、智能表單、多媒體標簽等，可以幫助開發者創建富互聯網應用，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，可以在瀏覽器內實現類原生應用，甚至結合Canvas我們可開發網頁版游戲。
廣義概念：HTML5代表瀏覽器端技術的一個發展階段。在這個階段，瀏覽器呈現技術得到了一個飛躍發展和廣泛支持，它包括：HTML5，CSS3，Javascript，API在內的一套技術組合
H5范稱
HTML + CSS3 + JS
優點：http://www.intertid.com/school/2014/595568.shtml
語法規范
HTML5在語法規范上也做了比較大的調整，去除了許多冗余的內容，書寫規則更加簡潔、清晰。
見代碼實例
特點：
1、更簡潔
2、更寬松
單標簽不用寫關閉符號 雙標簽省略結束標簽
html、head、body、colgroup、tbody可以完全省略
實際開發中應規范書寫，不建議太隨意 ！
W3C驗證地址
https://validator.w3.org/
語義標簽
語義標簽對于我們并不陌生，如<p>表示一個段落、<ul>表示一個無序列表<h1> ~ <h6>表示一系列標題等，在此基礎上HTML5增加了大量更有意義的語義標簽，更有利于搜索引擎或輔助設備理解HTML頁面內容。
傳統的做法我們或許通過增加類名如class="header"、class="footer"，使HTML頁面具有語義性，但是不具有通用性。
HTML5則是通過新增語義標簽的形式來解決這個問題，例如<header></header>、<footer></footer>等，這樣就可以使其具有通用性。
此章節學習目的為了解增加語義標簽的目的，以及各語義標簽所表達的意義，在網頁布局中能夠合理使用標簽。
傳統網頁布局：
<div class="header"> <ul class="nav"></ul> </div> <div class="main"> <div class="article"></div> <div class="aside"></div> </div> <div class="footer"></div>
H5 經典網頁布局:
<header> <ul class="nav"></ul> </header><div class="main"> <article></article> <aside></aside></div><footer></footer>
常用新語義標簽
<nav> 表示導航
<header> 表示頁眉
<footer> 表示頁腳
<section> 表示區塊
<article> 表示文章 如文章、評論、帖子、博客
<aside> 表示側邊欄 如文章的側欄
<figure> 表示媒介內容分組 與 ul > li 做個比較
<mark> 表示標記 (帶用“UI”，不怎么用)
<progress> 表示進度 (帶用“UI”，不怎么用)
<time> 表示日期
本質上新語義標簽與<div>、<span>沒有區別，只是其具有表意性，使用時除了在HTML結構上需要注意外，其它和普通標簽的使用無任何差別，可以理解成<div class="nav"> 相當于 <nav>。不要好奇，它只是一個標簽！
盡量避免全局使用header、footer、aside等語義標簽。
兼容處理
(我們在測試ie 的兼容的時候，有一個叫做ietest 的軟件，這個軟件可以模擬ie6-ie11)
在不支持HTML5新標簽的瀏覽器里，會將這些新的標簽解析成行內元素(inline)對待，所以我們只需要將其轉換成塊元素(block)即可使用，但是在IE9版本以下，并不能正常解析這些新標簽，但是卻可以識別通過document.createElement('tagName')創建的自定義標簽，于是我們的解決方案就是將HTML5的新標簽全部通過document.createElement('tagName')來創建一遍，這樣IE低版本也能正常解析HTML5新標簽了，在實際開發中我們更多采用的是通過檢測IE瀏覽器的版本來加載三方的一個JS庫來解決兼容問題。
表單
伴隨著互聯網富應用以及移動開發的興起，傳統的Web表單已經越來越不能滿足開發的需求，所以HTML5在Web表單方向也做了很大的改進，如拾色器、日期/時間組件等，使表單處理更加高效。
此章節學習目的，了解HTML5表單的新增的特性，以及PC和移動設備間的差異，其兼容性較差。
輸入類型 (表單類型，表單元素，表單屬性,表單事件.)
email 輸入email格式
tel 手機號碼
url 只能輸入url格式
number 只能輸入數字
search 搜索框
range 范圍 滑動條
color 拾色器
time 時間
date 日期 不是絕對的
--datetime 時間日期
month 月份
week 星期
部分類型是針對移動設備生效的，且具有一定的兼容性，在實際應用當中可選擇性的使用。
表單元素（標簽）
<datalist> 數據列表
與input 配合使用
<input type=”text” list=”data”>
<datalist id=”data”>
<option>男</option>
<option>女</option>
<option>不詳</option>
</datalist>
<keygen> 生成加密字符串
keygen 元素 keygen 元素的作用是提供一種驗證用戶的可靠方法。 keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵， 一個是私鑰，一個公鑰。 私鑰（private key）存儲于客戶端，公鑰（public key）則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。
<output> 不可當做數據提交？
<meter> 表示度量器，不建議用作進度條
<progress></progress>
<meter value="81" min="0" max="100" low="60" high="80" />
Max-width
Min-width
表單屬性
placeholder 占位符
autofocus 獲取焦點
multiple 文件上傳多選或多個郵箱地址
autocomplete 自動完成，用于表單元素，也可用于表單自身(on/off)
form 指定表單項屬于哪個form，處理復雜表單時會需要
novalidate 關閉驗證，可用于<form>標簽
required 必填項
pattern 正則表達式 驗證表單
手機號:<input type="tel" name="tel" required="required" pattern="^(+86)?13,5,8$">
表單重寫沒有提及，自行驗證，共包含
應用于提交按鈕上，如：<input type="submit" formaction="xxx.php">
表單事件
oninput 用戶輸入內容時觸發，可用于移動端輸入字數統計
oninvalid 驗證不通過時觸發
案例練習
注冊表單
多媒體
在HTML5之前，在網頁上播放音頻/視頻的通用方法是利用Flash來播放，但是大多情況下，并非所有用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/視頻播放變的非常復雜，并且移動設備的瀏覽器并不支持Flash插件。
Media palyer
此章節學習目的，了解如何通過HTML5播放音頻/視頻，以及針對不同瀏覽器所支持的格式，做多瀏覽器兼容處理。
音頻
HTML5通過<audio>標簽來解決音頻播放的問題。
使用相當簡單，如下圖所示
并且可以通過附加屬性可以更友好控制音頻的播放，如：
autoplay 自動播放
controls 是否顯不默認播放控件
loop 循環播放
preload 預加載 同時設置autoplay時些屬性失效
由于版權等原因，不同的瀏覽器可支持播放的格式是不一樣的
多瀏覽器支持的方案，如下圖
視頻
HTML5通過<video>標簽來解決音頻播放的問題。
同音頻播放一樣，<video>使用也相當簡單，如下圖
同樣，通過附加屬性可以更友好的控制視頻的播放
autoplay 自動播放
controls 是否顯示默認播放控件
loop 循環播放
preload 預加載，同時設置了autoplay，此屬性將失效
width 設置播放窗口寬度
height 設置播放窗口的高度
由于版權等原因，不同的瀏覽器可支持播放的格式是不一樣的
多瀏覽器支持的方案，如下圖
DOM擴展
獲取元素
1、document.getElementsByClassName ('class') 通過類名獲取元素，以類數組形式存在。
2、document.querySelector(‘div’) 通過CSS選擇器獲取元素，符合匹配條件的第1個元素。
3、document.querySelectorAll('selector') 通過CSS選擇器獲取元素，以類數組形式存在。
類名操作
1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切換class，有則移除，無則添加
4、Node.classList.contains('class') 檢測是否存在class
Node指一個有效的DOM節點，是一個通稱。
自定義屬性
在HTML5中我們可以自定義屬性，其格式如下data-*=""，例如
data-info="我是自定義屬性"，通過Node.dataset['info'] 我們便可以獲取到自定義的屬性值。
Node.dataset是以類對象形式存在的
當我們如下格式設置時，則需要以駝峰格式才能正確獲取
data-my-name="itcast"，獲取Node.dataset['myName']
案例練習 (tab 切換)
新增API
多媒體
方法：load() 加載、play() 播放、pause() 暫停
屬性：currentTime 視頻播放的當前進度、
duration:視頻的總時間
paused:視頻播放的狀態.
事件：
oncanplay: 事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。
ontimeupdate:通過該事件來報告當前的播放進度.
onended:播放完時觸發
全屏：video.webkitRequestFullScreen();
拖拽
在HTML5的規范中，我們可以通過為元素增加draggable="true"來設置此元素是否可以進行拖拽操作，其中圖片、鏈接默認是開啟的。
拖拽元素
頁面中設置了draggable="true"屬性的元素
目標元素
頁面中任何一個元素都可以成為目標元素
事件監聽
拖拽元素
ondrag 應用于拖拽元素，整個拖拽過程都會調用
ondragstart 應用于拖拽元素，當拖拽開始時調用
ondragleave 應用于拖拽元素，當鼠標離開拖拽元素時調用
ondragend 應用于拖拽元素，當拖拽結束時調用
目標元素
ondragenter 應用于目標元素，當拖拽元素進入時調用
ondragover 應用于目標元素，當停留在目標元素上時調用
ondrop 應用于目標元素，當在目標元素上松開鼠標時調用
ondragleave 應用于目標元素，當鼠標離開目標元素時調用
歷史
提供window.history，對象我們可以管理歷史記錄，可用于單頁面應用，Single Page Application，可以無刷新改變網頁內容。
舊版本瀏覽器..
history.back() 回退
history.forward() 前進
地理定位
在HTML規范中，增加了獲取用戶地理信息的API，這樣使得我們可以基于用戶位置開發互聯網應用，即基于位置服務 (Location Base Service)
獲取地理信息方式
1、IP地址
2、三維坐標
GPS（Global Positioning System，全球定位系統）
目前世界上在用或在建的第2代全球衛星導航系統（GNSS）有：1.美國 Global Positioning System （全球定位系統） 簡稱GPS；.2.蘇聯/俄羅斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球衛星導航系統）簡稱GLONASS（格洛納斯）；3.歐盟（歐洲是不準確的說法，包括中國在內的諸多國家也參與其中）Galileo satellite navigation system（伽利略衛星導航系統） 簡稱GALILEO（伽利略）；4.中國 BeiDou(COMPASS) Navigation Satellite System（北斗衛星導航系統）簡稱 BDS ；5.日本 Quasi-Zenith Satellite System （準天頂衛星系統） 簡稱QZSS ；印度 India Regional Navigation Satellite System（印度區域衛星導航系統）簡稱IRNSS；以上6個系統中國都能使用。
Wi-Fi
手機信號
3、用戶自定義數據
如下圖對不同獲取方式的優缺點進行了比較，瀏覽器會自動以最優方式去獲取用戶地理信息。
隱私
HTML5 Geolocation(地理位置定位) 規范提供了一套保護用戶隱私的機制。必須先得到用戶明確許可，才能獲取用戶的位置信息。
API詳解
navigator.getCurrentPosition(successCallback, errorCallback, options) 獲取當前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重復獲取當前地理信息
1、當成功獲取地理信息后，會調用succssCallback，并返回一個包含位置信息的對象position。Coords(坐標)
position.coords.latitude緯度
position.coords.longitude經度
2、當獲取地理信息失敗后，會調用errorCallback，并返回錯誤信息error
3、可選參數 options 對象可以調整位置信息數據收集方式
百度地圖案例.
Web存儲
隨著互聯網的快速發展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由于其存儲大小只有4k左右，并且解析也相當的復雜，給開發帶來諸多不便，HTML5規范則提出解決方案。
Storage 存儲
window.sessionStorage
window.localStorage
(向本地保存數據,有可能在瀏覽器內存里面，有可能在硬盤上面.)
特性
1、設置、讀取方便
2、容量較大，sessionStorage約5M、localStorage約20M
3、只能存儲字符串，可以將對象JSON.stringify() 編碼后存儲
window.sessionStorage
1、生命周期為關閉瀏覽器窗口
2、在同一個窗口下數據可以共享
window.localStorage
1、永久生效，除非手動刪除
2、可以多窗口共享
方法詳解
setItem(key, value) 設置存儲內容
getItem(key) 讀取存儲內容
removeItem(key) 刪除鍵值為key的存儲內容
clear() 清空所有存儲內容
key(n) 以索引值來獲取存儲內容
案例：記住用戶名
其它
WebSQL、IndexDB
已經被w3c 放棄了..
生命周期差異，存儲空間差異
WebSQL、IndexDB
全屏
HTML5規范允許用戶自定義網頁上任一元素全屏顯示。
requestFullscreen() 開啟全屏顯示
cancleFullscreen() 關閉全屏顯示
不同瀏覽器需要添加前綴如：
webkitRequestFullScreen、mozRequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
通過document.fullScreen檢測當前是否處于全屏
不同瀏覽器需要添加前綴
document.webkitIsFullScreen、document.mozFullScreen
全屏偽類
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }
網絡狀態
我們可以通過window.onLine來檢測，用戶當前的網絡狀況，返回一個布爾值
window.online用戶網絡連接時被調用
window.offline用戶網絡斷開時被調用
window.addEventListener("online",function(){ alert("已經建立了網絡連接") }) window.addEventListener("offline",function(){ alert("已經失去了網絡連接") })
應用緩存
HTML5中我們可以輕松的構建一個離線（無網絡狀態）應用，只需要創建一個cache manifest文件。
優勢
1、可配置需要緩存的資源
2、網絡無連接應用仍可用
3、本地讀取緩存資源，提升訪問速度，增強用戶體驗
4、減少請求，緩解服務器負擔
緩存清單
一個普通文本文件，其中列出了瀏覽器應緩存以供離線訪問的資源，推薦使用.appcache為后綴名，添加MIME類型
AddType text/cache-manifest .appcache
例如我們創建了一個名為demo.appcache的文件，然后在需要應用緩存在頁面的根元素(html)添加屬性manifest="demo.appcache"，路徑要保證正確。
manifest文件格式
1、頂行寫CACHE MANIFEST
2、CACHE: 換行 指定我們需要緩存的靜態資源，如.css、image、js等
3、NETWORK: 換行 指定需要在線訪問的資源，可使用通配符
4、FALLBACK: 當前頁面無法訪問時退回的頁面(回退; 后退)
換行 當被緩存的文件找不到時的備用資源 可自行查閱資料
其它
1、CACHE: 可以省略，這種情況下將需要緩存的資源寫在CACHE MANIFEST
2、可以指定多個CACHE: NETWORK: FALLBACK:，無順序限制
CACHE:需要緩存那些資源.
NETWORK:不需要緩存那些資源，必須在網絡下面才能訪問.
FALLBACK:當訪問不到某個資源時，自動由另外一個資源替換.
CACHE MANIFEST CACHE: #此部分是需要緩存的資源 1.jpg js/jquery.min.js NETWORK: js/demo.js # 可以使用 * 好替代 FALLBACK: one.css two.css 會緩存two.css 當找不到one.css 會去找two.css 文件.
3、#表示注釋，只有當demo.appcache文件內容發生改變時或者手動清除緩存后，才會重新緩存。
4、chrome 可以通過chrome://appcache-internals/工具和離線（offline）模式來調試管理應用緩存
Font Awesome 字體框架
http://fontawesome.dashgame.com/
Font Awesome為您提供可縮放的矢量圖標，您可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果
