最近讀了《HTML重構》這本書，以下做出自己的總結歸納，大家可以一起學習交流。
什麼是重構？重構是在不改變程序行爲的基礎上進行小的改動是代碼基本逐漸完善的過程，通常需要一些自動化工具的幫助。好的網站是需要我們對代碼進行日臻完美的改善。而搜索引擎優化（seo）是網站重構的主要驅動之一，跟圖片相比搜索引擎更看重文本；跟後端文本相比更看重前端文本，他們更看重標題或元標籤。作者希望通過更多的文本內容取代如圖片、flash等可以做好SEO。我個人覺得看完了這本書對做 SEO是非常有幫助的
百度百科對重構的定義是：重構（
Refactoring）就是通過調整程序代碼改善軟件的質量、性能，使其程序的設計模式和架構更趨合理，提高軟件的擴展性和維護性。
下面這張思維導圖，是我對全書大體內容的一個概括性總結：
工具
本書推薦的工具主要包含的是自動化測試，但是我覺得現行的開發環節當中實際用到的會比較少。這裏就推薦一下其他方面的優秀工具：
1. YSlow
YSlow是雅虎推出的一款瀏覽器插件，可以幫助你對網站的頁面進行分析，併爲你提供一些優化建議，以提高網站的性能。戳我查看Yslow-23條規則
- Firefox插件
- Chrome插件
- YSlow for Mobile/Bookmarklet
- 源碼
2. PageSpeed
PageSpeed也是一個瀏覽器插件，由google推出，可以很好地對我們的Web網站進行優化實踐——幫助你輕鬆對網站的性能瓶頸進行分析，併爲你提供優化建議。
- 在線分析你的網站
- 安裝瀏覽器插件（ Chrome、 Firefox）
- 通過 Insights API在應用中嵌入PageSpeed功能
3.其他優秀工具
- 蜘蛛模擬器：這個工具可以分析你的頁面，並提供一些優化建議。
- 圖像SEO工具：這個工具可以檢查圖片的alt標籤，並提供一些優化建議。
- 請求檢查器：找出頁面中需要加載哪些資源和服務。
- 鏈接檢查器：檢查頁面中內部、外部和無效鏈接。
- HTTP頭檢查：顯示網頁或資源的HTTP響應頭。
- 社交檢查器：檢查頁面中的社交組件，比如
Google+、Facebook、Twitter、Linkedin和Pinterest。 If modified檢查器：檢查頁面是否接受If-Modified-SinceHTTP頭。Gzip檢查器：檢查頁面是否經過了Gzip壓縮。- CSS delivery工具：檢查頁面中所使用的
CSS文件。 - 麪包屑工具：可根據你輸入的信息提供麪包屑導航的代碼。
- CSS壓縮工具：用於壓縮
CSS代碼。
良構
什麼是良構？從技術角度來講：它表示文檔要遵循某種嚴格的結束比如每個起始標籤都應該有一個結束標籤、元素的開始與結構都在相同的父元素內以及每個實體引用都要事先定義好。雖然現在多數網站都已經採用：
<!DOCTYPE html> //dtd
採用html5<!DOCTYPE> 標籤讓我們在書寫html標籤語句的時候可以不需要那麼規範，但是我覺得從文檔的嚴謹性和規範性以及可讀性上而言，遵循xml標準還是十分有必要的。所謂的良構符合標準：
1.所有的起始標籤都應有一個匹配的結束標籤。
2.空元素應該使用空元素的標籤語法。
<br /> --> <br class=”empty” />
3.所有的屬性都必須有一個值
4.所有的屬性值都需要用引號括起來
5.所有的&號都必須轉義爲&
內嵌的JavaScript在這裏會出現問題。Javascript中&是不可轉義的。可以把腳本移出到一個沒必要轉義的外部文件中或者把腳本放進註釋中。
6.所有小於號<都要轉義爲<
內嵌的JavaScript在這裏會出現問題。Javascript不會把<當做小於號。可以把腳本移出到一個沒必要轉義的外部文件中或者把腳本放進註釋中。
7.只有唯一的根元素
8.轉義屬性值中的引號
在屬性值中把 ” 轉義爲" ，把 ’ 轉義爲' 。
9.所有未預定義的實體引用必須在DTD中聲明
10.結束每一個實體引用，替換虛構的實體引用
XML要求實體引用以分號結尾。
11.將名稱改爲小寫，所有元素的
12.把文本轉化爲UTF-8
Utf-8是一個標準的編碼，可運作在所有瀏覽器上，被主流的文本編輯器個工具支持，支持所有Unicode字符。
內容
- 修正拼寫錯誤，錯別字
- 保證所有連接的可用性
- 移動頁面（自動化檢查連接）
- 重新組織URL的結構，對開發者、訪問者和搜索引擎更透明，但要保證舊的URL能夠繼續工作
- 刪除入口頁面（用戶體驗優先）
- 隱藏電子郵件
可訪問性
- 把圖片轉化爲文本
作者說了三點
a、對於視力不好的用戶可以通過感知來感知文本
b、可以加大搜索引擎的結果
c、可以提升網站性能，而且可以節省帶寬成本及訪問者的時間
作者還是那句話：HTML文檔只有內容不應該有裝飾
- 爲表單輸入框添加標籤
對非隱藏的input,textarea,select等表單元素確保它們都有相應的標籤
- 使用標準的字段名稱
- 開啓自動完成
- 爲表單添加
Tab索引
爲每個表單添加Tab索引這樣用戶就可以通過tab鍵進行跳轉了
<input tabindex="1" type="checkbox" />
有7個元素支持tabindex分別爲：a area button input object select textarea
- 適當爲較長的網頁添加跳轉
- 加大輸入框
- 加入表格描述
- 加入
lang屬性
// en定義語言爲英語
// zh-CN定義語言爲中文
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
// 如果網頁定義爲XHTML1.1或者XML格式,那麼可以使用xml:lang屬性(因爲xml:lang屬性是在XML中確定語言信息的標準用法).
// 如果網頁使用HTML格式,那麼應該同時使用xml:lang和lang屬性.
佈局
- 使用Css+Div替換表格佈局
創建現代網頁需要使用與CSS相分離的XHTML不要再使用表格型佈局與font標籤等表現性元素（//老生常談）
- 使用Css定位替代框架
- 正確標記列表
- 替換佔位圖片
- 添加id屬性
Web應用程序
- POST與GET的正確使用
以下操作都應該通過POST操作
1) 定購商品
2) 簽署法律文檔
3) 從CMS中刪除頁面
4) 簽署申述
5) 發送電子郵件
6) 向數據庫插入新內容
7) 打印地圖
8) 操控機器
以下操作都應該通過GET操作，因爲這是安全的。且不必強制用戶接受
1) 讀取文檔
2) 從CMS下載一份可編輯文檔的副本
3) 讀取電子郵件
4) 查看地圖
5) 檢查機器的當前狀態
通過GET訪問的URL可以鏈接、被爬蟲抓取、收藏、預抓取，緩存。GET的形式的URL讓用戶可以使用後退鍵。總的來說，在這些情況下GET操作比POST操作對用戶更友好。GET形式的URL對搜索引擎也更友好，可以提高搜索引擎排名。
- 啓用 & 阻止緩存
啓用緩存某些不常改變的資源（如網頁icon）可以大大提高用戶訪問頁面的速度，提升用戶交互性能。
- 使用
ETag
ETag：Etag是URL的Entity Tag，用於標示URL對象是否改變，區分不同語言和Session等等。具體內部含義是使服務器控制的，就像Cookie那樣。
- 使用
HTML替換Flash