具体描述
《重构HTML:改善Web应用的设计(修订版)》采用理论与实践相结合的方式,展示了如何重构HTML,以获得更佳的可靠性、性能、可用性、安全性、可访问性、兼容性,甚至实现良好的搜索引擎优化。《重构HTML:改善Web应用的设计(修订版)》中详细介绍了如何辨别应该重构的Web代码中的“坏味道”,如何把旧的HTML转换为良构和有效的XHTML,如何使用CSS改善现有的布局,如何通过用GET替换POST、替换旧的联系表单和重构JavaScript来更新Web应用程序,如何系统地重构内容和链接,如何在不改变用户所依赖的URL的前提下重建网站。
《重构HTML:改善Web应用的设计(修订版)》适合Web设计人员、开发人员、项目经理和需要维护或更新既有网站的人使用。
作者简介
Elliotte Rusty Harold,世界知名技术作家、程序员,纽约科技大学计算机系副教授,讲授面向对象编程方面的课程。他的网站Cafe conLeche是XML方面的热门网站之一。他著有Effective XML和XML in a Nutshell等一系列知名作品。
目录信息
1.1 为何重构 2
1.1.1 坏味道:难以辨认的代码 3
1.1.2 坏味道:CEO根本搞不定他的旅行费用报销单 4
1.1.3 坏味道:缓慢的页面呈现速度 5
1.1.4 坏味道:不同的浏览器,不同的呈现 5
1.1.5 坏味道:网页需要危险或者非标准技术的支持 6
1.1.6 坏味道:公司主页突然显示“Pwned by Elite Doodz” 7
1.1.7 坏味道:在Google搜索结果中首次排在17页之后 7
1.1.8 坏味道:访问者致信投诉网站失灵 7
1.2 何时重构 8
1.3 重构什么 9
1.3.1 为何要用XHTML 10
1.3.2 为何要用CSS 13
1.3.3 为何要用REST 14
1.4 反对重构的理由 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章 良构 47
3.1 什么是良构 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 添加结束标签 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 把文本转换为UTF-8 65
3.8.1 动机 65
3.8.2 风险 65
3.8.3 做法 66
3.9 转义小于号 67
3.9.1 动机 67
3.9.2 风险 67
3.9.3 做法 67
3.10 转义&号 68
3.10.1 动机 69
3.10.2 风险 69
3.10.3 做法 69
3.11 转义属性值中的引号 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 结束每一个实体引用 74
3.13.1 动机 74
3.13.2 风险 74
3.13.3 做法 74
3.14 替换虚构的实体引用 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元素的属性转换为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替换表现性元素 106
4.13.1 动机 107
4.13.2 风险 107
4.13.3 做法 107
4.14 把行内(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 把内容放到最前面 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 把图片转换为文本 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 添加内部标题 165
6.7.1 动机 165
6.7.2 风险 166
6.7.3 做法 166
6.8 把链接和标题里重要的内容放到前面 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 数据验证 202
7.9 用mailto链接取代联系表单 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 转义用户的输入 207
7.11.1 动机 208
7.11.2 风险 208
7.11.3 做法 208
第8章 内容 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
· · · · · · (收起)
读后感
前端领域发展的又一次见证,很多时候,多花一点点心思,便能实现良构的、具有可访问的网页,当然也要学会利用自动化工具。
这本书里面还是写了非常多不错的精彩内容的。详细讲解了在WEB页面中的一些标准,比如去掉所有的表示性标签,使用CSS来渲染。作者整体的强调意见也是符合现代浏览器标准的。把HTML纯粹的作为一个页面展示,把CSS完全用于渲染HTML。此书中,没有任何CSS跨浏览器代码之类的。谈的...
就是一个模式。一条条列出似的。 首先各个小标题是建议,然后依次叙述:1.动机 2.风险 3.做法。 也许是技术更新太快了。很多建议其实在现在看来都是理所当然的东西了。当然,对标准的理解还是很有用的。
这本书里面还是写了非常多不错的精彩内容的。详细讲解了在WEB页面中的一些标准,比如去掉所有的表示性标签,使用CSS来渲染。作者整体的强调意见也是符合现代浏览器标准的。把HTML纯粹的作为一个页面展示,把CSS完全用于渲染HTML。此书中,没有任何CSS跨浏览器代码之类的。谈的...
前端领域发展的又一次见证,很多时候,多花一点点心思,便能实现良构的、具有可访问的网页,当然也要学会利用自动化工具。
用户评价
如果用一个词来形容这本书的风格,那就是“务实到极致”。它几乎避开了所有理论上的玄谈,所有的论点都建立在对浏览器解析引擎的实际理解之上。我过去总是依赖于各种预处理器和构建工具来自动处理HTML的正确性,但这本书让我意识到,如果底层结构本身就是错误的,那么再强大的工具也只是在错误的基础上做优化。作者在处理旧有遗留代码的迁移策略上,给出的建议非常具有操作性,比如如何安全地隔离旧代码块,如何分批次引入新的结构标准,避免一次性部署带来的巨大风险。这对于那些维护大型、老旧企业级项目的团队来说,简直是救命稻草。它不是那种让你读完后充满“可以试试”的热情,而是让你读完后立刻拿起键盘,开始清理自己项目中的“技术债务”的冲动。它关于可维护性和可扩展性的探讨,是建立在对HTML生命周期的深刻洞察之上的。
这本书带来的影响是深远的,它拓宽了我对“前端开发”边界的认知。我原本以为,当框架接管了大部分视图层的渲染工作后,HTML的重要性就会降低。然而,这本书雄辩地证明了,无论上层应用如何变化,HTML作为浏览器理解内容的基石,其结构上的质量直接决定了后续所有优化措施的上限。作者在探讨无障碍(Accessibility)方面的论述,尤其令人印象深刻。他并非将无障碍视为一个额外的“复核项”,而是将其内嵌于重构的每一步骤之中,强调了语义化标签在辅助技术面前的不可替代性。这种从根本上提升代码质量的思路,让我反思了过去很多“能用就行”的开发习惯。它真正教会了我如何写出“面向机器和面向人”的双重友好的代码,这对于建立长期、可持续的软件产品至关重要。
阅读体验上,这本书的排版和示例代码的清晰度是教科书级别的,这一点非常重要,因为涉及到底层的结构调整,任何一个微小的误解都可能导致后续的连锁反应。作者对每一个重构步骤的解释都非常到位,他总能预判到读者可能会在哪里产生疑问,并提前给出详尽的注释和背景知识铺垫。我尤其欣赏他对“渐进式增强”理念的坚持和实践。在讲解如何从一个纯粹的标记语言结构,逐步过渡到可访问、响应式的最终形态时,那种层层递进的教学设计,让人感觉自己不是在被动接受知识,而是在与一位经验丰富的大师并肩作战,共同解决一个复杂的工程难题。这本书的好处在于,它让你学会了“慢”下来的重要性。在如今这个追求“快餐式开发”的环境里,它提供了一种沉稳的力量,强调了打磨细节的重要性,因为这些细节,决定了你的项目能走多远,以及在面对未来技术变更时,其韧性如何。
说实话,我拿到这本书的时候,内心是有些抗拒的,毕竟“重构”这个词听起来就带着一种枯燥和重复劳动的感觉,我更倾向于学习那些能直接带来“新功能”的技术。但读下去之后,我发现自己大错特错。这本书的魅力在于它的“手术刀式精准”。作者在介绍如何拆解一个结构臃肿的HTML文档时,那种逻辑的严谨性和艺术感,让我联想到了精密的机械设计。他没有使用任何花哨的语言,而是用冷静、客观的笔触,一步步引导读者审视那些我们习以为常却暗藏问题的代码块。比如,如何识别出那些命名混乱、职责不清的元素,以及如何安全地引入语义化标签,而不是简单地套用 `div` 标签的万金油策略。这本书让我明白了,一个好的HTML结构本身就是一种强大的文档和用户体验。它教会了我如何像建筑师一样思考,而不是像一个搬运工。每一次重构,都不是推倒重来,而是在现有基础上进行价值增益,这种思维模式的转变,对于任何一个追求代码质量的专业人士来说,都是一次深刻的洗礼。
这本书简直是前端开发的“内功心法”,读起来让人醍醐灌顶,尤其对于那些沉迷于各种新框架、新工具,却常常在基础层面遇到瓶颈的开发者来说,它提供了一个回归本源的视角。作者在讲解DOM操作和事件处理时,那种深入骨髓的理解力令人惊叹,他不是简单地罗列API,而是真正剖析了浏览器的工作机制,让那些原本模糊不清的“黑箱”操作变得透明清晰。我过去总觉得,用原生JavaScript去处理复杂的交互逻辑是一件吃力不讨好的事情,总想着尽快引入某个库来简化一切。然而,这本书彻底颠覆了我的看法。它用大量精妙的、富有洞察力的代码实例,展示了如何用更少的代码实现更稳定、更高效的结构。特别是关于性能优化那几章,关于如何避免不必要的重绘和回流的论述,简直是实战宝典,我立刻应用到手头的项目中,效果立竿见影,页面的响应速度提升了一个台阶。这本书的价值,不在于教你如何“快速搭积木”,而在于教你如何“铸造坚固的地基”。如果你想让自己的前端代码摆脱“面条化”和“脆弱性”,这本书绝对是不可或缺的投资。
必须再买来读
20141001finished
2013-06-21 亚马逊 33.10¥;讲了几种软件工具、不少符合新标准的代码、还有一些注意事项,看看目录就能知道。感觉很多东西如同阅读w3cschool上xhtml和html5里面的内容。 2014-02-04 花了一天的时间重读并做了思维导图,书里的内容说的基本都是对的,但是现在来说很多都是大家在这样做的,有那么一些知识点的描述还不错,但就金钱和时间价值来说,建议没有必要去买或翻看这本书,即使是新手去看W3SCHOOL的会了解比这更广的知识面。
20141001finished
2013-06-21 亚马逊 33.10¥;讲了几种软件工具、不少符合新标准的代码、还有一些注意事项,看看目录就能知道。感觉很多东西如同阅读w3cschool上xhtml和html5里面的内容。 2014-02-04 花了一天的时间重读并做了思维导图,书里的内容说的基本都是对的,但是现在来说很多都是大家在这样做的,有那么一些知识点的描述还不错,但就金钱和时间价值来说,建议没有必要去买或翻看这本书,即使是新手去看W3SCHOOL的会了解比这更广的知识面。