1，常規佈局寫法：
<body>
<!-- header -->
<!-- nav -->
<!-- main -->
<!-- aside -->
<!-- arcile -->
<!-- footer -->
</body>1，h5新語義標籤：
<header>
<nav>
<!-- a[href=#]{導航欄$}*4 -->
</nav>
</header>
<!-- main -->
<main>
<aside></aside>
<article></article>
</main>
<!-- footer -->
<footer></footer>一，自己的代碼：加display：block。
※新語義標籤兼容問題解決：
1，由於ie8以及以下版本不兼容。
2，通過js創建元素在谷歌等高版本瀏覽器也兼容，所以會出現兩次。解決辦法：用emmet語句做條件判斷。
（希望這一段代碼只在指定的ie版本中執行）
cc:ie6+tab鍵快捷生成emmet語法
l：less
t：than
e：equal
lte：小於等於的意思。
解決ie8以及以下的新語義標籤兼容問題，可以用js的creatElement(),來創建元素。
//emmet條件判斷語句。
<!--[if lt IE 9]>
<script>
window.onload=function(){
var creatHeader=document.creatElement("header");
document.body.appendChild(creatHeader);
}
</script>
<![endif]-->
二，引入html5.js框架
提示：如果頁面中存在大量的h5語義標籤，可以通過引入第三方js框架處理。
引入：html5shiv-master包下的html5shiv.min.js
優化代碼：把引入的js框架放入emmet條件判斷語法中。指定版本下才運行
三，新輸入類型：
1，新type屬性：
桌面端看不出區別，當在移動端打開時，會顯示不同的 虛擬鍵盤，
比如：
**email彈出email鍵盤。
url彈出url鍵盤。
search：右下角的輸入按鈕變成搜素。
number：彈出的是數字鍵盤。
tel彈出的是九宮格的數字鍵盤。**
且移動端會比桌面端顯示要好。
常用部分：
<input type="color">//顏色
<input type="date">//日期
<input type="datetime">//
<input type="datetime-local">//
<input type="date">//
<input type="email">//
<input type="month">//
<input type="week">//
<input type="day">
<input type="number">//只能輸入e和數字，e爲科學計數法中的表達方式
<input type="range">//滑動條，快速生成
<input type="search">//
三，新表單元素：
1，datalist：
給datalist添加id=foodlist，通過list=“foodlist”，進行關聯。
提高輸入效率。
2，keygen元素：
兼容性極差。
3，output元素
只是一個語義性較強的元素，如果需要修改內部的值需要通過js去實現。
<input type="number">+<input type="number">=<output>123</output>
<input type="button" value="計算結果">四，新表單屬性01
常用：
1，placeholder（自動提示的佔位符。）
比舊版input內value便捷。
提示信息爲灰色，input標籤默認的提醒信息文本
2，autofocus（自動獲取焦點）
3，multiple（支持多文件選擇）
用戶上傳文件，file標籤默認：一次只能選擇一個
4，autocomplete（自動完成）：
①必須配合name屬性使用②表單曾經被提交過，才能夠使用。
可以根據用戶在本頁面提交過的數據
進行保存，自動匹配。
5，form屬性（通過form屬性將表單外部的元素與表單相關聯，不建議使用，維護性比較差。）
<input type="text" placeholder="請輸入用戶名">
<input type="email" placeholder="請輸入郵箱" autofocus >
<input type="file" multiple >
<input type="tel" name="telPhone" autocomplete >
<input type="submit">五，新表單屬性02
早期需要通過js來實現用戶表單數據提交前進行準確性驗證。
新表單驗證元素：
1，email標籤自帶了 表單格式驗證，但是不支持空值驗證。
添加required 驗證空值。
2，對字符串格式的驗證使用的是正則。
pattern中可以寫正則進行驗證。（自定義的驗證規則。）
3，oninvalid
<input type="email" name="userEmail" required pattern="\d{3}" oninvalid="this.setCustonValidity('親愛的用戶您輸入的格式不正確請重新輸入')" >
<element oninvalid="myScript">JavaScript文檔中： object.oninvalid=function(){myScript};
JavaScript文檔中,添加事件監聽：addEventListener()
object.addEventListener(“invalid”, myScript);
注：IE8瀏覽器及之前版本不支持addEventListener()方法.
六，多媒體標籤
1，音頻
2，視頻
3，早期解決方案：flash插件。移動端不支持flash。
1，音頻：
audio：MP3，wav，ogg,
①controls控制器
②autoplay自動播放
③loop是否循環
④src直接指定音頻文件
⑤source 屬性指定多個音頻時會從上往下進行解析，找到可以播放的既可開始播放。
如果遇到無法播放的音頻會繼續往下解析，知道找到可以播放的爲止。
如果都無法解析 我們能夠在最後設置一個提示信息。
可以對低版本的用戶進行一個友善的提示。
<audio controls autoplay loop>
<source src="music/郝雲的活着1.mp3">
<source src="music/郝雲的活着2.mp3">
親愛的用戶，你的瀏覽器版本太低無法享受這個頁面的所有功能，建議進行更新。☺<a href="#">戳我下載更新</a>
</audio>2，視頻：
①controls控制器
②autoplay自動播放
③loop是否循環
④src視頻播放路徑
⑤width，height在設置視頻video的寬高時，會優先考慮視頻本身的大小 改變的是video標籤的大小。
⑥poster=“”，視頻在無自動播放的時候顯示的圖片。
⑦source 屬性指定多個視頻文件
<video src="movie/[報告老闆][第二季]第11集_bd.mp4" controls autoplay loop height="100px" width="300px"></video>
七，獲取元素：
1，jQ簡潔的獲取元素的方式，很方便。$(選擇器)
2，js中通過ById，ByName，ByTagName，ByClassName來獲取元素。
3，html5中直接通過一個方法就可以獲取父級元素。
//獲取單個方法的參數 支持是使用css的選擇器。
/*標籤選擇器
class選擇器
id選擇器*/
document.querySelector('li').style.backgroundColor ='orange';
document.querySelector('.fruit').style.backgroundColor ='blue';
//這個方法 返回的類型是 數組 哪怕只有一個元素 返回的也是數組
var fruitDoms=document.querySelectorAll('.fruit');
for (var i = 0; i < fruitDoms.length; i++) {
fruitDoms[i].style.color = 'red';
}八，類名操作：
js中className是獲取的多個值，用起來比較不方便。
html中新增的classList操作
1，add，新增
2，remove，移除
3，contains，判斷是否有class
4，toggle，切換
//獲取要操作的元素 方便後續操作
var dv=document.querySelector('.showBox');
//新增
document.querySelector('input[value = add]').onclick=function(){
//alert("執行了");
dv.classList.add('orange');
}
//移除
document.querySelector('input[value = remove]').onclick=function(){
dv.classList.remove('orange');
}
//判斷是否存在class
document.querySelector('input[value = contains]').onclick=function(){
alert(dv.classList.contains('orange'));
}
//切換class
document.querySelector('input[value = toggle]').onclick=function(){
dv.classList.toggle('skyBlue');
}
}九，自定義屬性：
爲了規範化 自定義屬性寫法，
所有通過data-方式添加的屬性都保存在dom元素的dataset屬性中 ，他是一個對象。
