//劉夢冰發表于2015-6-29

1、新增的結構元素

(1)section元素
section元素表示頁面中的一個內容區塊，比如章節、頁眉、頁腳或者頁面中的其他部分，它可以與h1、h2、h3等元素結合起來使用，表示文檔結構。
html5與html4代碼比較：
<section>......</section>
<div>......</div>

(2)、article元素
article元素表示頁面中的一塊與上下文不相關的獨立內容，譬如博客中的一篇文章或者報紙中的一篇文章。
html5與html4代碼比較：
<article>......</article>
<div>......</div>

(3)、aside元素
aside元素表示article元素的內容之外的、與article元素的內容相關的輔助信息。
html5與html4代碼比較：
<aside>......</aside>
<div>......</div>

(4)、header元素
header元素表示頁面中的一個內容區塊或整個頁面的標題；
html5與html4代碼比較：
<header>......</header>
<div>......</div>

(5)、hgroup元素
hgroup元素用于對整個頁面或頁面中一個內容區塊的標題進行組合；
html5與html4代碼比較：
<hgroup>......</hgroup>
<div>......</div>

(6)、footer元素
footer元素表示整個頁面或頁面中的一個區塊的腳注。一般來說會包含創作者的姓名、創作日期以及創作者的聯系方式。
html5與html4代碼比較：
<footer>......</footer>
<div>......</div>

(7)、nav元素
nav元素表示頁面中導航鏈接的部分。
html5與html4代碼比較：
<nav>......</nav>
<ul>......</ul>

(8)、figure元素
figure元素表示一段獨立的流內容，一般表示文檔主題流內容中的一個獨立的單元。使用figcaption元素為figure元素組添加標題;
html5與html4代碼比較：
<figure>
??? <figcaption>共產黨</figcaption>
??? <p>共產黨是中華人民共和國的第一大政黨</p>
</figure>

<dl>
??? <h1>共產黨</h1>
??? <p>共產黨是中華人民共和國的第一大政黨</p>
</dl>

2、新增的其他元素

(1)video元素
video元素定義視頻，比如電影片段或其他視頻流；等同于html4的object元素

(2)audio元素
audio元素定義音頻，比如音樂或其他音頻流；等同于html4的object元素

(3)embed元素
embed元素用來插入各種多媒體，格式可以是Midi、Wav、AIFF、AU、MP3?；? 等同于html4的object元素

(4)mark元素
mark元素主要用來在視覺上向用戶那些需要突出顯示或者高亮顯示的文字;mark元素的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞；等同于html4的span元素

(5)progress元素
progress元素表示運行中的進程，可以使用progress來顯示JavaScript中消耗時間的函數的進程；html4中無法實現；

(6)meter元素
meter元素表示度量衡。僅用于已知最大值和最小值的度量。必須定義度量的范圍，可以在元素的文本中。也可以在min/max屬性中定義 html4無法實現；

(7)time元素
time元素 表示日期或者時間，也可以同時表示兩者；等同于html4的span元素

(8)ruby元素
ruby元素表示ruby注釋；???

(9)rt元素
rt元素表示字符的解釋或發音；??

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

(11)wbr元素
wbr元素表示軟換行。他與br元素的區別：br元素表示此處必須換行，而wbr元素的意思是瀏覽器窗口或父級元素的寬度夠寬時。不進行換行，而當寬度不夠時，主動在此處進行換行；

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

(13)command元素
command元素表示命令按鈕，比如單選按鈕，復選按鈕或按鈕；

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

(15)detalist元素
datalist元素表示可選數據的列表，與input元素配合使用，可以制作出輸入值的下拉列表；html5新增功能。

(16)datagrid元素
datagrid元素表示可選數據的列表，他以樹形列表的形式來顯示。

(17)keygen元素
keygen元素表示生成密匙。???

(18)output元素
output元素 表示不同類型的輸出，比如腳本的輸出???

(19)source元素
source元素為媒介元素定義媒介資源；對應html4的<param>

(20)menu元素
menu元素表示菜單列表。當希望列出表單空間時使用；

3、新增的input元素的類型

(1)email元素
email類型表示必須輸入Email地址的文本輸入框；

(2)url元素
url類型表示必須輸入URL地址的文本輸入框；

(3)number元素
number類型表示必須輸入數值的文本輸入框；

(4)range元素
range類型表示必須輸入一定范圍內數字值得文本輸入框；

(5)Date Pickers
HTML5擁有多個可供選取日期和時間的新型輸入文本框：
date-------選取日、月、年
month------選取月、年
week-------選取周、年
time-------選取時間（小時和分鐘）
datetime----選取時間、日、月、年（UTC時間）
datetime-local-----選取時間、日、月、年（本地時間）

4、廢除的元素

(1)能使用CSS替代的元素

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

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

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

(4)其他被廢除的元素
1）廢除rb元素，使用ruby元素替代；
2）廢除acronym元素，使用abbr元素替代；
3）廢除dir元素，使用ul元素替代；
4）廢除isindex元素，使用form元素與input元素相結合的方式替代；
5）廢除listing元素，使用pre元素替代；
6）廢除xmp元素，使用code元素替代；
7）廢除nextid元素，使用GUIDS元素替代；
8）廢除plaintext元素，使用"text/plian"MIME類型替代；

總結

以上是生活随笔為你收集整理的（一）html5中的新增元素和废除元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。