html5新增標簽/刪除標簽

閑聊：

最近小穎工作稍微比較輕松，沒事就看看慕課，看了看：HTML5之元素與標簽結構，里面簡單講解了下HTML5的一些新特性，小穎之前沒寫過HTML5的頁面，所以就當寫筆記將那些新的特性整理出來，也方便以后查看，嘻嘻，懶人自有懶方法哈哈哈哈，腦子記不住，用別的方式來幫助自己嘻嘻 。下面和小穎一起來學習下html5新增標簽/刪除標簽吧。

主要內容：

新增標簽：結構標簽、表單標簽、媒體標簽、其他功能標簽。

刪除標簽：可以使用css代替的標簽、html5不再使用frame、只有個別瀏覽器支持的標簽、其他不常用的標簽

新增標簽

1.結構標簽：新增的結構標簽，之前都是用div實現的，為了語義化，html5從div派生出很多新的標簽。這些新增的結構標簽有助於將文檔分成幾個邏輯部分。如下：

section標簽：表示頁面中的一個獨立內容區塊，里面有自己的大綱結構，比如章節，頁眉，頁腳或頁面的其他部分。就是說section可以包含h1、h2...h6標簽，表示文檔結構。

section標簽用於標識頁面上重要內容部分。該標簽類似將一本書分成幾個章節。

section用於對網站中的內容進行分塊。一個 section 元素通常由內容以及標題組成，表示一個內容區塊。section 元素中，需要包含一個<hn>標題元素，而一般不用包含頭部（header元素）或者底部（footer元素）。

實例：

HTML5

<section>hello</section>

HTML

<div>hello</div>

article標簽：表示頁面中一塊與上下文不相關的獨立內容，主要是來自其他外部源的內容，可以是來自外部的新聞提供者的一篇新文章，來自Blog的文本，來自論壇的文本，總之是來自外部源的東東。

用一個article來標記博客文章摘要列表的話，article包含自己的標題（通常為h1,h2且放在header里面）。

article還有自己的aside來描述這篇文章摘要相關的信息（例如文章發布時間、文章作者、文章標簽、分類目錄等等）。

article和section相似，可以將article看做是特殊的section元素。article 元素更強調獨立性、完整性，section 更強調相關性。

實例：

<article>
  <header>
    <h1>主標題</h1>
  </header>
  <aside id="entry-meta">作者:xxx 時間:<time datetime="xxxx-xx-xx">xxxx-xx-xx</time></aside>
  <div id="entry-content"><p>內容描述</P></div>
</article>

aside標簽：表示標簽中包含的內容與頁面主要內容相關，但不是該頁面的一部分。這有點類似於使用括弧對正文進行注釋（就像這樣）。括弧中的內容提供關於該元素的一些附加信息。

表示article標簽內容之外的，與article標簽內容相關的輔助信息。

實例：

<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

header標簽：表示一個內容區塊或者整個頁面的標題。

實例：

HTML5：

<header></header>

HTML：

<div id="header" ></div>

hgroup標簽：（已廢除）   表示對頁面中的一個內容區塊或整個頁面的標題進行組合。即頭部信息[header]的補充內容，或者標題的補充內容。

通常具有seo功能的網站標題區域（logo）部分寫法：h1網站標題，h2網站副標題，描述。h1用圖文替換技術，並給img添加alt屬性為網站名稱。

html5中可通過hgroup對標題進行分組。

實例：

<hgroup>
  <h1>主標題</h1>
  <h2>副標題</h2>
</hgroup>

footer標簽：表示整個頁面或頁面中一個內容區塊的腳注。一般來說，它會包含創作者的姓名、創作日期及創作者的聯系信息或者公司的備注信息。

公司網站底部通常用來說明網站信息的版權，網站所有者，備案等。

實例：

HTML5

<footer>Copyright © 2015 xxx.com All Rights Reserved | 京ICP備 xxxxxxxx號-2</footer>

HTML

<div id="footer">Copyright © 2015 xxx.com All Rights Reserved | 京ICP備 xxxxxxxx號-2</div>

nav標簽：表示頁面中導航鏈接的部分。

雖然nav標簽可應用於:網站導航條，側邊欄導航條，頁內導航，前頁后頁翻頁等，但普遍認為，一個頁面最好只有一個nav標簽，用來標記最重要的導航條（一般是網站的導航條）。這樣可以讓搜索引擎快速定位，避免誤導。通常配合ul或ol列表標簽一塊使用。

 實例：

HTML5

<nav>
  <ul>
    <li>首頁</li>
    <li>導航1</li>
    <li>導航2</li>
  </ul>
</nav>

 HTML

<div id="nav">
  <ul>
    <li>首頁</li>
    <li>導航1</li>
    <li>導航2</li>
  </ul>
</div>

figure標簽：標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。

figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。

實例：

HTML5

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

HTML

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

2.媒體標簽：html5對媒體標簽的支持非常好，把它們變成跟文字，圖片同樣重要的標簽。

video標簽：定義視頻，像電影片段或其他視頻流而不用再使用第三方插件。現在主要支持 Ogg 和 MPEG 兩種視屏格式。

實例：

HTML5：

<video src="movie.ogg" controls="controls">
您的瀏覽器不支持 video 標簽。
</video>

HTML

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

video總共有 30 多個常用的屬性功能，以下常用：

• currentSrc：當前的視屏源
• initialTime：初始化的時間點
• readyState：當前視屏播放的狀態
• currentTime：視頻的當前時間
• duration：視頻的時間總長
• playbackRate：播放的速率，通過該屬性可以實現快進，慢放等等
• autoplay：是否自動播放
• muted：是否靜音

vedio有很多實用的方法和事件

load()、play()、pause() 等等控制着視頻的加載，播放和暫停。可監聽的事件也是相當豐富：

• "onloadstart" // 客戶端開始請求數據時觸發
• "onprogress" // 客戶端請求數據過程中
• "onabort" // 客戶端主動終止下載時觸發
• "onerror" // 請求數據時遇到錯誤時觸發
• "onplay" //play() 和 autoplay 開始播放時觸發
• "onpause" //pause() 時觸發
• "onloadedmetadata" // 成功獲取資源長度時觸發
• "onloadeddata" // 成功獲取視頻資源時觸發
• "oncanplay" // 視頻可以播放時觸發（但中途可能因為加載而暫停）
• "oncanplaythrough" // 可以播放，視頻 / 音頻全部加載完畢
• "ontimeupdate" // 播放時間改變時觸發
• "onended" // 播放結束時觸發
• "onratechange" // 播放速率改變時觸發
• "ondurationchange" // 資源長度改變時觸發
• "onvolumechange" // 音量改變時觸發

audio標簽：定義聲音，比如音樂或其他音頻流。

實例：

HTML5

<audio src="someaudio.wav">audio標簽</audio>

HTML

<object type="application/ogg" data="someaudio.wov">
<param name="src" value="someaudio.wov">
</object>

embed標簽：定義嵌入的內容，比如插件。（包括各種媒體）格式可以是Midi,Wav,AIFF,AU,MP3,flash等。可以在不使用插件的情況下操作媒體文件，極大提升用戶體驗。

實例：

HTML5

<embed src="flash.swf" />

HTML

<object data="flash.swf" type="application/x-shockwave-flash"></object>

3.表單標簽：

email：必須輸入email

實例：

<form>
<label for="user_mail">郵箱：</label>
<input type="email" name="user_email" id="user_mail" />
<button type="submit">提交</button>
</form>

瀏覽器驗證的正則：

“/^[a-zA-Z0-9.!#$%& ’ *+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/”

url：必須輸入url地址

實例：

<form>
<label for="user_url">url：</label>
<input type="url" name="user_url" id="user_url" />
<button type="submit">提交</button>
</form>

number：必須輸入數值

實例：

<label>number:<input type="number"  name="points" min="1" max="10" step="1"/></label>

range：必須輸入一定范圍內的數值

實例：

<label>range:<input type="range" name="points" min="1" max="10" /></label>

Date Pickers(日期選擇器)：

擁有多個可供選取日期和時間的新輸入類型。

date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鍾）
datetime - 選取時間、日、月、年（UTC 時間）
datetime-local - 選取時間、日、月、年（本地時間）

實例：

<label>date日月年：<input type="date" name="user_date" /></label>
<label>month月，年：<input type="month" name="user_month"></label>
<label>time小時，分鍾：<input type="time" name="user_time"></label>
<label>datetime時間，日，月，年（UTC時間）<input type="datetime" name="user_datetime"></label>

search：用於搜索域，語義化更明確，域顯示為常見的文本域。

實例：

<label>search：<input type="search" name="search" /></label>

color

實例：

<label>color：<input type="color" name="color" /></label>

4.其他功能標簽：

mark標簽：黃色高亮顯示選擇文本。主要用來在視覺上向用戶呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜索結果中高亮顯示搜素關鍵字。

實例：

<p>html5:一段文字<mark>高亮顯示</mark></p>
<p>html:一段文字<span style="background-color:yellow;">高亮顯示</span></p>

command標簽：表示命令按鈕，比如單選按鈕、復選框或按鈕。【沒有測試出來是什么效果】

只有當 command 元素位於 menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵。

實例：

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

progress標簽：（任務過程：安裝、加載）。

表示運行中的進程，可以使用progress元素顯示JavaScript中耗時時間函數的進程。等待中……、請稍后等。

實例：

<progress value="40" max="100">40%</progress>

details標簽：用於描述文檔或文檔某個部分的細節 。
可與 summary 標簽配合使用，summary可以為 details 定義標題。標題是可見的，用戶點擊標題時，會顯示出 details。summary應該是details的第一個子元素。

tip:可以通過<details open>添加一個open屬性，默認顯示展開狀態

實例：

<details>
    <summary>Name & Extension:</summary>
    <p>
        <input type=text name=fn value="Pillar Magazine.pdf"/>
    </p>
    <p>
        <label>
            <input type=checkbox name=ext checked/>
            Hide extension
        </label>
    </p>
</details>

time標簽：time標簽用來標記文章發布時間，可以讓機器、搜索引擎等例句這篇文章是什么時間發表的。

html4:抓取時間為發布時間或者從文章中抓取類似“本文發不要xx”的文字進行分析。

實例：

<div id="meta">本文寫於 xxxx-xx-xx</div>

HTML5

<aside>本文寫於 <time datetime="2012-9-27">xxxx-xx-xx</time></aside>
<aside>本文寫於 <time datetime="2012-9-27" pubdate="pubdate">xxxx-xx-xx</time></aside>

pubdate屬性是為了標記正確的發布時間，比如：

<h1>關於9月28日北校區宿舍樓停電公告</h1>
<aside>發布日期:<time datetime="2012-9-27" pubdate="pubdate">2012年9月27日</time></aside>

用 pubdate 規定正確的發布時間，但是需要注意，在 W3C 標准中，並沒有 pubdate 這個屬性，這個屬性是由 mozilla 他們自己規定的。所以添加 pubdate 屬性之后，無法通過 W3C 的 HTML5 驗證。

datalist標簽：為input標簽定義一個下拉列表，配合option使用。

datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。使用 input 元素的 list屬性來綁定 datalist。

實例：

<input type="url" list="url_list" name="link" /> 
<datalist id="url_list"> 
<option label="W3School" value="http://www.W3School.com.cn" /> 
<option label="Google" value="http://www.google.com" /> 
<option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist>

ruby標簽：定義注釋或音標（中文注音或字符）。
與 <ruby> 以及 <rt> 標簽一同使用。ruby 元素由一個或多個字符（需要一個解釋/發音）和一個提供該信息的 rt 元素組成，還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

rt標簽：定義對ruby的注釋內容文本。定義字符（中文注音或字符）的解釋或發音。

rp標簽：在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。

實例：

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

keygen標簽：定義表單里一個生產的鍵值，加密信息傳送。

keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。私鑰（private key）存儲於客戶端，公鑰（public key）則被發送到服務器。公鑰可用於之后驗證用戶的客戶端證書（client certificate）。

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

實例：

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

這里我們加入了一個“name”為“security”的 Keygen 控件，在該表單提交時，瀏覽器會提示您輸入密碼以確保提交安全，如下圖所示：（支持瀏覽器 Firefox，Chrome，Safari 和 Opera）。點擊“submit”時，會彈出“password”對話框。【沒測試成功】

output標簽：定義不同類型的輸出，比如腳本的輸出。計算表單結果配合oninput事件。

實例：

<form onsubmit="return false">
        <input id="num_a" />
        +
        <input id="num_b" />
        =
        <output id="result" onforminput="resCalc()"></output>
    </form>
<script type="text/javascript">
  function resCalc() 
 { 
 numA=document.getElementById("num_a").value; 
 numB=document.getElementById("num_b").value; 
 document.getElementById("result").value=Number(numA)+Number(numB);
 }   
</script>

通過“onforminput”監聽表單輸入事件，貌似只有Opera支持。

wbr標簽：表示軟換行。與br元素的區別：br元素表示此處必須換行；wbr表示瀏覽器窗口或父級元素足弓寬時（沒必要換行時），不換行，而寬度不夠時主動在此處換行。

source標簽：標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。

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>

menu標簽：定義菜單列表。當希望列出表單控件時使用該標簽。注意與nav的區別，menu專門用於表單控件。

<menu>呈現了一組用戶可執行或激活的命令。這既包含了可能出現在屏幕頂端的列表菜單，也包含了那些隱藏在按鈕之下、當點擊按鈕后顯示出來的文本菜單。

注意:目前主流瀏覽器並不支持 menu 標簽。

實例：

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="file_new()">New...</button>
   <button type="button" onclick="file_open()">Open...</button>
   <button type="button" onclick="file_save()">Save</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="edit_cut()">Cut</button>
   <button type="button" onclick="edit_copy()">Copy</button>
   <button type="button" onclick="edit_paste()">Paste</button>
  </menu>
 </li>
</menu>

 dialog標簽：用來定義對話框或窗口。只有 Chrome 和 Safari 6 和支持 dialog 標簽。

實例：dislog和dt,dd配合使用實現對話框。

<dialog open >
  <dt>老師</dt>
  <dd>2+2 等於？</dd>
  <dt>學生</dt>
  <dd>4</dd>
  <dt>老師</dt>
  <dd>答對了！</dd>
</dialog>

meter標簽：用於表示一個范圍內的值。

實例：

<p>your score is :
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>
</p>

如果瀏覽器不支持則顯示B+。

刪除標簽

可以使用css代替的標簽：刪除basefont,big,center,font,s,strike,tt,u這些純表現的元素,html5中提倡把畫面展示性功能放在css中統一編輯。。

html5不再使用frame：不再用frame,noframes和frameset，這些標簽對可用性產生負面影響。HTML5中不支持frame框架，只支持iframe框架，或者用服務器方創建的由多個頁面組成的符合頁面的形式，刪除以上這三個標簽。

只有個別瀏覽器支持的標簽：bgsound背景音樂，blink文字閃爍，marquee文字滾動,applet

其他不常用的標簽：

ul替代dir

pre替代listing

code替代xmp

ruby替代rb

abbr替代acronym

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

廢除listing使用pre替代

廢除nextid使用guids

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

參考文章：html5新增及刪除標簽