html5 總結

1、HTML5概念
HTML5並不只僅只是作爲HTML標記語言的一個最新版本，更重要的是它制定了Web應用開發的一系列標準，成爲第一個將Web作爲應用開發平臺的HTML語言。

HTML5定義了一系列新元素，如新語義標籤、智能表單、多媒體標籤等，能夠幫助開發者建立富互聯網應用，同時有使人眼花繚亂的css 3，還提供了一些Javascript API，如地理定位、重力感應、硬件訪問等，能夠在瀏覽器內實現類原生應用，製做webApp，甚至結合Canvas咱們可開發網頁版遊戲。

咱們平常討論的H5其實指的是一個泛稱，它是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平臺。

HTML5絕大部分新增部分都有瀏覽器兼容性問題，特別注意的是，並非全部的html5都是IE9就兼容的，有一些屬性是須要IE10，等更高級的瀏覽器才能兼容，而html5更多運用在移動端方面，由於移動端搭載的瀏覽器比較高級。

2、HTML5新增部分簡介
1.新增的結構標籤
（1）header（頭部） （2）nav（導航） （3）section（主體） （4）aside（側邊欄） （5）article （內容）（6）footer（底部）

做用：與div同樣，只是增長了語義性，便於SEO優化。

拓展：SEO優化能夠提高網站在搜索引擎中的排名，在前端實際應用中，咱們會更多的去運用語義化標籤，同時針對一些特殊的字符，咱們運用權重高的標籤去包裹網站logo。

兼容性解決：

（1）利用document.creatElement()去建立html5的新標籤，同時設置成塊元素（相對麻煩）

<!--[if lt IE 9]>
<script type="text/javascript">
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
</script>
<![endif]-->
（2）藉助於第三方的JS框架 =>html5shiv.min.js （推薦）配合IE的hack實現最佳兼容

<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
2.新增的智能表單
2.1 input表單新增了type屬性值：

type="email" 限制用戶輸入必須爲Email類型
type="url" 限制用戶輸入必須爲URL類型
type="date" 自動生成一個日期控件
type="time" 同上
type="month" 同上
type="week" 同上
type="number" 限制用戶輸入必須爲數字類型
type="range" 產生一個滑動條的表單
type="search" 產生一個搜索意義的表單
type="color" 生成一個顏色選擇表單
智能表單在移動端用的比較多，它會調取手機自身的控件。

2.2 表單智能驗證

required => 驗證表單是否爲空，必須配合form表單來使用
pattern => 自定義驗證表單規則，匹配正則
invalid => 驗證失敗的時候觸發的事件
dom.setCustomValidity() => 自定義彈出的內容 參數：string 自定義的內容
2.3 表單新屬性

placeholder => 佔位文本，體驗更加
autofocus => 自動獲取焦點 dom.focus（）
autocomplete => 提交一次後下次自動補全 注意：必須提交一次以後，同時必需要有name屬性
multiple => 配合file控件實現多選
form => 配合form表單的id值實現關聯，在任意位置均可以被提交，可是不建議這麼寫
2.4 智能表單過濾（datalist）

相似於搜索提示，輸入一個內容會提示相關聯的匹配的提示。它是利用表單的list =「datalist的id值」與datalist這個標籤取得聯繫實現的。

2.5 video和audio標籤

HTML5中新添了video標籤來實現視頻的播放而不是藉助於flash技術

屬性：

autoplay =>視頻默認加載完成後播放
controls =>播放的控件
loop =>控制播放循環
poster =>在視頻沒有播放時的預覽圖片
API：

play() => 播放
pause() => 暫停
load() => 加載
支持的視頻格式：

video標籤支持3種視頻格式：Ogg、MPEG四、WebM，而且各個主流瀏覽器的支持格式也不同，若是須要處理兼容性，咱們須要藉助於source標籤來解決（目前僅mp4格式獲得徹底兼容）。

audio的用法和video同樣。

3.js獲取元素的新方式
（1）document.querySelector('selector') 經過相似CSS選擇器獲取元素，符合匹配條件的第1個元素。能夠傳入複合選擇器（如：.box li, .box > li input[type=’button’]）等

（2）document.querySelectorAll('selector') 經過CSS選擇器獲取元素，以類數組形式存在。能夠傳入複合選擇器（如：.box li, .box > li input[type=’button’]）等

4.js操做類名的新方式
Node.classList.add('class') 添加class
Node.classList.remove('class') 移除class
Node.classList.toggle('class') 切換class，有則移除，無則添加
Node.classList.contains('class') 檢測是否存在class
5.js自定義屬性
在H5中，咱們使用data-=""的格式來自定義屬性，能夠經過dataset[屬性名]來獲取到咱們的自定義屬性的屬性值，若是屬性名是相似於-的形式，則咱們須要使用駝峯命名的形式來獲取屬性值。

在jQuery中咱們使用data()方法來獲取標籤的data屬性的屬性值。

6.網絡狀態
window.navigator.onLine:檢測用戶的網絡狀態，連接網絡時返回true，網絡斷開時返回false。

window.addEventListener("online",function(){}):網絡連接從斷開到鏈接時觸發。

window.addEventListener("offline",function(){}):網絡連接從鏈接到斷開時觸發。

7.地理定位
在HTML規範中，增長了獲取用戶地理信息的API，這樣使得咱們能夠基於用戶位置開發互聯網應用，即基於位置服務 (Location Base Service)

7.1 獲取地理位置的方式

IP地址
GPS（Global Positioning System，全球定位系統）
Wi-Fi
手機信號
用戶自定義數據
瀏覽器會自動以最優方式去獲取用戶地理信息。

7.2 API詳解

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)//獲取當前位置的地理信息。

navigator.geolocation.watchPosition(successCallback,errorCallback,options)//重複獲取當前位置的地理信息。

(1)當成功獲取地理信息後，會調用succssCallback，並返回一個包含位置信息的對象position。

獲取緯度：position.coords.latitude

獲取經度：position.coords.longitude

(2)當獲取地理信息失敗後，會調用errorCallback，並返回錯誤信息error

(3)可選參數 options 對象能夠調整位置信息數據收集方式:timeout 超時設置，單位爲ms

8.web存儲
8.1 特性

設置、讀取方便
容量較大，sessionStorage約5M、localStorage約20M
只能存儲字符串，能夠將對象JSON.stringify() 編碼後存儲
8.2 window.sessionStorage

生命週期爲瀏覽器窗口
不能在多窗口下數據共享，但經過跳轉能夠
8.3 window.localStorage

永久生效，除非手動刪除
能夠多窗口共享
8.4 方法詳解

setItem(key,value)//設置存儲內容
getItem(key) //獲取存儲內容
removeItem(key) //刪除key值的存儲內容
claer() //清除全部存儲內容
key(n) //以索引值來獲取存儲內容
8.5 sessionStorage,localStorage和cookie的區別

區別：

cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

差別性：

相同點：都是存儲數據，存儲在web端，而且都是同源

不一樣點：

cookie 只有4K 小 而且每一次請求都會帶上cookie 體驗很差，浪費帶寬
session和local直接存儲在本地，請求不會攜帶，而且容量比cookie要大的多
session 是臨時會話，當窗口被關閉的時候就清除掉 ，而 local永久存在，cookie有過時時間
cookie 和local均可以支持多窗口共享，而session不支持多窗口共享 可是都支持a連接跳轉的新窗口
9. 全屏顯示
requestFullScreen()//開啓全屏顯示

cancelFullScreen()//退出全屏顯示

10. 文件讀取
經過FileReader對象可以實現對本地存儲文件的讀取，可使用 File 對象來指定所要讀取的文件或數據。其中File對象能夠是來自用戶在一個 <input\>元素上選擇文件後返回的FileList 對象，也能夠來自由拖放操做生成的DataTransfer。

10.1 FlieList對象

因爲HTML5中咱們能夠經過爲表單元素添加multiple屬性，所以咱們經過<input\>上傳文件後獲得的是一個FileList對象（僞數組形式）。

10.2 FileReader對象

HTML5新增內建對象，能夠讀取本地文件內容。

經過 new FileReader()實例化一個對象。

使用.readAsDataURL()方法來讀取文件，文件讀取結果放在result屬性中。

11. 拖拽元素
經過設置元素的draggables屬性爲true來實現，img和a元素默承認以拖拽。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
border-radius: 5px;
box-shadow: 0 0 2px 2px #000;
}
.box img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<input type="file">
<button>點擊我進行讀取文件</button>
<div class="box"></div>
<script type="text/javascript">
// 獲取元素
var file = document.querySelector('input[type=file]');
var btn = document.querySelector('button');
var box = document.querySelector('.box');
// 給按鈕註冊點擊事件
btn.addEventListener('click', function (argument) {
// 獲取file對象裏面的值
var data = file.files[0];
var type = data.type;
// 建立一個讀取文件的對象
var fr = new FileReader();
// 讀取data數據 這是一個異步操做
fr.readAsDataURL(data);
// 當讀取完成以事件的形式通知
fr.addEventListener('load',function (argument) {
// 文件讀取完畢以後，存放在fr對象下面的result屬性裏面
var result = fr.result;
// 判斷type類型裏面包不包含image/
if(type.indexOf('image/') -1){
// 建立一個img標籤
var img = document.createElement('img');
img.src = result;
// 清空box裏面的標籤
box.innerHTML = '';
box.appendChild(img);
}else if(type.indexOf('video/') -1){
var video = document.createElement('video');
video.src = result;
// 設置video默認播放
video.setAttribute('autoplay','autoplay');
// 清空box裏面的標籤
box.innerHTML = '';
box.appendChild(video);
}else{
alert('請上傳正確的格式');
}
})
})
</script>
</body>
</html>
事件監聽：

一、拖拽元素

ondrag 應用於拖拽元素，整個拖拽過程都會調用
ondragstart 應用於拖拽元素，當拖拽開始時調用
ondragleave 應用於拖拽元素，當鼠標離開拖拽元素時調用
ondragend 應用於拖拽元素，當拖拽結束時調用
二、目標元素

ondragenter 應用於目標元素，當拖拽元素進入時調用ondragover 應用於目標元素，當停留在目標元素上時調用ondrop 應用於目標元素，當在目標元素上鬆開鼠標時調用ondragleave 應用於目標元素，當鼠標離開目標元素時調用 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: red; } .info{ width: 300px; height: 300px; border: 1px solid #000; border-radius: 5px; box-shadow: 0 0 2px 2px; margin: 10px auto; } </style></head><body> <!-- 給元素添加draggable=true就能夠實現元素的拖拽 --> <div draggable='true' class="box"></div> <div class="info"></div> <script type="text/javascript"> var box = document.querySelector('.box'); var info = document.querySelector('.info'); var body = document.body; // 拖拽開始 box.addEventListener('dragstart', function (argument) { this.style.backgroundColor = 'green'; }) // 拖拽結束 box.addEventListener('dragend', function (argument) { this.style.backgroundColor = 'red'; }) //拖拽中 ,會在拖拽的時候持續觸發 /*box.addEventListener('drag',function (argument) { console.log('丫的，快撒手'); })*/ // 當拖拽元素進入到當前目標元素的時候觸發 info.addEventListener('dragenter',function(){ //console.log('喲，您老來了！！'); info.style.boxShadow = '0 0 2px 5px red'; }) // 當拖拽元素離開目標元素的時候觸發 info.addEventListener('dragleave',function(){ //console.log('下次再來！！'); info.style.boxShadow = '0 0 2px 2px'; }) // 當拖拽元素在目標上面的時候連續觸發 info.addEventListener('dragover', function (event) { //console.log('一直在外面，沒好意思進去'); // 阻止默認行爲 event.preventDefault(); }) // 當拖拽元素進入到當前目標元素的時候鬆開鼠標觸發（把東西扔進來觸發） // 這是事件要想觸發 必定在要dragover的時候阻止掉默認事件 info.addEventListener('drop',function(event){ //console.log('快請進，快請進'); // 阻止事件冒泡 event.stopPropagation(); this.appendChild(box); }) // 當拖拽元素在目標上面的時候連續觸發 body.addEventListener('dragover', function (event) { //console.log('一直在外面，沒好意思進去'); // 阻止默認行爲 event.preventDefault(); }) body.addEventListener('drop',function(){ console.log(1) this.appendChild(box); }) </script></body></html>