2.2 新增的元素和廢除的元素

本節(jié)將詳細(xì)介紹HTML 5中新增和廢除了哪些元素。

---

2.2.1 新增的結(jié)構(gòu)元素

在HTML 5中，新增了以下與結(jié)構(gòu)相關(guān)的元素。

? section元素

section元素表示頁(yè)面中的一個(gè)內(nèi)容區(qū)塊，比如章節(jié)、頁(yè)眉、頁(yè)腳或頁(yè)面中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結(jié)合起來(lái)使用，標(biāo)示文檔結(jié)構(gòu)。

HTML 5中代碼示例：

<section>...</section>

HTML 4中代碼示例：

<div>...</div>

? article元素

article元素表示頁(yè)面中的一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，譬如博客中的一篇文章或報(bào)紙中的一篇文章。

HTML 5中代碼示例：

<article>...</article>

HTML 4中代碼示例：

<div>...</div>

? aside元素

aside元素表示article元素的內(nèi)容之外的、與article元素的內(nèi)容相關(guān)的輔助信息。HTML 5中代碼示例：

<aside>…</aside>

HTML 4中代碼示例：

<div>...</div>

? header元素

header元素表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的標(biāo)題。

HTML 5中代碼示例：

<header>...</header>

HTML 4中代碼示例：

<div>...</div>

? hgroup元素

hgroup元素用于對(duì)整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。

HTML 5中代碼示例：

<hgroup>...</hgroup>

HTML 4中代碼示例：

<div>...</div>

? footer元素

footer元素表示整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來(lái)說(shuō)，它會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者聯(lián)系信息。

HTML 5中代碼示例：

<footer></footer>

HTML 4中代碼示例：

<div>...</div>

? nav元素

nav元素表示頁(yè)面中導(dǎo)航鏈接的部分。

HTML 5中代碼示例：

<nav></nav>

HTML 4中代碼示例：

<ul></ul>

? figure元素

figure元素表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題。

HTML 5中代碼示例：

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

HTML 4中代碼示例：

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

---

2.2.2 新增的其他元素

除了結(jié)構(gòu)元素外，在HTML 5中，還新增了以下元素：

? video元素

video元素定義視頻，比如電影片段或其他視頻流。

HTML 5中代碼示例：

<video src="movie.ogg" controls="controls">video元素</video>

HTML 4中代碼示例：

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

? audio元素

audio元素定義音頻，比如音樂(lè)或其他音頻流。

HTML 5中代碼示例：

<audio src="someaudio.wav">audio元素</audio>

HTML 4中代碼示例：

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

? embed元素

embed元素用來(lái)插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3等。

HTML 5中代碼示例：

<embed src="horse.wav" />

HTML 4中代碼示例：

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

? mark元素

mark元素主要用來(lái)在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字。mark元素的一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。

HTML 5中代碼示例：

<mark></mark>

HTML 4中代碼示例：

<span></span>

? progress元素

progress元素表示運(yùn)行中的進(jìn)程，可以使用progress元素來(lái)顯示JavaScript 中耗費(fèi)時(shí)間的函數(shù)的進(jìn)程。

HTML5中代碼示例：

<progress></progress>

這是HTML5中新增功能，故無(wú)法用HTML 4代碼來(lái)實(shí)現(xiàn)。

? meter元素

meter元素表示度量衡。僅用于已知最大值和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在min/max屬性中定義。

HTML5中代碼示例：

<meter></meter>

這是HTML5中新增功能，故無(wú)法用HTML 4代碼來(lái)實(shí)現(xiàn)。

? time元素

time元素表示日期或時(shí)間，也可以同時(shí)表示兩者。

HTML 5中代碼示例：

<time></time>

HTML 4中代碼示例：

<span></span>

? ruby元素

ruby元素表示ruby注釋（中文注音或字符）。

HTML 5中代碼示例：

<ruby>漢<rt><rp>（</rp>ㄏㄢ'<rp>）</rp></rt></ruby>

這也是HTML 5中新增的功能。

? rt元素

rt元素表示字符（中文注音或字符）的解釋或發(fā)音。

HTML 5中代碼示例：

<ruby>漢<rt> ㄏㄢ'</rt></ruby>

這是HTML 5中新增的功能。

? rp元素

rp元素在ruby注釋中使用，以定義不支持ruby元素的瀏覽器所顯示的內(nèi)容。

HTML 5中代碼示例：

<ruby>漢<rt><rp>（</rp>ㄏㄢ'<rp>）</rp></rt></ruby>

這是HTML 5中新增的功能。

? wbr元素

wbr元素表示軟換行。wbr元素與br元素的區(qū)別是：br元素表示此處必須換行；而wbr元素的意思是瀏覽器窗口或父級(jí)元素的寬度足夠?qū)挄r(shí)（沒必要換行時(shí)），不進(jìn)行換行，而當(dāng)寬度不夠時(shí)，主動(dòng)在此處進(jìn)行換行。wbr元素好像對(duì)字符型的語(yǔ)言作用挺大，但是對(duì)于中文，貌似沒多大用處。

HTML 5中代碼示例：

<p> To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>
Request Object.</p>

這是HTML 5中新增的功能。

? canvas元素

canvas元素表示圖形，比如圖表和其他圖像。這個(gè)元素本身沒有行為，僅提供一塊畫布，但它把一個(gè)繪圖API展現(xiàn)給客戶端JavaScript，以使腳本能夠把想繪制的東西繪制到這塊畫布上。

HTML 5中代碼示例：

<canvas id="myCanvas" width="200" height="200"></canvas>

HTML 4中代碼示例：

<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200">
</object>

? command元素

command元素表示命令按鈕，比如單選按鈕、復(fù)選框或按鈕。

HTML 5中代碼示例：

<command onclick=cut（）" label="cut">

這是HTML 5中新增的功能。

? details元素

details元素表示用戶要求得到并且可以得到的細(xì)節(jié)信息。它可以與summary元素配合使用。summary元素提供標(biāo)題或圖例。標(biāo)題是可見的，用戶點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出細(xì)節(jié)信息。summary元素應(yīng)該是details元素的第一個(gè)子元素。

HTML 5中代碼示例：

<details>
   <summary>HTML 5</summary>
   This document teaches you everything you have to learn about HTML 5.
</details>

這是HTML 5中新增的功能。

? datalist元素

datalist元素表示可選數(shù)據(jù)的列表，與input元素配合使用，可以制作出輸入值的下拉列表。HTML 5中代碼示例：

<datalist></datalist>

這是HTML 5中新增的功能。

? datagrid元素

datagrid元素表示可選數(shù)據(jù)的列表，它以樹形列表的形式來(lái)顯示。

HTML 5中代碼示例：

<datagrid></datagrid>

這是HTML 5中新增的功能。

? keygen元素

keygen元素表示生成密鑰。

HTML 5中代碼示例：

<keygen>

這是HTML 5中新增的功能。

? output元素

output元素表示不同類型的輸出，比如腳本的輸出。

HTML 5中代碼示例：

<output></output>

HTML 4中代碼示例：

<span></span>

? source元素

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

HTML 5中代碼示例：

<source>

HTML 4中代碼示例：

<param>

? menu元素

menu元素表示菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。

HTML 5中代碼示例：

<menu>
   <li><input type="checkbox" />Red</li>
   <li><input type="checkbox" />blue</li>
</menu>

在HTML 4中，menu元素不被推薦使用。

---

2.2.3 新增的input元素的類型

HTML 5中新增了很多input元素的類型，現(xiàn)列舉如下：

? email

email類型表示必須輸入E-mail地址的文本輸入框。

? url

url類型表示必須輸入U(xiǎn)RL地址的文本輸入框。

? number

number類型表示必須輸入數(shù)值的文本輸入框。

? range

range類型表示必須輸入一定范圍內(nèi)數(shù)字值的文本輸入框。

? Date Pickers

HTML 5擁有多個(gè)可供選取日期和時(shí)間的新型輸入文本框：

date—選取日、月、年

month—選取月、年

week—選取周和年

time—選取時(shí)間（小時(shí)和分鐘）

datetime—選取時(shí)間、日、月、年（UTC時(shí)間）

datetime-local—選取時(shí)間、日、月、年（本地時(shí)間）

---

2.2.4 廢除的元素

由于各種原因，在HTML 5中廢除了很多元素，簡(jiǎn)單介紹如下。

1.能使用CSS替代的元素

對(duì)于basefont、big、center、font、s、strike、tt、u這些元素，由于它們的功能都是純粹為畫面展示服務(wù)的，而HTML 5中提倡把畫面展示性功能放在CSS樣式表中統(tǒng)一編輯，所以將這些元素廢除了，并使用編輯CSS、添加CSS樣式表的方式進(jìn)行替代。其中font元素允許由“所見即所得”的編輯器來(lái)插入，s元素、strike元素可以由del元素替代，tt元素可以由CSS的font-family屬性替代。

2.不再使用frame框架

對(duì)于frameset元素、frame元素與noframes元素，由于frame框架對(duì)網(wǎng)頁(yè)可用性存在負(fù)面影響，在HTML 5中已不支持frame框架，只支持iframe框架，或者用服務(wù)器方創(chuàng)建的由多個(gè)頁(yè)面組成的復(fù)合頁(yè)面的形式，同時(shí)將以上這三個(gè)元素廢除。

3.只有部分瀏覽器支持的元素

對(duì)于applet、bgsound、blink、marquee等元素，由于只有部分瀏覽器支持這些元素，特別是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML 5中被廢除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由JavaScript編程的方式所替代。

4.其他被廢除的元素

其他被廢除元素還有：

• 廢除rb元素，使用ruby元素替代
• 廢除acronym元素，使用abbr元素替代
• 廢除dir元素，使用ul元素替代
• 廢除isindex元素，使用form元素與input元素相結(jié)合的方式替代
• 廢除listing元素，使用pre元素替代
• 廢除xmp元素，使用code元素替代
• 廢除nextid元素，使用GUIDS替代
• 廢除plaintext元素，使用“text/plian”MIME類型替代