木桶原理很適用于網(wǎng)站設(shè)計(jì)，一個(gè)網(wǎng)站的好壞取決于網(wǎng)站服務(wù)器、網(wǎng)站程序、頁(yè)面設(shè)計(jì)、HTML代碼、網(wǎng)站內(nèi)容、維護(hù)，這六大部分相當(dāng)于圍成一個(gè)木桶的六塊木板，決定網(wǎng)站性能的不是最長(zhǎng)的那塊木板，而是最短的那塊，因?yàn)?，如果網(wǎng)站服務(wù)器或?qū)拵нB通性不好，再好的網(wǎng)站放在那里也是打不開(kāi)；而如果網(wǎng)站程序很糟糕，讓頁(yè)面執(zhí)行5秒以上才顯示頁(yè)面，這也讓用戶無(wú)法忍受 ；而網(wǎng)站頁(yè)面設(shè)計(jì)的不好或者網(wǎng)站無(wú)有價(jià)值的內(nèi)容，就算用戶看了你的網(wǎng)站，也會(huì)選擇立即離開(kāi)； 而HTML代碼決定了網(wǎng)站最終傳遞給用戶的頁(yè)面瀏覽效果，如果做不好，則會(huì)前功盡棄。所以，方維網(wǎng)絡(luò)提醒大家不要讓HTML代碼成為網(wǎng)站設(shè)計(jì)中的短板。


影響HTML代碼的元素?zé)o外乎HTML、CSS、JS，所以需要從這三方面著手，只要這些都做好了，頁(yè)面代碼就會(huì)成為網(wǎng)站設(shè)計(jì)中的長(zhǎng)板。做好這些需要注意以下幾點(diǎn)：

注意頁(yè)面代碼的執(zhí)行順序
HTML頁(yè)面是從上到下執(zhí)行的，注意到這一點(diǎn)，讓網(wǎng)站主要的內(nèi)容優(yōu)先顯示出來(lái)，而其他的廣告、流量統(tǒng)計(jì)代碼等則放在最后。

網(wǎng)站整體布局
很多人，尤其是初學(xué)者大量使用Table標(biāo)簽，原因可能是對(duì)其他標(biāo)簽不熟悉或使用其他標(biāo)簽不能做到很好的瀏覽器兼容性，可是，有沒(méi)有發(fā)覺(jué)，一個(gè)Table所使用的代碼不但比較多、加載比較慢、不易控制而且修改維護(hù)難，所以盡量使用DIV來(lái)構(gòu)架整體布局。

HTML標(biāo)簽的選用
標(biāo)簽是HTML的基本元素，方維網(wǎng)絡(luò)呼吁用最適合的標(biāo)簽表達(dá)相應(yīng)的內(nèi)容，如網(wǎng)站的名稱用H1標(biāo)簽，列表用UL或OL標(biāo)簽等， 很多人對(duì)DIV+CSS布局存在誤解，認(rèn)為DIV+CSS布局的網(wǎng)站不能用Table，其實(shí)上面所說(shuō)的是整體布局，如果內(nèi)容是表格，當(dāng)然用Table比較好。

樣式都應(yīng)放在單獨(dú)的CSS文件里
當(dāng)HTML代碼和樣式都混在一起的時(shí)候，對(duì)網(wǎng)站的修改維護(hù)會(huì)帶來(lái)非常大的麻煩，而把樣式放在單獨(dú)的CSS文件里調(diào)用，可以提高樣式的重用性、讓HTML代碼非常清晰有條理，而且CSS文件是有緩存的，打開(kāi)第二個(gè)頁(yè)面就不用重新下載，可以提高頁(yè)面打開(kāi)速度。

Javascript代碼應(yīng)盡量放在頁(yè)面底部
同CSS文件一樣，JS文件也最好放在單獨(dú)的文件里調(diào)用。因?yàn)镠TML頁(yè)面是順序解析，中間加載JS代碼，會(huì)導(dǎo)致頁(yè)面加載的速度變慢，如果沒(méi)有必要，最好把JS代碼放在頁(yè)面底部，尤其是流量統(tǒng)計(jì)代碼、在線客服代碼、分享代碼等。

盡量合并CSS和JS文件
頁(yè)面引用一個(gè)CSS文件或JS文件需要建立一個(gè)請(qǐng)求，而請(qǐng)求越多，頁(yè)面加載越慢，所以，盡量減少頁(yè)面請(qǐng)求數(shù)量，合并頁(yè)面的CSS文件和JS文件可以加快頁(yè)面加載速度。

壓縮CSS和JS文件
網(wǎng)上有很多相應(yīng)的CSS文件和JS文件壓縮工具，主要是去掉其中的空格和換行，可以減少文件的大小，從而減少寬帶流量，加快頁(yè)面顯示。

圖片大小聲明
如果圖片大小不做定義，則頁(yè)面需要重新渲染，會(huì)影響頁(yè)面加載速度，所以給頁(yè)面的每個(gè)圖片加上大小吧。

注意瀏覽器兼容性
現(xiàn)在國(guó)內(nèi)使用的瀏覽器主要是IE系列（IE6、IE7、IE8、IE9）和FireFor瀏覽器，當(dāng)網(wǎng)站代碼寫(xiě)完后，應(yīng)盡量測(cè)試多個(gè)瀏覽器，如果發(fā)現(xiàn)不兼容，可以采用CSS HACK手段使其兼容，一般只要寫(xiě)法規(guī)范，注意一些特殊標(biāo)簽的使用，都會(huì)兼容。

用JS加載需要點(diǎn)擊或者過(guò)段時(shí)間才顯示的內(nèi)容
很多情況下，如圖片切換，幾張大圖，如果頁(yè)面打開(kāi)時(shí)就加載，速度會(huì)大打折扣，而如果開(kāi)始只加載第一張，然后等其他元素都加載完后才加載其他圖片，則可以讓頁(yè)面打開(kāi)速度增快很多。

使用圖片ALT屬性
搜索引擎只識(shí)別文字，不能識(shí)別圖片，不過(guò)能識(shí)別圖片標(biāo)簽的ALT屬性，為了讓頁(yè)面對(duì)搜索引擎更友好，給每個(gè)圖片加上ALT屬性說(shuō)明吧。

不要忘記Keywords和Description屬性
這兩個(gè)標(biāo)簽雖然對(duì)頁(yè)面瀏覽無(wú)影響，但是對(duì)搜索引擎很重要，跟前面圖片的alt屬性一樣，都是為了讓網(wǎng)站對(duì)搜索引擎更友好。


綜上所述，理解HTML代碼的加載順序，用最簡(jiǎn)短的代碼讓頁(yè)面最快的打開(kāi)，而且完美運(yùn)行在各種瀏覽器上，HTML代碼書(shū)寫(xiě)就不會(huì)成為網(wǎng)站設(shè)計(jì)中短板。