寫Web頁面就像我們建設(shè)房子一樣，地基牢固，房子才不會(huì)倒。同樣的，我們制作Web頁面也一樣，一個(gè)良好的HTML結(jié)構(gòu)是制作一個(gè)美麗的網(wǎng)站的開 始，同樣的，良好的CSS只存在同樣良好的HTML中，所以一個(gè)干凈的，語義的HTML的優(yōu)點(diǎn)很多，那么平時(shí)制作中，我們做到了這一點(diǎn)嗎？我們一起來看一 張圖片：
上圖展示了兩段代碼，我想大家都只會(huì)喜歡第一種，我們先不說其語義，至少他的結(jié)構(gòu)讓我們看上 去清爽，而第二種呢？一看就是糟糕的代碼的代碼，讓人討厭的代碼。那么要怎么樣才能寫出一個(gè)好的代碼，整潔的代碼呢？下面我們就從以下十二個(gè)方面一起來學(xué) 習(xí)，只要大家以后在寫代碼的時(shí)候能堅(jiān)持下面的十二個(gè)原則，保準(zhǔn)你的代碼質(zhì)量能上去，而且你寫的代碼會(huì)人見人愛。
一、DOCTYPE的聲明
如果我們想做好一件事情，首先要知道我們有哪些權(quán)利去做，就如“DOCTYPE”的聲明，我們沒有必要去討論是否使用HTML4.01或者XHTML1.0或者說現(xiàn)在的HTML5都提供了嚴(yán)格版本或者過渡版本，這些都能很好的支持我們寫的代碼：
由于我們現(xiàn)在的布局不需要table布局也能做出很好的布局，那么我們就可以考慮不使用過渡型而使用嚴(yán)格型的“DOCTYPE”，為了向后兼容，我建議使用HTML5的聲明模式：
<!DOCTYPE HTML>
<html lang="en-US">
如果想了解更多這方面的知識(shí)，可以點(diǎn)擊：
- W3C: Recommended DTDs to use in your Web document
- Fix Your Site With the Right DOCTYPE!
- No more Transitional DOCTYPEs， please
二、字符集和編碼字符
在每個(gè)頁面的開始中，我們都在<head>中設(shè)置了字符集，我們這里都是使用“UTF-8”
- <meta charset="UTF-8" />
而且我們?cè)谄綍r(shí)寫頁面中時(shí)，時(shí)常會(huì)碰到"&"這樣的符號(hào)，那么我們不應(yīng)該直接在頁面這樣寫“&”:
我們應(yīng)該在代碼中使用字符編碼來實(shí)現(xiàn)，比如說“&”我們?cè)诖a中應(yīng)該使用“&”來代替他。
如果想了解更多這方面的知識(shí)，可以點(diǎn)擊：
三、正確的代碼縮進(jìn)
在頁面編輯中，代碼的縮進(jìn)有沒有正確，他不會(huì)影響你網(wǎng)站的任何功能，但要是你沒有一個(gè)規(guī)范的縮進(jìn)原則，讓讀你代碼的人是非常的生氣，所以說正確的代 碼縮進(jìn)可以增強(qiáng)你的代碼可讀性。標(biāo)準(zhǔn)程序的縮進(jìn)應(yīng)該是一個(gè)制表符（或幾個(gè)空格），形像一點(diǎn)的我們來看下文章開頭那張圖，或者一起來看下面展示的這張圖，你 看后就知道以后自己的代碼要怎么樣書寫才讓人看了爽：
不用說，大家都喜歡下面的那種代碼吧。這只是一個(gè)人的習(xí)慣問題，不過建議從開始做好，利人利已。有關(guān)于這方面的介紹，大家還可以參考：Clean up your Web pages with HTML TIDY。
四、外鏈你的CSS樣式和Javascript腳本
頁面中寫入CSS樣式有很多種方法，有些直接將樣式放入頁面的“<head>”中，這將是一個(gè)很不好的習(xí)慣，因?yàn)檫@樣不僅會(huì)搞亂我們的 標(biāo)記，而且這些樣式只適合這一個(gè)HTML頁面。所以我們需要將CSS單獨(dú)提出，保存在外部，這樣后面的頁面也可以鏈接到這些樣式，如果你頁面需要修改，我 們也只需要修改樣式文件就可以。正如下圖所示：
上面我們所說的只是樣式，其實(shí)javascript腳本也和CSS樣式是同一樣的道理。圖文并說，我最終想表達(dá)的意思是“在制作web頁面中，盡量將你的CSS樣式和javascript腳本單獨(dú)放在一個(gè)文件中，然后通過鏈接的方式引用這些文件，這樣做的最大好處是，方便你的樣式和腳本的管理與修改。”
五、正確的標(biāo)簽嵌套
我們?cè)趯慔TML時(shí)總是需要標(biāo)簽的層級(jí)嵌套來幫我們完成HTML的書寫，但這些HTML的嵌套是有一定的規(guī)則的，如果要細(xì)說的話，我們可能要用幾個(gè)章節(jié)來描述，那么我今天這里要說的是，我們?cè)趯慔TML時(shí)不應(yīng)該犯以下這樣的超級(jí)錯(cuò)誤：
上圖的結(jié)構(gòu)我們是常見的，比如說首頁的標(biāo)題，那么我們就應(yīng)該注意了，不能把“<h1>”放在“<a>”標(biāo)簽中，換句話說，就是不能么塊元素和在行內(nèi)元素中。上面只是一個(gè)例子，只是希望大家在平時(shí)的制作中不應(yīng)該犯這樣的超級(jí)錯(cuò)誤。