H5新特性總結
本文爲彙總網上的不同帖子的內容：
- H5新標籤
- 本地存儲
- 離線web應用
- css3
- 地理定位
新標籤
1.聲明
html5:萬維網的核心語言、HTML規範的第五次重大修改。HTML5是HTML標準的下一個版本
HTML5簡化了很多細微的語法，例如doctype的聲明：
HTML4的聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML5的聲明：
<!DOCTYPE html>2.結構標籤
- header：定義文章的頭部，通常是一些引導和導航信息，包含h1~h6、搜索框、logo等。
- footer：定義section或document的頁腳，一般配合address標籤(顯示地址)，包含作者信息、相關鏈接等。
- article：標籤包含文章，一般內嵌header、footer、h1、p標籤。
- aside：用來轉載非正文內容，對於主題內容的說明，例如廣告、側邊欄。
- section：定義文檔中的節，例如小說中的一章。
- nav：定義顯示導航鏈接
- hgroup顧名思義是h1~h6的集合。
- time：定義日期或者時間，或者兩者
- main：規定文檔的主要內容（不能出現一個以上的main元素）
![結構標籤]()
- figure：標籤包含獨立的媒體內容，圖像、圖標、照片等
- figcaption：標籤定義figure的元素標題
- details：描述文檔某個部分細節，而這個細節並不需要文檔加載時就展示，而是可以摺疊
- summary：默認顯示的details元素的標題
- datalist：輸入框提示列表（input的list屬性值爲datalist的id）
- progress：進度條。max 進度完成值，min 定義當前值
- mark：標記需要突出顯示的文本
3.新增表單控件
表單系列：
- email:郵箱
- tel:電話
- url:網址
- number:數字（min,max,step數字間隔,value）
- range:數字選擇器（min,max,step數字間隔,value）
- search:搜索框
- color: 顏色選擇器
Date系列：
- date：選取 日 月 年
- month - 選取月 年
- week - 選取周和年
- time - 選取時間（小時和分鐘）
- datetime - 選取時間、⽇、⽉、年（UTC 時間）date和time的組合
4.新增表單屬性
- placeholder：輸入框提示信息
- autofocus：指定表單獲取輸入焦點
- required：必填字段
- pattern：正則驗證
- form：規定輸入域所屬的一個或多個表單（form屬性所以用表單的id）
- formaction：重寫表單的action屬性
- formmethod：重寫表單的method屬性
- autocomplete：屬性規定form或input域應該擁有自動完成功能
以往input中的name和value要隨着form表單一起提交，form表單必須包裹input , 而現在可以通過input的form屬性綁定
<form id="testform">
<input type="text" />
</form>
<input form=testform />placeholder屬性
<input type="text" placeholder="請輸入密碼" />autofocus屬性，頁面只能有一個
<input type="text" autofocus />還有type爲email、number等，但是實際項目中一般使用自定義，所以這裏不提。
5.新增表單驗證
- novalidate：表單取消驗證
- formnovalidate：submit元素取消驗證
- setCustomValidity：自定義驗證信息
總體來說，這些標籤就是div標籤的語義化轉化，過去我們曾用div來包裹某個塊或者說組件，現在h5使用這些標籤實現語義化，有利於代碼可讀性和SEO。語義元素在IE6-8的兼容可以使用：
document.createElement('header');
document.createElement('nav');來解決，但是這樣js創建的新元素沒有樣式，需要在css中定義，或者直接通過插件http://www.bootcdn.cn/html5shiv/來解決。html5shiv 是一個針對 IE 瀏覽器的 HTML5 JavaScript 補丁，目的是讓 IE 識別並支持 HTML5 元素。
本地存儲
h5提供了sessionStorage、localStorage和indexedDB加強本地存儲。使用之前應該先判斷支持情況:
if(window.sessionStorage){
//瀏覽器支持sessionStorage
}
if(window.localStorage){
//瀏覽器支持localStorage
}localStorage和sessionStorage的區別在於sessionStorage基於會話，關閉瀏覽器之後存儲消失。localStorage在各瀏覽器中上限不同，最低的是2.6MB, 所以開發上限爲2.6MB, 當然這比cookie強太多，如果還是不夠的話只能藉助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一個區別是沒有過期時間，不過這個可以在localStorage中加一個時間字段輕鬆解決這個問題。
存取localStorage可能遇到的坑是跨域問題，因爲localStorage是域內安全，也就是同一個域才能對localStorage進行存儲，可以通過postMessage來解決。以下是它的常用應用場景:
var userData = {
name : 'sysuzhyupeng',
age: 24
}
localStorage.setItem('userDate', JSON.stringify(userData));
var newUserData = JSON.parse(localStorage.getItem('userData')); 另外，瀏覽器提供了storage事件來監聽存儲:
window.addEventListener('storage', showStorageEvent, true)cookie、localStorage和sessionStorage三者之間的區別
1.生命週期
Cookie：可設置失效時間，默認是關閉瀏覽器後失效
sessionStorage：僅在當前網頁會話下有效，關閉頁面或瀏覽器後就會被清除
localStorage：除非手動清除，否則永久保存
2. 存放數據大小：
cookie：4KB左右
localStorage和sessionStorage：可以保存5MB的信息。
http請求：
cookie：每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題
localStorage和sessionStorage：僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。
易用性：
cookie：需要程序員自己封裝，源生的Cookie接口不友好
localStorage和sessionStorage：源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持
應用場景：
cookie：常用來識別用戶登錄，不可跨域，限制比較多，會浪費帶寬
sessionStorage：常用來保存一些臨時的數據，防止用戶刷新頁面之後丟失了一些參數。
localStorage：可以用來跨頁面傳遞參數
另外：後兩者是H5新特性，可能有些瀏覽器不支持
離線web應用
頁面緩存指的還是有網絡狀態下，而離線web應用指的是在沒有網絡狀態可以運行應用
if(window.applicationCache){
//支持離線應用
}manifest文件是核心，記錄着哪些資源文件需要離線應用緩存，要使用manifest，只需要在html標籤中添加屬性
<html manifest="cache.manifest">cache.manifest的文件格式如下
CACHE MANIFEST
#緩存的文件
index.html
test.js
#不做緩存
NETWORK
/images/
FALLBACK
#當無法獲取到offline.html，則轉到index.html
offline.html index.html緩存的文件下面是當網絡不可用時，文件直接從本地緩存讀取，#NETWORK下面的文件無論是否已經緩存，都要從網絡中下載。FALLBACK後面，當無法獲取到offline.html，則轉到index.html。
CSS3
CSS3提供了更多的選擇器，before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size，以background-size爲例, 在具體語法不同瀏覽器有所區別，所以要使用以下寫法
background-size: 10px 5px
-webkit-background-size: 10px 5px還可以使用media-query實現響應式佈局
@media (max-width: 1190px) {
...
}地理定位
h5提供了Geolocation API訪問地理位置，即通過window.navigator.geolocation來實現訪問。這個對象有三個方法：
getCurrentPosition()
watchPosition()
clearWatch頁面第一次使用這個api需要獲得用戶許可, watchPosition可以對位置變化事件進行監聽。
參考：
1: https://blog.csdn.net/sysuzhyupeng/article/details/54706545
2: https://www.jianshu.com/p/c435f52fb95f