1. 使用Firefox
Firefox是你觸手可及的最重要的平台，網站開發時必不可少。並不是說你非得把它作為默認浏覽器——平時上網時，你想用哪個都行。
自Firefox問世，就有一些居家旅行必備擴展隨之產生。如果你想事半功倍立竿見影，快用它們。
必備擴展
Web Developer （Chris Pederick）
這個擴展有很多功能，雖然多數已被FireBug（下文會談到）涵蓋，還是有一些頗為好用的。其中包括：
- 縮放浏覽器窗口
簡單迅速的縮放窗口，800×600、1024×768… 任何指定的尺寸。使用此功能，可以查看各種分辨率下網站的表現。到你的Google Analytics帳戶裡看看哪種分辨率的訪問者最多吧，然後重點為它設計。（FireBug沒這個功能）
- 編輯CSS/Html無需刷新
使用此功能，不必刷新頁面即可修改CSS，並將結果實時呈現於頁面。太節省時間了。（Firebug裡有類似功能，但沒這麼方便）
（Htmlor注：靠，用了這麼久居然都沒發現這個好東西，真是太遜了~） - 查看頁面加載的所有Javascript
使用此功能，可以在一個頁面內查看所有已加載的JS。查看自己或別人的JS代碼，方便的很。（Firebug能顯示出所有JS名稱，但代碼沒有擺在一起，不方便查詢） - 查看生成的源代碼
如果你有用AJax或者Javascript改變頁面內容，此功能絕對實用。因為通常的“查看源文件”模式下，是看不到動態生成的Html代碼的。（Firebug也有此功能）
Firebug （Joe Hewitt）
在辦公室裡，我們常常會問：“還記得沒有Firebug時怎麼過麼？”它確實改變了我的生活。其主要好處如下：
- 檢閱DOM
點擊“Inspect”，然後鼠標放到頁面元件上，就能看到此元件的Html和CSS代碼。 - 顯示樣式繼承的實時CSS編輯
簡直就是錢啊——這大大節省了布局設計的時間。例如，在Firebug裡可以選擇一個DIV標記，點擊margin屬性後手工調整，上下鍵為加減1個像素，上下翻頁鍵為加減10個像素。（Htmlor注：任何數值屬性都可以這樣調整） 還可以在當前樣式添加新屬性。效果滿意之後，再把修改的CSS代碼貼到實際文件中去。 - 詳盡的Javascript調試
這裡的JS控制台比Firefox自帶的稍好。它更詳盡，是默認控制台不錯的替代品。 - 查看頁面加載的所有文件及總字節數
對於優化站點加載時間來說，這很關鍵。你可以測試單個文件會加載多久，圖片，JS文件，AJax調用等。在“Net”部分的最後一行，可以看到頁面加載文件的總字節數。
2. 保持兼容性
保持跨浏覽器的兼容性很重要。對我來說，這是不怎麼好玩的一件事。我之前說過最好在Firefox下開發，但也別忘了檢查一下頁面在IE6、IE7、Safari（或者還有Opera）中的表現。還有，到Google Analytics裡看看你的訪問者都用什麼浏覽器。他們用哪些，你就得重點照顧哪些。
在自己網站的Google Analytics帳戶裡，我親眼目睹了IE6占浏覽器比例的下滑，持續下滑。等到哪天它跌破5%時，我會開個party慶祝一下——因為再也用不著支持它了。
想要不那麼費事的實現兼容，那就簡單一點。比如你為了某種效果在一個浏覽器裡百般調試、費盡周折，它卻很可能在另外的浏覽器裡不好好表現。這就要說到下個建議：少即多。
3. 少即多
把握好分寸。圖形設計，編程，頁面布局，任何事情都需如此。簡單一點。
- 圖形設計
現在有一種濫用漸變、斜角和陰影的態勢。有時候事情如果沒搞好，很可能是東西太多了。簡簡單單、大方得體就好。 - 花哨的Javascript
用一些很酷的JS效果增強用戶界面很好，不過另一方面，它會造成用戶的負擔，尤其是那些沒有像你一樣擁有超級電腦的用戶。此外，還有跨浏覽器不兼容的麻煩。再強調一次，不要對JS倚重太過，什麼事都靠它。如果實在想用JS，我強烈推薦>jQuery。
4. Javascript？就用jQuery
Javascript用來顯示/隱藏信息很棒，它讓頁面空間開闊，不會擠成一堆。想以一種更新更酷更簡單的方式操控JS？一定要試試jQuery。
jQuery
jQuery的主要優點之一：兼容性已廣受各大浏覽器的考驗。也就是說，其所有方法都能保證正常運行。優點之二：極其易用。
jQuery使用CSS的選擇器方式操作對象，讓你隨心所欲的控制它們，一切盡在掌握。例如：
隱藏id為myDiv的DIV裡所有的段落
$('#myDiv p').hide();$('#myDiv p').hide('slow'); // 動畫效果隱藏$('#myDiv p').toggle(); // 點擊顯示，再點擊隱藏
從>這裡了解更多jQuery。
其他類似的Javascript庫也不少，像>mootools、>prototype和>script.aculo.us。
5. AJax要因地制宜
Web 2.0大潮中，Ajax炙手可熱。很多人都問我“你懂Ajax嗎？”，好像它是種獨立的編程語言似的。說白了，AJax只是一種手段而已，它通過與服務器端交互，無需刷新頁面就能獲取和更新數據。
我注意到最近有一種趨勢：無論干什麼都用AJax。這並不總是明智的選擇。原因？
- 訪問量。全盤應用AJax，會損失掉寶貴的PV。
- 可用性。這一點會有爭議，但我認為大多數用戶（可能不包括你）仍舊有個習慣：他們依然把頁面刷新當作某些事件（如表單提交、頁面跳轉等）發生的跡象。
AJax絕對有用武之地，而且某些情況下非它不可。不過重申一遍，少即多。把握分寸，適度使用Javascript和AJax就好。
6. 搜索引擎喜歡結構化代碼
現在有種風潮，人們想盡辦法讓自己的關鍵字在搜索結果中名列前茅。作為開發者，你有責任因勢利導，用結構化代碼盡可能優化網站以適應搜索引擎。
以下是一些重要的結構化標記：
- H1 - 最重要的標題，搜索引擎最重視它。
- H2，H3，H4，H5 - 重要性依次遞減的標題。用它們恰當的傳遞信息，搜索引擎會根據字號給予相應的關照。
- A - 鏈接。通常給它個TITLE屬性比較好。
server technology
- IMG - 古老的圖像標記。給它個ALT屬性比較好，搜索引擎會把其屬性值當作關鍵字。另外，當圖像無法顯示時，訪問者會看到替代文字。
還有一些重要的標記：
- TITLE - 此標記會作為搜索引擎查詢結果的標題顯示，應該認真對待。
- META - 最好完善一下keyWords和description，搜索引擎還是會讀取這兩項老掉牙的信息的。
7. 布局用DIV 別用TABLE
其實這條我們都已習慣了，現在還用TABLE布局是會被人極度鄙視的。在列舉表式數據時用用還差不多。
搞定DIV布局需要很多實踐，不過一旦你掌握訣竅，它將變得俯首帖耳。由此獲得的靈活性，比你能想到的還要多。
其實它非常簡單，就好像 float 和 width 一樣。
我在>Virb寫了個很簡單的兩欄布局教程，有興趣就>看看吧。
8. 少用行內樣式
寫代碼時，通常會直接在元件標記上加幾句樣式，這比往CSS文件裡加個Class或屬性簡單順手一點。不過，最好別這麼做，因為代碼需要可維護性。
某些時候，你將不得不面對自己以前寫的代碼。自己的床自己得睡，自己犯懶自己遭罪。10年來，我認識到一個道理：現在額外花時間，將來特別省時間。這就說到了下個建議：代碼要考慮將來。
不好的
第一個標題
正文內容
第二個標題
好的
第一個標題
正文內容
第二個標題
9. 代碼要考慮將來
要給代碼寫注釋。整潔，有序，別偷懶。如果覺得匆匆忙忙沒心思，休息一會兒再回來寫。
某些情況下（比如你的網站將來成功了），別人會來拜讀的代碼。有時候，這個人會是你。
幾年之後，看到自己當年沒有注釋、亂做一團的代碼，你肯定悔不當初。為了避免將來的自怨自艾，現在就把復雜的代碼注釋一下吧。
注釋也不要太多。那些簡單到一目了然的代碼根本沒必要說明，否則泥沙俱下，真正有用的注釋會淹沒在重重文字之中。
10. 了解標准，但不必束手束腳
別再用SMALL、CENTER、FONT等>不被推薦的標記了，這樣給人感覺不好。
聽說SMALL標記還沒被棄用——不過抱歉，我肯定它沒幾天了。
網站上的>有效XHtml和>CSS標志告訴人們，你遵守了某些規則。也許這讓你感覺與眾不同，但是，網站質量與此無關。去看看哪個成功的大網站能完全通過Html標准驗證？ 所謂標准，其實跟不上新方法新技術的發展。
開發網站時，要盡量遵循Html標准。不過有時候，可能需要跳出標准去實現某個功能，這樣才能兼容所有浏覽器。對此不必耿耿於懷，說到底，功能才是網站的根本。
如果實在想的話，可以用>W3的>Html驗證器檢查你的代碼。