HTML5之新增的元素和廢除的元素 (聲明:內容節選自《HTML 5從入門到精通》)

section元素

section元素定義文檔或應用程序中的一個區段,比如章節、頁眉、頁腳或文檔中的其他部分。它可以與h1,h2,h3,h4,h5,h6元素結合起來使用,標示文檔結構。

HTML5中代碼示例: <section>…</section>

HTML4中代碼示例:<div>…</div>

article元素

article元素表示文檔中的一塊獨立的內容,譬如博客中的一篇文章或報紙中的一篇文章。

HTML5中代碼示例 :<article>…</article>

HTML4中代碼示例 :<div class="article">…</div>

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

示例:…

HTML4中代碼示例 :<div>…</div>

nav元素

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

HTML5中代碼示例 : <nav>…</nav>

HTML4中代碼示例 :<ul>…</ul>

footer元素

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

HTML5中代碼示例 :<footer>…</footer>

HTML4中代碼示例 :<div>…</div>

————————————————————————————————————————————————————————

新增塊級語義元素:

aside元素

aside元素表示article元素的內容之外的與article元素的內容相關的有關內容。

HTML5中代碼示例 :<aside>…</aside>

HTML4中代碼示例 :<div>…</div>

figure元素

figure元素表示一段獨立的流內容,一般表示文檔主體流內容中的一個獨立單元。使用 <figcaption> 元素爲figure元素組添

加標題。

HTML5中代碼示例:

<figure>

<figcaption>PRC</figcaption>

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

</figure>

HTML4中代碼示例:

<dl>

<h1>PRC</h1>

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

</dl>

dialog元素

dialog標籤定義對話,比如交談。 注意: 對話中的每個句子都必須屬於 <dt> 標籤所定義的部分。

HTML5中代碼示例:

<dialog>

<dt>老師</dt>

<dd>2+2 等於?</dd>

<dt>學生</dt>

<dd>4</dd>

<dt>老師</dt>

<dd>答對了!</dd>

</dialog>

————————————————————————————————————————————————————————

新增行內語義元素:

mark元素

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

高亮顯示搜索關鍵詞。

HTML5中代碼示例 :<mark>…</mark>

HTML4中代碼示例 :<span>…</span>

time元素

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

HTML5中代碼示例 : <time>…</time>

HTML4中代碼示例 :<span>…</span>

meter元素

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

義。

HTML5中代碼示例 : <meter>…</meter>

progress元素

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

HTML5中代碼示例 :<progress>…</progress>

————————————————————————————————————————————————————————

新增多媒體與交互性元素:

video元素&audio元素

video用來插入視頻,audio用來插入聲音,當然,用下面這個:

<video src="XX.wmv">您的瀏覽器不支持video標籤</video>

如果不支持的話,就會顯示標籤內的文字

details元素

details元素表示用戶要求得到並且可以得到的細節信息。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可

見的,用戶點擊標題時,會顯示出details。summary元素應該是details元素的第一個子元素。

HTML5中代碼示例:

<details><summary>HTML 5</summary>

This document teaches you everything you have to learn about HTML 5.

</details>
<!--實踐證明沒用啊。。。—>

datagrid元素

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

HTML5中代碼示例 :<datagrid>…</datagrid>

menu元素

menu元素表示菜單列表。當希望列出表單控件時使用該標籤。

HTML5中代碼示例:

<menu>

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

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

</menu>

U注意:HTML4中 menu元素不被推薦使用。

command元素

command元素表示命令按鈕,比如單選按鈕、複選框或按鈕。

HTML5中代碼示例:

Øcommand元素

command元素表示命令按鈕,比如單選按鈕、複選框或按

鈕。

HTML5中代碼示例 : command onclick=cut()" label="cut">

————————————————————————————————————————————————————————

新增input類型:

email——email類型用於應該包含 e-mail 地址的輸入域。

url——url 類型用於應該包含 URL 地址的輸入域。

number——number 類型用於應該包含數值的輸入域。

range——range 類型用於應該包含一定範圍內數字值的輸入域。

Date Pickers(數據檢出器)

search——search 類型用於搜索域,比如站點搜索或 Google 搜索。search 域顯示爲常規的文本域。

————————————————————————————————————————————————————————

多個可供選取日期和時間的新輸入類型:

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間(小時和分鐘)

datetime - 選取時間、日、月、年(UTC 時間)

datetime-local - 選取時間、日、月、年(本地時間)

————————————————————————————————————————————————————————

廢除的元素:

•1.能使用css代替的元素
對於basefont、big、center、font、s、strike、tt、u這些元素,由於他們的功能都是純粹爲畫面展示服務的,而在HTML5中提

倡把畫面展示性功能放在css樣式表中統一編輯,所以將這些元素廢除,並使用編輯css樣式表的方式進行替代。

•2.不再使用frame框架
對於frameset元素、frame元素與nofranes元素,由於frame框架對頁面可存在負面影響,在html5中已不再支持frame框架,只支持iframe框架,或者用服務器方創建的由多個頁面組成的複合頁面的形式,同時將以上三個元素廢除。

•3.只有部分瀏覽器支持的元素
對於applet、bgsound、blink、marguee等元素,由於只有部分瀏覽器支持這些元素,所以在HTML5中被廢除。其中applet元素可由embed元素替代,bgsound元素可由audio元素替代,marquee可以由JavaScript編程的方式所替代。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章