一：H5的改變

<canvas> 新元素

新多媒體元素

新表單元素

新的語義和結構元素

HTML5提供了新的元素來創建更好的頁面結構：

二：視頻標簽

<video width="320" height="240" controls>   <source src="movie.mp4" type="video/mp4">   <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支持Video標簽。 </video> //可以定義多個source，video會依次嘗試播放，直到一個能正常播放的

可以在界面上定義按鈕，通過dom事件來控制video的播放、暫停、縮小、放大等：

HTML5 video.var myVideo=document.getElementById("video1"); //獲取視頻元素
 
function playPause()//定義按鈕的響應事件
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
 
function makeBig()
{ 
myVideo.width=600; 
} 
 
function makeSmall()
{ 
myVideo.width=320; 
} 
 
function makeNormal()
{ 
myVideo.width=480; 
}

三：音頻標簽

 <audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 您的瀏覽器不支持 audio 元素。
 </audio> 

四：新的Input類型

新類型目前還不被所有瀏覽器支持。

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

<input type="類型" name="">

五：新表單元素

1:輸入框自動完成數據表

<datalist> 元素規定輸入域的選項列表。

<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：

使用 <input> 元素的列表屬性與 <datalist> 元素綁定：通過input的list屬性，指向datalist的id。

<input list="browsers">//輸入框

 <datalist id="browsers">//數據集
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
 </datalist> 

2:加密表單數據

<keygen>標簽規定用於表單的密鑰對生成器字段。

當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲於客戶端，公鑰（public key）則被發送到服務器。公鑰可用於之後驗證用戶的客戶端證書（client certificate）。

<form action="demo_keygen.asp" method="get">
 用戶名: <input type="text" name="usr_name">
 加密: <keygen name="security">
 <input type="submit">
 </form> 

3:動態輸出

<output> 元素用於不同類型的輸出，比如計算或腳本輸出。

 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
     <input type="range" id="a" value="50">100 +
     <input type="number" id="b" value="50">=
     <output name="x" for="a b"></output>
</form>

五：表單新屬性

1：autocomplete自動完成

autocomplete 適用於 <form> 標簽，以及以下類型的 <input> 標簽：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form autocomplete="on"/>

2:novalidate不驗證輸入值

novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。

<form  novalidate>

3:autofocus頁面加載時自動獲取焦點

<input  autofocus>

4:min/max 用於數字、日期輸入框指定輸入範圍

註意: min、max 屬性適用於以下類型的 <input> 標簽：date pickers、number 以及 range。

5:multiple 允許多值

註意: multiple 屬性適用於以下類型的 <input> 標簽：email 和 file。

<input type="file" name="img" multiple>//上傳多個文件

6:pattern 驗證模式

pattern 屬性描述了一個正則表達式用於驗證 <input> 元素的值。

註意:pattern 屬性適用於以下類型的 <input> 標簽: text, search, url, tel, email, 和 password.

<input type="text" name="" pattern="[A-Za-z]{3}" title="">

7：placeholder 輸入提示

 <input type="text" name="" placeholder="First name">

8:required 必填字段

註意:required 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<input type="text" name="usrname" required>

9:step 間隔

step 屬性為輸入域規定合法的數字間隔。

提示： step 屬性可以與 max 和 min 屬性創建一個區域值.

註意: step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

 <input type="number" name="points" step="3">

六：新語義元素——描述web頁面

1:section

<section> 標簽定義文檔中的節。

<section>
   <h1>標題</h1>
   <p>內容</p>
 </section> 

2:<article> 標簽定義獨立的內容

 <article>
   <h1>標題</h1>
   <p>內容</p>
 </article> 

3：nav 頁面導航欄

<nav> 元素用於定義頁面的導航鏈接部分區域。

 <nav>
 <a href="url">導航1</a> |
 <a href="/url/">導航</a> |
 <a href="/url/">導航</a> |
 <a href="/url/">導航</a>
 </nav> 

4:aside 定義側邊欄

<aside>
   <h4>標題</h4>
   <p>內容</p>
 </aside> 

5:header 文檔的頭部

<article>
   <header>
     <h1>頭部</h1>
     <p>頭部內容</p>
   </header>
   <p>文章體</p>
 </article> 

6:footer 文檔底部

一個頁腳通常包含文檔的作者，著作權信息，鏈接的使用條款，聯系信息等

 <footer>
   <p>Posted by: Hege Refsnes</p>
   <p><time pubdate datetime="2012-03-01"></time></p>
 </footer> 

7:<figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）

<figure>
   <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>標題</figcaption>
 </figure> 

html5學習筆記2——新元素