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

目　錄

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