推薦：教你如何用人民幣購(gòu)買(mǎi)LunarPages主機(jī)
由于在站長(zhǎng)站曾提到我用的是美國(guó)Lunarpages的虛擬主機(jī)，就有朋友向我咨詢，說(shuō)在網(wǎng)上看到很多推薦、代購(gòu)美國(guó)Lunarpages主機(jī)的網(wǎng)站，而且性價(jià)比遠(yuǎn)遠(yuǎn)低于國(guó)內(nèi)的空間，擔(dān)心有貓膩，特向我詢問(wèn)。因此有必要把我的體會(huì)分享一下。 國(guó)外的空間總體不錯(cuò)，空間和流量都

良好的HTML代碼是一個(gè)漂亮網(wǎng)站的基礎(chǔ)。當(dāng)我教別人CSS的時(shí)候， 我總是首先告訴他們： 良好的CSS只存在于良好的HTML標(biāo)記基礎(chǔ)上。這就好像一間房子需要一個(gè)堅(jiān)固的地基一樣，對(duì)不？ 整潔、語(yǔ)義化的HTML標(biāo)記具有很多的優(yōu)勢(shì)，但卻還是有很多網(wǎng)站使用著并不友好的標(biāo)記寫(xiě)法。

讓我們來(lái)看一些寫(xiě)得并不友好的HTML標(biāo)記， 并針對(duì)這些問(wèn)題進(jìn)行討論，從而學(xué)習(xí)如何書(shū)寫(xiě)整潔規(guī)范的HTML標(biāo)記。

注： Chris Cyier在這里使用了兩個(gè)文檔來(lái)進(jìn)行本文的代碼說(shuō)明： bad code 和 good code 。大家學(xué)習(xí)的時(shí)候請(qǐng)參考著這兩個(gè)文件。

1. 嚴(yán)格的 DOCTYPE

我們要做到這一點(diǎn)，只需要按正確的步驟來(lái)做即可。 沒(méi)必要去討論是否使用HTML 4.01或 XHTML 1.0，兩者都對(duì)我們書(shū)寫(xiě)正確的代碼提出了嚴(yán)格的要求。

 

但無(wú)論如何我們的代碼不應(yīng)該使用任何Tables表格來(lái)進(jìn)行布局， 所以也就沒(méi)必要使用Transitional DOCTYPE.

注： 所謂的DTD就是文檔類型聲明，簡(jiǎn)單來(lái)說(shuō)，就是對(duì)特定文檔所定義的一些規(guī)則，這些規(guī)則包括一系列的元素和實(shí)體的聲明。XHTML文檔類型有三種： STRICT（嚴(yán)格類型）， TRANSITIONAL（過(guò)渡類型）和 FRAMESET（框架類型）。目前，我們使用最多的是TRANSITIONAL，比如本站目前也是使用 XHTML 1.0 TRANSITIONAL。如果你的HTML代碼書(shū)寫(xiě)的還算良好，那把現(xiàn)有的TRANSITIONAL 轉(zhuǎn)為STRICT還是比較方便的。反之，也不用太急著轉(zhuǎn)，個(gè)人覺(jué)得，STRICT更嚴(yán)謹(jǐn)，但用TRANSITIONAL也并沒(méi)有太大影響。

2. Character set & encoding characters

在我們的 《head》 部份， 第一件事情就是聲明字符集。 我們使用了UTF-8， 但是把它放到了 《title》后面。 讓我們把字符集聲明移動(dòng)到最上面，因?yàn)槲覀円�讓瀏覽器在閱讀任何內(nèi)容之前就應(yīng)該知道以何種字符集來(lái)進(jìn)行處理。

 

除了字符集聲明的位置外，《title》中出現(xiàn)的奇怪字符也是需要注意的問(wèn)題，比如最常用的”&“字符，我們應(yīng)該使用字符實(shí)體”&“來(lái)替換它。

3. 適當(dāng)?shù)目s進(jìn)

在書(shū)寫(xiě)代碼的時(shí)候，縮進(jìn)并不會(huì)影響網(wǎng)頁(yè)的外觀，但使用適當(dāng)?shù)目s進(jìn)能使代碼更具可讀性，標(biāo)準(zhǔn)的縮進(jìn)方法是當(dāng)你開(kāi)始一個(gè)新的元素時(shí)縮進(jìn)一個(gè)Tab位（或幾個(gè)空格）。另外，記得，關(guān)閉元素的標(biāo)簽與開(kāi)始標(biāo)簽對(duì)齊。

注： 一些朋友會(huì)嫌書(shū)寫(xiě)代碼的時(shí)候縮進(jìn)比較麻煩，如果僅僅是你一個(gè)人閱讀這份代碼，那可能沒(méi)什么問(wèn)題，你自己覺(jué)得OK就好。但如果是協(xié)作或你的作品是公開(kāi)發(fā)布分享的，那書(shū)寫(xiě)漂亮的可讀化性更高的代碼就很有必要了。

 

4. 使用外部CSS 和 JavaScript

我們有一些CSS代碼已經(jīng)延伸到我們的《head》部分。這是一個(gè)嚴(yán)重的犯規(guī)，因?yàn)樗�它只能適用于單一的HTML網(wǎng)頁(yè)。保持獨(dú)立的CSS文件意味著未來(lái)的網(wǎng)頁(yè)可以鏈接到它們，并使用相同的代碼。Javascript也是同樣的道理。

注： 當(dāng)然，這個(gè)問(wèn)題或許也并不是那么嚴(yán)重。比如作為WordPress主題來(lái)說(shuō)，寫(xiě)在《head》里面的代碼也就作用于所有WordPress頁(yè)面。但把CSS寫(xiě)在《head》里面仍然是個(gè)非常不好的習(xí)慣。

 

5. 正確的標(biāo)簽嵌套

在我們的網(wǎng)站標(biāo)題里面，我們使用《h1》作為網(wǎng)站標(biāo)題標(biāo)簽，這是完美的。并且添加了一個(gè)到首頁(yè)的鏈接，但錯(cuò)誤就出在把鏈接放到了《h1》外面，《a》鏈接包圍了《h1》。這種簡(jiǎn)單的嵌套錯(cuò)誤，大多數(shù)瀏覽器都能良好的處理，但從技術(shù)上來(lái)說(shuō)，這是不行的。

錨鏈接是一個(gè)內(nèi)聯(lián)元素，而《h1》標(biāo)題是一個(gè)區(qū)塊元素，區(qū)塊元素不應(yīng)該被放在內(nèi)聯(lián)元素中。

 

6. 去除不必要的DIV

我不知道誰(shuí)首先發(fā)明，但我喜歡“ divitis ”這個(gè)詞，它指的是在HTML標(biāo)記中過(guò)度的使用divs。在學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的某個(gè)階段，大家學(xué)習(xí)如何使用一個(gè)DIV來(lái)包裹諸多其它元素來(lái)實(shí)現(xiàn)方便的布局和樣式化。這就導(dǎo)致了DIV元素的濫用，需要的地方我們用了，完全不必要的地方我們也用了。

 

在上圖的例子中，我們使用了一個(gè) div （”topNav”） 來(lái)包含了UL列表 （”bigBarNavigation”）。 但DIV和UL都是區(qū)塊元素，所以沒(méi)有必要使用DIV來(lái)包裹UL元素。

7. 使用更好的命名慣例

現(xiàn)在正好談一下命名管理， 在上一條所說(shuō)的示例中，我們的UL使用了ID名稱 “bigBarNavigation.” 其中 “Navigation” 很好的說(shuō)明了該區(qū)塊的內(nèi)容，但 “big” 和 “Bar” 描述的卻是設(shè)計(jì)而不是內(nèi)容。 它可能是在說(shuō)這個(gè)菜單是一個(gè)很大的工具條， 但如果這個(gè)菜單的設(shè)計(jì)變成垂直的，那這個(gè)名稱就會(huì)顯得混亂和不相關(guān)。

 

友好的 class 和 id 名稱 例如 “mainNav，” “subNav，” “sidebar，” “footer，” “metaData，” ，它們描述了所包含的內(nèi)容。 不好的 class 和 id 名稱則描述設(shè)計(jì)， 比如 “bigBoldHeader，” “leftSidebar，” and “roundedBox.”

注： Chris 所強(qiáng)調(diào)的是按內(nèi)容還是按設(shè)計(jì)來(lái)進(jìn)行命名。個(gè)人補(bǔ)充一點(diǎn)： ID和Class名稱使用大寫(xiě)還是小寫(xiě)，或單詞首字母大寫(xiě)。首先，完全的大寫(xiě)單詞是不利于閱讀的，排除。至于完全使用小寫(xiě)還是單詞首字母大寫(xiě)，就看個(gè)人的習(xí)慣了。重要的一點(diǎn)是，不管使用哪種規(guī)則，應(yīng)該保持一致。不要一會(huì)兒純小寫(xiě)，一會(huì)兒又首字母大寫(xiě)，會(huì)很混亂。

另外，我個(gè)人比較迷糊的是，對(duì)比較長(zhǎng)的名稱，是加下劃線“_”， 還是連字符”-”，亦或不用。或者是我想的太復(fù)雜了吧。用哪種都好，保持一致就OK。

8. 把字型排版留給CSS

在菜單的設(shè)計(jì)中，我們一般都使用大寫(xiě)字母。這很簡(jiǎn)單啊，把菜單項(xiàng)寫(xiě)成大寫(xiě)的不就行了？但為了將來(lái)的可擴(kuò)展性，我們不應(yīng)該這么做。在代碼中，我們應(yīng)該仍然使用標(biāo)準(zhǔn)的單詞大小寫(xiě)寫(xiě)法，或完全寫(xiě)成小寫(xiě)。而之后，我們可以通過(guò)CSS來(lái)改變文字的字型，比如通過(guò)text- transform:uppercase; 把字母轉(zhuǎn)換為大寫(xiě)，通過(guò)text-transform:capitalize;把轉(zhuǎn)換為單詞首字母大寫(xiě)。

 

分享：警惕DIV癖 語(yǔ)義化標(biāo)簽頁(yè)面要好好學(xué)習(xí)HTML
眼下，css div已經(jīng)成了一種行業(yè)典型說(shuō)法，甚至已經(jīng)成為職位名稱。作為職業(yè)的頁(yè)面重構(gòu)工作者，不禁對(duì)此無(wú)奈的苦笑。無(wú)需多講，我要說(shuō)的主題也不是css div有什么不對(duì)，我想說(shuō)的是由此說(shuō)法引來(lái)的誤區(qū)和癖好。 絕大部分人開(kāi)始學(xué)網(wǎng)頁(yè)制作，只是一味用DIV標(biāo)簽來(lái)布