H5范稱(chēng) HTML + CSS3 + JS
常用新語(yǔ)義標(biāo)簽
<nav> 表示導(dǎo)航
<header> 表示頁(yè)眉
<footer> 表示頁(yè)腳
<section> 表示區(qū)塊
<article> 表示文章 如文章努酸、評(píng)論灾挨、帖子榕吼、博客
<aside> 表示側(cè)邊欄 如文章的側(cè)欄
<figure> 表示媒介內(nèi)容分組 與 ul > li 做個(gè)比較
<mark> 表示標(biāo)記 (帶用“UI”边涕，不怎么用)
<progress> 表示進(jìn)度 (帶用“UI”晤碘，不怎么用)
<time> 表示日期
<hgroup> 標(biāo)題列表 (據(jù)說(shuō)已廢棄)
<details>
<bdi>
<command>
<summary>
<rp>
<rt>
<ruby>
盡量避免全局使用header、footer功蜓、aside等語(yǔ)義標(biāo)簽园爷。
兼容處理
在不支持HTML5新標(biāo)簽的瀏覽器里，會(huì)將這些新的標(biāo)簽解析成行內(nèi)元素(inline)對(duì)待式撼，所以我們只需要將其轉(zhuǎn)換成塊元素(block)即可使用童社，但是在IE9版本以下，并不能正常解析這些新標(biāo)簽著隆，但是卻可以識(shí)別通過(guò)document.createElement('tagName')創(chuàng)建的自定義標(biāo)簽扰楼，于是我們的解決方案就是將HTML5的新標(biāo)簽全部通過(guò)document.createElement('tagName')來(lái)創(chuàng)建一遍，這樣IE低版本也能正常解析HTML5新標(biāo)簽了美浦，在實(shí)際開(kāi)發(fā)中我們更多采用的是通過(guò)檢測(cè)IE瀏覽器的版本來(lái)加載三方的一個(gè)JS庫(kù)來(lái)解決兼容問(wèn)題弦赖。
<script>./js/html5shiv.min.js</script>
表單
輸入類(lèi)型
email 輸入email格式
tel 手機(jī)號(hào)碼
url 只能輸入url格式
number 只能輸入數(shù)字
search 搜索框
range 范圍
color 拾色器
time 時(shí)間
date 日期 不是絕對(duì)的
datetime 時(shí)間日期
month 月份
week 星期
部分類(lèi)型是針對(duì)移動(dòng)設(shè)備生效的，且具有一定的兼容性浦辨，在實(shí)際應(yīng)用當(dāng)中可選擇性的使用
表單元素（標(biāo)簽）
<datalist> 下拉選項(xiàng)
<keygen> 生成加密字符串
<output> 不可當(dāng)做數(shù)據(jù)提交蹬竖？
<meter> 表示度量器，不建議用作進(jìn)度條
表單屬性
placeholder 占位符
autofocus 獲取焦點(diǎn)
multiple 文件上傳多選或多個(gè)郵箱地址
autocomplete 自動(dòng)完成，用于表單元素币厕，也可用于表單自身
form 指定表單項(xiàng)屬于哪個(gè)form列另，處理復(fù)雜表單時(shí)會(huì)需要
novalidate 關(guān)閉驗(yàn)證，可用于<form>標(biāo)簽
required 驗(yàn)證條件旦装，必填項(xiàng)
pattern 正則表達(dá)式 驗(yàn)證表單
表單重寫(xiě)沒(méi)有提及页衙，自行驗(yàn)證，共包含formaction阴绢、formenctype店乐、formtarget、formmethod呻袭、formnovalidate
應(yīng)用于提交按鈕上响巢，如：<input type="submit" formaction="xxx.php">
表單事件
oninput 用戶(hù)輸入內(nèi)容時(shí)觸發(fā)，可用于移動(dòng)端輸入字?jǐn)?shù)統(tǒng)計(jì)
oninvalid 驗(yàn)證不通過(guò)時(shí)觸發(fā)
音頻
<audio src="./music/see you.mp3"></audio>
可以通過(guò)附加屬性可以更友好控制音頻的播放棒妨，如：
autoplay 自動(dòng)播放
controls 是否顯不默認(rèn)播放控件
loop 循環(huán)播放
preload 預(yù)加載 同時(shí)設(shè)置autoplay時(shí)些屬性失效
由于版權(quán)等原因，不同的瀏覽器可支持播放的格式是不一樣的
多瀏覽器支持的方案含长，如下圖
視頻
<video src="./vidio/movie.mp4" controls="controls"></video>
附加屬性可以更友好的控制視頻的播放
autoplay 自動(dòng)播放
controls 是否顯示默認(rèn)播放控件
loop 循環(huán)播放
preload 預(yù)加載券腔，同時(shí)設(shè)置了autoplay，此屬性將失效
width 設(shè)置播放窗口寬度
height 設(shè)置播放窗口的高度
由于版權(quán)等原因拘泞，不同的瀏覽器可支持播放的格式是不一樣的
多瀏覽器支持的方案纷纫，如下圖
DOM擴(kuò)展
獲取元素
1、document.getElementsByClassName ('class') 通過(guò)類(lèi)名獲取元素陪腌，以類(lèi)數(shù)組形式存在辱魁。
2、document.querySelector('selector') 通過(guò)CSS選擇器獲取元素诗鸭，符合匹配條件的第1個(gè)元素染簇。
3、document.querySelectorAll('selector') 通過(guò)CSS選擇器獲取元素强岸，以類(lèi)數(shù)組形式存在锻弓。
類(lèi)名操作
1、Node.classList.add('class') 添加class
2蝌箍、Node.classList.remove('class') 移除class
3青灼、Node.classList.toggle('class') 切換class，有則移除妓盲，無(wú)則添加
4杂拨、Node.classList.contains('class') 檢測(cè)是否存在class
Node指一個(gè)有效的DOM節(jié)點(diǎn)，是一個(gè)通稱(chēng)
自定義屬性
在HTML5中我們可以自定義屬性悯衬，其格式如下data-*=""弹沽，例如
data-info="我是自定義屬性"，通過(guò)Node.dataset['info'] 我們便可以獲取到自定義的屬性值。
Node.dataset是以類(lèi)數(shù)組形式存在的
當(dāng)我們?nèi)缦赂袷皆O(shè)置時(shí)贷币，則需要以駝峰格式才能正確獲取
data-my-name="itcast"击胜，獲取Node.dataset['myName']
新增API
多媒體
方法：load()、play()役纹、pause()
屬性：currentSrc偶摔、currentTime、duration
事件：
音樂(lè)播放器
拖拽
拖拽元素：
目標(biāo)元素：*
設(shè)置拖拽：draggable="true"
事件監(jiān)聽(tīng)：
ondrag促脉、ondragstart辰斋、ondragleave、ondragend
ondragenter瘸味、ondragover宫仗、ondrop
- 數(shù)據(jù)傳遞：
ev.dataTransfer.setData()、ev.dataTransfer.getData()
歷史
pushState()
replaceState()
onpopstate
地理定位
geolocation.getCurrentPosition()
geolocation.watchPosition()
Web存儲(chǔ)
window.sessionStorage
window.localStorage
setItem(key, value)
getItem(key)
removeItem(key)
clear()
key(n)
生命周期差異旁仿，存儲(chǔ)空間差異
WebSQL藕夫、IndexDB
全屏
