叢書名： 圖靈程序設計叢書 
作　　者： （美）哈羅德　東賢安　等譯
出 版 社： 人民郵電出版社                      I S B N ： 9787115210470

內容大部分連接至當當：http://product.dangdang.com/product.aspx?product_id=20642357

內容簡介
        本書采用理論與實踐相結合的方式，展示了如何重構HTML，以獲得更佳的可靠性、性能、可用性、安全性、可訪問性、兼容性，甚至實現良好的搜索引擎優化。書中詳細介紹了如何辨別應該重構的Web代碼中的“壞味道”，如何把舊的HTML轉換為良構和有效的XHTML，如何使用CSS改善現有的布局，如何通過用GET替換POST、替換舊的聯系表單和重構JavaScfipt來更新Web應用程序，如何系統地重構內容和鏈接，如何在不改變用戶所依賴的URL的前提下重建網站。
        本書適合Web設計人員、開發人員、項目經理和需要維護或更新既有網站的人使用。

目錄

第1章　重構

        簡明概要的說，重構是在不改變程序行為的基礎上進行的小改動，是代碼基逐漸改善的過程，通常也需依賴于一些自動化工具的幫助。重構的目標是移除長年累月積聚下來的爛碼，以得到更清晰和更容易維護、除錯及新添加功能的代碼。
        重構的原因：1、初始設計者未曾想到的細節逐漸暴露；2、增加新功能。

1.1　為何重構
1.1.1　壞味道：難以辨認的代碼
1.1.2　壞味道：CE0根本搞不定他的旅行費用報銷單
        網站需要更好的可用性。
1.1.3　壞味道：緩慢的頁面呈現速度
1.1.4　壞味道：不同的瀏覽器，不同的呈現
1.1.5　壞味道：網頁需要危險或者非標準技術的支持
1.1.6　壞味道：公司主頁突然顯示“Pwned by Elite Doodz”
    黑客入侵，例如直接對設計有漏洞的表單處理腳本實施代碼注入攻擊。
1.1.7　壞味道：在Google搜索結果中首次排在17頁之后
1.1.8　壞味道：訪問者致信投訴網站失靈

1.2　何時重構
        無論做什么，都不要因追求完美而忽視小的改進（勿以善小而不為），如果眼下的時間足夠做一點兒重構，那就只做一點兒，以后有時間可以做得更多。整體性的重新設計雖然惹人注目令人難忘，但不積跬步又何以至千里？

1.3　重構什么
1.3.1 為何要用XHTML
        XHTML只不過XML化的HTML。但XHTML非常嚴格。諸如漏掉引號或忽略結束標簽這些細微的錯誤，在HTML中瀏覽器會默默補上，但在XHTML中就會成為嚴重的四級警報。這樣就簡化了瀏覽器對XHTML的處理。

1.3.2　為何要用CSS
        把表現從內容中分離出來是HTML的基本設計原則。

1.3.3 為何要用REST
        REST(Representational State Transfer，表述性狀態轉移)，它是HTTP的架構。

1.4　反對重構的理由

第2章　工具

2.1 備份、測試用機和源碼控制
        重構至少需要5個步驟：
1、確定問題。
2、修復問題。
3、檢查已修復的問題。
4、確保沒有引入新問題。
5、部署解決方案。

2.2　驗證器
2.2.1  W3C標記驗證服務
2.2.2  日志驗證程序
2.2.3  xmllint
2.2.4  編輯器

2.3　測試
2.3.1    JUnit
2.3.2　HtmlUnit
2.3.3　HttpUnit
2.3.4　JWebUIlit
2.3.5　FitNesse
2.3.6    Selenium
2.3.7　測試入門

2.4　正則表達式
2.4.1　搜索
2.4.2　搜索模式

2.5     Tidy
2.5.1    -asxhtml
2.5.2    -clean
2.5.3　編碼
2.5.4　整潔的格式
2.5.5　生成的代碼
2.5.6　當做庫來用

2.6    TagSoup

2.7    XSLT

第3章 良構
        良構是強大XML工具鏈條中的基礎性環節。良構保證了DOM可操作的文檔樹結構的唯一性，因而成為可靠的跨瀏覽器的JavaScript代碼的基礎。

3.1　什么是良構

3.2　將名稱改為小寫
        在XHTML模式中，小寫是必要條件。
<table></table>

3.3　給屬性值加引號
        在XHTML中，所有的屬性值，即使沒有空格，也都要加上引號。
<div id="speech1">...</div>

3.4　補足遺漏的屬性值
        為所有不帶屬性值的屬性加上屬性值。XHTML不支持只有屬性名稱而沒有值的語法。
<input type="radio" name="p" value="debit" checked></input>  改為
<input type="radio" name="p" value="debit" checked="checked"></input>

3.5  將空標簽替換為空元素標簽
        XML解析器要求所有的起始標簽都有匹配的結束標簽。
<br> 改為 <br class="empty" />  在最后一個斜線之前加上屬性或者空格能達到最大的兼容性。
   
3.6  添加結束標簽
        關閉所有的段落、清單項目、表格單元格和其他非空的元素。

3.7  消除重疊
        在父級元素上關閉每一個子元素。

3.8  把文本轉換為 UTF-8
        UTF-8是一個標準的編碼，可運作在所有瀏覽器上，被主流的文本編輯器和工具支持，它相當快速、小巧和高效。它支持所有的Unicode字符，也是頁面國際化和本地化的堅實基礎。

3.9  轉移小于號
        把 < 轉義為 &lt; 。

3.10  轉義 & 號
        把 & 轉義為 &amp; 。

3.11  轉義屬性值中的引號
        把 " 轉義為 &quot; 或把 ' 轉義為 &apos; 。

3.12  加入XHTML DOCTYPE聲明

3.13  結束每一個實體引用
        把 &copy 改為 &copy;

3.14  替換虛構的實體引用
        確保文檔中用到的實體引用都是有定義的。

3.15  加入根元素
        確保每一個文檔都有html根元素。

3.16  加入XHTML命名空間
   

第4章　有效性

        有效性比良構稍微嚴格，即不僅要確保文檔的語法正確，還要保證語義正確。它保證只有HTML規范中定義的元素和屬性會出現，這樣就不會出乎瀏覽器的意料。它還保證了元素和屬性值能按自身語義出現在恰當的地方。

4.1  加入過渡型DOCTYPE聲明
        過渡型DTD讓你不必完全語義化標記就能讓文檔通過驗證。它允許文檔包含諸如i、b和center等這些不推薦使用的表現性元素。
        使用時需要特別注意的是IE瀏覽器中會產生一些使用特定技巧的偏差。

4.2  刪除所有不該存在的標簽
        消滅所有異數（即HTML規范不允許或瀏覽器私有的擴展元素）。

4.3  添加alt屬性
        1、幫助視力受損的用戶、或者聲音瀏覽器。
        2、搜索引擎優化，尤其是圖片搜索，過分關注alt屬性的文本。

4.4  用 object 替代 embed
        object元素可以被更好的文檔化，現代瀏覽器的支持更一致。
當然對于舊瀏覽器，可以在 object元素內加入 embed元素。
 
4.5  加入嚴格型的 DOCTYPE聲明

4.6  用 CSS替代center
        把所有的center元素轉化為div或者相應的語義元素，然后再使用CSS的text-align屬性實現居中。

4.7  用 CSS替代font

4.8  用 em或 CSS替代 i

4.9  用 strong 或者 CSS替換 b

4.10  用 CSS替換各種顏色屬性

4.11  把 img元素的屬性轉換為 CSS屬性

4.12  用 object替代 applet

4.13  用 CSS替換表現性元素

4.14  把行內(Inline)元素放到塊(block)元素中

第5章　布局

        在現代瀏覽器中，CSS對頁面的外觀提供更強有力的控制。創建現代網頁需要使用與CSS清晰分離的XHTML，不需在使用表格型布局和font標簽等表現性元素。

5.1  替換表格布局
        把所有的表格布局都刪除，代之以線性化內容的div元素。然后使用CSS樣式表按你想要的形式定位div。

5.2  使用CSS定位替代框架
        把框架轉化為單一頁面。

5.3  把內容放到最前面
        在順序讀取原始HTML源碼時，主要內容應該放到最前面。側欄、頁頭、頁腳和導航欄等部分應該跟在內容之后。

5.4  正確標記列表

5.5  用CSS替代 blockquote/ul 的縮進
        blockquote應該應用于引用上，而ul應該用戶列表中。

5.6  替換占位圖片
        把所有占位圖片都刪除，必要時使用 CSS的margin、padding、position和 indent屬性來呈現這些效果。

5.7  添加 id屬性
        為每個元素添加 id屬性，以便可快速定位。

5.8  為圖片添加 width和 height屬性
      width和 height屬性能讓瀏覽器更快地樣式化頁面并展示給用戶。
 

第6章　可訪問性

        只要讓 XHTML文檔有效，就能在很大程序上提高可訪問性，由過渡型向嚴格型轉變又提升了一層。使用 CSS樣式表分離內容和表現對可訪問性也有很大的幫助。

6.1  把圖片轉換為文本
        使用圖片本身包含的文本取代圖片，然后使用標記和CSS規則模擬相關的樣式。

6.2  為表單輸入框添加標簽
        對于非隱藏的input、textarea、select等表單元素，確保他們都有相應的標簽。
Red-necked Grebe
<input name="rng" type="checkbox" />  轉換為

<label>Red-necked Grebe
<input name="rng" type="checkbox" />
</label>

6.3  使用標準的字段名稱
        重寫表單和處理表單的腳本，為如電子郵件地址、信用卡和電話號碼等使用慣用的名稱。
瀏覽器自動填寫，這對于那些討厭把時間浪費在重復輸入內容的人有很大幫助。

6.4  開啟自動完成
        在適當情況下把 autocomplete="off" 刪除。

6.5  為表單添加 Tab索引
        為每一個可編輯的、非隱藏的表單字段添加 tabindex屬性。

6.6  加入“跳過”機制
        在每個頁面的開頭放置一個“不可見”的鏈接，它可以直接跳到頁面的主要內容上。

6.7  添加頁面標題
        對于比較長的網頁，在合適的位置放置 h1~h6元素。

6.8  把鏈接和標題里重要的內容放到前面

6.9  加大輸入框
        保證所有表單都有足夠的空間，讓用戶更容易填寫所有必要的字段。

6.10  加入表格描述
        為每個表格添加caption元素和或summary屬性，給每一行或每一列的標簽使用 th元素。
為視覺和非視覺用戶提供幫助。

6.11  加入acronym元素

6.12  加入lang屬性
        為每個根元素添加 lang和 xml:lang屬性，用于指出文檔使用的主要語言。

第7章　Web應用程序

7.1  用POST替換不安全的GET

7.2  用GET替換安全的POST

7.3  重定向 POST為 GET

7.4  啟用緩存

7.5  阻止緩存

7.6  使用 ETag
        ETag讓客戶端能夠不下載整個頁面就能迅速檢查頁面是否有變化，從而節省了服務器和客戶端的帶寬并加速了頁面的載入時間。

7.7  用 HTML替換 Falsh
        把 Flash網站專為HTML，為所有的 Flsah內容提供一個純HTML的版本。

7.8  增加 Web Froms 2.0的類型
        注：不是所有瀏覽器都支持。

7.9  用 mailto 鏈接取代聯系表單
        電子郵件程序給用戶提供了更強和更舒適的編輯和歸檔功能。

7.10  封閉機器人
        在希望封閉機器人的目錄中加上 robots.txt文件，安裝一個蜜罐程序來檢測和封閉不禮貌的機器人和歹毒爬蟲。

7.11  轉義用戶的輸入
        為所有用戶的輸入提供轉義。

第8章　內容

8.1  修正拼寫

8.2  修復壞鏈接

8.3  刪除入口頁面
        把內容放到首頁上。

8.4  隱藏電子郵件地址
        公布在 Web頁面上的電子郵件地址應該進行編碼，放置垃圾信息機器人的采集。

附錄A　正則表達式