HTML5中的新增標簽：
為了更好地處理今天的互聯(lián)網(wǎng)應用，HTML5添加了很多新元素及功能，比如： 圖形的繪制，多媒體內(nèi)容，更好的頁面結(jié)構(gòu)，更好的形式 處理，和幾個api拖放元素，定位，包括網(wǎng)頁 應用程序緩存，存儲，網(wǎng)絡工作者，等。
canvas
標簽 描述
<canvas> 標簽定義圖形，比如圖表和其他圖像。該標簽基于 JavaScript 的繪圖 API
多媒體
標簽 描述
<audio> 定義音頻內(nèi)容
<video> 定義視頻（video 或者 movie）
<source> 定義多媒體資源 <video> 和 <audio> 字體
<embed> 定義嵌入的內(nèi)容，比如插件。
<track> 為諸如 <video> 和 <audio> 元素之類的媒介規(guī)定外部文本軌道。
表單
標簽 描述
<datalist> 定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen> 規(guī)定用于表單的密鑰對生成器字段。
<output> 定義不同類型的輸出，比如腳本的輸出。
語義和結(jié)構(gòu)
HTML5提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu)：
標簽 描述
<article> 定義頁面的側(cè)邊欄內(nèi)容
<aside> 定義頁面內(nèi)容之外的內(nèi)容。
<bdi> 允許您設置一段文本，使其脫離其父元素的文本方向設置。
<command> 定義命令按鈕，比如單選按鈕、復選框或按鈕
<details> 用于描述文檔或文檔某個部分的細節(jié)
<dialog> 定義對話框，比如提示框
<summary> 標簽包含 details 元素的標題
<figure> 規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<figcaption> 定義 <figure> 元素的標題
<footer> 定義 section 或 document 的頁腳。
<header> 定義了文檔的頭部區(qū)域
<mark> 定義帶有記號的文本。
<meter> 定義度量衡。僅用于已知最大和最小值的度量。
<nav> 定義運行中的進度（進程）。
<progress> 定義任何類型的任務的進度。
<ruby> 定義 ruby 注釋（中文注音或字符）。
<rt> 定義字符（中文注音或字符）的解釋或發(fā)音。
<rp> 在 ruby 注釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。
<section> 定義文檔中的節(jié)（section、區(qū)段）。
<time> 定義日期或時間。
<wbr> 規(guī)定在文本中的何處適合添加換行符。
HTML中移除的標簽：
以下的 HTML 4.01 元素在HTML5中已經(jīng)被刪除:
?<acronym> 字體兼容
?<applet> java組件
?<basefont> 字體
?<big>
?<center>
?<dir> 目錄
?<font>
?<frame>
?<frameset>
?<noframes>
?<strike>
HTML中的語義標簽
1.傳統(tǒng)頁面的標簽使用
2.HTML5頁面中的標簽使用，如：
<body>
<header>定義了文檔的頭部區(qū)域</header>
<div>
<article>定義頁面的側(cè)邊欄內(nèi)容</article>
<aside>定義頁面內(nèi)容之外的內(nèi)容</aside>
</div>
<footer>定義 section 或 document 的頁腳</footer>
</body>
兼容處理：
1.在不支持HTML5新標簽的瀏覽器里，會將這些新的標簽解析成行內(nèi)元素(inline)對待，所以我們只需要將其轉(zhuǎn)換成塊元素(block)即可使用，但是在IE9版本以下，并不能正常解析這些新標簽，但是卻可以識別通過document.createElement('tagName')創(chuàng)建的自定義標簽，于是我們的解決方案就是將HTML5的新標簽全部通過document.createElement('tagName')來創(chuàng)建一遍，這樣IE低版本也能正常解析HTML5新標簽了。
2.處理方式：在實際開發(fā)中我們更多采用的是通過檢測IE瀏覽器的版本來加載三方的一個JS庫來解決兼容問題（測試在IE下面的兼容性：ieTester軟件的使用）
<script src="../js/html5shiv.min.js"></script>
HTML5中表單新增的標簽：
<form action="">
用戶名：<input type="text" name="userName"> <br>
密碼：<input type="password" name="userPwd"> <br>
<!--email提供了默認的電子郵箱的完整驗證：要求必須包含@符號，同時必須包含服務器名稱，如果不能滿足驗證，則會阻止當前的數(shù)據(jù)提交-->
郵箱：<input type="email"> <br>
<!--tel它并不是來實現(xiàn)驗證。它的本質(zhì)目的是為了能夠在移動端打開數(shù)字鍵盤。意味著數(shù)字鍵盤限制了用戶只能輸入數(shù)字。 如何查看效果：qq發(fā)送文件>>手機端使用qq來接收>>使用手機瀏覽器查看-->
電話：<input type="tel"> <br>
<!--驗證只能輸入合法的網(wǎng)址：必須包含http://-->
網(wǎng)址：<input type="url"> <br>
<!--number：只能輸入數(shù)字(包含小數(shù)點)，不能輸入其它的字符
max:最大值
min:最小值
value:默認值-->
數(shù)量：<input type="number" value="60" max="100" min="0"> <br>
<!--search：可以提供更人性化的輸入體驗-->
請輸入商品名稱：<input type="search"> <br>
<!--range:范圍-->
范圍：<input type="range" max="100" min="0" value="50"> <br>
顏色：<input type="color"> <br>
<!--日期時間相關(guān)-->
<!--time:時間：時分秒-->
時間：<input type="time"> <br>
<!--date：日期：年月日-->
日期：<input type="date"> <br>
<!--datetime:大多數(shù)瀏覽器不能支持datetime.用于屏幕閱讀器-->
日期時間：<input type="datetime"><br>
<!--datetime-local:日期和時間-->
日期時間：<input type="datetime-local"> <br>
月份：<input type="month"> <br>
星期：<input type="week">
<!--提交-->
<input type="submit">
</form>
表單新增的屬性:
<form action="" id="myForm">
<!--placeholder：提示文本，提示占位-->
<!--autofocus:自動獲取焦點-->
<!--autocomplete:自動完成：on:打開 off:關(guān)閉
1.必須成功提交過:提交過才會記錄
2.當前添加autocomplete的元素必須有name屬性-->
用戶名：<input type="text" name="userName" placeholder="請輸入用戶名" autofocus autocomplete="on"> <br>
<!--tel并不會實現(xiàn)驗證，僅僅是在移動端能夠彈出數(shù)字鍵盤-->
<!--required:必須輸入，如果沒有輸入則會阻止當前數(shù)據(jù)提交-->
<!--pattern:正則表達式驗證
*:代表任意個
?:代表0個或1個
+：代表1個或多個-->
手機號：<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
<!--multiple：可以選擇多個文件-->
文件：<input type="file" name="photo" multiple> <br>
<!--email:有默認驗證 在email中，multiple允許輸入多個郵箱地址，以逗號分隔-->
郵箱：<input type="email" name="email" multiple><br>
<!--提交：-->
<input type="submit"> <br>
</form>
<!--下面這個表單元素并沒有包含在form中：默認情況下面表單元素的數(shù)據(jù)不會進行提交-->
<!--form:指定表單id,那么在將來指定id號的表單進行數(shù)據(jù)提交的時候，也會將當前表單元素的數(shù)據(jù)一起提交-->
地址：<input type="text" name="address" form="myForm">
HTML5-新增的表單元素-datalist:
<form action="">
<!--專業(yè)：
<select name="" id="">
<option value="1">前端與移動開發(fā)</option>
<option value="2">java</option>
<option value="3">javascript</option>
<option value="4">c++</option>
</select>-->
<!--不僅可以選擇，還應該可以輸入-->
<!--建立輸入框與datalist的關(guān)聯(lián) list="datalist的id號"-->
專業(yè)：<input type="text" list="subjects"> <br>
<!--通過datalist創(chuàng)建選擇列表-->
<datalist id="subjects">
<!--創(chuàng)建選項值：value:具體的值 label:提示信息，輔助值-->
<!--option可以是單標簽也可以是雙標簽-->
<option value="英語" label="不會"/>
<option value="前端與移動開發(fā)" label="前景非常好"></option>
<option value="java" label="使用人數(shù)多"></option>
<option value="javascript" label="做特效"></option>
<option value="c" label="不知道"></option>
</datalist>
網(wǎng)址：<input type="url" list="urls">
<datalist id="urls">
<!--如果input輸入框的type類型是url,那么value值必須添加http://-->
<option value="http://www.baidu.com" label="百度"></option>
<option value="http://www.sohu.com"></option>
<option value="http://www.163.com"></option>
</datalist>
</form>
表單新增的事件:
<form action="">
用戶名：<input type="text" name="userName" id="userName"><br>
電話：<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
<input type="submit">
</form>
<script>
/*1.oninput:監(jiān)聽當前指定元素內(nèi)容的改變：只要內(nèi)容改變(添加內(nèi)容，刪除內(nèi)容)，就會觸發(fā)這個事件*/
document.getElementById("userName").oninput=function(){
console.log("oninput:"+this.value);
}
/*onkeyup:鍵盤彈起的時候觸發(fā)：每一個鍵的彈起都會觸發(fā)一次*/
document.getElementById("userName").onkeyup=function(){
console.log("onkeyup:"+this.value);
}
/*oninvalid:當驗證不通過時觸發(fā)*/
document.getElementById("userPhone").oninvalid=function(){
/*設置默認的提示信息*/
this.setCustomValidity("請輸入合法的11位手機號");
}
</script>
多媒體：
1.音頻播放：audio標簽的使用:
src:播放文件的路徑
controls:音頻播放器的控制器面板
autoplay:自動播放
loop:循環(huán)播放
<audio src="../mp3/aa.mp3" controls></audio>
video：視頻:
src:播放文件的路徑
controls:音頻播放器的控制器面板
autoplay:自動播放
loop:循環(huán)播放
poster:指定視頻還沒有完全下載完畢，或者用戶沒有點擊播放前顯示的封面。 默認顯示當前視頻文件的第一副圖像
width:視頻的寬度
height:視頻的高度
注意事項：視頻始終會保持原始的寬高比。意味著如果你同時設置寬高，并不是真正的將視頻的畫面大小設置為指定的大小，而只是將視頻的占據(jù)區(qū)域設置為指定大小，除非你設置的寬高剛好就是原始的寬高比例。所以建議：在設置視頻寬高的時候，一般只會設置寬度或者高度，讓視頻文件自動縮放
<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls height="600"></video>
source:因為不同的瀏覽器所支持的視頻格式不一樣，為了保證用戶能夠看到視頻，我們可以提供多個視頻文件讓瀏覽器自動選擇
<video src="../mp3/flv.flv" controls></video>
<video controls>
<!--視頻源，可以有多個源-->
<source src="../mp3/flv.flv" type="video/flv">
<source src="../mp3/mp4.mp4" type="video/mp4">
</video>
html5操作dom：
query:查詢 Selector：選擇器 querySelector(傳入選擇器名稱)
querySelector:獲取單個元素，如果獲取的元素不止一個，那么只會返回滿足條件的第一個元素*/
參數(shù)要求：如果是類選擇器，必須添加. 如果是id選擇器， 必須添加# ,否則當成標簽處理
var javaLi=document.querySelector(".green");
//var javaLi=document.querySelector("#c");
console.log(javaLi);
/*querySelectorAll獲取滿足條件的所有元素--數(shù)組*/
var allLi=document.querySelectorAll("li")[0];
console.log(allLi);
html5類樣式的操作：
- add:為元素添加指定名稱的樣式.一次只能添加一個樣式:
document.querySelector("#add").onclick=function(){
/*classList:當前元素的所有樣式列表-數(shù)組*/
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underline");
//document.querySelector("li").className="red underline"
/*獲取樣式*/
var result=document.querySelector("li").classList.item(2);
console.log(result);
}
- remove:為元素移除指定名稱的樣式(不是移除class屬性)，一次也只能移除一個:
document.querySelector("#remove").onclick=function(){
document.querySelector(".blue").classList.remove("blue");
}
- toggle：切換元素的樣式：如果元素之前沒有指定名稱的樣式則添加。如果有則移除:
document.querySelector("#toggle").onclick=function(){
document.querySelectorAll("li")[2].classList.toggle("green");
}
- contains:判斷元素是否包含指定名稱的樣式，返回true/false
document.querySelector("#contain").onclick=function(){
var isContain=document.querySelectorAll("li")[3].classList.contains("red");
console.log(isContain);
}
html5自定義屬性：
1.data-開頭
2.data-后必須至少有一個字符，多個單詞使用-連接
建議：
1.名稱應該都使用小寫--不要包含任何的大寫字符
2.名稱中不要有任何的特殊符號
3.名稱不要副作用純數(shù)字
<p data-school-name="itcast">傳智播客</p>
<p data-name="itcast">傳智播客</p>
取值:
<script>
window.onload=function(){
var p=document.querySelector("p");
/*獲取自定義屬性值*/
/*將data-后面的單詞使用camel命名法連接:必須使用camel合法法獲取值否則有可能無法獲取到值*/
//var value=p.dataset["schoolname"];//data-schoolname
var value=p.dataset["schoolName"];//data-school-name
console.log(value);
}
</script>
