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