最近老大給我們買來一些技術方面的書籍，其實很少搬着一本書好好的完整的看完過，每每看電子檔的，也是打游擊式的看看這章，瞅瞅那章，在那5本書中挑了一本比較單薄的《編寫高質量代碼web前端開發修煉之道》，看完覺得不錯，它從一個整體架構上來說明如何編寫高質量代碼，而細處也着重說明一些比較重要的技術點，給人一種從高處俯瞰web開發、很完整的感覺，在這感謝老大，謝謝他讓我們不停的進步着。下面是我看書過程中的筆記。
第一章：從網站重構說起
沒什么好說的，從一個糟糕的老網頁實例說明需要將web的結構，樣式和行為分離開來，既html文件，css文件，js文件。
總結：Html標簽只負責承載內容，樣式交給css，行為交給Javascript。做到“精簡，重用，有序”。
【相對我以前做的項目，我經常會把一些click事件,mouseover事件直接寫進html標簽中，其實更好的做法應該是放到js中去，直接Document.getelementbyid("").onclick(){},或者用jquery的click事件關聯】
第二章：團隊合作
欲精一行，必先通十行
“經常聽到做前端開發的朋友抱怨要學的東西太多，東學一點，西學一點，什么都會，但是都不精，於是有人認為‘通十行不如精一行’，而在前端領域，這句確行不通，對於前端來說，你不通十行，就無法精一行。” 看到作者的這句話，我總算有點成就感。O(∩_∩)O~
這章主要說明前端需要了解的語言，html， css要精通、及其重要，js,及架構div+css，RIA富媒體應用，jquery,YUI,ps,AI設計等等
團隊之間的開發要注意：
1：增加代碼可讀性----注釋
2：重用性---公共組件和私有組件的維護
3：冗余和精簡的矛盾---選擇集中還是選擇分散 （合理的前端架構中css和js都會提取公共組件，如何組織需要權衡，完美的解決方案不存在，只能在冗余和精簡中盡量找到最佳平衡點）
4：前期的構思很重要。
5：制定規范
6：團隊合作最大難度不是技術，而是人
第三章：高質量的Html
總算來了點實際的用得着的技術，呵呵
1）標簽的語義：大家都懂的。
2）標簽布局
table布局網頁的缺點：1：代碼量大，結構混亂。2：標簽語義不明確，對搜索引擎不友好
css布局（div+css）：弱化了標簽的布局能力，將布局完全放到樣式中去控制，而標簽重新恢復了原來語義的作用。它與table布局相比具有代碼量少，結構精簡，語義清晰等優點。
總結：在布局的過程中，Html結構才是重點，css是用來修飾結構的，正確的做法是：先確定html,確定語義的標簽，再來選用合適的css.
3）如何確定你的標簽是否語義良好：
在做完一個頁面后，去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性。
"css裸體日"這個日子的目的就是為了提醒大家選用合適的HTML標簽的重要性。------------顯然我是第一次聽說哈。
4）標題和內容的實例
這個實例用的是Html中無語義的標簽-----div分隔 和span范圍 來架構的， 而正確的做法一般使用h2,p,a來架構
需要特別說明的是：當頁面內標簽無法滿足設計需要時，才會適當添加div和span等無語義的標簽來輔助實現。
5）表單和表格
表單
一般需要直接submit的內容需要放置在表單內，為了有清晰的語義，一般表單域要用fieldset標簽包起來，並用legend標簽說明表單的用途，若不想要它自帶的默認樣式，可將border:none;不想顯示設置 display:none,以此來兼顧語義和設計兩方面的需求。
每個input標簽對應的說明文本都需要使用label標簽，並通過為input設置id屬性，在label中設置“for=someId”來將對應的label和input關聯起來。
表格
雖然在css布局中table不推薦用來布局，但它在二維數據展示方面確實最好的選擇。
一般用table，我常使用它的<table><tr><th><td>標簽，在有需要的時候還可以用他的其他標簽，表格標題用caption,表頭用thead包圍，主體部分tbody包圍，尾部tfoot包圍
總結：語義化標簽應注意的一些問題
1：盡可能少地使用無語義標簽div和span
2：語義不明顯，既可用P也可用div的地方，建議盡量用p,因為有上下間距，可讀性好。（還是視情況而定）
3：不要使用純樣式標簽，如：b,font,u等 ，直接寫進css設置。
轉載請注明出處
原文地址:http://www.cnblogs.com/Joans/archive/2012/09/11/2679074.html