語義化標籤：javascript
<header></header> 頁眉 css
<hgroup></hgroup> 頁面上的一個標題組合一個標題和一個子標題，或者標語的組合html
<nav></nav> 導航 （包含連接的的一個列表）html5
<footer></footer>頁腳 頁面的底部 或者 版塊底部java
<section> <section> 頁面上的版塊用於劃分頁面上的不一樣區域,或者劃分文章裏不一樣的節
<article></ article > 用來在頁面中表示一套結構完整且獨立的內容部分,能夠用來呈現論壇的一個帖子，雜誌或報紙中的一篇文章，一篇博客，用戶提交的評論內容，可互動的頁面模塊掛件等。chrome
<aside></ aside> 元素標籤能夠包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其餘相似的有別與主要內容的部分。瀏覽器
aside 的內容應該與 article 的內容相關。被包含在<article>中做爲主要內容的附屬信息部分，其中的內容 以是與當前文章有關的引用、詞彙列表等在<article>以外使用，做爲頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容能夠是友情連接、附屬導航或廣告單元等。ide
<figure> < figure > 用於對元素進行組合。通常用於圖片或視頻
<figcaption> <figcaption> figure的子元素 用於對figure的內容 進行說明
<figure>
<img src=「miaov.png」/>(注意沒有alt)
<figcaption>photo and copy</figcaption>
</figure>函數
<time></time>用來表現時間或日期
<p> 咱們在天天早上 <time>9:00</time> 開始營業。 </p>參數ui
<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>內容細節</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>
IE下的兼容
標籤
針對IE6-8這些不支持HTML5語義化標籤的瀏覽器咱們能夠使用javascript來解決他們 方法以下：
在頁面的頭部加下：
<script>
document.createElement(「header」);
document.createElement(「nav」);
document.createElement(「footer」);
……
</script>
以上的元素都是塊元素(除了<figcaption>).
爲了讓這些塊及元素在全部版本的瀏覽器中生效，你須要在樣式表文件中設置一下屬性 (如下樣式代碼可讓舊版本瀏覽器支持本章介紹的塊級元素):
HTML5語義化標籤在IE6-8下，咱們用js建立出來以後，他是不會有任何默認樣式的甚至是 display，因此在樣式表裏 要對這些標籤訂義一下 它默認的display
IE8 及更早IE版本沒法在這些元素中渲染CSS效果，以致於你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其餘的HTML5 elements.
解決辦法:你能夠使用HTML5 Shiv Javascript腳原本解決IE的兼容問題。HTML5 Shiv下載地址：http://code.google.com/p/html5shiv/
下載後，將如下代碼放入的網頁中：
以上代碼在瀏覽器小於IE9版本時會加載html5shiv.js文件. 你必須將其放置於<head> 元素中，由於 IE瀏覽器須要在頭部加載後渲染這些HTML5的新元素
form新增控件以及特性
新的輸入型控件
email : 電子郵箱文本框，跟普通的沒什麼區別
當輸入不是郵箱的時候，驗證通不過
移動端的鍵盤會有變化
tel : 電話號碼
url : 網頁的URL
search : 搜索引擎
chrome下輸入文字後，會多出一個關閉的X
range : 特定範圍內的數值選擇器
min、max、step( 步數 )
新的輸入型控件_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}「
Formaction 在submit裏定義提交地址
表單驗證
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屬性 : 關閉驗證