一、新特性

二、新增標籤和廢除的標籤

新增的結構標籤

• section標籤 
  表示頁面中的一個內容區塊,比如章節、頁首、頁尾或頁面的其他部分。可以和h1、 h2……等標籤結合起來使用，表示文件結構。例：HTML5中 <section>……</section>HTML4中<div> ……</div>。
• article標籤 
  表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章。
• aside標籤 
  表示article標籤內容之外的、與article標籤內容相關的輔助資訊。
• header標籤 
  表示頁面中一個內容區塊或整個頁面的標題。
• hgroup標籤 
  表示對整個頁面或頁面中的一個內容區塊的標題
  進行組合。
• footer標籤 
  表示整個頁面或頁面中一個內容區塊的腳註。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯絡資訊。
• nav標籤 
  表示頁面中導航連結的部分。
• figure標籤 
  

  表示一段獨立的流內容，一般表示文件主體流內容中的一個獨立單元。使用figcaption標籤為figure標籤組新增標題。例如：

  <figure> 
  <figcaption>PRC</figcaption> 
   <p>The People's Republic of China was born in 1949</p> 
  </figure> 

  HTML4中常寫作

  <dl> 
  <h2>prc</h2> 
  <p>The People's Republic of China was born in 1949</p> 
  </dl> 

新增的媒體標籤

• video標籤 
  定義視訊。像電影片段或其他視訊流。例：<video src="movie.ogg" controls="controls">video標籤</video> 
  HTML4中寫法：

  <object type="video/ogg" data="move.ogv">
  <param name ="src" value="movie.ogv">
  </object>

• audio標籤 
  定義音訊。如音樂或其他音訊流。例：<audio src ="someaudio.wav">audio標籤</audio> 
  html4中寫法：

  <object tyle="application/ogg" data="someaudio.wav"> 
    <param name ="src" value="someaudio.wav"> 
  </object> 

• embed標籤 
  用來嵌入內容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />; 
  HTML4中程式碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>

新增表單控制元件標籤

• email 
  必須輸入email
• url 
  必須輸入url地址
• number 
  必須輸入數值
• range 
  必須輸入一定範圍內數值
• Date Pickers（日期選擇器） 
  擁有多個可供選取日期和時間的新輸入型別： 
  date - 選取日、月、年 
  month - 選取月、年 
  week - 選取周和年 
  time - 選取時間（小時和分鐘） 
  datetime - 選取時間、日、月、年（UTC 時間） 
  datetime-local - 選取時間、日、月、年（本地時間）
• search 
  用於搜尋域，域顯示為常規的文字域。
• color

新增的其他標籤

• mark標籤 
  主要用來在視覺上向用戶呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜索結果中高亮顯示搜素關鍵字。 
  HTML5<mark></mark>;HTML4 <span></span>。
• progress標籤 
  表示執行中的程序，可以使用progress標籤顯示JavaScript中耗時時間函式的程序。等待中……、請稍後等。<progress></progress>。
• time標籤 
  表示日期或時間，也可以兩者同時。
• ruby標籤 
  定義 ruby 註釋（中文註音或字元）。 
  與 <ruby> 以及 <rt> 標籤一同使用。ruby 標籤由一個或多個字元（需要一個解釋/發音）和一個提供該資訊的 rt 標籤組成，還包括可選的 rp 標籤，定義當瀏覽器不支援 "ruby" 標籤時顯示的內容。 
  <ruby> 
    漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> 
  </ruby>
• rt標籤 
  定義字元（中文註音或字元）的解釋或發音。
• rp標籤 
  在 ruby 註釋中使用，以定義不支援 ruby 標籤的瀏覽器所顯示的內容。
• wbr標籤
  表示軟換行。與br標籤的區別：br標籤表示此處必須換行；wbr表示瀏覽器視窗或父級標籤足弓寬時（沒必要換行時），不換行，而寬度不夠時主動在此處換行。
• canvas標籤 
  定義圖形，比如圖表和其他影象。<canvas> 標籤只是圖形容器（畫布），必須使用指令碼來繪製圖形。 
  <canvas id="myCanvas"></canvas><script type="text/javascript"> 
  var canvas=document.getElementById('myCanvas'); 
  var ctx=canvas.getContext('2d'); 
  ctx.fillStyle='#FF0000'; 
  ctx.fillRect(0,0,80,100); 
  </script>
• command標籤——貌似沒什麼效果。是不是支援有問題 
  表示命令按鈕，比如單選按鈕、複選框或按鈕。

  只有當 command 標籤位於 menu 標籤內時，該標籤才是可見的。否則不會顯示這個標籤，但是可以用它規定鍵盤快捷鍵。。 
  <menu> 
  <command onclick="alert('Hello World')"> 
  Click Me!</command> 
  </menu>

• details標籤 目前只有 Chrome 支援 details 標籤 
  用於描述文件或文件某個部分的細節 。 
  可與 summary 標籤配合使用，summary可以為 details 定義標題。標題是可見的，使用者點選標題時，會顯示出 details。summary應該是details的第一個子標籤。

• datalist標籤 （類似於百度關鍵詞提示）
  定義選項列表。請與 input 標籤配合使用該標籤，來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。使用 input 標籤的 list 屬性來繫結 datalist。 
  <input id="myCar" list="cars" /> 
  <datalist id="cars">
    <option value="BMW"> 
    <option value="Ford"> 
    <option value="Volvo"> 
  </datalist>

• keygen標籤
  標籤規定用於表單的金鑰對生成器欄位。

  當提交表單時，私鑰儲存在本地，公鑰傳送到伺服器。

  <form action="demo_keygen.asp" method="get"> 
  Username: <input type="text" name="usr_name" /> 
  Encryption: <keygen name="security" /> 
  <input type="submit" /> 
  </form>

• output標籤 
  定義不同型別的輸出，比如指令碼的輸出。 
  <form action="form_action.asp" method="get" name="sumform"> 
  <output name="sum"></output> 
  </form>
• source標籤 
  標籤為媒介標籤（比如 <video> 和 <audio>）定義媒介資源。
• menu標籤 
  定義選單列表。當希望列出表單控制元件時使用該標籤。注意與nav的區別，menu專門用於表單控制元件。 
  <menu type=""> 有三種類型 
  <li><input type="checkbox" />Red</li> 
  <li><input type="checkbox" />blue</li> 
  </menu>

廢除的標籤

• 能用css代替的標籤

  basefont、big、center、font、s、strike、tt、u。這些標籤純粹是為畫面展示服務的，HTML5中提倡把畫面展示性功能放在css中統一編輯。

• 不再使用frame框架。

  frameset、frame、noframes。HTML5中不支援frame框架，只支援iframe框架，或者用伺服器方建立的由多個頁面組成的符合頁面的形式，刪除以上這三個標籤。

• 只有部分瀏覽器支援的標籤

  applet、bgsound、blink、marquee等標籤。

• 其他被廢除的標籤

  廢除rb，使用ruby替代。

  廢除acronym使用abbr替代。

  廢除dir使用ul替代。

  廢除isindex使用form與input相結合的方式替代

  廢除listing使用pre替代

  廢除xmp使用code替代

  廢除nextid使用guids

  廢除plaintex使用“text/plian”（無格式正文）MIME型別替代。

三、新增和廢除的屬性

新增的屬性

表單相關的屬性

• 對input（type=text）、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓標籤在畫面開啟時自動獲得焦點。
• 對input（type=text）、textarea指定placeholder屬性，它會對使用者的輸入進行提示，提示使用者可以輸入的內容。
• 對input、output、select、textarea、button與fieldset指定form屬性。它宣告屬於哪個表單，然後將其放置在頁面的任何位置，而不失表單之內。
• 對input（type=text）、textarea指定required屬性。該屬性表示使用者提交時進行檢查，檢查該標籤內必定要有輸入內容。
• 為input標籤增加幾個新的屬性：autocomplete、min、max、multiple、pattern與step。還有list屬性與datalist標籤配合使用；datalist標籤與autocomplete屬性配合使用。multiple屬性允許上傳時一次上傳多個檔案； pattern屬性用於驗證輸入欄位的模式，其實就是正則表示式。step 屬性規定輸入欄位的合法數字間隔（假如 step="3"，則合法數字應該是 -3、0、3、6，以此類推），step 屬性可以與 max 以及 min 屬性配合使用，以建立合法值的範圍。
• 為input、button標籤增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性。使用者過載form標籤的action、enctype、method、novalidate與target屬性。為fieldset標籤增加disabled屬性，可以把它的子標籤設為disabled狀態。
• 為input、button、form增加novalidate屬性，可以取消提交時進行的有關檢查，表單可以被無條件地提交。

連結相關屬性

• 為a、area增加media屬性。規定目標 URL 是為什麼型別的媒介/裝置進行優化的。該屬性用於規定目標 URL 是為特殊裝置（比如 iPhone）、語音或列印媒介設計的。該屬性可接受多個值。只能在 href 屬性存在時使用。
• 為area增加herflang和rel屬性。hreflang 屬性規定在被連結文件中的文字的語言。只有當設定了 href 屬性時，才能使用該屬性。註釋：該屬性是純諮詢性的。rel 屬性規定當前文件與被連結文件/資源之間的關係。只有當使用 href 屬性時，才能使用 rel 屬性。
• 為link增加size屬性。sizes 屬性規定被連結資源的尺寸。只有當被連結資源是圖示時 (rel="icon")，才能使用該屬性。該屬性可接受多個值。值由空格分隔。
• 為base標籤增加target屬性，主要是保持與a標籤的一致性。

其他屬性

• 為ol增加reversed屬性，它指定列表倒序顯示。
• 為meta增加charset屬性
• 為menu增加type和label屬性。label為選單定義一個標註，type屬性定義可以menu以上下文選單、工具條與列表三種形式出現。
• 為style增加scoped屬性。它允許我們為文件的指定部分定義樣式，而不是整個文件。如果使用 "scoped" 屬性，那麼所規定的樣式只能應用到 style 標籤的父標籤及其子標籤。
• 為script增減屬性，它定義指令碼是否非同步執行。async 屬性僅適用於外部指令碼（只有在使用 src 屬性時）有多種執行外部指令碼的方法：
  • 如果 async="async"：指令碼相對於頁面的其餘部分非同步地執行（當頁面繼續進行解析時，指令碼將被執行）
  • 如果不使用 async 且 defer="defer"：指令碼將在頁面完成解析時執行
  • 如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行指令碼
• 為html標籤增加manifest，開發離線web應用程式時他與API結合使用，定義一個URL，在這個URL上描述文件的快取資訊。
• 為iframe增加撒個屬性，sandbox、seamless、srcdoc。用來提高頁面安全性，防止不信任的web頁面執行某些操作。

<!doctype html>
<html lang="en" manifest"cache.manifest"> <!-- 離線檔案應用 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"> <!-- 禁止頁面快取 -->
    <title>html5新增屬性</title>
    <link rel="icon" href="icon.gif" type="image/gif" sizes="16x16"> <!-- icon可自定義大小-->
    <base href="http://localhost/" target="_blank"> <!--相對localhost地址裡的a連結都在新頁面開啟-->
    <script defer src="base.js"></script> <!-- 延遲載入 載入完在執行該js-->
    <script async src="base2.js"></script> <!-- 非同步載入 載入頁面時即可執行-->
</head>
<body>
    <a media="handheld" href="">手持裝置</a> <!-- 將會對手持裝置進行優化 -->
    <a media="tv" href="">電視</a> <!-- 將會對電視裝置進行優化 -->
    <a href="http://www.baidu.com" hreflang="zh"  ref="external ">百度</a><!-- 中文的連結 external:外部連結 -->

    <ol start="5" reversed> <!-- 序列號從5開始的倒序排列 -->
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ol>

    <div>
        <style type="text/css" scoped>
            h1{color:red;}
        </style>
        <h1>上面的scoped只對本h1有效果</h1>
    </div>

    <iframe seamless srcdoc="HTML_code" src="http://www.baidu.com" ></iframe>
    <!-- 
    seamless:無邊距無邊框
    srcdoc：顯示在框架中的 HTML 內容
    sandbox：（可有三種賦值）嚴格安全模式 ，會禁止提交表單，會禁止js指令碼，會決定iframe和本頁面是不同的源是跨域的 
    -->
</body>
</html>

廢除的屬性

HTML4中一些屬性在HTML5中不再被使用，而是採用其他屬性或其他方式進行替代。

四、全域性屬性  任何標籤都可以使用

HTML 全域性屬性列表

= HTML5 中新增的屬性。

全域性屬性案例：

1、data-*  自定義屬性
<input type="text" data-curtime="20140818" name="time" id="time">
<script>
     //js獲取方式
     var  oTime=document.getElementById('time');
     alert(oTime.dataset.curtime)
     //jq獲取方式 
     //$('#time').data('curtime');
</script>

2、hidden
<span hidden>你看不見我</span>

3、spellcheck <!--spellcheck會對這裡輸入的內容進行語法糾錯-->
<textarea spellcheck="true" name="" id="" cols="30" rows="10">
    likke spellcheck會對這裡輸入的內容進行語法糾錯
</textarea>


4、contenteditable <!-- 這裡的內容是可以編輯的 -->
<p contenteditable="true">這裡的內容是可以編輯的</p>

5、desginmode   <!-- 這個是針對js使用的，設定on元素就可編輯 off為不可編輯 -->
<script>
    window.document.designMode="on"; //整個html都可以編輯
</script>