1. 程式人生 > >HTML5之新增的元素和廢除的元素 (宣告:內容節選自《HTML 5從入門到精通》)

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中程式碼

示例:<header>…</header>

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程式設計的方式所替代。