36個重要的HTML標簽

每一個HTML標簽都有其用法，但我們在寫HTML代碼時，卻常常舍近求遠，忽略了很多非常重要且特別有用的標簽。

既然HTML中定義了這麼多標簽，而且每種標簽都有其用法，我們為什麼不盡量去使用這些標簽呢。下面收集並整理了36個常被我們遺忘卻非常有用的HTML標簽。

1. <!? ?> :注釋

2. <!DOCTYPE>：文檔類型聲明

文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略DTDs，將使網頁進入一種混亂模式(quirks mode)。

示例：

XHTML過渡定義類型，此類型可以使用HTML4中的標簽

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML嚴格定義類型，此文檔隻可以使用XHTML1中定義的標簽

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML1.1版定義類型

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

XHTML框架定義類型。(可以使用框架)

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

3. <abbr>：縮寫

示例：<abbr title=”Pmited”>Ltd.</abbr>

說明：簡稱和縮寫是對一個慣用詞組的縮寫表示，一般使用詞組中每個單詞的首字母，比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一種提取首字母的縮寫.有時候縮寫經常會在最後加一個。

4. <acronym>：取首字母的縮寫

示例：<acronym title=”Cascading Style Sheets”>CSS</acronym>

5. <area>：定義圖像點擊區域

area標簽是單獨出現的，<area />

area標簽必須使用在map標簽中，而且必須配合img標簽使用。

屬性：

Common ― 一般屬性

accesskey ― 鏈接的快捷鍵訪問方式

alt ― 圖像的提示文字

coords ― 定義可點擊區域圖形的坐標

href ― HTML鏈接源的URL

nohref ― 圖像點擊排除的區域，當不使用href時應使用nohref

shape ― 可點擊區域的形狀

tabindex ― 使用”Tab”鍵的遍曆順序

target ― 鏈接目標

area是cPent-side image map area的意思，區域

area標簽示例：

6. <base>: 定義基URL用於頁面的鏈接與引用

base標簽是單獨出現的，<base />

base標簽隻能放置在head標簽內

當使用相對路徑定義鏈接時，可以使用base標簽定義基URL解析所有文檔中定義的相對路徑的URL

屬性：

href ― 基URL

target ― 鏈接目標

base是document base URI的意思

base標簽示例

使用上面示例代碼的html頁面中的相對鏈接，將直接指向基URL http://www.renniaofei.com/，並且使用彈出窗口。

base標簽在框架中的使用

base標簽通常可以使用在框架鏈接中，例如
<frameset cols=”20%, *”> <frame src=”Pst.html”> <frame src=”http://www.renniaofei.com/” name=”mainTarget”> < /frameset>

鏈接頁Pst.htm

l<head> <base target=”mainTarget”> </head> < a href=”http://www.renniaofei.com/category/design/”>design</a> < a href=”http://www.renniaofei.com/category/graphic/”>graphic</a> <a href=”http://www.renniaofei.com/category/inspiration/”>inspiration</a> <a href=”http://www.renniaofei.com/category/freebies/”>freebies</a>

通過上面示例可以避免在每個鏈接中寫入target=”mainTarget”

7. <blockquote>：表示引用塊

blockquote標簽是成對出現的，以<blockquote>開始，以</blockquote>結束

屬性：

Common ― 一般屬性

cite ― 被引用內容的URI

示例：

<blockquote cite=”http://www.renniaofei.com/xhtml/”> <p>標準網頁設計要區分內容與表現，學習標準網頁設計。</p> </blockquote>

8. <button> ：定義按鈕

button標簽是成對出現的，以<button>開始，</button>結束

可以定義比input內容更豐富的按鈕。

屬性：

Common ― 一般屬性

accesskey ― 快捷鍵訪問方式

disabled ― 禁止使用

name ― 標簽名稱

tabindex ― 使用”Tab”鍵的遍曆順序

type ― 按鈕類型

button ― 普通按鈕

reset ― 重置表單按鈕

submit ― 提交按鈕

value ― 通過表單傳遞到服務器端的數據

button是push button的意思，按鈕

button標簽示例：

一個使用文字的普通的提交按鈕

改變按鈕內加重文字的button標簽

說明：使用圖片的button標簽，注意有alt的提示文字。

9. <caption>：HTML表格的標題

caption標簽是成對出現的，以<caption>開始。</caption>結束

屬性：

Common ― 一般屬性

caption:標題

示例：

<table width=”80%”> <caption> 域名數量介紹 < /caption> <tr> < th>www.renniaofei.com</th> < th>.com域名的數量</th> <th>.cn域名的數量</th> < th>.net域名的數量</th> </tr> <tr> < td>2003年</td> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>

說明：

caption標簽可以為表格提供一個描述，和圖像的說明alt比較類似.默認情況下，瀏覽器顯示表格標題在表格的上方。

CSS裏的caption-side屬性用來控製表格標題顯示的位置。

10. <cite>引用

cite標簽是成對出現的，以<cite>開始，以</cite>結束

屬性：

Common ― 一般屬性

cite ― 引用內容的URI

cite是citation的縮寫

示例：

<cite cite=”http://www.renniaofei.com/”>一步步的教我學會HTML與XHTML</cite>

11. <col> 可以對HTML表格結構化分區後的一個或幾個區域使用同樣的樣式行

col標簽是單獨出現的，<col />

屬性：

Common ― 一般屬性

span ― 定義一個col跨越的列數,默認值為1

12. <colgroup>表示對HTML表格進行結構化的分區,在此分區中可以通過使用col定義每列表格的樣式

colgroup標簽是成對出現的，以<colgroup>開始，以</colgroup>結束

屬性：

Common ― 一般屬性

span ― 定義一個colgroup跨越的列數,默認值為1

13. <dd>代表HTML自定義列表描述

dd標簽是成對出現的，,以<dd>開始，</dd>結束

屬性：

Common ― 一般屬性

dd是definition description的縮寫

14. del 標簽 ― 定義被刪除的文本

del標簽是成對出現的,以<del>開始，</del>結束

del通常應連同ins標簽一同使用，表示被刪除與被插入的文本

通過del與ins定義文檔可以幫助了解文檔內容的修改過程，利於多人編輯系統

使用del定義的文本通常帶有刪除線

屬性：

Common ― 一般屬性

cite ― 引用網址，定義為何刪除的引用網址

datetime ― 刪除的時間與日期

title ― 定義刪除的目的或提示

del是deleted text的縮寫，刪除文本

del標簽示例：

<p>任鳥飛網頁設計網址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 網址已經刪除。 </p>

15. <dir> 定義多層目錄列表

不符合標準網頁設計的理念，不讚成使用.

dir標簽是成對出現的，以<dir>開始，</dir>結束

屬性：

Common ― 一般屬性

dir是directory Psts的縮寫，目錄列表

16. <dfn> ? 定義標簽

dfn標簽是成對出現的，以<dfn>開始，以</dfn>結束

屬性：

Common ― 一般屬性

dfn是defining instance的縮寫

示例： <dfn>任鳥飛</dfn>網頁設計網!

17. <dl> 代表HTML自定義列表

dl標簽是成對出現的，以<dl>開始，</dl>結束

自定義列表的開始使用<dl>標簽，列表中每個元素的標題使用<dt>(definition term)定義，後面跟隨<dd>(definition description)用於描述列表中元素的內容.

屬性：

Common ― 一般屬性

dl是definition Psts的英文縮寫

示例：

<dl> <dt>www</dt> <dd>World Wide Web的縮寫.</dd> <dt>renniaofei</dt> < dd>任鳥飛</dd> <dd>www的:).</dd> < dt>com</dt> <dt>com.cn</dt> < dt>cn</dt> <dd>這都是域名的後綴.</dd> </dl>

說明：

不一定每個dt標簽要對應一個dd，可以一對多或多對一(就像上面的例子)

18. <dt>代表HTML自定義列表組

dt標簽是成對出現的，以<dt>開始，</dt>結束

屬性：

Common ― 一般屬性

dt是definition term的縮寫

19. <em> 強調標簽

em標簽是成對出現的，以<em>開始，以</em>結束

屬性：

Common ― 一般屬性

em是emphasis的縮寫

示例： 強調一下,<em>不要</em>和我開玩笑!

20. <ins> 定義被插入的文本

ins標簽是成對出現的，以<ins>開始，</ins>結束

ins通常應連同del標簽一同使用，表示被插入與被刪除的文本

通過ins與del定義文檔可以幫助了解文檔內容的修改過程，利於多人編輯系統

使用ins定義的文本通常帶有下劃線

屬性：

Common ― 一般屬性

cite ― 引用網址，定義為何插入的引用網址

datetime ― 插入的時間與日期

title ― 定義插入的目的或提示

ins是inserted text的縮寫，插入文本

ins標簽示例：

21. <kbd>標簽表明使用者輸入的文字

kbd標簽是成對出現的，以<kbd>開始，以</kbd>結束

屬性:

Common ― 一般屬性

示例： To exit, type <kbd>QUIT</kbd>.

22. <map>定義圖像點擊區域的集合

map標簽是成對出現的,以<map>開始，</map>結束

map標簽必須配合area標簽使用

map標簽中name與id屬性指定的值必須與定義圖像點擊區中圖像(img)的usemap屬性指定的值一致

屬性

Common ― 一般屬性

id ― 定義map的名稱。

name ― 定義map的名稱。

map是cPent-side image map的意思

map標簽示例：

23. <menu> 定義菜單列表

不符合標準網頁設計的理念，不讚成使用。

menu標簽是成對出現的,以<menu>開始，</menu>結束

屬性

Common ― 一般屬性

menu:菜單

24. <noframes>對不支持框架的設備進行提示

noframes標簽是成對出現的，以<noframes>開始，</noframes>結束

由於frameset內不能包含body標簽，因此noframes內部必須包含body標簽

示例

<frameset cols=”50%,25%,25%”> <frame src=”http://www.renniaofei.com/category/design/”> <frame src=”http://www.renniaofei.com/graphics/”> <frame src=”http://www.renniaofei.com/inspiration/”> <noframes> <body> < p>任鳥飛網頁設計網使用了框架技術，但是您的瀏覽器不支持框架，請升級您的瀏覽器以便正常訪問。</p> < /body> </noframes> </frameset>

25. <noscript>無法加載腳本時的提示文字

noscript標簽是成對出現的，以<noscript>開始,以</noscript>結束

示例

26. <q>

表示一個行引用

q標簽是成對出現的，以<q>開始，以</q>結束。

屬性:

Common ― 一般屬性

cite ― 引用內容的URI

q是quoted text的縮寫

示例：

<cite>古人</cite>雲：<q>良言一句三冬暖，惡語傷人六月寒。</q>

27. <s>定義刪除線的文字

不符合標準網頁設計的理念，不讚成使用。

s標簽是成對出現的，以<s>開始，以</s>結束

屬性：

Common ― 一般屬性

s是strikethrough的縮寫

28. <sub>表示下標

sub標簽是成對出現的，以<sub>開始。以</sub>結束

屬性：

Common ― 一般屬性

sub是subscript的縮寫

29. <sup>表示上標

sup標簽是成對出現的，以<sup>開始，以</sup>結束

屬性：

Common ― 一般屬性

sup是superscript的縮寫

30. <tbody> 表示HTML表體

瀏覽器顯示表格時，通常是完全下載表格後，再全部顯示，所以當表格很長時,可以使用tbody分段顯示。

31. <tfoot>表示HTML表腳

表格的表腳tfoot，可以使用單獨的樣式定義表腳，並且在打印時可以在分頁的下部打印表腳。

32. <th>代表HTML表格中的表頭

th標簽是成對出現的,以<th>開始，</th>結束

屬性：

Common ― 一般屬性

abbr ― 代表表頭的簡寫

axis ― 對單元格在概念上分類

colspan ― 一行跨越多列

headers ― 連接表格的數據與表頭

rowspan ― 一列跨越多行

scope ― 定義行或列的表頭

aPgn ― 代表水平對齊方式(left(左對齊) | center(居中對齊) | right(右對齊) | justify)(此屬性應該使用CSS實現)

vaPgn ― 代表垂直對齊方式(top(頂部對齊) | middle(中部對齊) | bottom(下部對齊) | basePne(基線對齊))(此屬性應該使用CSS實現)

th是table header cell的縮寫

示例：

<table width=”80%” border=”1″> <tr> < th>www.renniaofei.com</th> < th>.com域名的數量</th> <th>.cn域名的數量</th> < th>.net域名的數量</th> </tr> <tr> < th>2003年</th> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <th>2004年</th> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <th>2005年</th> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>

33. <thead>表示HTML表頭

表格的頭部thead，可以使用單獨的樣式定義表頭，並且在打印時可以在分頁的上部打印表頭

34. l 標簽 ― 表示一段語句

l標簽是成對出現的，以<l>開始,以</l>結束

屬性：

Common ― 一般屬性

l是Pne of text的縮寫

示例： <l>一行實實在在的文字!</l>

35. <Code>代碼標簽

code標簽是成對出現的，以<code>開始，以</code>結束，常用於顯示源代碼。

36. <fieldset> 表單分組

如果一個頁面的表單項太多，我們最好把它們分組顯示，就像使用p標簽分開段落一樣，可以使用fieldset與legend標簽對表單內容分組。

fieldset標簽是成對出現的，以<fieldset>開始，以</fieldset>結束

一個表單可以有多個<fieldset>，每對<fieldset>為一組，每組內容的描述可以使用legend標簽說明

示例：

<fieldset> <legend>我最喜愛的：</legend> <label for=”computer”>計算機</label> <input type=”checkbox” value=”1″ id=”fav” name=”fav” /> <label for=”trval”>旅遊</label> <input type=”checkbox” value=”2″ id=”fav” name=”fav” /> <label for=”buy”>購物</label> < input type=”checkbox” value=”3″ id=”fav” name=”fav” /> < /fieldset>

标签：html標簽

上一篇
10個最容易犯的HTML標簽錯誤

下一篇
帶你輕鬆打開SVG動畫的大門

36個重要的HTML標簽

1. <!? ?> :注釋

2. <!DOCTYPE>：文檔類型聲明

3. <abbr>：縮寫

4. <acronym>：取首字母的縮寫

5. <area>：定義圖像點擊區域

6. <base>: 定義基URL用於頁面的鏈接與引用

7. <blockquote>：表示引用塊

8. <button> ：定義按鈕

9. <caption>：HTML表格的標題

10. <cite>引用

11. <col> 可以對HTML表格結構化分區後的一個或幾個區域使用同樣的樣式行

12. <colgroup>表示對HTML表格進行結構化的分區,在此分區中可以通過使用col定義每列表格的樣式

13. <dd>代表HTML自定義列表描述

14. del 標簽 ― 定義被刪除的文本

15. <dir> 定義多層目錄列表

16. <dfn> ? 定義標簽

17. <dl> 代表HTML自定義列表

18. <dt>代表HTML自定義列表組

19. <em> 強調標簽

20. <ins> 定義被插入的文本

21. <kbd>標簽表明使用者輸入的文字

22. <map>定義圖像點擊區域的集合

23. <menu> 定義菜單列表

24. <noframes>對不支持框架的設備進行提示

25. <noscript>無法加載腳本時的提示文字

26. <q>

27. <s>定義刪除線的文字

28. <sub>表示下標

29. <sup>表示上標

30. <tbody> 表示HTML表體

31. <tfoot>表示HTML表腳

32. <th>代表HTML表格中的表頭

33. <thead>表示HTML表頭

34. l 標簽 ― 表示一段語句

35. <Code>代碼標簽

36. <fieldset> 表單分組

相關文章：

推薦設計

最新文章

36個重要的HTML標簽

1. <!? ?> :注釋

2. <!DOCTYPE>：文檔類型聲明

3. <abbr>：縮寫

4. <acronym>： 取首字母的縮寫

5. <area>： 定義圖像點擊區域

6. <base>: 定義基URL用於頁面的鏈接與引用

7. <blockquote>：表示引用塊

8. <button> ：定義按鈕

9. <caption>：HTML表格的標題

10. <cite>引用

11. <col> 可以對HTML表格結構化分區後的一個或幾個區域使用同樣的樣式行

12. <colgroup>表示對HTML表格進行結構化的分區,在此分區中可以通過使用col定義每列表格的樣式

13. <dd>代表HTML自定義列表描述

14. del 標簽 ― 定義被刪除的文本

15. <dir> 定義多層目錄列表

16. <dfn> ? 定義標簽

17. <dl> 代表HTML自定義列表

18. <dt>代表HTML自定義列表組

19. <em> 強調標簽

20. <ins> 定義被插入的文本

21. <kbd>標簽表明使用者輸入的文字

22. <map>定義圖像點擊區域的集合

23. <menu> 定義菜單列表

24. <noframes>對不支持框架的設備進行提示

25. <noscript>無法加載腳本時的提示文字

26. <q>

27. <s>定義刪除線的文字

28. <sub>表示下標

29. <sup>表示上標

30. <tbody> 表示HTML表體

31. <tfoot>表示HTML表腳

32. <th>代表HTML表格中的表頭

33. <thead>表示HTML表頭

34. l 標簽 ― 表示一段語句

35. <Code>代碼標簽

36. <fieldset> 表單分組

相關文章：

推薦設計

最新文章

4. <acronym>：取首字母的縮寫

5. <area>：定義圖像點擊區域