WEB開(kāi)發(fā)中必須了解的HTML標(biāo)簽
這里我們將介紹一些常用的HTML標(biāo)簽，并同時(shí)介紹一些HTML 5標(biāo)簽。希望大家掌握這些HTML標(biāo)簽后，在平時(shí)的開(kāi)發(fā)中能起到事半功倍的效果。
這是我讀《html mastery》一書的總結(jié)，這本大概寫于2006年的書主要討論的是html4的標(biāo)簽，而現(xiàn)在2009年w3c于1月22日發(fā)布了最新的html5草案，opera稱其將使flash技術(shù)變得可有可無(wú)，相信不久后普及的html5將給web設(shè)計(jì)帶來(lái)些重大變化，但現(xiàn)在了解些html4的基礎(chǔ)知識(shí)顯然是必要的，何況聽(tīng)說(shuō)html5會(huì)兼容些本文提到的標(biāo)簽，似乎還是有價(jià)值的。
常用元素
1.div與span
這是用得最多的兩個(gè)標(biāo)簽，以后會(huì)有專文總結(jié)如何使用好他們，現(xiàn)在必須知道的是前者是block元素，后者是inline元素；而block元素與inline元素區(qū)別正如名字告訴我們的那樣：前者是所包含的內(nèi)容是一個(gè)整體，幾個(gè)block元素間垂直堆疊，強(qiáng)制后面元素另起一行；而后者，幾個(gè)inline元素水平排列，相互間只有水平方向上的邊距設(shè)置才會(huì)有效，padding-top，margin-bottom等豎直格式設(shè)置會(huì)被忽略。不添加css，前者無(wú)法并放，后者無(wú)法堆疊。即span內(nèi)部是不能放div的。
2.doctype
它的最實(shí)際與重要的用途是提醒瀏覽器按照標(biāo)準(zhǔn)模式（standard mode）而非怪異模式（quirks mode）來(lái)解析html文檔，XHTML1.0有三種可用:
- <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
- "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.1就只有一個(gè)形式：
- <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.1//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml11.dtd">
文檔標(biāo)簽
3. p,address與hx，blockquote
<p>是用來(lái)表示新段落的，而不是表示不間斷的空格實(shí)體，那該用css的padding-bottom實(shí)現(xiàn)。
<address>只用來(lái)顯示與本文檔有關(guān)的聯(lián)系信息，是一個(gè)block元素，hCard微格式會(huì)經(jīng)常用到。
<hx>其實(shí)是<h1>到<h6>，記得把<h1>留給最重要的標(biāo)題，一般只出現(xiàn)一次，還有此類標(biāo)簽可能以后會(huì)被統(tǒng)一的<h>取代，趁能用趕快學(xué)著用吧。
<blockquote>用來(lái)說(shuō)明塊引用，有一個(gè)cite屬性讓作者推薦來(lái)源
4.ul，ol與dl
無(wú)序，有序（按字母或數(shù)字順序）以及定義（表示對(duì)話也可以）列表，列表項(xiàng)使用<li>元素標(biāo)記，不能含block元素，即<hx>不能包含其中。
5.a 與link
<a>沒(méi)啥好多說(shuō)的，記得有<a href="#top"></a>的用法就好，參考文章http://www.jimthatcher.com/skipnav.htm
<link>可有得研究他和<a>都有兩個(gè)重要屬性：rel以及rev，rel指出該文檔與href指向的鏈接關(guān)系類型，rev則將兩對(duì)象方向互換，可選類型有：alternative，如果是可選譯文，則與lang屬性一起用；如果是可選媒介，則用到media屬性。
stylesheet，用得多了。start，起點(diǎn)；pre，next，上下一份文檔；copyright，指出版權(quán)聲明，等多了去。還可以是tag，有助于標(biāo)簽網(wǎng)站識(shí)別，如<a href=" 還有title，tabindex，acesskey屬性，理智應(yīng)用能加強(qiáng)訪問(wèn)性，但be careful。
6.del與ins
用于表示文章修訂，有cite屬性與datatime屬性表示修改原因與時(shí)間。
表示型標(biāo)簽
7.i與b
并不推薦使用了，有時(shí)可能有用：表示斜體，粗體，代替span用
8. hr，pre，sup與sub
hr即水平標(biāo)尺（絕不是邊框），pre則是留白，sup上標(biāo)，sub下標(biāo)，都是彌補(bǔ)css用的
短語(yǔ)元素及圖像媒體
9. em,strong
不是用來(lái)使文本變斜加粗的，而起強(qiáng)調(diào)作用，如果有讀屏器，就會(huì)發(fā)現(xiàn)語(yǔ)速變化，比<i>或<b>有用
10.cite，dfn
表示引用與定義的標(biāo)簽，記得ref=“glossary”嗎？
11.code，var，samp，kbd
前面兩個(gè)用來(lái)顯示代碼，后一個(gè)描述輸出結(jié)果，<kbd>指出鍵盤按鍵
12.abbr，acronym
縮略文章或詞，在title屬性給出完整版本，縮寫詞的區(qū)別對(duì)東方人來(lái)說(shuō)，不怎么適應(yīng)
13.img與object
除非真的是顯示圖片，否則網(wǎng)頁(yè)布局該用css背景；object是嵌入標(biāo)簽，用起來(lái)麻煩，還是自動(dòng)生成吧
表格table
14.caption，th，thead，tfoot，tbody
表格的標(biāo)題，標(biāo)題行，表頭區(qū)等，都不知道除tr，td外還有這么多用于表格
span屬性仍然十分必要，
- <thead>
- <tr>
- <th>sth</th>
- <th>sth</th>
- </tr>
- </thead>
就該如此寫
15.colgroup，col
在表頭區(qū)分格需要這兩個(gè)標(biāo)簽，并不實(shí)用，不如用scope屬性值，rowspan，colspan等屬性也可，具體哪種更好現(xiàn)在不明。
表單元素
16. form與input，label
用得太多了，就說(shuō)form的enctype屬性與input有file類型可用有關(guān)，而reset類型還是別再用了。
17.textarea，fieldset，legend
前者是大面積輸入的絕佳標(biāo)簽，后者有利表單劃分，<legend>是塊標(biāo)題。
web form2.0將給這些來(lái)個(gè)大變化，趁能用盡量用對(duì)吧。我也不會(huì)亂用div和span了，供選擇的標(biāo)簽有這么多。
本文來(lái)自超然臺(tái)上仙的博客園文章《web設(shè)計(jì)必須學(xué)會(huì)使用的html標(biāo)簽》
【編輯推薦】
