1.語義化標簽總結
基礎布局標簽
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<article></article>
<footer></footer>
注意：IE8以后不兼容H5標簽囤耳，如果需要兼容IE8一下的瀏覽器身冀，則需要如下操作：
如果在sublime,或者WebStrom使用 可是使用快捷點: cc:ie6+tab
生成內容：
<!--[if lt IE 9]>
<script type="text/javascript" src='js/html5shiv.min.js'></script>
<![endif]-->
或者
<!--[if lte IE 6]>
<script type="text/javascript">
alert("我執(zhí)行了");
window.onload = function(){
var createHeader = document.createElement("header");
document.body.appendChild(createHeader);
}
</script>
<![endif]-->
H5解決方案：可以引入上面的html5shiv.min.js祭隔，百度搜索進行下載即可棚辽。
2.H5表單
input標簽新增屬性
<form action="#">
<fieldset>
<legend>新輸入類型</legend>
<label>type=color
<input type="color">
</label>
<label>type=date
<input type="date">
</label>
<label>type=datetime
<input type="datetime">
</label>
<label>type=datetime-local
<input type="datetime-local">
</label>
<label>type=date
<input type="date">
</label>
<label>type=email
<input type="email">
</label>
<label>type=month
<input type="month">
</label>
<label>type=week
<input type="week">
</label>
<label>type=day
<input type="week">
</label>
<label>type=number
<input type="number">
</label>
<label>type=range
<input type="range">
</label>
<label>type=search
<input type="search">
</label>
<label>type=url
<input type="url">
</label>
</fieldset>
</form>
注意:有些效果顯示在瀏覽器顯示不明顯（沒有變化）兢孝，在移動端會有變化浇坐。（移動端的支持 比桌面端要好）
新表單元素
<datalist></datalist>//定義下拉列表
<keygen></keygen> //（生成秘鑰）
<output></output> //定義輸出的一些類型睬捶。
使用方法：
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
剩余的兩個理解就好。
3.新表單屬性
操作對象:
<input type="text" name="">
在表單可添加屬性近刘，如下：
- placeholder：占位符提示
- autofocus：獲取焦點
- autocomplete: 規(guī)定是否使用輸入字段的自動完成功能擒贸。
- multiple：支持多文件選擇
- form：此屬性不推薦使用
演示代碼:
<form action="#" id='form'>
<fieldset>
<legend>新表單屬性</legend>
<!-- input標簽 默認的 提醒信息 -->
<input type="text" name="" placeholder="請輸入用戶名">
<input type="email" name="" placeholder="請輸入電子郵箱" autofocus>
<input type="file" multiple>
<!-- 必須 為 該標簽 添加name屬性 還需要改表單 曾經提交過-->
<input type="tel" name="telPhone" autocomplete placeholder="請輸入電話號碼">
<input type="submit" >
</fieldset>
</form>
<input type="text" name="userHabbit" placeholder="請輸入你的愛好" form='form'>
表單驗證:
添加屬性：
- required:必須填寫，不能為空
- pattern：可是使用正則來驗證
<form action="#">
<fieldset>
<legend>表單驗證</legend>
<!-- email這個標簽 自帶了 表單的格式驗證 不能驗證 空的值 -->
<input type="email" name="userEmail" required>
<!-- 對 字符串 格式的驗證 使用的是 正則
pattern 中可以寫正則 進行驗證
-->
<input type="tel" placeholder="請輸入電話號碼" name='userTel' required pattern="\d{3}"
oninvalid=" this.setCustomValidity('親愛的用戶你輸入的格式不正確,請重新輸入')">
<input type="submit">
</fieldset>
</form>
4.音頻（audio ）
音頻屬性： controls autoplay loop
- controls:控制器
- autoplay：是否自動播放
- loop:是否循環(huán)播放
- muted：是否靜音
演示源碼：
<audio controls autoplay loop>
<source src="music/music.ogg" >
<source src="music/郝云 - 活著.mp3" >
親愛的用戶,你的瀏覽器版本太低,無法享受這個頁面的所有功能,建議進行更新 ^_^ <a href="#">戳我下載</a>
</audio>
5.視頻(video):
視屏播放器：
- autoplay autoplay 如果出現(xiàn)該屬性觉渴，則視頻在就緒后馬上播放介劫。
- controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件案淋，比如播放按鈕座韵。
- height pixels 設置視頻播放器的高度。
- loop loop 如果出現(xiàn)該屬性踢京，則當媒介文件完成播放后再次開始播放誉碴。
- muted muted 規(guī)定視頻的音頻輸出應該被靜音。
- poster URL 規(guī)定視頻下載時顯示的圖像瓣距，或者在用戶點擊播放按鈕前顯示的圖像黔帕。
- preload preload 如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載蹈丸，并預備播放成黄。
- 如果使用 "autoplay"，則忽略該屬性逻杖。
- src url 要播放的視頻的 URL慨默。
- width pixels 設置視頻播放器的寬度。
演示代碼：
<!--<video src="movie/[報告老板][第二季]第11集_bd.mp4" controls loop height="100px" width="300px"
poster="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"></video>-->
<!--瀏覽器會從上往下 找到可以播放的 進行播放-->
<video controls>
<source src="movie/movie04.ogg">
<source src="movie/[報告老板][第二季]第11集_bd.mp4">
親愛的用戶,你的瀏覽器版本太久了,建議升級 <a href="#"> 點我下載 最新的瀏覽器(⊙o⊙)</a>
</video>
6.獲取元素新方法
document.querySelector('li')
document.querySelectorAll('')
注意：這個選著器的使用方式和jQuery選著器使用方式是一樣的弧腥。
7.類名操作（classList）
這是一個對象厦取，對象有如下方法：
add() (添加一個類名)
remove() （刪除一個類）
contains() （是否包含類）
toggle() （切換類）
示例代碼：
// 獲取 要操縱的div 方便后續(xù)的操作
var div = document.querySelector('.showBox');
// querySelector
// 新增class
document.querySelector('input[value=add]').onclick = function(){
// alert('ADD');
div.classList.add('orange');
}
// 移除class
document.querySelector('input[value=remove]').onclick = function () {
div.classList.remove('orange');
}
// 判斷是否存在class
document.querySelector('input[value=contains]').onclick = function () {
alert(div.classList.contains('orange'));
}
// 切換class
document.querySelector('input[value=toggle]').onclick = function () {
div.classList.toggle('skyBlue');
}
8.自定義屬性（dataset）
代碼演示：
<body>
<!-- html5為了規(guī)范自定義屬性的寫法,新增了一個 data-的屬性 -->
<div data-age='18' data-skill='eatFood' data-habbit = 'tableTannis'
data-food-vegetable='西蘭花' data-foodMeat='牛肉'></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
// 所有 通過 data-的方式 添加的屬性 都會保存在dom元素的 dataset屬性中 他是一個對象
// 設置屬性時 能夠使用大寫字母 但是會自動幫我們轉化為 小寫的字母
// 作用是 為了規(guī)范 自定義屬性的寫法
console.log(document.querySelector('div').dataset);
console.log(document.querySelector('div').dataset.age);
console.log(document.querySelector('div').dataset.foodVegetable);
console.log(document.querySelector('div').dataset.foodmeat);
}
</script>