!!!!讀《html mastery》一書的總結(jié) 前端需要熟練掌握的HTML標(biāo)簽

看見就非常 2013-04-13

展開全文

讀《html mastery》一書的總結(jié),，這本大概寫于2006年的書主要討論的是html4的標(biāo)簽,，而現(xiàn)在2009年w3c于1月22日發(fā)布了最新的html5草案，opera稱其將使flash技術(shù)變得可有可無,，相信不久后普及的html5將給web設(shè)計(jì)帶來些重大變化,，但現(xiàn)在了解些html4的基礎(chǔ)知識顯然是必要的,，何況聽說html5會兼容些本文提到的標(biāo)簽，似乎還是有價值的,。

本文原寫于2009年五月28日,，而HTML5標(biāo)準(zhǔn)已經(jīng)從去年開始大放異彩，所以這里算是個回顧吧,。

1.常用元素

1.1 div與span

這是用得最多的兩個標(biāo)簽,，以后會有專文總結(jié)如何使用好他們，現(xiàn)在必須知道的是前者是block元素,，后者是inline元素,；而block元素與inline元素區(qū)別正如名字告訴我們的那樣：前者是所包含的內(nèi)容是一個整體，幾個block元素間垂直堆疊,，強(qiáng)制后面元素另起一行,；而后者，幾個inline元素水平排列,，相互間只有水平方向上的邊距設(shè)置才會有效,，padding-top，margin-bottom等豎直格式設(shè)置會被忽略,。不添加css,，前者無法并放，后者無法堆疊,。即span內(nèi)部是不能放div的,。

在HTML5中引入了更具有語義的section標(biāo)簽，以及更多具體語義的如article,，header,，footer，aside等標(biāo)簽來替換千篇一律的div

1.2. doctype

它的最實(shí)際與重要的用途是提醒瀏覽器按照標(biāo)準(zhǔn)模式（standard mode）而非怪異模式（quirks mode）來解析html文檔,，XHTML1.0有三種可用:


<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Frameset//EN" "http://www./TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML1.1就只有一個形式：

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.1//EN" "http://www./TR/xhtml1/DTD/xhtml11.dtd">

2. 文檔標(biāo)簽

2.1 p,address與hx,，blockquote

<p>是用來表示新段落的，而不是表示不間斷的空格實(shí)體,，那該用css的padding-bottom實(shí)現(xiàn),。

<address>只用來顯示與本文檔有關(guān)的聯(lián)系信息，是一個block元素,，hCard微格式會經(jīng)常用到,。

<hx>其實(shí)是<h1>到<h6>，記得把<h1>留給最重要的標(biāo)題,，一般只出現(xiàn)一次,，還有此類標(biāo)簽可能以后會被統(tǒng)一的<h>取代，趁能用趕快學(xué)著用吧,。（似乎目前沒有被取代的打算）

<blockquote>用來說明塊引用,，有一個cite屬性讓作者推薦來源

2.2 ul,，ol與dl

無序，有序（按字母或數(shù)字順序）以及定義（表示對話也可以）列表,，列表項(xiàng)使用<li>元素標(biāo)記,，不能含block元素，即<hx>不能包含其中,。

2.3 a 與link

<a>沒啥好多說的,，記得有<a href=”#top”></a>的用法就好，參考文章http://www./skipnav.htm

stylesheet,，用得多了,。start，起點(diǎn),；pre,，next，上下一份文檔,；copyright,，指出版權(quán)聲明，等多了去,。還可以是tag,，有助于標(biāo)簽網(wǎng)站識別，如<a href=”http:///tag/ipod/” ref=”tag”>ipod</a>
還有title,，tabindex,，acesskey屬性，理智應(yīng)用能加強(qiáng)訪問性,，但be careful,。

2.4 del與ins

用于表示文章修訂，有cite屬性與datatime屬性表示修改原因與時間,。

3. 表示型標(biāo)簽

3.1 i與b

并不推薦使用了,，有時可能有用：表示斜體，粗體,，可以使用span代替他們,，或是使用em及strong

3.2. hr,，pre，sup與sub

hr即水平標(biāo)尺（絕不是邊框）,，pre則是留白,，sup上標(biāo)，sub下標(biāo),，都是彌補(bǔ)css用的

4. 短語元素及圖像媒體

4.1 em,strong

不是用來使文本變斜加粗的,，而起強(qiáng)調(diào)作用，如果有讀屏器,，就會發(fā)現(xiàn)語速變化,，比<i>或<b>有用

4.2 cite，dfn

表示引用與定義的標(biāo)簽,，記得ref=“glossary”嗎,？

4.3 code，var,，samp,，kbd

前面兩個用來顯示代碼，后一個描述輸出結(jié)果,，<kbd>指出鍵盤按鍵,。需要指出code標(biāo)簽很坑人，如何正確使用詳見此文

4.4 abbr,，acronym

縮略文章或詞,，在title屬性給出完整版本，縮寫詞的區(qū)別對東方人來說,，不怎么適應(yīng)

4.5 img與object

除非真的是顯示圖片,，否則網(wǎng)頁布局該用css背景；object是嵌入標(biāo)簽,，用起來麻煩,，還是自動生成吧

5. 表格TABLE

5.1 caption，th,，thead,，tfoot，tbody

表格的標(biāo)題,，標(biāo)題行,，表頭區(qū)等，都不知道除tr,，td外還有這么多用于表格

span屬性仍然十分必要,，


<thead>

<tr>

<th>sth</th>

<th>sth</th>

</tr>

</thead>

就該如此寫

5.2 colgroup，col

在表頭區(qū)分格需要這兩個標(biāo)簽，并不實(shí)用,，不如用scope屬性值,，rowspan，colspan等屬性也可,，具體哪種好現(xiàn)在不明,。

6. 表單元素

6.1 form與input，label

用得太多了,，就說form的enctype屬性與input有file類型可用有關(guān),，而reset類型還是別再用了。

6.2 textarea,，fieldset,，legend

前者是大面積輸入的絕佳標(biāo)簽，后者有利表單劃分,，<legend>是塊標(biāo)題,。

web form2.0將給這些來個大變化，趁能用盡量用對吧,。我也不會亂用div和span了,，供選擇的標(biāo)簽有這么多。

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：看見就非常 > 《O2O》

舉報(bào)/認(rèn)領(lǐng)