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