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

本節將詳細介紹HTML 5中新增和廢除了哪些元素。

2.2.1　新增的結構元素

在HTML 5中，新增以下與結構相關的元素。

（1）section元素

section元素表示頁面中的一個內容區塊，比如章節、頁眉、頁腳或頁面中的其他部分。它可以與h1、h2、h3、h4、h5、h6元素結合使用，標示文檔結構。

HTML 5中的代碼示例：

<section>…</section>

HTML 4中的代碼示例：

<div>…</div>

（2）article元素article元素表示頁面中的一塊與上下文不相關的獨立內容，譬如博客中的一篇文章或報紙中的一篇文章。

HTML 5中的代碼示例：

<article>…</article>

HTML 4中的代碼示例：

<div>…</div>

（3）aside元素

aside元素表示article元素的內容之外的、與article元素的內容相關的輔助信息。

HTML 5中的代碼示例：

<aside>…</aside>

HTML 4中的代碼示例：

<div>…</div>

（4）header元素

header元素表示頁面中一個內容區塊或整個頁面的標題。

HTML 5中的代碼示例：

<header>…</header>

HTML 4中的代碼示例：

<div>…</div>

（5）footer元素

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

HTML 5中的代碼示例：

<footer></footer>

HTML 4中的代碼示例：

<div>…</div>

（6）nav元素

nav元素表示頁面中導航鏈接的部分。

HTML 5中的代碼示例：

<nav></nav>

HTML 4中的代碼示例：

<ul></ul>

（7）figure元素

figure元素表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。

HTML 5中的代碼示例：

<f igure>
<f igcaption>PRC</f igcaption>
<p>The People's Republic of China was born in 1949...</p>
</f igure>

HTML 4中的代碼示例：

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

（8）main元素

main元素表示網頁中的主要內容。主內容區域意指與網頁標題或應用程序中本頁面主要功能直接相關或進行擴展的內容。

HTML 5中的代碼示例：

<main>…</main>

HTML 4中的代碼示例：

<div>…</div>

2.2.2　新增的其他元素

除了結構元素外，在HTML 5中，還新增以下元素。

（1）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>

（2）audio元素

audio元素用于定義音頻，比如音樂或其他音頻流。

HTML 5中的代碼示例：

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

HTML 4中的代碼示例：

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

（3）embed元素

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

HTML 5中的代碼示例：

<embed src="horse.wav" />

HTML 4中的代碼示例：

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

（4）mark元素

mark元素主要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字。mark元素的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。

HTML 5中的代碼示例：

<mark></mark>

HTML 4中的代碼示例：

<span></span>

（5）progress元素

progress元素表示運行中的進程，可以使用progress元素來顯示JavaScript中耗費時間的函數的進程。

HTML 5中的代碼示例：

<progress></progress>

這是HTML 5中的新增功能，故無法用HTML 4代碼來實現。

（6）meter元素

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

HTML 5中的代碼示例：

<meter></meter>

這是HTML 5中的新增功能，故無法用HTML 4代碼來實現。

（7）time元素

time元素用于表示日期或時間，也可以同時表示兩者。

HTML 5中的代碼示例：

<time></time>

HTML 4中的代碼示例：

<span></span>

（8）ruby元素

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

HTML 5中的代碼示例：

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

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

（9）rt元素

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

HTML 5中的代碼示例：

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

這是HTML 5中的新增功能。

（10）rp元素

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

HTML 5中的代碼示例：

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

這是HTML 5中的新增功能。

（11）wbr元素

wbr元素表示軟換行。wbr元素與br元素的區別是：br元素是此處必須換行，而wbr元素意思就是瀏覽器窗口或父級元素的寬度足夠寬時（沒必要換行時），不進行換行，而當寬度不夠時，主動在此處進行換行。wbr元素好像對字符型的語言用處比較大，但是對于中文，貌似沒多大用處。

HTML 5中的代碼示例：

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

這是HTML 5中的新增功能。

（12）canvas元素

canvas元素表示圖形，比如圖表和其他圖像。這個元素本身沒有行為，僅提供一塊畫布，但把一個繪圖API展現給客戶端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>

（13）details元素

details元素表示用戶要求得到并且可以得到的細節信息。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可見的，用戶點擊標題時，會顯示細節信息。summary元素應該是details元素的第一個子元素。

HTML 5中的代碼示例：

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

這是HTML 5中的新增功能。

（14）datalist元素

datalist元素表示可選數據的列表，與input元素配合使用，可以制作出輸入值的下拉列表。

HTML 5中的代碼示例：

<datalist></datalist>

這是HTML 5中的新增功能。

（15）datagrid元素

datagrid元素表示可選數據的列表，它以樹形列表的形式顯示。

HTML 5中的代碼示例：

<datagrid></datagrid>

這是HTML 5中的新增功能。

（16）output元素

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

HTML 5中的代碼示例：

<output></output>

HTML 4中的代碼示例：

<span></span>

（17）source元素

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

HTML 5中的代碼示例：

<source>

HTML 4中的代碼示例：

<param>

（18）dialog元素

dialog元素表示對話框。

HTML 5中的代碼示例：

<dialog></dialog>

2.2.3　新增的input元素的類型

·HTML 5中新增很多input元素的類型，現列舉如下：

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

·url：url類型表示必須輸入URL地址的文本輸入框。

·number：number類型表示必須輸入數值的文本輸入框。

·range：range類型表示必須輸入一定范圍內數字值的文本輸入框。

·Date Pickers：HTML 5擁有多個可供選取日期和時間的新型輸入文本框。

·date：選取日、月、年。

·month：選取月、年。

·week：選取周和年。

·time：選取時間（小時和分鐘）。

·datetime：選取時間、日、月、年（UTC時間）。

·datetime-local：選取時間、日、月、年（本地時間）。

2.2.4　廢除的元素

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

1.能使用CSS替代的元素

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

2.不再使用frame框架

對于frameset元素、frame元素與noframes元素，由于frame框架對網頁可用性存在負面影響，在HTML 5中已不支持frame框架，只支持iframe框架，或者由服務器方創建的由多個頁面組成的復合頁面的形式，同時將這三個元素廢除。

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

對于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元素相結合的方式替代。

·廢除listing元素，使用pre元素替代。

·廢除xmp元素，使用code元素替代。

·廢除nextid元素，使用GUIDS替代。

·廢除plaintext元素，使用"text/plian"MIME類型替代。