重構(gòu)HTML：改善Web應用的設計（修訂版）

目　錄

第1章　重構(gòu)　1
1.1　為何重構(gòu)　2
1.1.1　壞味道：難以辨認的代碼　3
1.1.2　壞味道：CEO根本搞不定他的旅行費用報銷單　4
1.1.3　壞味道：緩慢的頁面呈現(xiàn)速度　5
1.1.4　壞味道：不同的瀏覽器，不同的呈現(xiàn)　5
1.1.5　壞味道：網(wǎng)頁需要危險或者非標準技術(shù)的支持　6
1.1.6　壞味道：公司主頁突然顯示“Pwned by Elite Doodz”　7
1.1.7　壞味道：在Google搜索結(jié)果中首次排在17頁之后　7
1.1.8　壞味道：訪問者致信投訴網(wǎng)站失靈　7
1.2　何時重構(gòu)　8
1.3　重構(gòu)什么　9
1.3.1　為何要用XHTML　10
1.3.2　為何要用CSS　13
1.3.3　為何要用REST　14
1.4　反對重構(gòu)的理由　16
第2章　工具　18
2.1　備份、測試用機和源碼控制　18
2.2　驗證器　20
2.2.1　W3C標記驗證服務　20
2.2.2　日志驗證程序　22
2.2.3　xmllint　23
2.2.4　編輯器　24
2.3　測試　24
2.3.1　JUnit　26
2.3.2　HtmlUnit　28
2.3.3　HttpUnit　29
2.3.4　JWebUnit　30
2.3.5　FitNesse　31
2.3.6　Selenium　32
2.3.7　測試入門　35
2.4　正則表達式　36
2.4.1　搜索　36
2.4.2　搜索模式　38
2.5　Tidy　39
2.5.1　-asxhtml　40
2.5.2　-clean　41
2.5.3　編碼　42
2.5.4　整潔的格式　43
2.5.5　生成的代碼　43
2.5.6　當做庫來用　43
2.6　TagSoup　43
2.7　XSLT　45
第3章　良構(gòu)　47
3.1　什么是良構(gòu)　47
3.2　將名稱改為小寫　50
3.2.1　動機　51
3.2.2　風險　52
3.2.3　做法　52
3.3　給屬性值加引號　53
3.3.1　動機　54
3.3.2　風險　54
3.3.3　做法　55
3.4　補足遺漏的屬性值　56
3.4.1　動機　56
3.4.2　風險　56
3.4.3　做法　56
3.5　將空標簽替換為空元素標簽　57
3.5.1　動機　58
3.5.2　風險　58
3.5.3　做法　58
3.6　添加結(jié)束標簽　59
3.6.1　動機　60
3.6.2　風險　60
3.6.3　做法　61
3.7　消除重疊　63
3.7.1　動機　63
3.7.2　風險　63
3.7.3　做法　64
3.8　把文本轉(zhuǎn)換為UTF-8　65
3.8.1　動機　65
3.8.2　風險　65
3.8.3　做法　66
3.9　轉(zhuǎn)義小于號　67
3.9.1　動機　67
3.9.2　風險　67
3.9.3　做法　67
3.10　轉(zhuǎn)義&號　68
3.10.1　動機　69
3.10.2　風險　69
3.10.3　做法　69
3.11　轉(zhuǎn)義屬性值中的引號　70
3.11.1　動機　70
3.11.2　風險　71
3.11.3　做法　71
3.12　加入XHTML DOCTYPE聲明　71
3.12.1　動機　72
3.12.2　風險　72
3.12.3　做法　72
3.13　結(jié)束每一個實體引用　74
3.13.1　動機　74
3.13.2　風險　74
3.13.3　做法　74
3.14　替換虛構(gòu)的實體引用　74
3.14.1　動機　75
3.14.2　風險　75
3.14.3　做法　75
3.15　加入根元素　75
3.15.1　動機　76
3.15.2　風險　76
3.15.3　做法　76
3.16　加入XHTML命名空間　76
3.16.1　動機　76
3.16.2　風險　77
3.16.3　做法　77
第4章　有效性　78
4.1　加入過渡型DOCTYPE聲明　79
4.1.1　動機　79
4.1.2　風險　80
4.1.3　做法　80
4.2　刪除所有不該存在的標簽　81
4.2.1　動機　81
4.2.2　風險　81
4.2.3　做法　81
4.3　添加alt屬性　83
4.3.1　動機　83
4.3.2　風險　83
4.3.3　做法　84
4.4　用object替代embed　85
4.4.1　動機　86
4.4.2　風險　86
4.4.3　做法　87
4.5　加入嚴格型DOCTYPE聲明　89
4.5.1　動機　90
4.5.2　風險　90
4.5.3　做法　90
4.6　用CSS替代center　90
4.6.1　動機　91
4.6.2　風險　91
4.6.3　做法　91
4.7　用CSS替代font　93
4.7.1　動機　93
4.7.2　風險　94
4.7.3　做法　94
4.8　用em或CSS替代i　96
4.8.1　動機　96
4.8.2　風險　96
4.8.3　做法　96
4.9　用strong或者CSS替換b　98
4.9.1　動機　98
4.9.2　風險　98
4.9.3　做法　98
4.10　用CSS替換各種顏色屬性　99
4.10.1　動機　100
4.10.2　風險　100
4.10.3　做法　100
4.11　把img元素的屬性轉(zhuǎn)換為CSS屬性　102
4.11.1　動機　102
4.11.2　風險　102
4.11.3　做法　102
4.12　用object替代applet　103
4.12.1　動機　104
4.12.2　風險　104
4.12.3　做法　105
4.13　用CSS替換表現(xiàn)性元素　106
4.13.1　動機　107
4.13.2　風險　107
4.13.3　做法　107
4.14　把行內(nèi)(Inline)元素放到塊(block)元素中　108
4.14.1　動機　108
4.14.2　風險　109
4.14.3　做法　109
第5章　布局　112
5.1　替換表格布局　112
5.1.1　動機　114
5.1.2　風險　114
5.1.3　做法　114
5.2　使用CSS定位替代框架　123
5.2.1　動機　124
5.2.2　風險　124
5.2.3　做法　125
5.3　把內(nèi)容放到最前面　132
5.3.1　動機　133
5.3.2　風險　133
5.3.3　做法　133
5.4　正確標記列表　135
5.4.1　動機　136
5.4.2　風險　136
5.4.3　做法　136
5.5　用CSS替換blockquote/ul的縮進　137
5.5.1　動機　138
5.5.2　風險　138
5.5.3　做法　138
5.6　替換占位圖片　139
5.6.1　動機　139
5.6.2　風險　140
5.6.3　做法　140
5.7　添加id屬性　140
5.7.1　動機　141
5.7.2　風險　141
5.7.3　做法　141
5.8　為圖片添加width和height屬性　144
5.8.1　動機　144
5.8.2　風險　144
5.8.3　做法　144
第6章　可訪問性　146
6.1　把圖片轉(zhuǎn)換為文本　148
6.1.1　動機　148
6.1.2　風險　148
6.1.3　做法　148
6.2　為表單輸入框添加標簽　151
6.2.1　動機　151
6.2.2　風險　151
6.2.3　做法　151
6.3　使用標準的字段名稱　154
6.3.1　動機　156
6.3.2　風險　156
6.3.3　做法　156
6.4　開啟自動完成　159
6.4.1　動機　160
6.4.2　風險　160
6.4.3　做法　160
6.5　為表單添加Tab索引　160
6.5.1　動機　161
6.5.2　風險　161
6.5.3　做法　162
6.6　加入“跳過”機制　163
6.6.1　動機　164
6.6.2　風險　164
6.6.3　做法　164
6.7　添加內(nèi)部標題　165
6.7.1　動機　165
6.7.2　風險　166
6.7.3　做法　166
6.8　把鏈接和標題里重要的內(nèi)容放到前面　166
6.8.1　動機　167
6.8.2　風險　167
6.8.3　做法　167
6.9　加大輸入框　168
6.9.1　動機　168
6.9.2　風險　168
6.9.3　做法　168
6.10　加入表格描述　169
6.10.1　動機　171
6.10.2　風險　171
6.10.3　做法　171
6.11　加入acronym元素　173
6.11.1　動機　173
6.11.2　風險　173
6.11.3　做法　173
6.12　加入lang屬性　174
6.12.1　動機　175
6.12.2　風險　175
6.12.3　做法　175
第7章　Web應用程序　177
7.1　用POST替換不安全的GET　177
7.1.1　動機　177
7.1.2　風險　178
7.1.3　做法　178
7.2　用GET替換安全的POST　181
7.2.1　動機　181
7.2.2　風險　182
7.2.3　做法　182
7.3　重定向POST為GET　184
7.3.1　動機　184
7.3.2　風險　185
7.3.3　做法　185
7.4　啟用緩存　186
7.4.1　動機　186
7.4.2　風險　187
7.4.3　做法　187
7.5　阻止緩存　189
7.5.1　動機　189
7.5.2　風險　189
7.5.3　做法　189
7.6　使用ETag　191
7.6.1　動機　191
7.6.2　風險　192
7.6.3　做法　192
7.7　用HTML替換Flash　194
7.7.1　動機　195
7.7.2　風險　195
7.7.3　做法　195
7.8　增加Web Forms 2.0類型　197
7.8.1　動機　198
7.8.2　風險　198
7.8.3　做法　199
7.8.4　瀏覽器的支持情況　202
7.8.5　數(shù)據(jù)驗證　202
7.9　用mailto鏈接取代聯(lián)系表單　202
7.9.1　動機　203
7.9.2　風險　203
7.9.3　做法　203
7.10　封禁機器人　205
7.10.1　動機　205
7.10.2　風險　205
7.10.3　做法　205
7.11　轉(zhuǎn)義用戶的輸入　207
7.11.1　動機　208
7.11.2　風險　208
7.11.3　做法　208
第8章　內(nèi)容　210
8.1　修正拼寫　210
8.1.1　動機　210
8.1.2　風險　210
8.1.3　做法　211
8.2　修復壞鏈接　213
8.2.1　動機　213
8.2.2　風險　214
8.2.3　做法　214
8.3　移動頁面　219
8.3.1　動機　219
8.3.2　風險　219
8.3.3　做法　219
8.4　刪除入口頁面　221
8.4.1　動機　222
8.4.2　風險　223
8.4.3　做法　223
8.5　隱藏電子郵件地址　224
8.5.1　動機　224
8.5.2　風險　224
8.5.3　做法　224
附錄A　正則表達式　227