html5新增及刪除標籤

一、新增標籤

有一種劃分為，功能性標籤【html5新增，如canvas，舊瀏覽器沒有】和語義性標籤【如header等只是增強語義，沒有新功能】。下面按照分幾個小類來說。

1、結構標籤

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

a、section標籤

表示頁面中的一個獨立內容區塊，裡面有自己的大綱結構，比如章節，頁首，頁尾或頁面的其他部分。就是說section可以包含h1、h2...h6標籤，表示文件結構。section標籤用於標識頁面上重要內容部分。該標籤類似將一本書分成幾個章節。

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

html5

 <section> 
        <p> 
          This is an important section of the page. 
        </p> 
</section>

b、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>

c、aside標籤

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

表示article標籤內容之外的，與article標籤內容相關的輔助資訊。

html5:

<aside>這是邊欄</aside>

html:

<div id="sidebar">這是邊欄</div>

d、header標籤

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

html5:

<header></header>

html:

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

e、hgroup標籤【已廢除】

hgroup意思是headergroup，表示對頁面中的一個內容區塊或整個頁面的標題進行組合。即頭部資訊[header]的補充內容，或者標題的補充內容。

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

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

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

hgroup標籤在html5.1版本中被廢除，w3c不建議使用h1-h6來標誌副標題，對主標題副標題語義化的推薦寫法如下：

<header>
   <h1>HTML 5.1 Nightly</h1>
   <p>A vocabulary and associated APIs for HTML and XHTML</p>
   <p>Editor's Draft 9 May 2013</p>
</header>

更多寫法可參考w3c

f、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>

g、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>

h、figure標籤

表示一段獨立的流內容，定義一組媒體內容以及它們的標題，一般表示文件主體流內容中的一個獨立單元。使用figcaption標籤為figure標籤組新增標題。

i、figcaption

用來定義figure元素的標題。

例如：

html5:

<figure>
<figcaption>figcaption為figure新增標題</figcaption>
<p>對標題進行闡述的一段文字</p>
</figure>

html中寫法：

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

figure常用來寫圖片與文字的新聞塊。 

2、表單標籤

a、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-]+)*$/”

b、url

必須輸入url地址

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

c、number

必須輸入數值

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

d、range

必須輸入一定範圍內的數值

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

e、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>

firefox不支援。

f、search

用於搜尋域，語義化更明確，域顯示為常見的文字域。

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

g、color

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

3、媒體標籤

html5對媒體標籤的支援非常好，把它們變成跟文字，圖片同樣重要的標籤。

a、video標籤

定義視訊，像電影片段或其他視訊流而不用再使用第三方外掛。現在主要支援 Ogg 和 MPEG 兩種視屏格式。

例：

html5：

<video src="movie.ogg" controls> video標籤</video>

或者還能夠通過“controls”屬性設定是否顯示控制按鈕，“preload”是否在頁面載入時預載入視屏。

<video width="320" height="240" controls> 
 <source src="movie.ogg" type="video/ogg"> 
 <source src="movie.mp4" type="video/mp4"> 
Your browser does not support the video tag. 
</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" // 音量改變時觸發

b、audio標籤

定義音訊，如音樂或其他音訊流。

html5:

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

或者：

<audio controls="controls"> 
  <source src="song.ogg" type="audio/ogg"> 
  <source src="song.mp3" type="audio/mpeg"> 
 Your browser does not support the audio tag. 
</audio>

html中：

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

c、embed標籤

定義外部的可互動的內容或外掛，用來嵌入內容（包括各種媒體）。

格式可以是Midi,Wav,AIFF,AU,MP3,flash等。可以在不使用外掛的情況下操作媒體檔案，極大提升使用者體驗。

例：

html5：

<embed src="flash.swf" />

html中：

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

4、其他功能標籤

a、mark標籤

黃色高亮顯示選擇文字。主要用來在視覺上向使用者呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜尋結果中高亮顯示搜素關鍵字。

舉例：

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

b、command標籤

表示命令按鈕，比如單選按鈕、核取方塊或按鈕。【沒有測試出來是什麼效果】

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

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

c、progress標籤

狀態標籤（任務過程：安裝、載入）。

表示執行中的程式，可以使用progress元素顯示JavaScript中耗時時間函式的程式。等待中……、請稍後等。

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

 

d、details標籤

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

tip:可以通過<details open>新增一個open屬性，預設顯示展開狀態。

舉例：details配合summary實現總結-詳細效果：

<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>

 

e、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 驗證。

f、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>

g、ruby標籤

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

h、rt標籤

定義對ruby的註釋內容文字。定義字元（中文注音或字元）的解釋或發音。

i、rp標籤

在 ruby 註釋中使用，以定義不支援 ruby 元素的瀏覽器所顯示的內容。

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

j、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”對話方塊。【沒測試成功】

k、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支援。

l、wbr標籤

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

m、source標籤

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

n、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> 

 

o、menu標籤

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

<menu>呈現了一組使用者可執行或啟用的命令。這既包含了可能出現在螢幕頂端的列表選單，也包含了那些隱藏在按鈕之下、當點選按鈕後顯示出來的文字選單。【沒測試成功】

<!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="dropdown-menu">
  Dropdown
</button>

<menu type="context" id="dropdown-menu">
  <menuitem label="Action">
  <menuitem label="Another action">
  <hr>
  <menuitem label="Separated action">
</menu>

p、dialog標籤

<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>

p、meter標籤

<meter> 用於表示一個範圍內的值。

舉例：

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

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

二、廢除標籤

1、可以使用css代替的標籤

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

2、html5不再使用frame

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

3、只有個別瀏覽器支援的標籤

bgsound背景音樂，blink文字閃爍，marquee文字滾動,applet

4、其他不常用的標籤

ul替代dir

pre替代listing

code替代xmp

ruby替代rb

abbr替代acronym

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

廢除listing使用pre替代

廢除nextid使用guids

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

三、重新定義的html標籤

<b>：代表內聯文字，通常是粗體，沒有傳遞表示重要的意思。

<i>：代表內聯文字，通常斜體，沒有傳遞表示重要的意思。

<dd>:可以和details與figure一同使用，定義包含文字，djalog也可用

<dt>：可以和details與figure一同使用，彙總細節，dialog也可用

<menu>：重新定義使用者介面的選單，配合commond或者menuitem使用

<small>：表示小字型，例如列印註釋或者法律條款

<strong>：表示重要性而不是強調符號

四、資源連結 

IBM 深入剖析 HTML5 

http://www.ibm.com/developerworks/cn/web/1212_zhouxiang_deepintohtml5/