自從W3C搞了一個(gè)Xhtml1.0的標(biāo)準(zhǔn)之后，很多網(wǎng)站都開始用之將站點(diǎn)重構(gòu)，像yahoo，163，CSDN等，近來一段時(shí)間Xhtml+CSS2的熱潮更是一浪高過一浪，所以偶也開始學(xué)起了，慢慢的就愛上他們了，現(xiàn)在談一談最近一段時(shí)間來的學(xué)習(xí)體會。   

為什么要學(xué)Xhtml+CSS2  

首先，規(guī)范的代碼能在各種瀏覽器中順利顯示。  

一些不規(guī)范代碼的網(wǎng)頁在IE下能正常顯示的，在Firefox和Opera上可能就無法正常顯示。雖然現(xiàn)在瀏覽器的主流是IE以及以IE為內(nèi)核的各種瀏覽器，但不排除Firefox以及Opera等瀏覽器等逐漸增大的用戶群，而這些人群多是對計(jì)算機(jī)較為精通的老鳥，被他們罵自己網(wǎng)站太垃圾的話我想滋味應(yīng)該不好受，呵呵。  
當(dāng)然這也不是說使用table等做的網(wǎng)頁就不符合標(biāo)準(zhǔn)，只是當(dāng)前不少人習(xí)慣用Forntpage或是Dreamweaver來做設(shè)計(jì)，這些可視化的軟件固然方便，但由此帶來的問題也是多多，這些軟件多多少少會自動增減一些代碼，如果沒有查看代碼的習(xí)慣的話，很容易致使產(chǎn)生一下不規(guī)范代碼。  

其次，DIV + CSS2使頁面布局更加簡單  
說是Xhtml+CSS2，其實(shí)更多的時(shí)候是DIV+CSS2來構(gòu)建網(wǎng)站。之前對頁面進(jìn)行布局或設(shè)置一下不錯(cuò)的效果的話，多采用大量的表格嵌套，通常對一個(gè)頁面進(jìn)行劃分，多用單元格來描述區(qū)域，這樣在WYSIWYG等軟件中倒是比較直觀，但這樣影響的有幾個(gè)方面，首先可能影響下載速度，其次對于手寫代碼來講，這樣的結(jié)構(gòu)非常不直觀，另外，牽扯到一個(gè)地方就是單元格的合并，假如你不小心搞錯(cuò)了一個(gè)colspan="？"，那么整個(gè)頁面的布局將面目全非。  
而用CSS做布局，就像是在PS中對圖層進(jìn)行操作一樣，因?yàn)镃SS中有相對和絕對的概念，呵呵，這樣對頁面的布局就更加輕松和方便了。  

另外，Xhtml可以減小文件體積  
雖說現(xiàn)在網(wǎng)速越來越大了，但誰不想自己的站點(diǎn)速度更快呢，有人還曾經(jīng)說“世上最遠(yuǎn)的距離不是地球到太陽，而是中國電信到中國網(wǎng)通”，如果你在電信服務(wù)器上的站點(diǎn)被網(wǎng)通線路的用戶瀏覽，網(wǎng)頁文件大小勢必也會影響瀏覽者的感受。而采用Xhtml則利于你解決這個(gè)問題，呵呵。  

鑒于以上幾點(diǎn)，我開始逐漸習(xí)慣使用Xhtml+CSS2來構(gòu)建網(wǎng)站。  

學(xué)習(xí)中的心得體會  

代碼編寫工具：由于現(xiàn)在還沒有可視化的工具來編寫Xhtml+CSS2頁面，所以找到一個(gè)適合自己的代碼書寫工具是必須的，我一直在用Editplus，也像你推薦它，關(guān)于Editplus的一些使用技巧，可以看這里：  
http://www.ifess.com/?p=23  

頁面布局結(jié)構(gòu)：對一個(gè)頁面首先要有一個(gè)整體的布局，比如，header，menu，sidebar，content，footer等，通過定義這些元素的CSS屬性給頁面一個(gè)整體的劃分，之后在這些元素中再寫具體的內(nèi)容，這樣就不會讓頁面看起來很亂。  

CSS寫法：一個(gè)項(xiàng)目中，定義內(nèi)容屬性和結(jié)構(gòu)布局屬性的屬性值可以分開寫，這樣方便查找和修改。盡量減少重復(fù)定義，能繼承的屬性就不要再重復(fù)編寫了。盡量使用兼容IE和Firefox的CSS屬性值，因?yàn)橛行傩詫懗鰜碇鬅o法正常顯示就等于做了無用功。  

Xhtml文件：盡量采用外掛鏈接來調(diào)用CSS文件，對于只出現(xiàn)一次的CSS屬性也可以采用文件內(nèi)部書寫的方式。書寫代碼時(shí)最好寫注釋，同時(shí)一定要注意對齊的格式，這樣便于查錯(cuò)。  

暫時(shí)想起來這么些，歡迎大家來一起討論。  

下面附一些常用的資源及鏈接：  

CSS2.0中文手冊，韓國商業(yè)網(wǎng)站設(shè)計(jì)分析，色標(biāo)2004，JS手冊：  
http://www.im286.com/viewthread.php?tid=875287  
Xhtml1.0校驗(yàn)頁面：  
http://validator.w3.org/checklink  
CSS校驗(yàn)頁面：  
http://jigsaw.w3.org/css-validator/  
CSS在線優(yōu)化：  
http://flumpcakes.co.uk/css/optimiser/ 


文章出處：http://www.ifess.com/?p=70 作者：落伍 Ipv6，轉(zhuǎn)載請注明。

最新評論