html5新增及刪除標籤

1、新增標籤

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

一、結構標籤

 新增的結構標籤，以前都是用div實現的，爲了語義化，html5從div派生出不少新的標籤。這些新增的結構標籤有助於將文檔分紅幾個邏輯部分。以下：

a、section標籤

表示頁面中的一個獨立內容區塊，裏面有本身的大綱結構，好比章節，頁眉，頁腳或頁面的其餘部分。就是說section能夠包含h一、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經常使用來寫圖片與文字的新聞塊。 

二、表單標籤

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>

三、媒體標籤

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>

四、其餘功能標籤

a、mark標籤

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

舉例：

<p>html5:一段文字<mark>高亮顯示</mark></p>
<p>html:一段文字<span style="">高亮顯示</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+。

2、廢除標籤

一、可使用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類型替代。

3、從新定義的html標籤

<b>：表明內聯文本，一般是粗體，沒有傳遞表示重要的意思。

<i>：表明內聯文本，一般斜體，沒有傳遞表示重要的意思。

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

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

<menu>：從新定義用戶界面的菜單，配合commond或者menuitem使用

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

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

4、資源連接 

IBM 深刻剖析 HTML5 

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