HTML5介紹
1. 基礎認知
1.1 基本認識
- h5是一個泛稱，由HTML5+CSS3+JS等多種技術組合成的一個應用開發平台，第一個將web作為應用開發平台的HTML語言。
1.2 語法規范
- 使用h5應該指定對應的<!DOCTYPE>去指示瀏覽器使用相應的規范去解析頁面
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
特點：
- 更簡潔
- 更寬松
- 但是在實際開發中要注意書寫規范，利於后期維護
1.3 語義標簽
- 在網站建設過程中，語義化是非常重要的。
- 當頁面加載失敗的時候，還能夠呈現出清晰的結構
- 有利於SEO優化，利於被搜索引擎收錄（即便於網絡爬蟲的識別）
- 在項目開發及維護時，語義化的也很大程度上降低開發難度，節省成本
- 常用的新增語義標簽
<nav> 表示導航
<header> 表示頁眉
<footer> 表示頁腳
<section> 表示區塊
<article> 表示文章 如文章、評論、帖子、博客
<aside> 表示側邊欄 如文章的側欄
<figure> 表示媒介內容分組 與 ul > li 做個比較
//下列標簽不常用
<mark> 表示標記 (帶用“UI”，不怎么用，可以重寫樣式)
<progress> 表示進度 (帶用“UI”，不怎么用，不可重寫樣式)
<time> 表示日期
<hgroup> 標題列表 (據說已廢棄)
<details>
<bdi>
<command>
<summary>
<rp>
<rt>
<ruby>
新語義標簽只是具有表意性，除了使用時需要注意下HTML結構外，其他和普通標簽沒什么區別。
1.4 兼容處理
在不支持HTML5新標簽的瀏覽器里，會將這些新的標簽解析成行內元素(inline)對待，所以我們只需要將其轉換成塊元素(block)即可使用，但是在IE9版本以下，並不能正常解析這些新標簽，但是卻可以識別通過document.createElement('tagName')創建的自定義標簽，於是我們的解決方案就是將HTML5的新標簽全部通過document.createElement('tagName')來創建一遍，這樣IE低版本也能正常解析HTML5新標簽了，在實際開發中我們更多采用的是通過檢測IE瀏覽器的版本來加載第三方的一個JS庫(html5shiv.js)來解決兼容問題。
<!--[if lte IE 8]>
<script src="./js/htmml5shiv.min.js"></script>
<![endif]-->
2. 表單
新增的表單特性，在PC和移動設備之間差異大，兼容性較差
2.1 輸入類型
email 輸入email格式
tel 手機號碼
url 只能輸入url格式
number 只能輸入數字
search 搜索框
range 范圍
color 拾色器
time 時間
date 日期 不是絕對的
datetime 時間日期
month 月份
week 星期
部分類型是針對移動設備生效的，且具有一定的兼容性問題，在實際開發中可選擇性使用。
2.2 表單元素（標簽）
<datalist> 下拉選項，使用中文時要注意
<keygen> 生成加密字符串
<output> 不可當做數據提交？
<meter> 表示度量器，不建議用作進度條
2.3 表單屬性
placeholder 占位符
autofocus 獲取焦點
multiple 文件上傳多選或多個郵箱地址
autocomplete 自動完成，用於form元素，也可用於部分input，默認值on
form 指定表單項屬於哪個form，處理復雜表單時會需要
novalidate 關閉驗證，可用於<form>標簽，（只適應用form）
required 驗證條件，必填項
pattern 正則表達式 自定義驗證規則
//表單重寫
//應用於提交按鈕上，如：<input type="submit" formaction="xxx.php">
formaction、formenctype、formtarget、formmethod、formnovalidate
2.4表單事件
oninput 用戶輸入內容時觸發，可用於移動端輸入字數統計
onincalid 驗證不通過時觸發
3. 多媒體
h5之前，網頁上的音頻/視頻多是利用Flash來播放的，但並非所有用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/視頻播放變的很復雜，並且移動設備的瀏覽器不支持Flash。
3.1 音頻
<audio src="xx.mp3"></audio>
屬性：
autoplay 自動播放
controls 是否顯示默認的播放控件
loop 循環播放
preload 預加載 同時設置autoplay時此屬性失效
由於版權限制，不同瀏覽器支持的播放格式不同，需要進行兼容性處理：
<audio controls>
<source src="xx.mp3">
<source src="xx.wav">
<source src="xx.ogg">
您的瀏覽器不支持HTML音頻播放功能
</audio>
3.2 視頻
- 使用
<video>標簽 - 使用基本上與
<audio>標簽使用一致 - 可以使用
width,height設置播放窗口的寬高
4. DOM操作的擴展
4.1 獲取元素
document.getElementsByClassName(className)通過類名獲取元素，返回一個偽數組document.querySelector(selector)通過css選擇器獲取元素，返回符合條件的第一個dom元素document.querySelectorAll(selector)通過css選擇器獲取元素，返回一個偽數組
4.2 類名操作
所有類名操作都是在classList屬性下的:
- node.classList.add(className) 添加類
- node.classList.remove(className) 移除類
- node.classList.toggle(className) 切換類
- node.classList.contains(className) 檢測是否存在類
4.3 自定義屬性
- 設置自定義屬性
<div data-name="name" data-gender="female"><div>
- 獲取自定義屬性
- node.dataset是以對象的形式存在的
- 通過
node.dataset["name"]可以獲取到自定義屬性的值 - 以data-my-name="name"格式設置屬性時,獲取時需要使用駝峰格式
node.dataset["myName"]
5. 新增API
5.1 拖拽
- 拖拽元素
- 設置了draggable="true"屬性的元素，其中圖片和鏈接默認是可拖拽的
- 目標元素
- 頁面中任何一個元素都可以成為目標元素
- 事件監聽
- 拖拽元素的事件
ondrag 整個拖拽過程都會調用
ondragstart 拖拽開始是調用
ondragleave 當鼠標離開拖拽元素時調用（拖拽出拖拽元素的基礎位置時）
ondragend 拖拽結束時調用
2.目標元素的事件
ondragenter 拖拽元素進入時調用
ondragover 拖拽元素停留在目標元素上時調用
ondragleave 拖拽元素離開目標元素時調用
ondrop 在目標元素上松開鼠標時調用
- 數據傳遞
ev.dataTransfer.setData() 設置數據
ev.dataTransfer.getData() 獲取數據
5.2 歷史管理
window.history對象，可以管理歷史記錄，可用於單頁面應用，可以無刷新改變網頁內容。
5.2.1 舊版本
history.back() 回退
history.forward() 前進
history.go(n) 前進/后退n步，正值前進，負值后退
history.length 歷史記錄條數
5.2.2 新增方法
//追加一條歷史記錄
//一般data設置為null,titile設置為空，url為以當前域為基礎增加一條歷史記錄，不可跨域設置。
pushState(data,title,url)
//用法與pushState()基本相同，此方法替換當前url,不會改變歷史記錄條數
replaceState(data,title,url)
5.2.3 事件監聽
onpopstate事件：前進或者后退時觸發,通過事件對象ev.state可以讀取到存儲的數據,監聽者給window
5.3 地理定位
基於位置服務(Location Base Service)
5.3.1 獲取地理信息方式
- IP地址
- 三維坐標
- GPS
- WiFi
- 手機信號
- 用戶自定義數據
下圖對各種不同獲取方式的優缺點做了比較,瀏覽器會自動以最優的方式去獲取用戶地理信息 
5.3.2 隱私
HTML5中Geolocation規范提供了保護用戶隱私的機制,必須先得到用戶明確的許可,才能獲取用戶的位置信息.
5.3.3 API詳解
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)獲取當前地理信息 navigator.geolocation.watchPosition(successCallback,errorCallback,options)重復獲取當前地理信息
- 當成功獲取地理信息后,會調用successCallback,並返回一個包含位置信息的對象position.
- position.coords.latitude 緯度
- position.coords.longtitude 經度
- position.coords.accuracy 精度
- position.coords.altitude 海拔高度
- 獲取地理信息失敗后,會調用errorCallback,並返回錯誤信息error
- 可選參數options對象可以調整位置信息數據收集方式
- enableHighAccuracy 高精度模式
- timeout 超時設置,單位為ms
- maximumAge 表示瀏覽完重新獲取位置信息的時間間隔,單位為ms
5.4 Web存儲
為了滿足各種需求,會經常性的需要在本地存儲大量的數據,傳統方式使用document.cookie進行存儲,但cookie存儲大小只有4k左右,並且解析相對復雜.HTML5提出了sessionStorage和localStorage來存儲本地數據.
- 特性:
- 設置、讀取方便
- 容量較大、sessionStorage約為5M,localStorage約為20M
- 只能存儲字符串,可以將對象JSON.stringfy()編碼后存儲
- window.sessionStorage
- 生命周期為關閉瀏覽器窗口
- 在同一個窗口下數據可以共享
- window.localStorgae
- 永久生效,除非手動刪除
- 可以多窗口共享
- 方法詳解
- setItem(key,value) 設置存儲內容
- getItem(key,value) 讀取存儲內容
- removeItem(key) 刪除鍵值為key的存儲內容
- clear() 清空所有存儲內容
- key(n) 以索引值來獲取存儲內容
- 其他 WebSQL,IndexDB
5.5 全屏
規范允許所有元素都可以全屏,但實際測試結果關閉全屏功能只能添加到document元素上
- HTML5規范允許用戶自定義網頁上的任一元素全屏顯示
requestFullScreen() 開啟全屏顯示
cancelFullScreen() 關閉全屏顯示
- 不同瀏覽器需要添加前綴
webkitRequestFullScreen、mozRequestFullScreen
webkitCancelFullScreen、mozCancelFullScreen
- 檢測當前是否處於全屏狀態
document.fullScreen
//不同瀏覽器需要添加前綴
document.webkitIsFullScreen
document.mozFullScreen
- 全屏偽類
- :full-screen.box
- :-webkit-full-screen
- :moz-full-screen
5.6 網絡狀態
給window綁定事件 window.navigator.onLine在用戶網絡連接時調用,返回布爾值 window.navigator.offLine在用戶網絡斷開時調用
5.7 應用緩存
創建一個cache manifest文件構建一個離線應用
- 優勢
- 可配置需要緩存的資源
- 網絡無法連接時仍可使用
- 本地讀取緩存資源,提升訪問速度,增強用戶體驗
- 減少請求,緩解服務器負擔
- 緩存清單
- 緩存清單是一個普通餓文本文件,其中列出了瀏覽器應緩存以供離線訪問的資源,推薦使用.appcache為后綴名,添加MIME類型
- 假設創建了一個名為demo.appcache的文件,然后在需要應用緩存的頁面的根元素(html)添加屬性manifest = "demo.appcache",路徑要正確.
- manifest文件格式
- 頂行寫CACHE MANIFEST
- CACHE: 換行 指定我們需要緩存的靜態資源,如.css、.js、image等
- NETWORK: 換行 指定需要在線訪問的資源,可使用通配符
- FALLBACK: 換行 當被緩存的文件找不到時的備用資源
CACHE MANIFEST
CACHE:
#此部分寫需要緩存的資源 （#是注釋的意思）
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg
NETWORK:
#此部分要寫需要有網絡才可訪問的資源，無網絡則不訪問
#./js/main.js
*
FALLBACK:
#當訪問不到某個資源的情況下，自動由另一個資源替換
./css/online.css ./css/offline.css
./online.html ./offline.html
- 其他
- CACHE:可以省略,這種情況下要將需要緩存的資源寫在CACHE MANIFEST
- 可以指定多個CACHE: NETWORK: FALLBACK:,無順序限制
- #表示注釋,只有當demo.appcache文件內容發生改變或者手動清除緩存后,才會重新緩存
- chrome可以通過chrome://appcache-internals/工具和離線（offline）模式來調試管理應用緩存
5.8 文件讀取
通過FileReader對象可以讀取本地存儲的文件,可以使用File對象來指定所要讀取的文件或數據,其中File對象可以來自用戶在一個<input>元素上選擇文件后返回的FileList對象,也可以來自自由拖放操作生成的DataTransfer.
5.8.1 FileList對象
由於HTML5中可以為表單添加multiple屬性,因此通過<input>上傳文件后得到一個FileList對象(偽數組).
5.8.1 FileReader對象
HTML5新增內置對象,可以實例化一個對象
- 實例方法:readAsDataURL()以DataURL形式讀取文件
- 事件監聽:onload 當文件讀取完成時調用
- 屬性:result 文件讀取結果
5.9 多媒體
- 方法:load() play() pause()
- 屬性:currentSrc currentTime duration
- 事件: onended
還有許多其他方法,在應用時可以去MDN上查看