本书分六部。第一部分从关于Web设计的一些重要信息开始，将简要介绍HTML和CSS，并介绍Web和网页一般如何工作。第二部分介绍了HTML定义、标记语言，以及如何给网页添加图片、链接、表单等基本内容。第三部分涉及网页制作的高级部分，包括层叠样式表、格式文本、颜色和背景、边框和边距、浮动和定位、CSS页面布局、变换和动画、CSS技术、自适应Web设计等高级话题。第四部分介绍了JavaScript技术，从基础的程序语法开始，使读者能很快地融入到编程的环境中。利用JavaScript做出常用的网页动态效果。第五部分介绍了网页图形制作，包括Web图形制作的基础知识。第六部分附录，包含了参考资料，如测验答案、HTML全局属性列表和CSS Selector，并介绍了HTML5及其历史。
无
如果你到硅谷旅行，在世界上一些最著名的互联网公司的全球总部之间穿梭，可以前往计算机历史博物馆。漫步在博物馆里，寻觅古老的大型机和穿孔卡的故事，你会发现这是万维网的开始。在一张与书籍同名的软盘上有一份Mosaic浏览器的副本，有一份装在盒子里出售的Netscape Navigator的副本，还有一份叫作“盒子里的互联网”的东西—一个最畅销的Windows互联网解决方案。当然，其中还有一些网站。一些最早、最著名、最重要的网站都在永久性地展出，包括1993年的由本书作者设计的O’Reilly的“全球网络导航器”。早在大多数人知道网络存在之前，甚至在很多人出生之前，Jennifer就在忙着设计第一个商业网站。她从一开始就在那里，见证、参与了网络发展的每一个阶段。
本书现在已经是第5版，里面有很多新的内容以及对早期内容的更新。
经常有人问我：“学习Web技术的最佳资源是什么?”反正我是通过读书来学习的。博客文章很棒，但你也需要全面深入地了解这个主题。起初，所有的书都是针对初学者的，讲述HTML、URL以及如何使用浏览器。当CSS出现时，关于CSS的书假设你已经在使用HTML了，教你如何切换到新技术。然后CSS3出现了，所有的书又在教我们如何将新的CSS属性添加到对CSS2的理解中。当然，总是有适合初学者的书，但它们是超级基础的，从没有触及适用于专业人员的专业技术。每一代的新书都假设你具备了之前的知识，这对从事这个行业的人来说太棒了，但对新手来说却不适用。
那么，在这个世界上，你应该如何阅读20多年来的技术，丢弃过时的东西，记住仍然正确的东西呢？如果根本不知道日常工作中“真正的专业代码是什么”这样的基础知识，你怎么能开启一段职业生涯呢？
这不可能。这就是为什么如今人们让我推荐一本书时，我只会给出一个答案，那就是本书。
你现在读的这本书不需要任何预备知识。你不需要以前制作过网页，也不需要知道在哪里可以获得代码编辑器。本书从头开始讲解Web设计。然而，与其他所有从头开始讲解的书不同，本书会让你快速地了解核心知识。Jennifer会解释你所需要的每一个设计细节，包括一些非常高级的概念。本书中充满了来自顶尖专家的前沿知识和内部知识。
老实说，我不知道她是怎么做到的。一个人怎么能同时教授基础知识和高级知识呢？通常情况下，你会分几年学习这些东西，同时你会有一个痛苦的过程。在这里，无论你基础如何，Jennifer都会带你走得更远。我们中的每一个人，包括我自己—CSS工作组（发明新CSS技术的那些人）成员—都可以从本书中学到很多东西。每次我拿起它时都有这样的感觉。
请注意页边的注释，阅读她推荐的网站，观看视频。Jennifer为你提供了一条成为专业网络技术人员的捷径。关注她提到的人，阅读他们建议的链接，这些人可能是你未来的同事。要敢于梦想你会遇见他们，毕竟他们也只是推特用户而已。这是一个小世界，但充满了真实的人，你可以成为其中的一部分，本书会帮你入门。
Jen Simmons
Mozilla的设计者和开发倡导者，CSS工作组成员
2018年4月
前言
非常欢迎阅读第5版！
几十年来，我一直在像这样的书中记录Web设计和开发工作，着迷于Web环境是如何从一个版本变化到另一个版本的。第5版也不例外!这个版本不仅比上一版多了将近200页，而且还有一些重要的更新和值得注意的新增内容。
首先，一些在上一版中是全新甚至实验性的技术已经很好地实现了—HTML5得到广泛应用，CSS正朝着模块化方法推进。我们在围绕着各种各样的设备进行设计。现在自适应Web设计（RWD）是构建网站的实际方法，因此，RWD在本版中占据了单独的一章（第17章）。在上一版中，我们讨论了如何处理自适应图像标记，而在第5版中，新的自适应图像元素被标准化了并得到很好的支持（第7章）。我们已经掌握了处理这个移动事物的窍门!
在过去的几年里，我看到了很多Web设计的巨大变化，而这一次，Flexbox和网格（Grid）从根本上改变了我们的设计方式。正如我们看到CSS将基于表的布局和1像素间隔的GIF从困境中解脱出来一样，Flexbox和网格最终将我们以前基于浮动的布局技巧抛到了一边，这简直就是一场革命。25年后，拥有一个实实在在的布局解决方案是令人耳目一新的。这一版新增了一个关于使用Flexbox和网格进行正确页面布局的章节（第16章）。
尽管HTML、CSS和JavaScript是Web开发的核心知识，但这门学科一直在发展，而且坦率地说，也在变得更加复杂。因此，有必要介绍一些新的工具，如CSS处理器、特性检测、命令行、任务运行程序和Git等（第20章）。当然，这需要你学习更多的东西，但好处是得到一个精简、更有效的工作流程。
对我个人来说，最大的惊喜是第4版以来网络图像制作方面发生了巨大的变化。除了引入PNG格式外，图像章节在过去20年里基本没有变化。但这次不是这样了！旧格式GIF正处于“退役”的边缘，PNG成了默认配置，这要归功于它的性能优势和新工具，甚至可以让更小的8位PNG包含多个级别的透明度。但是，PNG必须密切关注WebP，这是本书第一次提到WebP，其可能会在文件大小和功能方面成为强有力的竞争者。然而，最重要的关于Web图像的消息是SVG（可伸缩矢量图形）的出现。多亏了广泛的浏览器支持，SVG从上一版中的未来展望一节变成了本版中完整的应用实践一章（第25章）。
与前4版一样，无论初学者的背景是经验丰富的平面设计师、想扩展技能的程序员以及任何想学习制作网站的人，本书都可以满足需求。我已经尽最大努力把自己初学Web设计课程的经验融入本书中，并提供了练习和测验，这样你就可以获得实操经验，并且可以检查学习进度。
无论你是专门阅读本书，还是将其作为Web设计课程的辅助读物，我都希望它能给你一个良好的开端，并预祝你学得开心。
本书的组织结构
本书分为六部分，每一部分都是Web开发的一个重要方面。
第一部分：开始起步
第一部分为本书后面的学习奠定了基础。我从关于Web设计的一些重要信息开始讲述，包括你可能会扮演的各种角色，你可能会学到的技术和工具。你会学到HTML和CSS，并学习Web和网页一般如何工作。我也会介绍一些重要的概念，带你体会现代Web设计师的思想。
第二部分：HTML结构
第二部分涵盖每个元素和属性的本质以及语义结构。我们将讨论如何标记文本、链接、图像、表格、表单和嵌入式媒体。
第三部分：表现层的CSS
在第三部分，你会学习使用CSS来改变文本的外观，为页面创建多列布局，甚至添加基于时间的动画、交互等。该部分还介绍了自适应Web设计，以及作为现代开发人员工作流一部分的工具和技术。
第四部分：JavaScript行为
在第四部分，Mat Marquis从JavaScript的语法开始讲解，带领你逐步学习变量、函数。你也会学到JavaScript的使用方式（包括DOM脚本），以及已有的JavaScript工具（如polyfill和库），即便你还没有准备好从头开始编写代码，这些工具也可以帮助你更快地使用JavaScript。
第五部分：Web图像
第五部分介绍Web适用的各种图像文件格式，提供了将其作为自适应工作流的一部分进行选择的策略，而且描述了如何进行优化才能使文件尺寸尽可能小。此外，该部分还包括一个关于SVG图形的章节，这为自适应设计和交互式设计提供了极大的便利。
第六部分：附录
第六部分包含参考资料，如测验答案、HTML全局属性列表和CSS选择器，还介绍了HTML5及其历史。
排版约定
斜体（Italic）
用于表示文件名和目录名，也用于强调。
等宽字体（Constant width）
用于表示代码示例和键盘命令。
等宽斜体（Constant width italic）
用于表示属性和样式表属性值的占位符。
→
表示文本中有一行代码被折断，但应保持在同一行中。
致谢
这一版再一次得到了许多聪明可爱的人的支持。
我想特别感谢两位了不起的技术审校者。非常感谢Elika J. Etemad（fantasai），她是W3C CSS工作组的成员，帮助我使此版更加准确并且遵循最新的标准。她坚持不懈，从结果来看是值得的。Petter Dessne作为一名教授和一名以英语为第二语言的读者，带来了计算机科学方面的专业知识和他的宝贵观点。
我也很感谢Web设计的“超级明星”，他们审阅了各自专业领域的特定章节和段落，他们是（按字母顺序排列）：Amelia Bellamy-Royds（SVG），Brent Beer（开发者工具），Chris Coyier （SVG），Terence Eden（音频/视频），Brad Frost（自适应Web设计），Lyza Danger Gardner（开发者工具），Jason Grigsby（图像），Val Head（动画），Daniel Hengeveld（开发者工具），Mat Marquis（自适应图像），Eric Meyer（CSS布局），Jason Pamental（Web字体），Dan Rose（图像），Arsenio Santos（嵌入式媒体），Jen Simmons（CSS布局），Adam Simpson（开发者工具），以及James Williamson（结构化数据）。
感谢Mat Marquis对两大生动的JavaScript章节的贡献，这两章内容我永远也写不出来。还要感谢Jen Simmons为本书撰写了序言，同时也感谢她对本书的持续支持。
我要感谢O’Reilly Media的优秀团队：Meg Foley（策划编辑），Jeff Bleiel（开发编辑），Kristen Brown（制作编辑），Rachel Monaghan（文字编辑），Sharon Wilkey（校对人员），以及Lucie Haskins（索引制作人员）。特别感谢InDesign和书籍制作专家Ron Bilodeau，Ron把我的设计变成了一个模板和一套工具，让书籍制作其乐无穷。还要特别感谢Edie Freedman精美的封面设计。
最后，感谢我最亲爱的宝贝Jeff和Arlo的爱和支持。
关于作者
Jennifer Niederst Robbins于1993年开始从事Web设计工作，当时她是O’Reilly的“全球网络导航器”（Global Network Navigator）的平面设计师，这也是第一个商业网站。除了本书之外，她还写了Web Design in a Nutshell和HTML5 Pocket Reference，均由O’Reilly出版。她是Artifact Conference的创始人和组织者，该会议致力于解决与移动Web设计相关的问题。Jennifer经常在各种会议上发表演讲，并且曾在罗得岛州普罗维登斯的约翰逊与威尔士大学任教。在空闲的时候，Jennifer喜欢独立摇滚、烹饪、旅游和教育子女。
如何联系我们
对于本书，如果有任何意见或疑问，请按照以下地址联系本书出版商。
美国：
O’Reilly Media，Inc.
1005 Gravenstein Highway North
Sebastopol，CA 95472
中国：
北京市西城区西直门南大街2号成铭大厦C座807室（100035）
奥莱利技术咨询（北京）有限公司
要询问技术问题或对本书提出建议，请发送电子邮件至bookquestions@oreilly.com。
本书配套网站http://bit.ly/learningWebDesign_5e上列出了勘误表、示例以及其他信息。
关于书籍、课程、会议和新闻的更多信息，请访问我们的网站http://www.oreilly.com。
我们在Facebook上的地址：http://facebook.com/oreilly
我们在Twitter上的地址：http://twitter.com/oreillymedia
我们在YouTube上的地址：http://www.youtube.com/oreillymedia
计算机\Web设计
你是否曾想过自己创建网页，但苦于没有经验？那么从现在开始学习吧！本书由浅入深地讲解了Web设计的一些重要概念、基本原理，以及HTML、CSS和JavaScript的具体使用方法与技巧。当你读完本书后，将会掌握创建适用于移动设备的多列页面的技巧。
每章都提供了一些练习和小测验，帮助你了解不同的技术，巩固对重要概念的理解。
第5版进行了全面更新和修订，涵盖了Web前端开发所需的一切，无论对初学者还是对想提高已有技能的专业开发人员，本书都是理想的选择。
本书主要内容：
n 使用文本、链接、图像、表格和表单来构建HTML页面。
n 使用CSS调整颜色、背景、页面布局以及格式化文本，甚至是实现简单的动画效果。
n 学习JavaScript的工作原理及其在Web设计中的重要性。
n 创建并优化Web图像，加快图像下载速度。
本版新增内容：
n 使用CSS Flexbox和网格实现复杂灵活的页面布局。
n 学习自适应Web设计的细节，使Web页面在所有设备上看起来都很棒。
n 熟悉现代Web开发者工具包中的命令行、Git和其他工具。
n 了解SVG图像的超强能力。
关于作者
Jennifer Niederst Robbins 资深Web设计师，有25年行业经验，在Web设计方面有独到的见解与认识，全球第一个商业Web网站——O’Reilly的“全球网络导航器”（Global Network Navigator，GNN）的设计者。她是Artifact Conference的创始人和组织者，该会议致力于解决与移动Web设计相关的问题。她是全美广受欢迎的会议演讲者，著有Web Design in a Nutshell和HTML5 Pocket Reference。
“ 与其他所有从头开始讲解的书不同，本书会让你快速地了解核心知识。Jennifer会解释你所需要的每一个设计细节，包括一些非常高级的概念。”
——Jen Simmons
Mozilla的设计者，W3C CSS工作组成员
无论你是一名初学者还是想进一步提高自己的网页设计技能，本书都能为你提供极具参考性的信息。我力求生动地展现每一个设计细节，配以大量的练习和实例帮助你掌握新的技术。阅读本书就好像跟随我在课堂中学习一样，轻松且愉悦！ ——Jennifer Niederst Robbins
如果你到硅谷旅行，在世界上一些最著名的互联网公司的全球总部之间穿梭，可以前往计算机历史博物馆。漫步在博物馆里，寻觅古老的大型机和穿孔卡的故事，你会发现这是万维网的开始。在一张与书籍同名的软盘上有一份Mosaic浏览器的副本，有一份装在盒子里出售的Netscape Navigator的副本，还有一份叫作“盒子里的互联网”的东西—一个最畅销的Windows互联网解决方案。当然，其中还有一些网站。一些最早、最著名、最重要的网站都在永久性地展出，包括1993年的由本书作者设计的O’Reilly的“全球网络导航器”。早在大多数人知道网络存在之前，甚至在很多人出生之前，Jennifer就在忙着设计第一个商业网站。她从一开始就在那里，见证、参与了网络发展的每一个阶段。
本书现在已经是第5版，里面有很多新的内容以及对早期内容的更新。
经常有人问我：“学习Web技术的最佳资源是什么?”反正我是通过读书来学习的。博客文章很棒，但你也需要全面深入地了解这个主题。起初，所有的书都是针对初学者的，讲述HTML、URL以及如何使用浏览器。当CSS出现时，关于CSS的书假设你已经在使用HTML了，教你如何切换到新技术。然后CSS3出现了，所有的书又在教我们如何将新的CSS属性添加到对CSS2的理解中。当然，总是有适合初学者的书，但它们是超级基础的，从没有触及适用于专业人员的专业技术。每一代的新书都假设你具备了之前的知识，这对从事这个行业的人来说太棒了，但对新手来说却不适用。
那么，在这个世界上，你应该如何阅读20多年来的技术，丢弃过时的东西，记住仍然正确的东西呢？如果根本不知道日常工作中“真正的专业代码是什么”这样的基础知识，你怎么能开启一段职业生涯呢？
这不可能。这就是为什么如今人们让我推荐一本书时，我只会给出一个答案，那就是本书。
你现在读的这本书不需要任何预备知识。你不需要以前制作过网页，也不需要知道在哪里可以获得代码编辑器。本书从头开始讲解Web设计。然而，与其他所有从头开始讲解的书不同，本书会让你快速地了解核心知识。Jennifer会解释你所需要的每一个设计细节，包括一些非常高级的概念。本书中充满了来自顶尖专家的前沿知识和内部知识。
老实说，我不知道她是怎么做到的。一个人怎么能同时教授基础知识和高级知识呢？通常情况下，你会分几年学习这些东西，同时你会有一个痛苦的过程。在这里，无论你基础如何，Jennifer都会带你走得更远。我们中的每一个人，包括我自己—CSS工作组（发明新CSS技术的那些人）成员—都可以从本书中学到很多东西。每次我拿起它时都有这样的感觉。
请注意页边的注释，阅读她推荐的网站，观看视频。Jennifer为你提供了一条成为专业网络技术人员的捷径。关注她提到的人，阅读他们建议的链接，这些人可能是你未来的同事。要敢于梦想你会遇见他们，毕竟他们也只是推特用户而已。这是一个小世界，但充满了真实的人，你可以成为其中的一部分，本书会帮你入门。
Jen Simmons
Mozilla的设计者和开发倡导者，CSS工作组成员
2018年4月
前言
非常欢迎阅读第5版！
几十年来，我一直在像这样的书中记录Web设计和开发工作，着迷于Web环境是如何从一个版本变化到另一个版本的。第5版也不例外!这个版本不仅比上一版多了将近200页，而且还有一些重要的更新和值得注意的新增内容。
首先，一些在上一版中是全新甚至实验性的技术已经很好地实现了—HTML5得到广泛应用，CSS正朝着模块化方法推进。我们在围绕着各种各样的设备进行设计。现在自适应Web设计（RWD）是构建网站的实际方法，因此，RWD在本版中占据了单独的一章（第17章）。在上一版中，我们讨论了如何处理自适应图像标记，而在第5版中，新的自适应图像元素被标准化了并得到很好的支持（第7章）。我们已经掌握了处理这个移动事物的窍门!
在过去的几年里，我看到了很多Web设计的巨大变化，而这一次，Flexbox和网格（Grid）从根本上改变了我们的设计方式。正如我们看到CSS将基于表的布局和1像素间隔的GIF从困境中解脱出来一样，Flexbox和网格最终将我们以前基于浮动的布局技巧抛到了一边，这简直就是一场革命。25年后，拥有一个实实在在的布局解决方案是令人耳目一新的。这一版新增了一个关于使用Flexbox和网格进行正确页面布局的章节（第16章）。
尽管HTML、CSS和JavaScript是Web开发的核心知识，但这门学科一直在发展，而且坦率地说，也在变得更加复杂。因此，有必要介绍一些新的工具，如CSS处理器、特性检测、命令行、任务运行程序和Git等（第20章）。当然，这需要你学习更多的东西，但好处是得到一个精简、更有效的工作流程。
对我个人来说，最大的惊喜是第4版以来网络图像制作方面发生了巨大的变化。除了引入PNG格式外，图像章节在过去20年里基本没有变化。但这次不是这样了！旧格式GIF正处于“退役”的边缘，PNG成了默认配置，这要归功于它的性能优势和新工具，甚至可以让更小的8位PNG包含多个级别的透明度。但是，PNG必须密切关注WebP，这是本书第一次提到WebP，其可能会在文件大小和功能方面成为强有力的竞争者。然而，最重要的关于Web图像的消息是SVG（可伸缩矢量图形）的出现。多亏了广泛的浏览器支持，SVG从上一版中的未来展望一节变成了本版中完整的应用实践一章（第25章）。
与前4版一样，无论初学者的背景是经验丰富的平面设计师、想扩展技能的程序员以及任何想学习制作网站的人，本书都可以满足需求。我已经尽最大努力把自己初学Web设计课程的经验融入本书中，并提供了练习和测验，这样你就可以获得实操经验，并且可以检查学习进度。
无论你是专门阅读本书，还是将其作为Web设计课程的辅助读物，我都希望它能给你一个良好的开端，并预祝你学得开心。
本书的组织结构
本书分为六部分，每一部分都是Web开发的一个重要方面。
第一部分：开始起步
第一部分为本书后面的学习奠定了基础。我从关于Web设计的一些重要信息开始讲述，包括你可能会扮演的各种角色，你可能会学到的技术和工具。你会学到HTML和CSS，并学习Web和网页一般如何工作。我也会介绍一些重要的概念，带你体会现代Web设计师的思想。
第二部分：HTML结构
第二部分涵盖每个元素和属性的本质以及语义结构。我们将讨论如何标记文本、链接、图像、表格、表单和嵌入式媒体。
第三部分：表现层的CSS
在第三部分，你会学习使用CSS来改变文本的外观，为页面创建多列布局，甚至添加基于时间的动画、交互等。该部分还介绍了自适应Web设计，以及作为现代开发人员工作流一部分的工具和技术。
第四部分：JavaScript行为
在第四部分，Mat Marquis从JavaScript的语法开始讲解，带领你逐步学习变量、函数。你也会学到JavaScript的使用方式（包括DOM脚本），以及已有的JavaScript工具（如polyfill和库），即便你还没有准备好从头开始编写代码，这些工具也可以帮助你更快地使用JavaScript。
第五部分：Web图像
第五部分介绍Web适用的各种图像文件格式，提供了将其作为自适应工作流的一部分进行选择的策略，而且描述了如何进行优化才能使文件尺寸尽可能小。此外，该部分还包括一个关于SVG图形的章节，这为自适应设计和交互式设计提供了极大的便利。
第六部分：附录
第六部分包含参考资料，如测验答案、HTML全局属性列表和CSS选择器，还介绍了HTML5及其历史。
排版约定
斜体（Italic）
用于表示文件名和目录名，也用于强调。
等宽字体（Constant width）
用于表示代码示例和键盘命令。
等宽斜体（Constant width italic）
用于表示属性和样式表属性值的占位符。
→
表示文本中有一行代码被折断，但应保持在同一行中。
致谢
这一版再一次得到了许多聪明可爱的人的支持。
我想特别感谢两位了不起的技术审校者。非常感谢Elika J. Etemad（fantasai），她是W3C CSS工作组的成员，帮助我使此版更加准确并且遵循最新的标准。她坚持不懈，从结果来看是值得的。Petter Dessne作为一名教授和一名以英语为第二语言的读者，带来了计算机科学方面的专业知识和他的宝贵观点。
我也很感谢Web设计的“超级明星”，他们审阅了各自专业领域的特定章节和段落，他们是（按字母顺序排列）：Amelia Bellamy-Royds（SVG），Brent Beer（开发者工具），Chris Coyier （SVG），Terence Eden（音频/视频），Brad Frost（自适应Web设计），Lyza Danger Gardner（开发者工具），Jason Grigsby（图像），Val Head（动画），Daniel Hengeveld（开发者工具），Mat Marquis（自适应图像），Eric Meyer（CSS布局），Jason Pamental（Web字体），Dan Rose（图像），Arsenio Santos（嵌入式媒体），Jen Simmons（CSS布局），Adam Simpson（开发者工具），以及James Williamson（结构化数据）。
感谢Mat Marquis对两大生动的JavaScript章节的贡献，这两章内容我永远也写不出来。还要感谢Jen Simmons为本书撰写了序言，同时也感谢她对本书的持续支持。
我要感谢O’Reilly Media的优秀团队：Meg Foley（策划编辑），Jeff Bleiel（开发编辑），Kristen Brown（制作编辑），Rachel Monaghan（文字编辑），Sharon Wilkey（校对人员），以及Lucie Haskins（索引制作人员）。特别感谢InDesign和书籍制作专家Ron Bilodeau，Ron把我的设计变成了一个模板和一套工具，让书籍制作其乐无穷。还要特别感谢Edie Freedman精美的封面设计。
最后，感谢我最亲爱的宝贝Jeff和Arlo的爱和支持。
关于作者
Jennifer Niederst Robbins于1993年开始从事Web设计工作，当时她是O’Reilly的“全球网络导航器”（Global Network Navigator）的平面设计师，这也是第一个商业网站。除了本书之外，她还写了Web Design in a Nutshell和HTML5 Pocket Reference，均由O’Reilly出版。她是Artifact Conference的创始人和组织者，该会议致力于解决与移动Web设计相关的问题。Jennifer经常在各种会议上发表演讲，并且曾在罗得岛州普罗维登斯的约翰逊与威尔士大学任教。在空闲的时候，Jennifer喜欢独立摇滚、烹饪、旅游和教育子女。
如何联系我们
对于本书，如果有任何意见或疑问，请按照以下地址联系本书出版商。
美国：
O’Reilly Media，Inc.
1005 Gravenstein Highway North
Sebastopol，CA 95472
中国：
北京市西城区西直门南大街2号成铭大厦C座807室（100035）
奥莱利技术咨询（北京）有限公司
要询问技术问题或对本书提出建议，请发送电子邮件至bookquestions@oreilly.com。
本书配套网站http://bit.ly/learningWebDesign_5e上列出了勘误表、示例以及其他信息。
关于书籍、课程、会议和新闻的更多信息，请访问我们的网站http://www.oreilly.com。
我们在Facebook上的地址：http://facebook.com/oreilly
我们在Twitter上的地址：http://twitter.com/oreillymedia
我们在YouTube上的地址：http://www.youtube.com/oreillymedia
Web已经存在近30年，经历了早期扩张、萧条、重生，以及在此过程中的不断演变。有一点是肯定的：Web作为一种交流和商业媒介将会继续存在下去。不仅如此，它还在智能手机、平板电脑、电视等设备上找到了出路。从来没有这么多可以运用Web设计技巧的机会。
无论动机是什么，第一个问题总是一样的：“我从哪里开始?”可能看起来要学的东西堆积如山，弄清楚从哪里介入并不容易，但你必须从某个地方开始。
本书是一本完整的Web 设计和制作的入门指南。它分为六大部分：关于Web和Web设计的基本知识、HTML、CSS、JavaScript、Web图像制作和附录。实践是最好的学习方法，因此本书给出了很多练习，同时还提供了在线资料。
同之前的版本相比，第5版增加了一些新的主题，例如：
CSS Flexbox和网格布局，主要用于复杂和灵活的页面布局。
自适应Web设计，使Web页面在不同尺寸的屏幕上都能正常工作。
命令行、Git和其他一些现代Web开发工具。
关于SVG的新章节，以及如何在自适应布局中使用它。
本书作者Jennifer Niederst Robbins是早期的Web设计师之一，从1993年就开始设计网站，是第一个商业网站—O’Reilly的“全球网络导航器”（Global Network Navigator，GNN）的设计师。自1995年以来，她一直在编写有关Web设计的书籍。
本书尽管是面向初学者的，但也涉及高级主题，这有助于读者全面梳理所学内容，并明确发展方向。因此，本书不仅适合学生，也适合有一定背景和技能的专业人士。只要你的工作与创建、改造或者升级网站有关系，或者打算以后从事与Web相关的工作，都应该看看这本书。
由于翻译水平和时间有限，译文难免存在错误和疏漏，恳请读者批评指正。
刘红泉
2020年6月于北京
序言1
前言3
第一部分 开始起步7
第1章 Web设计入门9
从哪里开始9
它需要一个团队（网站创建角色）10
为Web设计做准备19
你学会了什么25
自我测验25
第2章 Web是如何工作的26
互联网与Web26
提供你的信息27
关于浏览器27
网页地址（URL）29
网页结构31
小结36
自我测验37
第3章 Web设计基本概念39
各种设备40
与标准一致41
逐步提高42
自适应Web设计43
可访问性：所有用户一个网站46
网站性能：连接速度的要求48
自我测验50
第二部分 HTML结构53
第4章 创建简单网页55
创建网页的步骤55
启动文本编辑器56
第1步：从内容开始58
第2步：HTML文档结构化61
第3步：确定文本元素64
第4步：添加图像67
第5步：使用样式表改变外观70
当网页出错时72
验证你的文档73
自我测验74
元素回顾：HTML文档结构75
第5章 标记文本76
段落76
标题77
主题中断78
列表79
更多内容元素82
组织网页内容85
内联元素综述91
泛型元素div和span100
使用ARIA提高可访问性104
字符转义107
小结109
自我测验112
元素回顾：文本元素112
第6章 添加链接115
href属性115
链接到Web上的网页117
站内链接118
以新浏览器窗口为目标127
邮件链接129
电话链接129
自我测验130
元素回顾：链接131
第7章 添加图像132
图像格式简介133
img元素134
添加SVG图像139
自适应图像标记146
小结158
自我测验158
元素回顾：图像159
第8章 表格标记161
如何使用表格161
最小表结构162
表头165
合并单元格165
表格可访问性166
行和列组168
小结170
自我测验172
元素回顾：表格172
第9章 表单174
表单如何工作174
表单元素176
变量和内容178
重要表单控件综述179
表单可访问性功能197
表单布局和设计201
自我测验202
元素回顾：表单203
第10章 嵌入式媒体207
窗口中的窗口207
多用途嵌入器209
视频和音频210
画布219
自我测验223
元素回顾：嵌入式媒体223
第三部分 表现层的CSS227
第11章 介绍层叠样式表229
CSS的优点229
样式表如何工作231
大概念235
CSS计量单位241
开发者工具就在浏览器中244
继续使用CSS246
自我测验247
第12章 格式化文本248
基本字体属性249
使用CSS3的高级排版功能265
改变文本颜色267
更多选择器类型268
文本行设置274
下划线和其他“修饰”277
改变字母大小写278
空格279
文本阴影280
改变列表的数字编号284
自我测验286
CSS回顾：字体和文本属性288
第13章 颜色和背景290
指定颜色值290
前景色297
背景色298
裁剪背景299
使用不透明度300
伪类选择器301
伪元素选择器306
属性选择器308
背景图像309
快捷背景属性323
渐变327
外部样式表334
小结339
自我测验339
CSS回顾：色彩和背景属性341
第14章 盒子思想342
元素盒子342
指定盒子尺寸343
填充348
边框352
空白边362
分配显示类型365
盒子阴影368
自我测验369
CSS回顾：盒子属性369
第15章 浮动与定位372
普通流372
浮动373
用CSS形状进行精美文本环绕383
定位基础390
相对定位391
绝对定位392
固定定位400
自我测验401
CSS回顾：浮动和定位属性402
第16章 使用Flexbox和网格进行CSS布局403
使用CSS Flexbox的灵活盒子403
CSS网格布局432
自我测验463
CSS回顾：布局属性466
第17章 自适应Web设计469
为什么要使用RWD470
自适应秘诀470
选择断点477
自适应设计481
关于测试492
更多的RWD资源494
自我测验495
第18章 过渡、变换和动画497
CSS过渡497
CSS变换507
关键帧动画515
小结520
自我测验521
CSS回顾：过渡、变换和动画522
第19章 更多CSS技术524
对表单设置样式524
对表格设置样式527
重置和Normalize.css530
图像替换技术532
CSS Sprite533
CSS特性检测535
小结539
自我测验539
CSS回顾：表格属性541
第20章 现代Web开发工具542
熟悉命令行542
CSS的强大工具：处理器546
构建工具：Grunt和Gulp552
使用Git和Github进行版本控制554
小结560
自我测验561
第四部分 JavaScript行为563
第21章 JavaScript简介565
关于JavaScript565
给网页添加JavaScript568
脚本剖析569
浏览器对象582
事件582
综合应用584
学习更多关于JavaScript的知识585
自我测验588
第22章 使用JavaScript和DOM589
DOM简介589
polyfill597
JavaScript库599
小结603
自我测验603
第五部分 Web图像605
第23章 Web图像基础607
图像来源607
格式简介610
图像尺寸和分辨率620
图像资产策略623
favicon627
小结630
自我测验630
第24章 图像资产制作632
将图像保存为Web格式632
使用透明度637
自适应图像制作技巧640
图像优化650
自我测验660
第25章 SVG661
使用XML绘图663
SVG作为XML的特性670
SVG工具675
SVG制作技巧677
自适应SVG681
SVG的进一步探索687
自我测验687
我们学完了688
第六部分 附录689
附录A 自我测验答案691
附录B HTML5全局属性705
附录C CSS选择器的第3级和第4级707
附录D 从HTML+到HTML5710
