HTML5新增的元素、廢除的元素

添加背景音樂

本講大綱：1、新增的結(jié)構(gòu)元素

2、新增的塊級(jí)（block）的語義元素

3、新增的行內(nèi)（inline）的語義元素

4、新增的嵌入多媒體元素與交互性元素

5、新增的input元素的類型

5、廢除的元素

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

section元素section元素定義文檔或應(yīng)用程序中的一個(gè)區(qū)段,比如章節(jié)、頁眉、頁腳或文檔中的其他部分。它可以與h1,h2,h3,h4,h5,h6元素結(jié)合起來使用，標(biāo)示文檔結(jié)構(gòu)。HTML5中代碼示例：<section>…</section>HTML4中代碼示例：<div>…</div>article元素article元素表示文檔中的一塊獨(dú)立的內(nèi)容，譬如博客中的一篇文章或報(bào)紙中的一篇文章。HTML5中代碼示例：<article>…</article>HTML4中代碼示例：<divclass="article">…</div>新增的結(jié)構(gòu)元素header元素header元素表示頁面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁面的標(biāo)題。HTML5中代碼示例：<header>…</header>HTML4中代碼示例：<div>…</div>nav元素nav元素表示導(dǎo)航鏈接的部分。HTML5中代碼示例：<nav>…</nav>HTML4中代碼示例：<ul>…</ul>新增的結(jié)構(gòu)元素footer元素footer元素表示整個(gè)頁面或頁面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來說，它會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及創(chuàng)建者聯(lián)系信息。HTML5中代碼示例：<footer>…</footer>HTML4中代碼示例：<div>…</div>新增的塊級(jí)（block）的語義元素

aside元素

aside元素表示article元素的內(nèi)容之外的與article元素的內(nèi)容相關(guān)的有關(guān)內(nèi)容。HTML5中代碼示例：<aside>…</aside>HTML4中代碼示例：<div>…</div>新增的塊級(jí)（block）的語義元素figure元素figure元素表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用<figcaption>元素為figure元素組添加標(biāo)題。HTML5中代碼示例：<figure><figcaption>PRC</figcaption><p>ThePeople'sRepublicofChinawasbornin1949...</p></figure>HTML4中代碼示例：<dl><h1>PRC</h1><p>ThePeople'sRepublicofChinawasbornin1949...</p></dl>新增的塊級(jí)（block）的語義元素dialog元素dialog標(biāo)簽定義對(duì)話，比如交談。注意：對(duì)話中的每個(gè)句子都必須屬于<dt>標(biāo)簽所定義的部分。HTML5中代碼示例：<dialog><dt>老師</dt><dd>2+2等于？</dd><dt>學(xué)生</dt><dd>4</dd><dt>老師</dt><dd>答對(duì)了！</dd></dialog>

新增的行內(nèi)（inline）的語義元素

mark元素mark元素主要用來在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字。mark元素的一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。HTML5中代碼示例：<mark>…</mark>HTML4中代碼示例：<span>…</span>新增的行內(nèi)（inline）的語義元素time元素

time元素表示日期或時(shí)間，也可以同時(shí)表示兩者。HTML5中代碼示例:<time>…</time>HTML4中代碼示例:<span>…</span>新增的行內(nèi)（inline）的語義元素meter元素

meter元素表示度量衡。僅用于已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在min/max屬性中定義。HTML5中代碼示例:<metervalue="3"min="0"max="10">3/10</meter><br><metervalue="0.6">60%</meter>新增的行內(nèi)（inline）的語義元素progress元素progress元素表示運(yùn)行中的進(jìn)程?？梢允褂胮rogress元素來顯示JavaScript中耗費(fèi)時(shí)間的函數(shù)的進(jìn)程。HTML5中代碼示例：<progress>…</progress>下載進(jìn)度：<progressvalue="22"max="100"></progress>新增的嵌入多媒體元素與交互性元素

details元素details元素表示用戶要求得到并且可以得到的細(xì)節(jié)信息。它可以與summary元素配合使用。summary元素提供標(biāo)題或圖例。標(biāo)題是可見的，用戶點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出details。summary元素應(yīng)該是details元素的第一個(gè)子元素。HTML5中代碼示例：<details><summary>HTML5</summary>ThisdocumentteachesyoueverythingyouhavetolearnaboutHTML5.</details>新增的嵌入多媒體元素與交互性元素datagrid元素datagrid元素表示可選數(shù)據(jù)的列表，與input元素配合使用，可以制作出輸入值的下拉列表。HTML5中代碼示例：<datagrid>…</datagrid>新增的嵌入多媒體元素與交互性元素menu元素menu元素表示菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。HTML5中代碼示例：<menu><li><inputtype="checkbox"/>Red</li><li><inputtype="checkbox"/>blue</li></menu>注意：HTML4中menu元素不被推薦使用。新增的嵌入多媒體元素與交互性元素command元素command元素表示命令按鈕，比如單選按鈕、復(fù)選框或按鈕。HTML5中代碼示例:<commandonclick=cut()"label="cut">新增的input元素的類型

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

email類型用于應(yīng)該包含e-mail地址的輸入域。url

url類型用于應(yīng)該包含URL地址的輸入域。number

number類型用于應(yīng)該包含數(shù)值的輸入域。range

range類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。DatePickers（數(shù)據(jù)檢出器）searchsearch類型用于搜索域，比如站點(diǎn)搜索或Google搜索。search域顯示為常規(guī)的文本域。新增的input元素的類型HTML5擁有多個(gè)可供選取日期和時(shí)間的新輸入類型date-選取日、月、年month-選取月、年week-選取周和年time-選取時(shí)間（小時(shí)和分鐘）datetime-選取時(shí)間、日、月、年（UTC時(shí)間）datetime-local-選取時(shí)間、日、月、年（本地時(shí)間）廢除的元素

由于各種原因，在HTML5中廢除了很多元素，下面簡(jiǎn)單介紹一下被廢除的元素。1.能使用css代替的元素對(duì)于basefont、big、center、font、s、strike、tt、u這些元素，由于他們的功能都是純粹為畫面展示服務(wù)的，而在HTML5中提倡把畫面展示性功能放在css樣式表中統(tǒng)一編輯，所以將這些元素廢除，并使用編輯css樣式表的方式進(jìn)行替代。2.不在使用frame框架對(duì)于frameset元素、frame元素與nofranes元素，由于frame框架對(duì)頁面可以性存在負(fù)面影響，在html5中已不再支持frame框架，只支持iframe框架，或者用服務(wù)器方創(chuàng)建的由多個(gè)頁面組成的復(fù)合頁面的