您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > xhtml的書寫規(guī)范
xhtml的書寫規(guī)范
文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：651 更新時(shí)間：2010-01-23 16:00 參與評(píng)論
對(duì)于一個(gè)html文檔，怎么書寫符合xhtml 1.0標(biāo)準(zhǔn)？
第一：html文檔第一行加入版本類型聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用來(lái)指明文件語(yǔ)法的定義，這里聲名采用XHTML1.0的寬松（transitional）標(biāo)準(zhǔn)，除此之外還有 嚴(yán)格標(biāo)準(zhǔn)（Strict）和框架標(biāo)準(zhǔn)（Frameset）。而我們最常用的就是寬松標(biāo)準(zhǔn)。
這個(gè)聲明文件大家是不用背下來(lái)的，在做新頁(yè)面的時(shí)候，復(fù)制一個(gè)過(guò)來(lái)就可以了。
第二:我們習(xí)慣給HTML標(biāo)簽里加入可擴(kuò)展標(biāo)記語(yǔ)言命名空間（xmlns）的聲明：
<html xmlns="http://www.w3.org/1999/xhtml" >
這個(gè)同樣是不需要記憶的，直接復(fù)制就可以了。
第三：文檔分為head 和body兩個(gè)部分。
html文檔中在head關(guān)標(biāo)簽后面一定會(huì)跟著body的開標(biāo)簽。html的開標(biāo)簽下面一定跟著head的開標(biāo)簽，body的關(guān)標(biāo)簽下面一定是html的關(guān)標(biāo)簽，這中間都是不能插入任何東西的。head和body在一個(gè)html中有且僅有一個(gè)。如下：
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
在head里面放置的內(nèi)容是不會(huì)再頁(yè)面里顯示的，head中的title標(biāo)簽會(huì)顯示在頁(yè)面的tab部分或者是頂端。要在頁(yè)面中顯示的內(nèi)容放在body里，我前面說(shuō)到的html的標(biāo)簽（http://hi.baidu.com/kuntakinte/blog/item/f7e8ad10a9589bf6c3ce79dc.html）都是放在body里的。head部分可以除了title，必備的還有字符轉(zhuǎn)碼聲名。常用還有鏈接到css的 link，鏈接到j(luò)s的script，放置關(guān)鍵字或者描述的meta等等。
第四：所有標(biāo)簽都必須有相應(yīng)的結(jié)束標(biāo)簽
標(biāo)簽可以分為成對(duì)標(biāo)簽，或者是單標(biāo)簽。成對(duì)標(biāo)簽比如 div span ol ul li select option table tr th td dl dt dd em var span等等，而單標(biāo)簽就比較少了 比如 input img br iframe 等。完整的成對(duì)標(biāo)簽如下：
<div>這是一個(gè)快標(biāo)簽</div> 或者<ol><li>列表項(xiàng)一</li><li>列表項(xiàng)二</li><li>列表項(xiàng)三</li></ol>；
可以看到 每一個(gè)標(biāo)簽都有開標(biāo)前和關(guān)標(biāo)簽組成，內(nèi)容放在開和關(guān)標(biāo)簽之間。
而單標(biāo)簽的標(biāo)簽應(yīng)該這么寫： <br/> <img src="images/1.gif" alt="圖片描述"/> <input type="button" value="按鈕"/> ;像這樣的單標(biāo)簽，是不可能再嵌套任何內(nèi)容的。而我們把斜線(/）放在標(biāo)簽的后尖括號(hào)前面，表示標(biāo)簽結(jié)束。這點(diǎn)跟成對(duì)標(biāo)簽有很大區(qū)別。
（其他標(biāo)簽的特點(diǎn)，不如ol或者ul下面必須跟li，而li必須有ul或者ol做父標(biāo)簽等等，我會(huì)專門寫一篇，這里不做贅述。）
第五：所有標(biāo)簽的元素和屬性的名字都必須使用小寫
這個(gè)很容易做到，也很好理解。當(dāng)你習(xí)慣了用小寫，你就會(huì)覺的使用大寫十分別扭。統(tǒng)一用小寫也顯得代碼十分整齊。
很多人也注意到，我們用大寫也完全沒有問(wèn)題，其實(shí)這是xhtml1.0向前兼容的一種體現(xiàn)，但是我們還是要嚴(yán)格按照要求來(lái)。
第六：所有標(biāo)簽必須合理嵌套，
比如正確的嵌套<div><span><var>1111</var></span></div>
就像一個(gè)一個(gè)大盒子套了一個(gè)小盒子 又套了一個(gè)小盒子，當(dāng)然還可以繼續(xù)嵌套，看起來(lái)十分對(duì)稱。
而不正確的嵌套 <div><span><var>1111</var></div></span>。這里的標(biāo)簽是不對(duì)稱的。你沒法一層一層的拆開盒子，這就是錯(cuò)誤的。
這個(gè)似乎為新手來(lái)說(shuō)還有一定得難度，應(yīng)該是沒有一個(gè)很好的書寫習(xí)慣，所以導(dǎo)致很長(zhǎng)一段時(shí)間，新手都會(huì)犯嵌套不合理的錯(cuò)誤。怎么樣才能不不犯這種錯(cuò)誤，其實(shí)很簡(jiǎn)單，就是有個(gè)好的書寫習(xí)慣，每當(dāng)寫一個(gè)開標(biāo)簽，就接著把關(guān)標(biāo)簽寫出來(lái)，要嵌套的內(nèi)容在開標(biāo)簽和關(guān)標(biāo)簽中間些；而不是先寫了內(nèi)容最后再寫關(guān)標(biāo)簽。另外就是子標(biāo)簽的縮進(jìn)。 這樣不但會(huì)減少標(biāo)簽嵌套不合理的問(wèn)題，還會(huì)讓你的代碼看起來(lái)賞心悅目。
第七：給所有屬性都賦值。
也就是屬性值不能為空，這個(gè)也很好理解，比如input的type屬性。img的alt屬性，都不可以為空。
第八：img必須要有alt屬性。
其實(shí)很多前端開發(fā)人員，不習(xí)慣給img設(shè)alt屬性。其實(shí)alt的作用非常大，首先在圖片不能正常顯示的時(shí)候，圖片所在的位置會(huì)出現(xiàn)alt里對(duì)圖片的描述，讓用戶知道這個(gè)地方本來(lái)是什么樣的圖片；其次部分瀏覽器支持 圖片hover狀態(tài)時(shí)顯示alt的文字描述;再次，搜索引擎在搜索圖片時(shí)，alt里設(shè)置的屬性是其搜索的重點(diǎn)。
第九： < > & 等需要被轉(zhuǎn)碼表示
第一：html文檔第一行加入版本類型聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
用來(lái)指明文件語(yǔ)法的定義，這里聲名采用XHTML1.0的寬松（transitional）標(biāo)準(zhǔn)，除此之外還有 嚴(yán)格標(biāo)準(zhǔn)（Strict）和框架標(biāo)準(zhǔn)（Frameset）。而我們最常用的就是寬松標(biāo)準(zhǔn)。
這個(gè)聲明文件大家是不用背下來(lái)的，在做新頁(yè)面的時(shí)候，復(fù)制一個(gè)過(guò)來(lái)就可以了。
第二:我們習(xí)慣給HTML標(biāo)簽里加入可擴(kuò)展標(biāo)記語(yǔ)言命名空間（xmlns）的聲明：
<html xmlns="http://www.w3.org/1999/xhtml" >
這個(gè)同樣是不需要記憶的，直接復(fù)制就可以了。
第三：文檔分為head 和body兩個(gè)部分。
html文檔中在head關(guān)標(biāo)簽后面一定會(huì)跟著body的開標(biāo)簽。html的開標(biāo)簽下面一定跟著head的開標(biāo)簽，body的關(guān)標(biāo)簽下面一定是html的關(guān)標(biāo)簽，這中間都是不能插入任何東西的。head和body在一個(gè)html中有且僅有一個(gè)。如下：
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
在head里面放置的內(nèi)容是不會(huì)再頁(yè)面里顯示的，head中的title標(biāo)簽會(huì)顯示在頁(yè)面的tab部分或者是頂端。要在頁(yè)面中顯示的內(nèi)容放在body里，我前面說(shuō)到的html的標(biāo)簽（http://hi.baidu.com/kuntakinte/blog/item/f7e8ad10a9589bf6c3ce79dc.html）都是放在body里的。head部分可以除了title，必備的還有字符轉(zhuǎn)碼聲名。常用還有鏈接到css的 link，鏈接到j(luò)s的script，放置關(guān)鍵字或者描述的meta等等。
第四：所有標(biāo)簽都必須有相應(yīng)的結(jié)束標(biāo)簽
標(biāo)簽可以分為成對(duì)標(biāo)簽，或者是單標(biāo)簽。成對(duì)標(biāo)簽比如 div span ol ul li select option table tr th td dl dt dd em var span等等，而單標(biāo)簽就比較少了 比如 input img br iframe 等。完整的成對(duì)標(biāo)簽如下：
<div>這是一個(gè)快標(biāo)簽</div> 或者<ol><li>列表項(xiàng)一</li><li>列表項(xiàng)二</li><li>列表項(xiàng)三</li></ol>；
可以看到 每一個(gè)標(biāo)簽都有開標(biāo)前和關(guān)標(biāo)簽組成，內(nèi)容放在開和關(guān)標(biāo)簽之間。
而單標(biāo)簽的標(biāo)簽應(yīng)該這么寫： <br/> <img src="images/1.gif" alt="圖片描述"/> <input type="button" value="按鈕"/> ;像這樣的單標(biāo)簽，是不可能再嵌套任何內(nèi)容的。而我們把斜線(/）放在標(biāo)簽的后尖括號(hào)前面，表示標(biāo)簽結(jié)束。這點(diǎn)跟成對(duì)標(biāo)簽有很大區(qū)別。
（其他標(biāo)簽的特點(diǎn)，不如ol或者ul下面必須跟li，而li必須有ul或者ol做父標(biāo)簽等等，我會(huì)專門寫一篇，這里不做贅述。）
第五：所有標(biāo)簽的元素和屬性的名字都必須使用小寫
這個(gè)很容易做到，也很好理解。當(dāng)你習(xí)慣了用小寫，你就會(huì)覺的使用大寫十分別扭。統(tǒng)一用小寫也顯得代碼十分整齊。
很多人也注意到，我們用大寫也完全沒有問(wèn)題，其實(shí)這是xhtml1.0向前兼容的一種體現(xiàn)，但是我們還是要嚴(yán)格按照要求來(lái)。
第六：所有標(biāo)簽必須合理嵌套，
比如正確的嵌套<div><span><var>1111</var></span></div>
就像一個(gè)一個(gè)大盒子套了一個(gè)小盒子 又套了一個(gè)小盒子，當(dāng)然還可以繼續(xù)嵌套，看起來(lái)十分對(duì)稱。
而不正確的嵌套 <div><span><var>1111</var></div></span>。這里的標(biāo)簽是不對(duì)稱的。你沒法一層一層的拆開盒子，這就是錯(cuò)誤的。
這個(gè)似乎為新手來(lái)說(shuō)還有一定得難度，應(yīng)該是沒有一個(gè)很好的書寫習(xí)慣，所以導(dǎo)致很長(zhǎng)一段時(shí)間，新手都會(huì)犯嵌套不合理的錯(cuò)誤。怎么樣才能不不犯這種錯(cuò)誤，其實(shí)很簡(jiǎn)單，就是有個(gè)好的書寫習(xí)慣，每當(dāng)寫一個(gè)開標(biāo)簽，就接著把關(guān)標(biāo)簽寫出來(lái)，要嵌套的內(nèi)容在開標(biāo)簽和關(guān)標(biāo)簽中間些；而不是先寫了內(nèi)容最后再寫關(guān)標(biāo)簽。另外就是子標(biāo)簽的縮進(jìn)。 這樣不但會(huì)減少標(biāo)簽嵌套不合理的問(wèn)題，還會(huì)讓你的代碼看起來(lái)賞心悅目。
第七：給所有屬性都賦值。
也就是屬性值不能為空，這個(gè)也很好理解，比如input的type屬性。img的alt屬性，都不可以為空。
第八：img必須要有alt屬性。
其實(shí)很多前端開發(fā)人員，不習(xí)慣給img設(shè)alt屬性。其實(shí)alt的作用非常大，首先在圖片不能正常顯示的時(shí)候，圖片所在的位置會(huì)出現(xiàn)alt里對(duì)圖片的描述，讓用戶知道這個(gè)地方本來(lái)是什么樣的圖片；其次部分瀏覽器支持 圖片hover狀態(tài)時(shí)顯示alt的文字描述;再次，搜索引擎在搜索圖片時(shí)，alt里設(shè)置的屬性是其搜索的重點(diǎn)。
第九： < > & 等需要被轉(zhuǎn)碼表示
很簡(jiǎn)單的例子，如果我想讓用戶在頁(yè)面里看到的信息是 <div>是一個(gè)塊屬性標(biāo)簽。我們是不能直接打出來(lái)的。 因?yàn)闉g覽器會(huì)把<div>當(dāng)成一個(gè)標(biāo)簽來(lái)處理，而不會(huì)顯示出來(lái)。這時(shí)候我們就需要轉(zhuǎn)碼表示
<div>是一個(gè)塊屬性標(biāo)簽。
而&剛好相反，用的情況也比較少，當(dāng)&不是實(shí)體的一部分的時(shí)候，我們需要給它轉(zhuǎn)碼 &
基本上需要注意的就以上這些，熟悉了這些，寫一個(gè)合格的xhtml文件應(yīng)該不在話下。
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇
您可能感興趣的文章:
------分隔線----------------------------
