1 萬維網(wǎng)
- 創(chuàng)建者——蒂姆.伯納斯.李
- 是web領(lǐng)域中最權(quán)威最有影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)
- 到目前為止經(jīng)歷了3次變革（HTML4.01效床、XHTML2.0藕夫，HTML5）
2 認(rèn)識(shí)HTML5
- HTML5的牽頭羊并不是w3c（是有各大瀏覽器廠商自發(fā)組織的WHATWG）
- Hyper Text Markup language5
- HTML5簡稱H5
3 HTML5發(fā)展歷程
- HTML最初的版本是2.0（之所以沒有1.0是因?yàn)樽畛醯陌姹局挥卸畞韨€(gè)標(biāo)簽元素）
- HTML5是HTML最新的版本新蟆，同時(shí)也是一項(xiàng)新的web應(yīng)用開發(fā)標(biāo)準(zhǔn)
- HTML5是第一個(gè)將web作為應(yīng)用開發(fā)平臺(tái)的HTML語言
- HTML5新引入了一些具有語義化的標(biāo)簽
- HTML5在原有的基礎(chǔ)上使代碼變得更加簡潔
- 對于部分標(biāo)簽不支持IE低版本瀏覽器,開發(fā)人員留下了一個(gè)后門(hack)
<!--[if let IE 8]>
<script>
document.createElement("header");
document.createElement("nav");
</script>
<![endif]>
注意!
這些標(biāo)簽會(huì)被解析成行內(nèi)元素(需要自動(dòng)轉(zhuǎn)換成塊狀元素)
4 HTML5新增標(biāo)簽
- 表單元素屬性
- 表單事件
- 多媒體(音頻/視頻)
5 DOM拓展
5.1元素獲取
- getElementsByClassName 通過類名來獲取
2)querySelect(css選擇器) 返回滿足條件的第一個(gè)元素
3)querySelectAll(css選擇器)返回滿足條件的組成的數(shù)組
注意! 以上選擇器只能在現(xiàn)代瀏覽器中使用
5.2 類名操作
- classList.add() 添加某個(gè)類
- classLIst.remove() 刪除某個(gè)類
- classList.toggle() 切換類,自動(dòng)切換
- classList.contains() 判斷是否有某個(gè)類,真返回TRUE,假返回FALSE
5.3 自定義屬性
- 自定義屬性需要一data-開頭(element.dataset屬性獲取該元素的自定義屬性)
- dataset后面在繼續(xù)打點(diǎn)調(diào)用某個(gè)具體的自定義屬性
data-career 使用:元素.dataset.career
data-her-name 使用:元素.dataset.herName
6 新增API
6.1 元素拖拽
1)拖拽 draggable = "true" //表示元素可以拖拽(本尊是一個(gè)半透明的復(fù)制品)
2)任何元素都可以作為目標(biāo)元素
3)拖拽可以設(shè)置相應(yīng)的事件
4)拖拽元素中可以傳入數(shù)據(jù)
6.2 地理位置
1)獲取用戶的地理位置
window.navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)
2)重復(fù)獲取用戶的地理信息
window.navigator.geolocation.watchPosition()
7 web存儲(chǔ)
web存儲(chǔ)就是在客戶端進(jìn)行存儲(chǔ)(之前客戶端的儲(chǔ)存是通過cookie實(shí)現(xiàn))
1 cookie的優(yōu)點(diǎn)
- 兼容性 (JavaScript出現(xiàn)就已經(jīng)有cookie)
- 存儲(chǔ)的數(shù)據(jù)量大
- 不影響網(wǎng)速
2 cookie的缺點(diǎn)
- 兼容性不好
- 存儲(chǔ)數(shù)據(jù)量小
7.1 存儲(chǔ)分本地存儲(chǔ)和會(huì)話存儲(chǔ)
1 本地存儲(chǔ)：localStorage
- 生命周期是永久 除非是手動(dòng)刪除
- 可以在多個(gè)窗口可以共享數(shù)據(jù)
2** 會(huì)話存儲(chǔ)：seccionstorage**
- 關(guān)閉當(dāng)前窗口就失效
- 不能在多個(gè)窗口共享數(shù)據(jù)
3 存取本地的數(shù)據(jù)
- 存:
localStorage.key = value;
localStorage.setitem(key,value);
- 取;
localStorage.key
localStorage.setitem(key);
- 刪除:
localStorage.removeltem(key);
- 清除本地儲(chǔ)存:
localStorage.clear();
- 通過索引獲取鍵key:
localStorage.key(n);//n表示索引值
localStorage.length //表示存儲(chǔ)的數(shù)目
8 網(wǎng)絡(luò)狀態(tài)
9 應(yīng)用程序緩存
—10/8更