制作網(wǎng)頁(yè)并不難，只要有一個(gè)文本編輯器，買本入門書，幾分鐘就可以動(dòng)手做出一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)來。但是，要做一個(gè)好的網(wǎng)頁(yè)，卻不是一件容易的事情，任何一個(gè)有經(jīng)驗(yàn)的攻城師都知道，工作中的最大考驗(yàn)和最不可回避的問題就是“變化”。我們?cè)谥谱骶W(wǎng)頁(yè)的適合，不經(jīng)要實(shí)現(xiàn)需求，更重要的是要考慮實(shí)現(xiàn)代碼的可維護(hù)性，為未來可能出現(xiàn)的“變化”提前做好準(zhǔn)備。
 
要編寫高質(zhì)量易維護(hù)的代碼首先要熟悉web標(biāo)準(zhǔn)，即結(jié)構(gòu)、樣式和行為的分離。
 
W3C是一個(gè)專門負(fù)責(zé)制定網(wǎng)頁(yè)標(biāo)準(zhǔn)的非營(yíng)利性組織，致力于結(jié)束網(wǎng)頁(yè)制作領(lǐng)域混亂不堪的局面，Web標(biāo)準(zhǔn)就是由W3C組織推行的。Web標(biāo)準(zhǔn)由一系列標(biāo)準(zhǔn)組合而成，齊核心理念就是將網(wǎng)頁(yè)的結(jié)構(gòu)、樣式和行為分離開來，所以它可以分為三大部分：結(jié)構(gòu)標(biāo)準(zhǔn)、樣式標(biāo)準(zhǔn)和行為標(biāo)準(zhǔn)。結(jié)構(gòu)標(biāo)準(zhǔn)包括XML標(biāo)準(zhǔn)、XHTML標(biāo)準(zhǔn)、HTML標(biāo)準(zhǔn)；樣式標(biāo)準(zhǔn)主要是指CSS標(biāo)準(zhǔn)；行為標(biāo)注主要包括DM標(biāo)準(zhǔn)和ECMAScirpt標(biāo)準(zhǔn)。
 
一個(gè)符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)，標(biāo)簽中的標(biāo)簽名應(yīng)該全部都是小寫的，屬性要加上引號(hào)，樣式和行為不再夾雜在標(biāo)簽中，而應(yīng)該分別單獨(dú)存放在樣式文件和腳本文件中。理想狀態(tài)下，網(wǎng)頁(yè)源代碼由三個(gè)部分組成：.html文件、.css文件和.js文件。
關(guān)于高質(zhì)量的HTML每個(gè)標(biāo)簽都有語(yǔ)義，所以我們應(yīng)該使用有語(yǔ)義的標(biāo)簽，而且搜索引擎看不到視覺效果，看到的只有代碼，只能通過標(biāo)簽來判斷內(nèi)容的語(yǔ)義。
先確定HTML，確定語(yǔ)義的標(biāo)簽，再來選用使用的CSS。
如何判斷網(wǎng)頁(yè)標(biāo)簽語(yǔ)義是否良好：去掉樣式，看網(wǎng)頁(yè)結(jié)構(gòu)是否組織良好有序，是否仍然有很好的可讀性。
語(yǔ)義化標(biāo)簽應(yīng)該注意的問題：
 

 

關(guān)于高質(zhì)量的CSS

模擬化css,也就是說將面向?qū)ο缶幊趟枷胍玫浇M織css中，使用單一職責(zé)原理來劃分模塊。
1、模塊與模塊之間盡量不要包含相同的部分，如果有相同部分，應(yīng)將它們提取出來，拆分成一個(gè)獨(dú)立的模塊。
2、模塊應(yīng)在保證數(shù)量盡可能少的原則下，做到盡可能簡(jiǎn)單，以提高重用性。
css命名建議：駱駝命名法用于區(qū)分不同單詞，劃線用于表示從屬關(guān)系
在使用樣式的時(shí)候，是掛多個(gè)class還是新建class，建議多用組合，少用繼承。因?yàn)檫@樣一方面減少了代碼量，提高了可維護(hù)性，另一方面使類的職責(zé)更單一，增加了類的重用性，提高了開發(fā)效率。
（相鄰的margin-left和margin-right是不會(huì)重合的，但相鄰的margin-top和margin-bottom會(huì)產(chǎn)生重合）