1. html5新增標籤
（1）常用佈局標籤
<header>定義頁面的頭部，相當於文檔的頁眉</header>
<nav>定義導航鏈接的部分</nav>
<footer>定義頁面的底部，相當於文檔的頁腳</footer>
<main>定義頁面的主體部分</main>
<article>定義文章</article>
<section>定義區域，文檔中的節，區段</section>
<aside>定義其所處內容之外的內容，側邊</aside>
（2）datalist標籤：定義選項列表，配合input標籤使用，選項以輸入時輸入框下方提示的形式出現
<input type="text" value="請輸入明星" list="star" /> <!-- input裏用list屬性 -->
<datalist id="star"> <!-- datalist裏用id實現和input的鏈接 -->
<option>王俊凱</option>
<option>王源</option>
<option>易烊千璽</option>
</datalist>
（3）fileset標籤：將表單內的元素打包，與legend搭配使用
<fieldset>
<legend>用戶登錄</legend> <!-- 定義標題 -->
用戶名：<input type="text" /><br /><br />
密 碼：<input type="text" />
</fieldset>
（4）新增input表單的type類型
<fieldset>
<legend>HTML5新增的INPUT type類型</legend>
<form action="">
郵箱：<input type="email" /><br /><br /> <!-- 郵箱格式，必須包含@ -->
手機：<input type="tel" /><br /><br /> <!-- 手機號碼格式，數字 -->
數字：<input type="number" /><br /><br /> <!-- 數字 -->
url：<input type="url" /><br /><br /> <!-- 網址格式 -->
搜索：<input type="search" /><br /><br /> <!-- 搜索框 -->
區域：<input type="range" /><br /><br /> <!-- 可拖動的滑塊 -->
時間：<input type="time" /><br /><br /> <!-- 小時 分鐘 -->
年月日：<input type="date" /><br /><br /> <!-- 年月日 -->
時間：<input type="datetime" /><br /><br />
月份：<input type="month" /><br /><br /> <!-- 年月 -->
星期：<input type="week" /><br /><br /> <!-- 星期 年 -->
顏色：<input type="color" /><br /><br />
<input type="submit" />
</form>
</fieldset>
（5）新增input表單屬性
用戶名：<input type="text" placeholder="請輸入用戶名" autofocus required /><br /><br />
<!-- placeholder佔位符；autofocus自動聚焦；required內容不能爲空 -->
暱稱：<input type="text" accesskey="s" /><br /><br /> <!-- 規定激活元素的快捷鍵，alt+字母 -->
上傳頭像：<input type="file" multiple /><br /><br /> <!-- 多文件上傳 -->
<form> <!-- 自動記錄完成，需提交按鈕，表單需命名 -->
姓名：<input type="text" autocomplete name="userName" />
<input type="submit" />
</form>
（6）表單綜合練習
<form action="">
<fieldset>
<legend>學生檔案錄入</legend>
<label>姓名：<input type="text" placeholder="請輸入學生姓名" /></label><br /><br />
<label>手機號：<input type="tel" /></label><br /><br />
<label>郵箱：<input type="email" /></label><br /><br />
學院：<input type="text" placeholder="請選擇學院" list="institute"/></label><br /><br />
<datalist id="institute">
<option>軟件工程</option>
<option>計算機科學</option>
<option>通信工程</option>
</datalist>
<label>出生日期：<input type="date" /></label><br /><br />
<label>成績：<input type="number" /></label><br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
（7）keygen標籤（使用頻率低）：keygen元素是密鑰對生成器（key-pair generator），當提交表單時，會生成一個私鑰，一個公鑰，私鑰存儲於客戶端，公鑰則被髮送到服務器，可用於之後驗證用戶的客戶端證書，即實現非對稱加密，目前瀏覽器支持率極低
<form action="">
用戶名：<input type="text" name="userName"><br>
密碼：<input type="password" name="userPwd"><br>
加密：<keygen></keygen><br>
<input type="submit">
</form>
（8）output標籤（使用頻率低）：用來放置輸出的內容，但是不能自動的計算結果，依舊需要通過js的方式來動態修改結果，只是相比於其他的標籤，語義性更強
（9）progress標籤：進度條，max最大值，value當前進度值
<progress max="100" value="100"></progress>
（10）meter標籤：度量器，衡量當前進度值，high較高值，low較低值，max最大值，min最小值，value當前值
<meter max="100" min="0" high="80" low="40" value="30"></meter>
（11）embed標籤：直接插入視頻文件，本質是調用本機上已經安裝的軟件，有兼容性
<embed src="helloworld.swf" tppabs="http://www.runoob.com//try/demo_source/helloworld.swf">
（12）audio標籤：播放音頻，controls音頻播放器的控制面板，autoplay自動播放，loop循環
<!-- 爲了瀏覽器兼容，需多種聲音文件 ogg mp3 wav
controls顯示控制面板，autoplay自動播放，loop爲循環次數，值爲-1時無限循環-->
<audio controls autoplay loop="2">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed src="horse.mp3">
</audio>
（13）video標籤：播放視頻，controls視頻播放器的控制面板，autoplay自動播放，loop循環，poster=“”當視頻還沒有完全下載或者用戶還沒有點擊播放前的默認顯示的封面，默認顯示當前視頻文件的第一幀畫面
<video width="320" height="240" autoplay controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
參考w3c手冊中文官網：http://w3school.com.cn/