HTML5（一）語義化標籤、新增表單控制元件
1、新的頁面結構以及寬鬆的語法規範
<!doctype html>
<meta charset="utf-8"/>
2、語義化標籤
（1）<header></header> 頁首：主要用於頁面的頭部的資訊介紹，也可以用於版塊頭部
（2）<hgroup></hgroup> 頁面上的一個標題組合，一個標題和一個子標題，或者標語的組合，例如
| <hgroup> <h1>妙味課堂</h1> <h2>帶您進入富有人情味的IT培訓</h2> </hgroup> |
（3）<nav></nav> 導航（包含連結的一個列表），例如
| <nav><a href=“#”>連結</a><a href=“#”>連結</a></nav> <nav> <p><a href=“#”>妙味課堂</a></p> <p><a href=“#”>妙味課堂</a></p> </nav> <nav> <h2>妙味精品課程</h2> <ul> <li><a href=“#”>javascript</a></li> <li><a href=“#”>html+css</a></li> </ul> </nav> |
（3）<footer></footer> 頁尾：頁面的底部 或者 版塊底部
（4）<section></section> 頁面上的版塊，用於劃分頁面上的不同區域，或者劃分文章裡的不同章節
（5）<article></article> 用來在頁面中表示一套結構完整且獨立的內容部分。
可以用來呈現論壇的一個帖子，雜誌或報紙中的一篇文章，一篇部落格，使用者提交的評論內容，可互動的頁面模組掛件等。
（6）<aside></aside> 元素標籤，可以包含於當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別於主要內容的部分。
aside 的內容應該與 article 的內容相關。
被包含在<article>中作為主要內容的附屬資訊部分，其中的內容 以是與當前文章有關的引用、詞彙列表等
在<article>之外使用，作為頁面或站點全域性的附屬資訊部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情連結、附屬導航或廣告單元等。
（7）<figure></figure> 用於對元素進行組合，一般用於圖片或視訊。
（8）<figcation></figcation> figure的子元素，用於對figure的內容進行說明
| <figure> <img src=“miaov.png”/>(注意沒有alt) <figcaption> 妙味課堂 photo © 妙味趣學</figcaption> </figure> |
（9）<time></time> 用來表示時間或日期，例如
| <p> 我們在每天早上 <time>9:00</time> 開始營業。 </p>引數 <p> 我在 <time datetime="2008-02-14">情人節</time> 有個約會。 </p> |
（10）<datalist></datalist> 選項列表：與input元素配合使用，來定義input可能的值，例如：
| <input type="text" list="valList" /> <datalist id="valList"> <option value="javascript">javascript</option> <option value="html">html</option> <option value="css">css</option> </datalist> |
（11）<details></details> 用於描述文件或文件某個部分的細節，
該元素用於摘錄引用等 應該與頁面的主要內容區分開的其他內容
Open 屬性預設展開
（12）<summary></summary> details元素的標題，例如
| <details> <summary>妙味課堂</summary> <p>國內將知名的IT培訓機構</p> </details> |
（13）<dialog></dialog> 定義一段對話
| <dialog> <dt>老師</dt> <dd>2+2 等於？</dd> <dt>學生</dt> <dd>4</dd> <dt>老師</dt> <dd>答對了！</dd> </dialog> |
（14）<address></address> 定義文章 或 頁面作者的詳細聯絡資訊
（15）<mark></mark> 需要標記的詞或句子
（16）<keygen> 給表單新增一個公鑰，例如
| <form action="http://www.baidu.com" method="get"> 使用者: <input type="text" name="usr_name" /> 公鑰: <keygen name="security" /> <input type="submit" /> </form> |
（17）<progress></progress> 定義進度條，例如：
| <progress max="100" value="76"> <span>76</span>% </progress> |
3、新增標籤低版本瀏覽器的相容
針對IE6-8這些不支援HTML5語義化標籤的瀏覽器，我們可以使用javascript來解決，如下，在頁面的頭部加上
| <script> document.createElement(“header”); document.createElement(“nav”); document.createElement(“footer”); ... </script> |
HTML5語義化標籤在IE6-8下，我們用js創建出來以後，它不會有任何預設樣式，甚至沒有display，所以在樣式表裡要對這些標籤定義一下預設的display
4、新增的表單控制元件
（1）新的輸入型控制元件
email：電子郵箱文字框，跟普通的沒什麼區別
——當輸入不是郵箱的時候，驗證通不過
——移動端的鍵盤會有變化
tel：電話號碼
url：網頁的URL
search：搜尋引擎
——chrome下輸入文字後，會多出一個關閉的X
range：特定範圍內的數字選擇器
——min、max、step（步數）
number：只能包含數字的輸入框
color：顏色選擇器
datetime：顯示完整日期
datetime-local：顯示溫度日期
time：顯示時間、不含時區
date：顯示日期
week：顯示周
month：顯示月
（2）新的表單特性和函式
placeholder：輸入框提示資訊
autcomplete：是否儲存使用者輸入值
——預設為on，關閉提示選擇off
list和datalist：為輸入框構造一個選擇列表
——list值為datalist標籤的id
required：此項必填，不能為空
pattern：正則驗證
formaction：在submit裡定義提交地址
（3）表單驗證
validity物件，通過下面的valid可以檢視驗證是否通過，例如：8種驗證都返回true，一種驗證失敗返回false
| <form> <input type="text" required id="text"/> <input type="submit" /> </form> <script> var oText=document.getElementById("text"); oText.addEventListener("invalid",fn,false); function fn() { alert(this.validity.valueMissing); ev.preventDefault(); } |
——valueMissing：輸入值為空時
——typeMismatch：控制元件值與預期型別不匹配
——patternMismatch：輸入值不滿足pattern正則
——tooLong：超過maxLength最大限制
——rangeUnderflow：驗證的range最小值
——fangeOverflow：驗證的range最大值
——stepMismatch：驗證range的當前值是否符合min、max及step的規則
——customError：不符合自定義驗證 --> setCustomValidity()
Invalid事件 : 驗證反饋 input.addEventListener('invalid',fn,false)
阻止預設驗證：ev.preventDefault()
formnovalidate屬性 : 關閉驗證