html5中，在新增加和廢除很多元素的同時，也增加和廢除了很多屬性。
一、新增屬性
1、表單屬性
a、autofocus
對input[所有類型]、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓元素在頁面加載后自動獲得焦點。一個頁面只能有一個元素有autofocus屬性，同時設置多個，則第一個生效。
這個屬性對登錄頁面很有用，可提升用戶體驗，有時登錄頁面就一個用戶名，密碼，頁面加載后用戶要手動定位到輸入框，才能輸入，有了autofocus，頁面打開即可直接輸入。
舉例：
<form> <p>用戶名：<input type="text" autofocus /></p> <p>密 碼：<input type="password"/></p> </form>
b、placeholder
對input[text, search, url, telephone, email 以及 password]、textarea指定placeholder屬性，它會對用戶的輸入進行提示，提示用戶期待什么樣的輸入。
當輸入框獲取焦點時，提示字符消失。
這個屬性也能提升用戶體驗，用的已經相當普遍了。
舉例：
<form> <p>用戶名：<input type="text" autofocus placeholder="用戶名"/></p> <p>密 碼：<input type="password" placeholder="密碼"/></p> </form>
c、form屬性
對input[所有類型]、output、select、textarea、button與fieldset指定form屬性。它聲明屬於哪個表單，然后將其放置在頁面的任何位置，都在表單之內。這個屬性解放了form表單里的元素，給我們在復雜的布局時帶來方便。
Note ：
一個輸入域可以屬於一個或多個表單，多個表單用空格分隔開。
輸入域的form屬性必須引用所屬表單的id，這點有點像<label>標簽的for屬性。
舉例：
<form action="" method="" id="user_form"> <p>用戶名：<input type="text" autofocus placeholder="用戶名"/></p> </form> <p>下面的密碼框在form表單之外，但仍然屬於form表單會被提交到服務器</p> <p>密 碼：<input type="password" placeholder="密碼" form="user_form"/></p>
d、required屬性
該屬性表示用戶提交時檢查該元素輸入域不能為空。
適用於以下類型的 input[text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file]。
舉例：
<form action="" method="" id="user_form"> <p>用戶名：<input type="text" autofocus placeholder="用戶名" required/></p> <p><input type="submit" value="提交"/></p> </form>
e、autocomplete屬性。
autocomplete:適用於form,input[text,search,url,telephone,email,password,datepickers,range,color]。
設置"autocomplete"屬性為"on"，則用戶在自動完成域輸入時，瀏覽器會在該域內顯示填寫的選項。
<form action="" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email"autocomplete="on"/><br /> <input type="submit" /> </form>
f、重置表單默認行為的新屬性
html5中表單的自由度非常高，因為html5為input[submit,image]、button元素增加formaction、 formenctype、formmethod、formnovalidate與formtarget幾個新屬性，能對form元素的某些屬性重置，比如 能做到表單1的提交按鈕提交表單2等。
formaction：重寫表單action屬性
formenctype：重寫表單enctype屬性
formmethod：重寫表單method屬性
formnovalidate：重寫表單novalidate屬性
formtarget：重寫表單target屬性
舉例：formaction和formmethod
html中，一個表單內的所有元素都通過表單的action屬性統一提交到另一個頁面。html5中可通過formaction屬性實現點擊不同提交按鈕，將表單提交到不同的頁面。
html中一個表單只有一個action屬性來對表單內所有元素統一指定提交頁面，每個表單只有一個method屬性統一指定提交方法。html5中新增的formmethod方法，可以實現不同按鈕指定不同提交方法，比如post，get等。
<form action="server.jsp" method="get" id="user_form"> E-mail: <input type="email" name="useremail" /><br /> <input type="submit" formmethod="get" formaction="s1.jsp" value="get方法提交到s1.jsp" /><br /> <input type="submit" formmethod="post" formaction="s2.jsp" value="post方法提交到s2.jsp" /><br /> </form>
點"get方法提交到s1.jsp"按鈕，將表單以get方法提交到s1.jsp頁面，從url也可以看出地址欄顯示提交參數。
點"post方法提交到s2.jsp"按鈕，將表單以post方法提交到s2.jsp頁面。
舉例：formnovalidate屬性，可以取消提交時進行的有關檢查，表單可以被無條件地提交[哪怕form里有required,min,max等]。
<form action="demo_form.jsp" method="get" id="user_form"> E-mail: <input type="email" required name="useremail" /><br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> </form>
點擊“Submit without validation”按鈕時，Form 不會做任何校驗，雖然有required屬性，表單空仍然可以提交。
g、image提交按鈕新增width,height屬性
width和height來設置image類型的input標簽的圖像的寬高。
舉例：用 
來作為提交按鈕，通過width和height設置其寬高。
<form action="server.jsp" method="get" id="user_form"> E-mail: <input type="email" name="useremail" /><br /> <input type="image" src="img/submit.png" width="30px" height="30px"/> </form>
h、list屬性
list屬性與 datalist元素配合使用，用來規定輸入域的datalist。datalist是輸入域的選項列表，該元素類似<select>，但是 比select更好的一點在，當用戶要設定的值不在選擇列表內時，允許自行輸入,該元素本身不顯示，當文本框獲得焦點時以提示輸入的方式顯示。
list屬性適用於input[text,search,url,telephone,email,datepickers,numbers,range,color]
Note :
list值為文檔中的 datalist 的 id，又看到了熟悉的id，回想一下form屬性引用的是表單的id，都類似label屬性引用input的id一樣。
舉例：
<form action="demo_form.jsp" method="get"> 主頁:<input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="baidu" value="http://www.baidu.com" /> <option label="qq" value="http://www.qq.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form>
舉例：順便說一下datalist和autocomplete配合使用
前面講了autocomplete屬性可以讓用戶完成域輸入時，瀏覽器在該域內顯示填寫的選項。現在datalist元素與autocomplete屬性配合使用可更好的提升用戶體驗。
在上面代碼基礎上給datalist增加autocomplete屬性，即<datalist id="url_list" autocomplete>。
用戶第一次輸入http:www.google.com提交后，再次輸入時會同時給出datalist的option提示和autocomplete增加的提示。
i、max，min和step屬性
max,min和step屬性用來為包含數字或日期的input類型規定限定或者說約束。
max屬性規定輸入域所允許的最大值。
min屬性規定輸入域允許的最小值。
step屬性為輸入域規定合法的數字間隔。 （假如 step="3"，則合法數字應該是 -3、0、3、6，以此類推）step 屬性可以與 max 以及 min 屬性配合使用，以創建合法值的范圍。
max,min,step屬性適用於input[datepickers,number，range]。
舉例：
這是一個非常好的屬性，之前有人問我用<input type="time">來輸入時間，奈何firefox瀏覽器不支持怎么辦。可以通過min max 模擬實現一個時間輸入框，小時允許輸入[0~23]，分鍾允許輸入[0~59]。
<form action="demo_form.jsp" method="get"> <label>time小時，分鍾：<input type="time" name="user_time"></label> <p>input類型time在firefox下不支持，給出模擬實現方案</p> <label><input type="number" min="0" max="23" step="1">時</label> <label><input type="number" min="0" max="59">分</label> <input type="submit" value="提交"/> </form>
超出max提交時給出提示。
更多細節可參考 HTML5 number類型文本框step屬性的驗證機制
j、pattern屬性
pattern屬性用於驗證輸入字段的模式，其實就是正則表達式，不用再寫js綁定正則驗證了，非常方便。
pattern屬性適用於input[text,search,url,telephone,email,password]
舉例：給輸入框定義了 Pattern 為“ [A-z]{3} ”，也就是包含三個字母的正則表達式約束，如果輸入不合法，我們會看到如下效果。
<form action="#" method="get" id="user_form"> Country code: <input type="text" name="country_code" pattern="[A-z]{3}"title="Three letter country code" /> <input type="submit" /> </form>
k、multiple屬性
multiple屬性規定輸入域中可選擇多個值。
multiple屬性適用於input[email,file]。
舉例：允許上傳時一次上傳多個文件。
<form action="demo_form.jsp" method="get"> 選擇圖片:<input type="file" name="img" multiple="multiple" /> <input type="submit" /> </form>
l、<fieldset>增加disabled屬性
html5為 fieldset元素增加了disabled屬性，可以把它的子元素設為disabled狀態,但是注意不包括legend里的元素。
舉例：點擊legend中的checkbox，切換filed子元素的disabled狀態。
<form> <fieldset name="userInfo"> <legend> <label><input type="checkbox" checked name="enableUserInfo" onchange="form.userInfo.disabled=!checked">啟用用戶信息</label> </legend> <p> <label>姓名:<input name="userName" required></label> </p> <fieldset name="personalInfo"> <legend> <label><input type="checkbox" checked name="enablePersonalInfo" onchange="form.personalInfo.disabled=!checked">個人信息</label> </legend> <p> <label>生日:<input name="birthday" required></label> </p> </fieldset> <fieldset name="companyInfo"> <legend> <label><input type="checkbox" checked name="enableCompanyInfo" onchange="form.companyInfo.disabled=!checked">公司信息</label> </legend> <p> <label>公司名稱:<input name="companyName" required></label> </p> </fieldset> </fieldset> </form>
m、<label>增加control屬性
html5中為標簽新增了control屬性，在標簽內部放置一個表單元素，通過標簽的control屬性訪問該表單元素。
舉例：
<script> function setValue(){ var label=document.getElementById("label"); var textbox=label.control; textbox.value="718308"; } </script> <form> <label id="label"> 郵編： <input id="txt_zip" maxlength="6"> <small>請輸入6位數字</small> </label> <input type="button" value="設置默認值" onclick="setValue()"> </form>
分析：通過label的control屬性控制input輸入框的value，所以點“設置默認值”按鈕，將郵編輸入框值初始化為"718308"。
n、新增SelectionDirection屬性
selectionDirection適用於input元素和textarea元素。
用戶在input元素或textarea元素中用鼠標選取部分文字時，可以使用該屬性來獲取選取方向。當用戶正向選取文字時，該屬性值為"forward"，反向選取值為“backward”，且當用戶沒有選取任何文字時，該屬性值為"forward"。
舉例：
<script type="text/javascript"> function alertSelectionDirection(){ var testInput=document.getElementById("test"); var direction=testInput.selectionDirection; alert(direction); } </script> <form> <input type="text" name="text" id="test"> <input type="button" value="查看選中文本方向" onclick="alertSelectionDirection()"> </form>
o、復選框的indeterminate屬性
這個屬性用來表示復選框部分選中，像qq郵箱中，郵件部分選中就有這樣的效果。
舉例：經測試，貌似還是必須通過腳本控制indetermidate屬性。
<form> <input type="checkbox" checked/> <input type="checkbox" indeterminate/>只寫一個indeterminate不起作用 <input type="checkbox" id="test"/> <input type="checkbox" /> </form> <script> document.getElementById('test').indeterminate = true; </script>
indeterminate屬性主要是在復選框嵌套時使用，了解更多可參考 css-tricks indetermidate-checkboxes
2、鏈接屬性
a、media屬性
為a、area增加media屬性。規定目標 URL 是為哪種類型的媒介/設備進行優化的，只能在href屬性存在時使用。該屬性用於規定目標 URL 是為特殊設備（比如 iPhone）、語音或打印媒介設計的，可接受多個值。
<a href="http://www.baidu.com" media="print and (resolution:300dpi)" >查詢</a>
取值如下：【沒懂這個media到底有什么樣的優化措施】
運算符：[and]and運算符，[not]not運算符，[,]or運算符。 設備： all：默認，適合所有設備。 aural：語音合成器 braille：盲文反饋裝置 handheld：手持設備（小屏幕，有限的帶寬） projection：投影機 print：打印預覽模式/打印頁面 screen：計算機屏幕 tty：電傳打字機以及使用等寬字符網格的類似媒介 tv：電視類型設備（低分辨率，有限的分頁能力） 值： width:規定目標顯示區域的寬度，可使用"min-" 和 "max-" 前綴。例：media="screen and (min-width:500px)" height:同width，用來設置高度。 device-width:規定目標顯示器/紙張的寬度。可使用 "min-" 和 "max-" 前綴。例：media="screen and (device-width:500px)" device-height:同device-height,用來設置高度。 orientation:英文意思"方向"，用來規定目標顯示器/紙張的取向。可能的值："portrait" 或 "landscape"。例：media="all and(orientation: landscape)" aspect-ratio：規定目標顯示區域的寬高比。可使用 "min-" 和 "max-" 前綴。例：media="screen and (aspect-ratio:16/9)" device-aspect-ratio：規定目標顯示器/紙張的 device-width/device-height 比率。可使用 "min-" 和 "max-" 前綴。例：media="screen and (aspect-ratio:16/9)" color：規定目標顯示器的 bits per color。可使用 "min-" 和 "max-" 前綴。例：media="screen and (color:3)" color-index：規定目標顯示器能夠處理的顏色數。可使用 "min-" 和 "max-" 前綴。例：media="screen and (min-color-index:256)" monochrome：規定在單色幀緩沖中的每像素比特。可使用 "min-" 和 "max-" 前綴。例：media="screen and (monochrome:2)" resolution：規定目標顯示器/紙張的像素密度 (dpi or dpcm)。可使用 "min-" 和 "max-" 前綴。例：media="print and (resolution:300dpi)" scan：規定 tv 顯示器的掃描方法。可能的值是："progressive" 和 "interlace"。例：media="tv and (scan:interlace)" grid：規定輸出設備是網格還是位圖。可能的值："1" 代表網格，"0" 是其他。例：media="handheld and (grid:1)" View Code
更多可參考w3c media
b、<area>新增herflang、media、rel、type屬性
herflang,media,rel,type為了保證a元素和link元素的一致性。
hreflang【取值language_code】規定在被鏈接文檔中的文本的語言。只有當設置了 href 屬性時，才能使用該屬性。注釋：該屬性是純咨詢性的。
media【取值media query】：對何種設備優化。【具體怎么優化？】
舉例：
<a media="handheld" href="#">手持設備</a> <a media="tv" href="#">電視</a>
rel【取值alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag】規定當前文檔與被鏈接文檔/資源之間的關系。只有當使用 href 屬性時，才能使用 rel 屬性。
舉例：
<a href=http://www.mukewang.com/" hreflang="zh" rel="external">
表示超鏈接使用的是中文，並且這個超鏈接是個外部的超鏈接。
type【mime_type】規定目標 URL 的 MIME 類型。
c、<link>新增sizes屬性
為link增加sizes屬性。sizes 屬性規定被鏈接資源的尺寸。只有當被鏈接資源是圖標時 (rel="icon")，才能使用該屬性。該屬性可接受多個值。值由空格分隔。
網上千篇一律都是這樣寫的：
<link rel="icon" href="img/demo_icon.ico" type="image/gif" sizes="16x16" />
但是經過測試用不用sizes都一樣，沒看出sizes有什么作用。查了一下目前幾乎 沒有主流瀏覽器支持 sizes 屬性 。
d、<base>新增target屬性
為base元素增加target屬性，主要是保持與a元素的一致性。
舉例：target表示頁面中超鏈接都將使用_blank在新窗口中打開頁面，且加上 http://localhost 地址，后面相當於相對地址。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>base element target</title> <base href="http://localhost/ " target="_blank"> </head> <body> <a href="a.html" >a.html頁面</a> </body> </html>
點a.html頁面將在新窗口中打開鏈接：http://localhost/a.html
3、其他屬性
a、ol新增reversed屬性
reversed是個bool屬性，規定有序列表倒序。
舉例：有序列表起始值50，倒序。
<ol start="50" reversed> <li>coffee</li> <li>Tea</li> <li>Milk</li> </ol>
b、meta新增charset屬性
為meta增加charset屬性
c、menu新增type和label屬性
menu在html4.01中廢棄，后在html5中重新定義，為menu增加type和label屬性。label為菜單定義一個菜單的標注，type屬性讓才當可以以上下文菜單、工具條與列表右鍵菜單三種形式出現。
label取值是文本，表示菜單名稱。
type取值三個：
popup:瀏覽器不支持。
toolbar:瀏覽器不支持。context:右鍵菜單。僅firefox支持。
可通過 w3c menu 元素了解更多。
舉例：toolbar
<menu type="toolbar" label="menu"> <li><input type="checkbox" />red</li> <li><input type="checkbox">blue</li> </menu>
可見menu的瀏覽器默認樣式為：
menu { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }
舉例：context
<div contextmenu="mymenu"> <p>在黃色div區域右鍵可看到右鍵菜單的效果哦~</p> <menu type="context" id="mymenu"> <menuitem label="自定義刷新" onclick="window.location.reload();" icon="ico_reload.png"></menuitem> <menu label="自定義分享到..."> <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem> <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> </menu> <menuitem label="自定義發送郵件" onclick="window.location='mailto:?body='+window.location.href;"></menuitem> </menu> </div> <p>目前僅firefox支持menu屬性</p>
d、style新增scoped屬性
html5為style增加scoped屬性。有了一個樣式作用域的概念，它允許我們為文檔的指定部分定義樣式，而不是整個文檔。如果使用 "scoped" 屬性，那么所規定的樣式只能應用到 style 元素的父元素及其子元素。 scoped為開發單頁面樣式帶來方便，但不能常用，否則css難以維護。
舉例：
<!-- 這個article正常使用head里聲明的style --> <article> <h1>h1標簽內容</h1> <p>p標簽內容</p> </article> <article> <!-- 這里聲明的style只能讓該article以及子元素使用 --> <style scoped> h1,p{ color: hotpink; } article { border: solid 1px hotpink; } </style> <h1>h1標簽內容，受局部作用域的樣式控制</h1> <p>p標簽內容，受局部作用域的樣式控制</p> </article>
e、script新增async屬性
html5為script新增了一個async屬性，用來定義腳本是否異步執行。async僅適用於外部腳本（只有在使用src屬性時）。
和async【異步執行】相近的還有一個屬性defer【推遲執行】，defer屬性過去也有，但在html5中進行了更好的支持。
使用：
如果 async="async"：腳本相對於頁面的其余部分異步地執行，因為async表示下載腳本文件，之后馬上運行，運行的同時並不阻止瀏覽器去解析下面的內容，所以稱之為異步。
如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行，因為defer表示腳本下載完並不執行而是等頁面全部加載完之后再執行。
如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行腳本。
舉例：
在 jquery 官網有兩個jquery文件，如下。
我們就拿這兩個文件舉例，jquery-1.11.3.min.js是 標准庫文件，93.7k。jquery-migrate-1.2.1.min.js是jquery向后兼容的文件，7.03k。代碼如下。
<!DOCTYPE> <meta charset="utf-8"></meta> <meta http-equiv="prama" content="no-cache"><!--禁止掉頁面緩存--> <script defer src="http://code.jquery.com/jquery-1.11.3.min.js" onload="alert('a')"></script> <script async src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" onload="alert('b')"></script>
運行效果，先彈出b，后彈出a。
f、html元素新增manifest屬性
html5為html元素增加manifest，指向一個用於結合離線web應用API的應用程序緩存清單。開發離線web應用程序時他與API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息。
訪問一次以后下次就是斷網了也能看到以前的內容。
用法：
首先，創建mainfest文件
CACHE MANIFEST
#This is a comment CACHE #需要緩存的文件 index.html style.css NETWORK: #不需要緩存的文件 search.php login.php FALLBACK: #資源不可用的情況下，重定向的地址 /api offline.html
然后將該mainfest文件的地址加到html屬性中。
<html manifest="/offline.manifest">
詳細步驟可參考： How to create offline HTML5 web apps in 5 easy steps
了解更多可參考：w3c manifests
g、iframe元素新增sandbox、seamless、srcdoc屬性
為iframe增加三個屬性，sandbox、seamless、srcdoc。用來提高頁面安全性，防止不信任的web頁面執行某些操作。
seamless：有這個屬性，表示iframe框架沒有邊框，沒有邊距。
srcdoc:用來指定內嵌框架的內容，srcdoc和src屬性有順序區分，有了srcdoc，后面src的內容被忽略。
舉例：
<iframe srcdoc="<h1>srcdoc出現，后面src內容被忽略</h1>" src="http://www.baidu.com"></iframe>
sandbox：是個安全沙箱。有了sandbox，內嵌框架就有了嚴格的安全限制，禁止提交表單，禁止運行js腳本，且內嵌頁面和外面頁面不同源。等。
當然可以通過給sandbox設置來取消限制。可選值：
""：應用以下所有限制。
allow-scripts:運行運行JavaScript。
allow-same-origin:允許iframe內容被視為與包含文檔有相同的源。
allow-top-navigation：允許iframe內容從包含文檔導航（加載）內容。
allow-forms：運行提交表單。
二、刪除屬性
刪除了一些可以用css代替的屬性，多余屬性和其他屬性。
在HTML 4中使用的屬性 |
使用該屬性的元素 |
在HTML 5中的替代方案 |
rev |
link、a |
rel |
charset |
link、a |
在被鏈接的資源的中使用HTTP Content-type頭元素 |
| shape 、coords |
a |
使用area元素代替a元素 |
longdesc |
img、iframe |
使用a元素鏈接到校長描述 |
target |
link |
多余屬性，被省略 |
nohref |
area |
多余屬性，被省略 |
profile |
head |
多余屬性，被省略 |
version |
html |
多余屬性，被省略 |
name |
img |
id |
scheme |
meta |
只為某個表單域使用scheme |
| archive 、chlassid、codebose、codetype、declare、standby |
object |
使用data與typc屬性類調用插件。需要使用這些屬性來設置參數時，使用param屬性 |
| valuetype 、type |
param |
使用name與value屬性，不聲明之的MIME類型 |
| axis 、abbr |
td、th |
使用以明確簡潔的文字開頭、后跟詳述文字的形式。可以對更詳細內容使用title屬性，來使單元格的內容變得簡短 |
scope |
td |
在被鏈接的資源的中使用HTTP Content-type頭元素 |
align |
caption、input、legend、div、h1、h2、h3、h4、h5、h6、p |
使用CSS樣式表替代 |
| alink 、link、text、vlink、background、bgcolor |
body |
使用CSS樣式表替代 |
| align 、bgcolor、border、cellpadding、cellspacing、frame、rules、width |
table |
使用CSS樣式表替代 |
| align 、char、charoff、height、nowrap、valign |
tbody、thead、tfoot |
使用CSS樣式表替代 |
| align 、bgcolor、char、charoff、height、nowrap、valign、width |
td、th |
使用CSS樣式表替代 |
| align 、bgcolor、char、charoff、valign |
tr |
使用CSS樣式表替代 |
| align 、char、charoff、valign、width |
col、colgroup |
使用CSS樣式表替代 |
| align 、border、hspace、vspace |
object |
使用CSS樣式表替代 |
clear |
br |
使用CSS樣式表替代 |
| compace 、type |
ol、ul、li |
使用CSS樣式表替代 |
compace |
dl |
使用CSS樣式表替代 |
compace |
menu |
使用CSS樣式表替代 |
width |
pre |
使用CSS樣式表替代 |
| align 、hspace、vspace |
img |
使用CSS樣式表替代 |
| align 、noshade、size、width |
hr |
使用CSS樣式表替代 |
| align 、frameborder、scrolling、marginheight、marginwidth |
iframe |
使用CSS樣式表替代 |
autosubmit |
menu |
三、資源鏈接
html5中，在新增加和廢除很多元素的同時，也增加和廢除了很多屬性。
一、新增屬性
1、表單屬性
a、autofocus
對input[所有類型]、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓元素在頁面加載后自動獲得焦點。一個頁面只能有一個元素有autofocus屬性，同時設置多個，則第一個生效。
這個屬性對登錄頁面很有用，可提升用戶體驗，有時登錄頁面就一個用戶名，密碼，頁面加載后用戶要手動定位到輸入框，才能輸入，有了autofocus，頁面打開即可直接輸入。
舉例：
<form> <p>用戶名：<input type="text" autofocus /></p> <p>密碼：<input type="password"/></p> </form>
b、placeholder
對input[text, search, url, telephone, email 以及 password]、textarea指定placeholder屬性，它會對用戶的輸入進行提示，提示用戶期待什么樣的輸入。
當輸入框獲取焦點時，提示字符消失。
這個屬性也能提升用戶體驗，用的已經相當普遍了。
舉例：
<form> <p>用戶名：<input type="text" autofocus placeholder="用戶名"/></p> <p>密碼：<input type="password" placeholder="密碼"/></p> </form>View Code
c、form屬性
對input[所有類型]、output、select、textarea、button與fieldset指定form屬性。它聲明屬於哪個表單，然后將其放置在頁面的任何位置，都在表單之內。這個屬性解放了form表單里的元素，給我們在復雜的布局時帶來方便。
Note ：
一個輸入域可以屬於一個或多個表單，多個表單用空格分隔開。
輸入域的form屬性必須引用所屬表單的id，這點有點像<label>標簽的for屬性。
舉例：
<form action="" method="" id="user_form"> <p>用戶名：<input type="text" autofocus placeholder="用戶名"/></p> </form> <p>下面的密碼框在form表單之外，但仍然屬於form表單會被提交到服務器</p> <p>密碼：<input type="password" placeholder="密碼" form="user_form"/></p>
d、required屬性
該屬性表示用戶提交時檢查該元素輸入域不能為空。
適用於以下類型的 input[text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file]。
舉例：
<form action="" method="" id="user_form"> <p>用戶名：<input type="text" autofocus placeholder="用戶名" required/></p> <p><input type="submit" value="提交"/></p> </form>
e、autocomplete屬性。
autocomplete:適用於form,input[text,search,url,telephone,email,password,datepickers,range,color]。
設置"autocomplete"屬性為"on"，則用戶在自動完成域輸入時，瀏覽器會在該域內顯示填寫的選項。
<form action="" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email"autocomplete="on"/><br /> <input type="submit" /> </form>
f、重置表單默認行為的新屬性
html5中表單的自由度非常高，因為html5為input[submit,image]、button元素增加formaction、 formenctype、formmethod、formnovalidate與formtarget幾個新屬性，能對form元素的某些屬性重置，比如 能做到表單1的提交按鈕提交表單2等。
formaction：重寫表單action屬性
formenctype：重寫表單enctype屬性
formmethod：重寫表單method屬性
formnovalidate：重寫表單novalidate屬性
formtarget：重寫表單target屬性
舉例：formaction和formmethod
html中，一個表單內的所有元素都通過表單的action屬性統一提交到另一個頁面。html5中可通過formaction屬性實現點擊不同提交按鈕，將表單提交到不同的頁面。
html中一個表單只有一個action屬性來對表單內所有元素統一指定提交頁面，每個表單只有一個method屬性統一指定提交方法。html5中新增的formmethod方法，可以實現不同按鈕指定不同提交方法，比如post，get等。
<form action="server.jsp" method="get" id="user_form"> E-mail: <input type="email" name="useremail" /><br /> <input type="submit" formmethod="get" formaction="s1.jsp" value="get方法提交到s1.jsp" /><br /> <input type="submit" formmethod="post" formaction="s2.jsp" value="post方法提交到s2.jsp" /><br /> </form>
點"get方法提交到s1.jsp"按鈕，將表單以get方法提交到s1.jsp頁面，從url也可以看出地址欄顯示提交參數。
點"post方法提交到s2.jsp"按鈕，將表單以post方法提交到s2.jsp頁面。
舉例：formnovalidate屬性，可以取消提交時進行的有關檢查，表單可以被無條件地提交[哪怕form里有required,min,max等]。
<form action="demo_form.jsp" method="get" id="user_form"> E-mail: <input type="email" required name="useremail" /><br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> </form>
點擊“Submit without validation”按鈕時，Form 不會做任何校驗，雖然有required屬性，表單空仍然可以提交。
g、image提交按鈕新增width,height屬性
width和height來設置image類型的input標簽的圖像的寬高。
舉例：用 來作為提交按鈕，通過width和height設置其寬高。
<form action="server.jsp" method="get" id="user_form"> E-mail: <input type="email" name="useremail" /><br /> <input type="image" src="img/submit.png" width="30px" height="30px"/> </form>
h、list屬性
list屬性與 datalist元素配合使用，用來規定輸入域的datalist。datalist是輸入域的選項列表，該元素類似<select>，但是 比select更好的一點在，當用戶要設定的值不在選擇列表內時，允許自行輸入,該元素本身不顯示，當文本框獲得焦點時以提示輸入的方式顯示。
list屬性適用於input[text,search,url,telephone,email,datepickers,numbers,range,color]
Note :
list值為文檔中的 datalist 的 id，又看到了熟悉的id，回想一下form屬性引用的是表單的id，都類似label屬性引用input的id一樣。
舉例：
<form action="demo_form.jsp" method="get"> 主頁:<input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="baidu" value="http://www.baidu.com" /> <option label="qq" value="http://www.qq.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form>
舉例：順便說一下datalist和autocomplete配合使用
前面講了autocomplete屬性可以讓用戶完成域輸入時，瀏覽器在該域內顯示填寫的選項。現在datalist元素與autocomplete屬性配合使用可更好的提升用戶體驗。
在上面代碼基礎上給datalist增加autocomplete屬性，即<datalist id="url_list" autocomplete>。
用戶第一次輸入http:www.google.com提交后，再次輸入時會同時給出datalist的option提示和autocomplete增加的提示。
i、max，min和step屬性
max,min和step屬性用來為包含數字或日期的input類型規定限定或者說約束。
max屬性規定輸入域所允許的最大值。
min屬性規定輸入域允許的最小值。
step屬性為輸入域規定合法的數字間隔。 （假如 step="3"，則合法數字應該是 -3、0、3、6，以此類推）step 屬性可以與 max 以及 min 屬性配合使用，以創建合法值的范圍。
max,min,step屬性適用於input[datepickers,number，range]。
舉例：
這是一個非常好的屬性，之前有人問我用<input type="time">來輸入時間，奈何firefox瀏覽器不支持怎么辦。可以通過min max 模擬實現一個時間輸入框，小時允許輸入[0~23]，分鍾允許輸入[0~59]。
<form action="demo_form.jsp" method="get"> <label>time小時，分鍾：<input type="time" name="user_time"></label> <p>input類型time在firefox下不支持，給出模擬實現方案</p> <label><input type="number" min="0" max="23" step="1">時</label> <label><input type="number" min="0" max="59">分</label> <input type="submit" value="提交"/> </form>
超出max提交時給出提示。
更多細節可參考 HTML5 number類型文本框step屬性的驗證機制
j、pattern屬性
pattern屬性用於驗證輸入字段的模式，其實就是正則表達式，不用再寫js綁定正則驗證了，非常方便。
pattern屬性適用於input[text,search,url,telephone,email,password]
舉例：給輸入框定義了 Pattern 為“ [A-z]{3} ”，也就是包含三個字母的正則表達式約束，如果輸入不合法，我們會看到如下效果。
<form action="#" method="get" id="user_form"> Country code: <input type="text" name="country_code" pattern="[A-z]{3}"title="Three letter country code" /> <input type="submit" /> </form>
k、multiple屬性
multiple屬性規定輸入域中可選擇多個值。
multiple屬性適用於input[email,file]。
舉例：允許上傳時一次上傳多個文件。
<form action="demo_form.jsp" method="get"> 選擇圖片:<input type="file" name="img" multiple="multiple" /> <input type="submit" /> </form>
l、<fieldset>增加disabled屬性
html5為 fieldset元素增加了disabled屬性，可以把它的子元素設為disabled狀態,但是注意不包括legend里的元素。
舉例：點擊legend中的checkbox，切換filed子元素的disabled狀態。
<form> <fieldset name="userInfo"> <legend> <label><input type="checkbox" checked name="enableUserInfo" onchange="form.userInfo.disabled=!checked">啟用用戶信息</label> </legend> <p> <label>姓名:<input name="userName" required></label> </p> <fieldset name="personalInfo"> <legend> <label><input type="checkbox" checked name="enablePersonalInfo" onchange="form.personalInfo.disabled=!checked">個人信息</label> </legend> <p> <label>生日:<input name="birthday" required></label> </p> </fieldset> <fieldset name="companyInfo"> <legend> <label><input type="checkbox" checked name="enableCompanyInfo" onchange="form.companyInfo.disabled=!checked">公司信息</label> </legend> <p> <label>公司名稱:<input name="companyName" required></label> </p> </fieldset> </fieldset> </form>
m、<label>增加control屬性
html5中為標簽新增了control屬性，在標簽內部放置一個表單元素，通過標簽的control屬性訪問該表單元素。
舉例：
<script> function setValue(){var label=document.getElementById("label"); var textbox=label.control; textbox.value="718308"; } </script> <form> <label id="label"> 郵編： <input id="txt_zip" maxlength="6"> <small>請輸入6位數字</small> </label> <input type="button" value="設置默認值" onclick="setValue()"> </form>
分析：通過label的control屬性控制input輸入框的value，所以點“設置默認值”按鈕，將郵編輸入框值初始化為"718308"。
n、新增SelectionDirection屬性
selectionDirection適用於input元素和textarea元素。
用戶在input元素或textarea元素中用鼠標選取部分文字時，可以使用該屬性來獲取選取方向。當用戶正向選取文字時，該屬性值為"forward"，反向選取值為“backward”，且當用戶沒有選取任何文字時，該屬性值為"forward"。
舉例：
<script type="text/javascript"> function alertSelectionDirection(){var testInput=document.getElementById("test"); var direction=testInput.selectionDirection; alert(direction); } </script> <form> <input type="text" name="text" id="test"> <input type="button" value="查看選中文本方向" onclick="alertSelectionDirection()"> </form>
o、復選框的indeterminate屬性
這個屬性用來表示復選框部分選中，像qq郵箱中，郵件部分選中就有這樣的效果。
舉例：經測試，貌似還是必須通過腳本控制indetermidate屬性。
<form> <input type="checkbox" checked/> <input type="checkbox" indeterminate/>只寫一個indeterminate不起作用 <input type="checkbox" id="test"/> <input type="checkbox" /> </form> <script> document.getElementById('test').indeterminate = true; </script>
indeterminate屬性主要是在復選框嵌套時使用，了解更多可參考 css-tricks indetermidate-checkboxes
2、鏈接屬性
a、media屬性
為a、area增加media屬性。規定目標 URL 是為哪種類型的媒介/設備進行優化的，只能在href屬性存在時使用。該屬性用於規定目標 URL 是為特殊設備（比如 iPhone）、語音或打印媒介設計的，可接受多個值。
<a href="http://www.baidu.com" media="print and (resolution:300dpi)" >查詢</a>
取值如下：【沒懂這個media到底有什么樣的優化措施】
運算符：[and]and運算符，[not]not運算符，[,]or運算符。
設備：
all：默認，適合所有設備。
aural：語音合成器
braille：盲文反饋裝置
handheld：手持設備（小屏幕，有限的帶寬）
projection：投影機
print：打印預覽模式/打印頁面
screen：計算機屏幕
tty：電傳打字機以及使用等寬字符網格的類似媒介
tv：電視類型設備（低分辨率，有限的分頁能力）
值：
width:規定目標顯示區域的寬度，可使用"min-" 和 "max-" 前綴。例：media="screen and (min-width:500px)"
height:同width，用來設置高度。
device-width:規定目標顯示器/紙張的寬度。可使用 "min-" 和 "max-" 前綴。例：media="screen and (device-width:500px)"
device-height:同device-height,用來設置高度。
orientation:英文意思"方向"，用來規定目標顯示器/紙張的取向。可能的值："portrait" 或 "landscape"。例：media="all and(orientation: landscape)"
aspect-ratio：規定目標顯示區域的寬高比。可使用 "min-" 和 "max-" 前綴。例：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio：規定目標顯示器/紙張的 device-width/device-height 比率。可使用 "min-" 和 "max-" 前綴。例：media="screen and (aspect-ratio:16/9)"
color：規定目標顯示器的 bits per color。可使用 "min-" 和 "max-" 前綴。例：media="screen and (color:3)"
color-index：規定目標顯示器能夠處理的顏色數。可使用 "min-" 和 "max-" 前綴。例：media="screen and (min-color-index:256)"
monochrome：規定在單色幀緩沖中的每像素比特。可使用 "min-" 和 "max-" 前綴。例：media="screen and (monochrome:2)"
resolution：規定目標顯示器/紙張的像素密度 (dpi or dpcm)。可使用 "min-" 和 "max-" 前綴。例：media="print and (resolution:300dpi)"
scan：規定 tv 顯示器的掃描方法。可能的值是："progressive" 和 "interlace"。例：media="tv and (scan:interlace)"
grid：規定輸出設備是網格還是位圖。可能的值："1" 代表網格，"0" 是其他。例：media="handheld and (grid:1)"
View Code
更多可參考w3c media
b、<area>新增herflang、media、rel、type屬性
herflang,media,rel,type為了保證a元素和link元素的一致性。
hreflang【取值language_code】規定在被鏈接文檔中的文本的語言。只有當設置了 href 屬性時，才能使用該屬性。注釋：該屬性是純咨詢性的。
media【取值media query】：對何種設備優化。【具體怎么優化？】
舉例：
<a media="handheld" href="#">手持設備</a> <a media="tv" href="#">電視</a>
rel【取值alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag】規定當前文檔與被鏈接文檔/資源之間的關系。只有當使用 href 屬性時，才能使用 rel 屬性。
舉例：
<a href=http://www.mukewang.com/" hreflang="zh" rel="external">
表示超鏈接使用的是中文，並且這個超鏈接是個外部的超鏈接。
type【mime_type】規定目標 URL 的 MIME 類型。
c、<link>新增sizes屬性
為link增加sizes屬性。sizes 屬性規定被鏈接資源的尺寸。只有當被鏈接資源是圖標時 (rel="icon")，才能使用該屬性。該屬性可接受多個值。值由空格分隔。
網上千篇一律都是這樣寫的：
<link rel="icon" href="img/demo_icon.ico" type="image/gif" sizes="16x16" />
但是經過測試用不用sizes都一樣，沒看出sizes有什么作用。查了一下目前幾乎 沒有主流瀏覽器支持 sizes 屬性 。
d、<base>新增target屬性
為base元素增加target屬性，主要是保持與a元素的一致性。
舉例：target表示頁面中超鏈接都將使用_blank在新窗口中打開頁面，且加上 http://localhost 地址，后面相當於相對地址。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>base element target</title> <base href="http://localhost/ " target="_blank"> </head> <body> <a href="a.html" >a.html頁面</a> </body> </html>
點a.html頁面將在新窗口中打開鏈接：http://localhost/a.html
3、其他屬性
a、ol新增reversed屬性
reversed是個bool屬性，規定有序列表倒序。
舉例：有序列表起始值50，倒序。
<ol start="50" reversed> <li>coffee</li> <li>Tea</li> <li>Milk</li> </ol>
b、meta新增charset屬性
為meta增加charset屬性
c、menu新增type和label屬性
menu在html4.01中廢棄，后在html5中重新定義，為menu增加type和label屬性。label為菜單定義一個菜單的標注，type屬性讓才當可以以上下文菜單、工具條與列表右鍵菜單三種形式出現。
label取值是文本，表示菜單名稱。
type取值三個：
popup:瀏覽器不支持。
toolbar:瀏覽器不支持。context:右鍵菜單。僅firefox支持。
可通過 w3c menu 元素了解更多。
舉例：toolbar
<menu type="toolbar" label="menu"> <li><input type="checkbox" />red</li> <li><input type="checkbox">blue</li> </menu>
可見menu的瀏覽器默認樣式為：
menu { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }
舉例：context
<div contextmenu="mymenu"> <p>在黃色div區域右鍵可看到右鍵菜單的效果哦~</p> <menu type="context" id="mymenu"> <menuitem label="自定義刷新" onclick="window.location.reload();" icon="ico_reload.png"></menuitem> <menu label="自定義分享到..."> <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem> <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> </menu> <menuitem label="自定義發送郵件" onclick="window.location='mailto:?body='+window.location.href;"></menuitem> </menu> </div> <p>目前僅firefox支持menu屬性</p>
d、style新增scoped屬性
html5為style增加scoped屬性。有了一個樣式作用域的概念，它允許我們為文檔的指定部分定義樣式，而不是整個文檔。如果使用 "scoped" 屬性，那么所規定的樣式只能應用到 style 元素的父元素及其子元素。 scoped為開發單頁面樣式帶來方便，但不能常用，否則css難以維護。
舉例：
<!-- 這個article正常使用head里聲明的style --> <article> <h1>h1標簽內容</h1> <p>p標簽內容</p> </article> <article> <!-- 這里聲明的style只能讓該article以及子元素使用 --> <style scoped> h1,p{ color: hotpink; } article { border: solid 1px hotpink; } </style> <h1>h1標簽內容，受局部作用域的樣式控制</h1> <p>p標簽內容，受局部作用域的樣式控制</p> </article>
e、script新增async屬性
html5為script新增了一個async屬性，用來定義腳本是否異步執行。async僅適用於外部腳本（只有在使用src屬性時）。
和async【異步執行】相近的還有一個屬性defer【推遲執行】，defer屬性過去也有，但在html5中進行了更好的支持。
使用：
如果 async="async"：腳本相對於頁面的其余部分異步地執行，因為async表示下載腳本文件，之后馬上運行，運行的同時並不阻止瀏覽器去解析下面的內容，所以稱之為異步。
如果不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行，因為defer表示腳本下載完並不執行而是等頁面全部加載完之后再執行。
如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行腳本。
舉例：
在 jquery 官網有兩個jquery文件，如下。
我們就拿這兩個文件舉例，jquery-1.11.3.min.js是 標准庫文件，93.7k。jquery-migrate-1.2.1.min.js是jquery向后兼容的文件，7.03k。代碼如下。
<!DOCTYPE> <meta charset="utf-8"></meta> <meta http-equiv="prama" content="no-cache"><!--禁止掉頁面緩存--> <script defer src="http://code.jquery.com/jquery-1.11.3.min.js" onload="alert('a')"></script> <script async src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" onload="alert('b')"></script>
運行效果，先彈出b，后彈出a。
f、html元素新增manifest屬性
html5為html元素增加manifest，指向一個用於結合離線web應用API的應用程序緩存清單。開發離線web應用程序時他與API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息。
訪問一次以后下次就是斷網了也能看到以前的內容。
用法：
首先，創建mainfest文件
CACHE MANIFEST
#This is a comment
CACHE #需要緩存的文件
index.html
style.css
NETWORK: #不需要緩存的文件
search.php
login.php
FALLBACK: #資源不可用的情況下，重定向的地址
/api offline.html
然后將該mainfest文件的地址加到html屬性中。
<html manifest="/offline.manifest">
詳細步驟可參考： How to create offline HTML5 web apps in 5 easy steps
了解更多可參考：w3c manifests
g、iframe元素新增sandbox、seamless、srcdoc屬性
為iframe增加三個屬性，sandbox、seamless、srcdoc。用來提高頁面安全性，防止不信任的web頁面執行某些操作。
seamless：有這個屬性，表示iframe框架沒有邊框，沒有邊距。
srcdoc:用來指定內嵌框架的內容，srcdoc和src屬性有順序區分，有了srcdoc，后面src的內容被忽略。
舉例：
<iframe srcdoc="<h1>srcdoc出現，后面src內容被忽略</h1>" src="http://www.baidu.com"></iframe>
sandbox：是個安全沙箱。有了sandbox，內嵌框架就有了嚴格的安全限制，禁止提交表單，禁止運行js腳本，且內嵌頁面和外面頁面不同源。等。
當然可以通過給sandbox設置來取消限制。可選值：
""：應用以下所有限制。
allow-scripts:運行運行JavaScript。
allow-same-origin:允許iframe內容被視為與包含文檔有相同的源。
allow-top-navigation：允許iframe內容從包含文檔導航（加載）內容。
allow-forms：運行提交表單。
二、刪除屬性
刪除了一些可以用css代替的屬性，多余屬性和其他屬性。
在HTML 4中使用的屬性 |
使用該屬性的元素 |
在HTML 5中的替代方案 |
rev |
link、a |
rel |
charset |
link、a |
在被鏈接的資源的中使用HTTP Content-type頭元素 |
| shape 、coords |
a |
使用area元素代替a元素 |
longdesc |
img、iframe |
使用a元素鏈接到校長描述 |
target |
link |
多余屬性，被省略 |
nohref |
area |
多余屬性，被省略 |
profile |
head |
多余屬性，被省略 |
version |
html |
多余屬性，被省略 |
name |
img |
id |
scheme |
meta |
只為某個表單域使用scheme |
| archive 、chlassid、codebose、codetype、declare、standby |
object |
使用data與typc屬性類調用插件。需要使用這些屬性來設置參數時，使用param屬性 |
| valuetype 、type |
param |
使用name與value屬性，不聲明之的MIME類型 |
| axis 、abbr |
td、th |
使用以明確簡潔的文字開頭、后跟詳述文字的形式。可以對更詳細內容使用title屬性，來使單元格的內容變得簡短 |
scope |
td |
在被鏈接的資源的中使用HTTP Content-type頭元素 |
align |
caption、input、legend、div、h1、h2、h3、h4、h5、h6、p |
使用CSS樣式表替代 |
| alink 、link、text、vlink、background、bgcolor |
body |
使用CSS樣式表替代 |
| align 、bgcolor、border、cellpadding、cellspacing、frame、rules、width |
table |
使用CSS樣式表替代 |
| align 、char、charoff、height、nowrap、valign |
tbody、thead、tfoot |
使用CSS樣式表替代 |
| align 、bgcolor、char、charoff、height、nowrap、valign、width |
td、th |
使用CSS樣式表替代 |
| align 、bgcolor、char、charoff、valign |
tr |
使用CSS樣式表替代 |
| align 、char、charoff、valign、width |
col、colgroup |
使用CSS樣式表替代 |
| align 、border、hspace、vspace |
object |
使用CSS樣式表替代 |
clear |
br |
使用CSS樣式表替代 |
| compace 、type |
ol、ul、li |
使用CSS樣式表替代 |
compace |
dl |
使用CSS樣式表替代 |
compace |
menu |
使用CSS樣式表替代 |
width |
pre |
使用CSS樣式表替代 |
| align 、hspace、vspace |
img |
使用CSS樣式表替代 |
| align 、noshade、size、width |
hr |
使用CSS樣式表替代 |
| align 、frameborder、scrolling、marginheight、marginwidth |
iframe |
使用CSS樣式表替代 |
autosubmit |
menu |