首頁>網頁設計教程>WEB標準化

HTML 5 新增的元素

作者：Eve Cole 更新時間：2009-05-31 00:37:41

在本人看來，HTML 5是一個妥協方案，雖不激進，但更能推動科技的持續進步。沒有命名空間，元素也不要求閉合（當然這不是優點），瀏覽器也可以寬大處理一些錯誤。一切沿襲上個世紀HTML 4的做法。對於HTML的渲染，瀏覽器一直停留在1999年的水平。為此，HTML 5是一個實用主義方案，這樣不僅可以繼續處理這麼多年散落在世界各個角落的HTML，也可以讓瀏覽器廠商更容易添加新功能。這就叫degrade gracefully（優雅降級）。讓我們來看看HTML 5增加的一些新元素。

結構元素

這真是大快人心。目前，我們定義結構只能透過一個「萬能」的div, 試圖透過設定它的特性id的值如header, footer, sidebar等來分別表達頭部，底部或側邊欄等。有了它們，代碼編寫者不再需要為id的命名費盡心思，對於手機、閱讀器等設備更有語義的好處。 HTML 5增加了新的結構元素來表達這些最常用的結構：

section: 這可以表達書本的一部分或一章，或是一章內的一節

header: 頁面主體上的頭部。並非head元素

footer: 頁面的底部（頁尾），可以是一封郵件簽名的所在

nav: 到其他頁面的連結集合

article: 諸如blog, 雜誌，綱要等之中的一條獨立記錄。

舉個例子，一個blog的首頁，用HTML 5寫的話，可以是這樣（有省略）：

以下為引用的內容：

<<!DOCTYPE HTML>
<HTML>
<head>
<title>realazy</title>
</head>
<body>
<header>
<h1>Realazy</h1>
</header>
<section>
<article>
<h2><a href="http://realazy.org/blog">標題</a></h2>
<p>內容在此...（省略n字）</p>
</article>
<article>
<h2><a href="http://realazy.org/blog">標題2</a></h2>
<p>內容2在此...（省略n字）</p>
</article>
……
</section>
<footer>
<nav>
<ul>
<li><a href="http://realazy/blog">導航1</a></li>
<li><a href="http://realazy/blog">導航2</a></li>
……
</ul>
</nav>
<p>© 2007 realazy</p>
</footer>
</body>
</HTML>區塊級block的語意元素
HTML也增加以下三個區塊級元素：

aside
figure/code>
dialog
aside可以用以表達註記、貼士、側邊欄、摘要、插入的引用等諸如作為補充主體的內容。比如這樣表達blog的側欄：

<aside>
<h3>最新文章</h3>
<ul>
<li><a href="http://realazy.org/blog/">文章標題</a></li>
……
</ul>
</aside>figure元素表示一個有說明的區塊級圖片。比如：

<figure>
<legend>這是圖片的說明</legend>
<img alt="圖片可替換文字" src="/path/to/img.png" />
</figure>dialog元素用於表達人們之間的對話。在HTML 5中，dt用來表示說話者，而dd則用來表示說話者的內容。如：

<dialog>
<dt>佛</dt>
<dd>色即是空</dd>
<dt>悟空</dt>
<dd>我現在需要點空…行內（inline）的語意元素

m元素用來標記一些不是那麼需要著重強調的文字。現在尚有爭議，可能最終會改為mark.

time元素如其名，用來表達時間。它需要一個datetime的特性來標示機器能夠認識的時間，如：

<time datetime="2008-08-08T20:08:08">2008年8月8日晚上8時8分8秒</tiem>meter元素表達特定範圍內的數值。可用於薪水、百分比、分數等。比如：

很遺憾地告訴你，我只有<meter>150cm</meter>它還有6個特性來表達各方面的意義，例如：

<p>您的分數是：<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p >

還有一個progress，也是義如其名，用以表達進度：

目標完成度：<progress value="40" max="100">40%</progress>嵌入多媒體

新增video和audio元素。顧名思義，分別是用來插入視訊和聲音的。至於格式，交由瀏覽器實現，HTML再也不需要特別的程式碼去播放特定的格式。就像img一樣，不管是png, jpg還是gif都可以顯示。值得注意的是，它們可以包含內容。例如，可以把歌詞放到某段歌曲中：

以下為引用的內容：
<audio src="誰人伴你睡.mp3">
<p>淚枯乾</p>
<p>難忍怎麼委屈自已</p>
<p>曾經有一刻悲與喜</p>
……
</audio>

互動性

HTML 5同時也稱為Web Applications 1.0, 因此也進一步發展互動能力。這些標籤就是為提高頁面的互動體驗而生：

以下為引用的內容：
details
datagrid
menu
command

details

用來表示一段具體的內容，但是內容預設可能不顯示，透過某種手段（如點擊）與legend互動才顯示出來。這跟現在各種透過JavaScript隱藏一段內容，點擊後才顯示出來的做法有些類似。比如：

一句話記錄生活中的點點滴滴，

以下為引用的內容：
<details>
<legend>更多</legend>
<p>交流分享，拉近你和朋友，支持MSN/GTalk/QQ、簡訊、手機WAP</p>
</details>它可以有一個open的特性，用來顯示細節與否。

datagrid用來控制數據，可以由使用者或腳本來更新。

menuHTML 2就存在了，不過HTML 4把它廢棄了。 HTML 5廢棄物利用，並在期間內加上command元素。

參考：New elements in HTML 5

相關文章