每一個(gè)HTML標(biāo)簽都有其用法,但我們?cè)趯慔TML代碼時(shí),卻常常舍近求遠(yuǎn),忽略了很多非常重要且特別有用的標(biāo)簽。

既然HTML中定義了這么多標(biāo)簽,而且每種標(biāo)簽都有其用法,我們?yōu)槭裁床槐M量去使用這些標(biāo)簽?zāi)?。下面收集并整理?6個(gè)常被我們遺忘卻非常有用的HTML標(biāo)簽。

1. <!? ?> :注釋

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

文檔類型,會(huì)使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁(yè)并顯示,忽略DTDs,將使網(wǎng)頁(yè)進(jìn)入一種混亂模式(quirks mode)。

示例:

 

XHTML過渡定義類型,此類型可以使用HTML4中的標(biāo)簽

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

 

XHTML嚴(yán)格定義類型,此文檔只可以使用XHTML1中定義的標(biāo)簽

<!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>

說明:簡(jiǎn)稱和縮寫是對(duì)一個(gè)慣用詞組的縮寫表示,一般使用詞組中每個(gè)單詞的首字母,比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一種提取首字母的縮寫.有時(shí)候縮寫經(jīng)常會(huì)在最后加一個(gè)。

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

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

5. <area>: 定義圖像點(diǎn)擊區(qū)域

 

area標(biāo)簽是單獨(dú)出現(xiàn)的,<area />

area標(biāo)簽必須使用在map標(biāo)簽中,而且必須配合img標(biāo)簽使用。

屬性:

 

Common ― 一般屬性

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

alt ― 圖像的提示文字

coords ― 定義可點(diǎn)擊區(qū)域圖形的坐標(biāo)

href ― HTML鏈接源的URL

nohref ― 圖像點(diǎn)擊排除的區(qū)域,當(dāng)不使用href時(shí)應(yīng)使用nohref

shape ― 可點(diǎn)擊區(qū)域的形狀

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

target ― 鏈接目標(biāo)

 

 

area是cPent-side image map area的意思,區(qū)域

 

area標(biāo)簽示例:

<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

6. <base>: 定義基URL用于頁(yè)面的鏈接與引用

 

base標(biāo)簽是單獨(dú)出現(xiàn)的,<base />

base標(biāo)簽只能放置在head標(biāo)簽內(nèi)

當(dāng)使用相對(duì)路徑定義鏈接時(shí),可以使用base標(biāo)簽定義基URL解析所有文檔中定義的相對(duì)路徑的URL

屬性:

 

href ― 基URL

target ― 鏈接目標(biāo)

 

 

base是document base URI的意思

 

base標(biāo)簽示例

<head> <base href=”http://www.renniaofei.com/” target=”_blank”> </head>

使用上面示例代碼的html頁(yè)面中的相對(duì)鏈接,將直接指向基URL http://www.renniaofei.com/,并且使用彈出窗口。

base標(biāo)簽在框架中的使用

base標(biāo)簽通??梢允褂迷诳蚣苕溄又校?br /> <frameset cols=”20%, *”> <frame src=”Pst.html”> <frame src=”http://www.renniaofei.com/” name=”mainTarget”> < /frameset>

鏈接頁(yè)P(yáng)st.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>

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

7. <blockquote>:表示引用塊

 

blockquote標(biāo)簽是成對(duì)出現(xiàn)的,以<blockquote>開始,以</blockquote>結(jié)束

屬性:

 

Common ― 一般屬性

cite ― 被引用內(nèi)容的URI

 

 

 

示例:

<blockquote cite=”http://www.renniaofei.com/xhtml/”> <p>標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)要區(qū)分內(nèi)容與表現(xiàn),學(xué)習(xí)標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)。</p> </blockquote>

8. <button> :定義按鈕

 

button標(biāo)簽是成對(duì)出現(xiàn)的,以<button>開始,</button>結(jié)束

可以定義比input內(nèi)容更豐富的按鈕。

屬性:

 

Common ― 一般屬性

accesskey ― 快捷鍵訪問方式

disabled ― 禁止使用

name ― 標(biāo)簽名稱

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

type ― 按鈕類型

 

button ― 普通按鈕

reset ― 重置表單按鈕

submit ― 提交按鈕

 

 

value ― 通過表單傳遞到服務(wù)器端的數(shù)據(jù)

 

 

button是push button的意思,按鈕

 

button標(biāo)簽示例:

<button type=”submit”>提交</button>

一個(gè)使用文字的普通的提交按鈕

<button type=”reset”> 從<strong>任鳥飛</strong>提交表單 </button>

改變按鈕內(nèi)加重文字的button標(biāo)簽

<button type=”button”> <img src=”renniaofei.png” alt=”提交” /></button>

說明:使用圖片的button標(biāo)簽,注意有alt的提示文字。

9. <caption>:HTML表格的標(biāo)題

 

caption標(biāo)簽是成對(duì)出現(xiàn)的,以<caption>開始。</caption>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

caption:標(biāo)題

 

示例:

<table width=”80%”> <caption> 域名數(shù)量介紹 < /caption> <tr> < th>www.renniaofei.com</th> < th>.com域名的數(shù)量</th> <th>.cn域名的數(shù)量</th> < th>.net域名的數(shù)量</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標(biāo)簽可以為表格提供一個(gè)描述,和圖像的說明alt比較類似.默認(rèn)情況下,瀏覽器顯示表格標(biāo)題在表格的上方。

CSS里的caption-side屬性用來控制表格標(biāo)題顯示的位置。

 

10. <cite>引用

 

cite標(biāo)簽是成對(duì)出現(xiàn)的,以<cite>開始,以</cite>結(jié)束

屬性:

 

Common ― 一般屬性

cite ― 引用內(nèi)容的URI

 

 

cite是citation的縮寫

 

示例:

<cite cite=”http://www.renniaofei.com/”>一步步的教我學(xué)會(huì)HTML與XHTML</cite>

11. <col> 可以對(duì)HTML表格結(jié)構(gòu)化分區(qū)后的一個(gè)或幾個(gè)區(qū)域使用同樣的樣式行

 

col標(biāo)簽是單獨(dú)出現(xiàn)的,<col />

屬性:

 

Common ― 一般屬性

span ― 定義一個(gè)col跨越的列數(shù),默認(rèn)值為1

 

 

 

12. <colgroup>表示對(duì)HTML表格進(jìn)行結(jié)構(gòu)化的分區(qū),在此分區(qū)中可以通過使用col定義每列表格的樣式

 

colgroup標(biāo)簽是成對(duì)出現(xiàn)的,以<colgroup>開始,以</colgroup>結(jié)束

屬性:

 

Common ― 一般屬性

span ― 定義一個(gè)colgroup跨越的列數(shù),默認(rèn)值為1

 

 

 

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

 

dd標(biāo)簽是成對(duì)出現(xiàn)的,,以<dd>開始,</dd>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

dd是definition description的縮寫

 

14. del 標(biāo)簽 ― 定義被刪除的文本

 

del標(biāo)簽是成對(duì)出現(xiàn)的,以<del>開始,</del>結(jié)束

del通常應(yīng)連同ins標(biāo)簽一同使用,表示被刪除與被插入的文本

通過del與ins定義文檔可以幫助了解文檔內(nèi)容的修改過程,利于多人編輯系統(tǒng)

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

屬性:

 

Common ― 一般屬性

cite ― 引用網(wǎng)址,定義為何刪除的引用網(wǎng)址

datetime ― 刪除的時(shí)間與日期

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

 

 

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

 

del標(biāo)簽示例:

<p>任鳥飛網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)址 <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> 網(wǎng)址已經(jīng)刪除。 </p>

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

 

不符合標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的理念,不贊成使用.

dir標(biāo)簽是成對(duì)出現(xiàn)的,以<dir>開始,</dir>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

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

 

16. <dfn> ? 定義標(biāo)簽

 

dfn標(biāo)簽是成對(duì)出現(xiàn)的,以<dfn>開始,以</dfn>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

dfn是defining instance的縮寫

 

示例: <dfn>任鳥飛</dfn>網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)!

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

 

dl標(biāo)簽是成對(duì)出現(xiàn)的,以<dl>開始,</dl>結(jié)束

自定義列表的開始使用<dl>標(biāo)簽,列表中每個(gè)元素的標(biāo)題使用<dt>(definition term)定義,后面跟隨<dd>(definition description)用于描述列表中元素的內(nèi)容.

屬性:

 

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>

說明:

不一定每個(gè)dt標(biāo)簽要對(duì)應(yīng)一個(gè)dd,可以一對(duì)多或多對(duì)一(就像上面的例子)

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

 

dt標(biāo)簽是成對(duì)出現(xiàn)的,以<dt>開始,</dt>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

dt是definition term的縮寫

 

19. <em> 強(qiáng)調(diào)標(biāo)簽

 

em標(biāo)簽是成對(duì)出現(xiàn)的,以<em>開始,以</em>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

em是emphasis的縮寫

 

示例: 強(qiáng)調(diào)一下,<em>不要</em>和我開玩笑!

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

 

ins標(biāo)簽是成對(duì)出現(xiàn)的,以<ins>開始,</ins>結(jié)束

ins通常應(yīng)連同del標(biāo)簽一同使用,表示被插入與被刪除的文本

通過ins與del定義文檔可以幫助了解文檔內(nèi)容的修改過程,利于多人編輯系統(tǒng)

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

屬性:

 

Common ― 一般屬性

cite ― 引用網(wǎng)址,定義為何插入的引用網(wǎng)址

datetime ― 插入的時(shí)間與日期

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

 

 

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

 

ins標(biāo)簽示例:

<p>任鳥飛網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)址 <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> 網(wǎng)址已經(jīng)刪除。 </p>

21. <kbd>標(biāo)簽表明使用者輸入的文字

 

kbd標(biāo)簽是成對(duì)出現(xiàn)的,以<kbd>開始,以</kbd>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

 

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

22. <map>定義圖像點(diǎn)擊區(qū)域的集合

 

map標(biāo)簽是成對(duì)出現(xiàn)的,以<map>開始,</map>結(jié)束

map標(biāo)簽必須配合area標(biāo)簽使用

map標(biāo)簽中name與id屬性指定的值必須與定義圖像點(diǎn)擊區(qū)中圖像(img)的usemap屬性指定的值一致

屬性

 

Common ― 一般屬性

id ― 定義map的名稱。

name ― 定義map的名稱。

 

 

map是cPent-side image map的意思

 

map標(biāo)簽示例:

<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

23. <menu> 定義菜單列表

 

不符合標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的理念,不贊成使用。

menu標(biāo)簽是成對(duì)出現(xiàn)的,以<menu>開始,</menu>結(jié)束

屬性

 

Common ― 一般屬性

 

 

menu:菜單

 

24. <noframes>對(duì)不支持框架的設(shè)備進(jìn)行提示

 

noframes標(biāo)簽是成對(duì)出現(xiàn)的,以<noframes>開始,</noframes>結(jié)束

由于frameset內(nèi)不能包含body標(biāo)簽,因此noframes內(nèi)部必須包含body標(biāo)簽

 

示例

<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>任鳥飛網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)使用了框架技術(shù),但是您的瀏覽器不支持框架,請(qǐng)升級(jí)您的瀏覽器以便正常訪問。</p> < /body> </noframes> </frameset>

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

 

noscript標(biāo)簽是成對(duì)出現(xiàn)的,以<noscript>開始,以</noscript>結(jié)束

 

示例

<noscript>此頁(yè)面無法加載js腳本代碼。</noscript>

26. <q>

表示一個(gè)行引用

 

q標(biāo)簽是成對(duì)出現(xiàn)的,以<q>開始,以</q>結(jié)束。

屬性:

 

Common ― 一般屬性

cite ― 引用內(nèi)容的URI

 

 

q是quoted text的縮寫

 

示例:

<cite>古人</cite>云:<q>良言一句三冬暖,惡語傷人六月寒。</q>

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

 

不符合標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的理念,不贊成使用。

s標(biāo)簽是成對(duì)出現(xiàn)的,以<s>開始,以</s>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

s是strikethrough的縮寫

 

28. <sub>表示下標(biāo)

 

sub標(biāo)簽是成對(duì)出現(xiàn)的,以<sub>開始。以</sub>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

sub是subscript的縮寫

 

29. <sup>表示上標(biāo)

 

sup標(biāo)簽是成對(duì)出現(xiàn)的,以<sup>開始,以</sup>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

sup是superscript的縮寫

 

30. <tbody> 表示HTML表體

瀏覽器顯示表格時(shí),通常是完全下載表格后,再全部顯示,所以當(dāng)表格很長(zhǎng)時(shí),可以使用tbody分段顯示。

31. <tfoot>表示HTML表腳

表格的表腳tfoot,可以使用單獨(dú)的樣式定義表腳,并且在打印時(shí)可以在分頁(yè)的下部打印表腳。

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

 

th標(biāo)簽是成對(duì)出現(xiàn)的,以<th>開始,</th>結(jié)束

屬性:

 

Common ― 一般屬性

abbr ― 代表表頭的簡(jiǎn)寫

axis ― 對(duì)單元格在概念上分類

colspan ― 一行跨越多列

headers ― 連接表格的數(shù)據(jù)與表頭

rowspan ― 一列跨越多行

scope ― 定義行或列的表頭

aPgn ― 代表水平對(duì)齊方式(left(左對(duì)齊) | center(居中對(duì)齊) | right(右對(duì)齊) | justify)(此屬性應(yīng)該使用CSS實(shí)現(xiàn))

vaPgn ― 代表垂直對(duì)齊方式(top(頂部對(duì)齊) | middle(中部對(duì)齊) | bottom(下部對(duì)齊) | basePne(基線對(duì)齊))(此屬性應(yīng)該使用CSS實(shí)現(xiàn))

 

 

th是table header cell的縮寫

 

示例:

<table width=”80%” border=”1″> <tr> < th>www.renniaofei.com</th> < th>.com域名的數(shù)量</th> <th>.cn域名的數(shù)量</th> < th>.net域名的數(shù)量</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,可以使用單獨(dú)的樣式定義表頭,并且在打印時(shí)可以在分頁(yè)的上部打印表頭

34. l 標(biāo)簽 ― 表示一段語句

 

l標(biāo)簽是成對(duì)出現(xiàn)的,以<l>開始,以</l>結(jié)束

屬性:

 

Common ― 一般屬性

 

 

l是Pne of text的縮寫

 

示例: <l>一行實(shí)實(shí)在在的文字!</l>

35. <Code>代碼標(biāo)簽

code標(biāo)簽是成對(duì)出現(xiàn)的,以<code>開始,以</code>結(jié)束,常用于顯示源代碼。

36. <fieldset> 表單分組

如果一個(gè)頁(yè)面的表單項(xiàng)太多,我們最好把它們分組顯示,就像使用p標(biāo)簽分開段落一樣,可以使用fieldset與legend標(biāo)簽對(duì)表單內(nèi)容分組。

 

fieldset標(biāo)簽是成對(duì)出現(xiàn)的,以<fieldset>開始,以</fieldset>結(jié)束

一個(gè)表單可以有多個(gè)<fieldset>,每對(duì)<fieldset>為一組,每組內(nèi)容的描述可以使用legend標(biāo)簽說明

 

示例:

<fieldset> <legend>我最喜愛的:</legend> <label for=”computer”>計(jì)算機(jī)</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”>購(gòu)物</label> < input type=”checkbox” value=”3″ id=”fav” name=”fav” /> < /fieldset>

標(biāo)簽:html標(biāo)簽

隨機(jī)推薦