一、HTML5概念
HTML5並不僅僅只是做爲HTML標記語言的一個最新版本,更重要的是它制定了Web應用開發的一系列標準,成爲第一個將Web做爲應用開發平臺的HTML語言。
HTML5定義了一系列新元素,如新語義標籤、智能表單、多媒體標籤等,可以幫助開發者創建富互聯網應用,同時有令人眼花繚亂的css 3,還提供了一些Javascript API,如地理定位、重力感應、硬件訪問等,可以在瀏覽器內實現類原生應用,製作webApp,甚至結合Canvas我們可開發網頁版遊戲。
我們日常討論的H5其實指的是一個泛稱,它是由HTML5 + CSS3 + Javascript等技術組合而成的一個應用開發平臺。
HTML5絕大部分新增部分都有瀏覽器兼容性問題,特別注意的是,並不是所有的html5都是IE9就兼容的,有一些屬性是需要IE10,等更高級的瀏覽器才能兼容,而html5更多運用在移動端方面,因爲移動端搭載的瀏覽器比較高級。
二、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、MPEG4、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>
事件監聽:
1、拖拽元素
- ondrag 應用於拖拽元素,整個拖拽過程都會調用
- ondragstart 應用於拖拽元素,當拖拽開始時調用
- ondragleave 應用於拖拽元素,當鼠標離開拖拽元素時調用
- ondragend 應用於拖拽元素,當拖拽結束時調用
2、目標元素
- 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>