作为网页开发与设计入门经典，《学习HTML5（第7版）》涵盖网页设计师必知必会的以下基础技术：

　　互联网概念

　　用HTML5创建Web页面

　　用层叠样式表（CSS）配置文本、颜色、页面布局

　　网页设计佳实践

　　无障碍访问标准

　　网页开发流程

　　在页面上添加多媒体与交互式元素

　　CSS3新特性

　　网站性能提升与搜索引擎优化

　　电子商务与万维网

　　JavaScript

　　本书广泛适用于各种教程与学习需求，读者可自行灵活掌握使用方法。全书共14章，主要涉及以下重要主题：HTML和CSS编码；网页设计*佳实践；链接、布局、移动性；网页开发；网页多媒体与交互性；电子商务概览；网页提升；JavaScript和jQuery简介。

　　本书适合所有对网页设计感兴趣的读者阅读，是一本理想的入门参考。

　　Terry Felke-Morris

　　她一名计算机信息系统教授，来自伊利诺斯州帕拉廷市的威廉雷尼哈珀学院。她拥有教育博士学位、信息系统理科硕士学位，以及包括Adobe Certified Dreamweaver 8 Developer, WOW Certified Associate Webmaster、 MicrosoftCertified Professional、Master CIW Designer，和 CIW Certified Instructor在内的众多认证证书。

　　Felke-Morris博士获得过威廉雷尼哈珀学院颁发的教学技术Glenn A. Reich纪念奖，以表彰她在学院的网页开发程序与课程中的设计工作。2006年，她因为在教学中出色地运用互联网技术而荣获Blackboard Greenhouse 的在线教学示范将。Felke-Morris博士在2008年收获了两个国际奖项：教学技术委员会的电子教学杰出能力奖以及MERLOT的在线教学资源示范奖。

　　因其在商务与工业领域超过25年的信息技术经验，Felke-Morris博士于1996年开通了她的一个个人网站，并且维护至今。她长期致力于万维网标准的提升，已经成为万维网标准项目教育任务项目组的成员。Felke-Morris博士是威廉雷尼哈珀学院网页开发认证与学位认定项目组的资深成员。更多有关Felke-Morris博士的信息，请访问http://terrymorris.net。

　　潘玉琪

　　同济修智能交通，学成后入行IT，与数据深交多年，业余时间不是窝在书房里看看写写画画，就是钻到厨房里折腾锅碗瓢盆，被誉为“交通圈里*会做菜的IT攻城狮”，实为一枚如假包换的程序媛。平生*大的愿望是一路逛吃逛吃走饭遍天下，然后回家山寨克隆另立门派。热爱美食与电影，业余在“小筑饭”（微信号：hspyq0601）码字写随笔。代表译著有《极客趣谈I：创意料理语营养美食》与《SQL Server 2012从入门到精通》。

目 录

第1章 互联网与万维网介绍 1
1.1 互联网与万维网 2
1.2 万维网标准与无障碍访问 5
1.3 万维网上的信息 7
1.4 网络概述 9
1.5 客户端/服务器模型 10
1.6 互联网协议 11
1.7 统一资源定位符和域名 14
1.8 标记语言 16
1.9 万维网上的流行应用 18
本章小结 22
第2章 HTML基础 27
2.1 HTML概览 28
2.2 文档类型定义 30
2.3 网页模板 30
2.4 HTML元素 30
2.5 四大元素head、title、meta
和body 31
2.6 你的第一张网页 32
2.7 标题元素 36
2.8 段落元素 38
2.9 换行元素 39
2.10 块引用元素 40
2.11 短语元素 42
2.12 有序列表 43
2.13 无序列表 45
2.14 描述列表 47
2.15 特殊字符 49
2.16 结构元素 51
2.17 锚元素 53
2.18 HTML验证 61
本章小结 64
第3章 用层叠样式表CSS配置颜色
与文本 81
3.1 层叠样式表概览 82
3.2 为网页配色 86
3.3 带样式属性的内联CSS 88
3.4 带样式元素的内嵌CSS 90
3.5 用CSS配置文本 93
3.6 CSS类、id与派生选择器 100
3.7 Span元素 103
3.8 使用外部样式表 104
3.9 用CSS实现HTML元素居中 109
3.10 层叠 111
3.12 CSS验证 113
本章小结 116
第4章 视觉元素与图像 131
4.1 配置线条与边框 132
4.2 图像类型 138
4.3 图像元素 141
4.4 HTML5视觉元素 147
4.5 背景图像 151
4.6 更多有关图像的知识 155
4.7 图片来源与使用原则 159
4.8 CSS3视觉效果 162
本章小结 180
第5章 网页设计 197
5.1 为目标受众群体而设计 198
5.2 网站的组织结构 199
5.3 视觉效果设计原则 201
5.4 无障碍访问设计 203
5.5 适合于Web的写作风格 205
5.6 颜色的使用 207
5.7 图片与多媒体的应用 214
5.8 更多设计方面的注意事项 216
5.9 导航设计 218
5.10 页面布局设计 221
5.11 设计适应于移动设备的Web 225
5.12 网页设计最佳实践核对清单 230
本章小结 233
第6章 页面布局 241
6.1 盒模型 242
6.2 正常流 244
6.3 CSS浮动 247
6.4 CSS：清除浮动 249
6.5 CSS双栏页面布局 252
6.6 无序列表中的超链接 255
6.7 用CSS伪类增加交互效果 259
6.8 CSS双栏布局实战 262
6.9 页眉文本图像替换 265
6.10 实战图片库 267
6.11 利用CSS进行定位 269
6.12 CSS调试技术 274
6.13 更多HTML5结构元素 275
6.14 旧浏览器的HTML5兼容性 278
本章小结 281
第7章 深入了解超链接、列表
和移动端网页设计 299
7.1 换个角度看看超链接 300
7.2 CSS精灵 306
7.3 三栏式CSS页面布局 309
7.4 CSS打印样式 316
7.5 设计显示于移动设备上的网页 321
7.6 视窗的meta标签 324
7.7 CSS3多媒体查询 325
7.8 弹性图像 332
7.9 测试在移动设备上的显示效果 335
7.10 CSS3弹性盒布局 338
本章小结 344
第8章 表格 365
8.1 表格概览 366
8.2 表格行、单元格与表头 368
8.3 跨行和跨列 370
8.4 配置一张可无障碍访问的表格 372
8.5 用CSS设置表格样式 374
8.6 CSS3结构化伪类 377
8.7 配置表格中的各个部分 379
本章小结 381
第9章 表单 391
9.1 表单概述 392
9.2 输入元素表单控件 394
9.3 滚动文本框 401
9.4 选择列表 404
9.5 图像按钮和按钮元素 406
9.6 无障碍访问与表单 408
9.7 用CSS定义表单样式 413
9.8 服务器端的处理 414
9.9 HTML5表单控件 418
本章小结 428
第10章 网站开发 445
10.1 大型项目的成功开发 446
10.2 开发流程 448
10.3 域名概述 457
10.4 主机寄存 458
10.5 选择虚拟主机 460
本章小结 463
第11章 多媒体与交互性 469
11.1 插件、容器和编解码器 470
11.2 开启音频与视频之旅 472
11.3 Adobe Flash 475
11.4 HTML5音频和视频元素 478
11.5 多媒体文件与版权法律 484
11.6 CSS3和交互性 485
11.7 Java 494
11.8 JavaScript 497
11.9 Ajax 499
11.10 jQuery 501
11.11 HTML5 API 502
11.12 无障碍与多媒体/交互性 505
本章小结 507
第12章 电子商务概述 519
12.1 什么是电子商务？ 520
12.2 电子商务商业模式 521
12.3 电子数据交换(EDI) 522
12.4 电子商务统计数据 522
12.5 电子商务相关问题 524
12.6 电子商务安全 525
12.7 订单和支付处理 529
12.8 开设电子商务店铺的解决
方案 530
本章小结 533
第13章 网站推广 549
13.1 搜索引擎概述 550
13.2 流行的搜索引擎 550
13.3 搜索引擎组件 550
13.4 搜索引擎优化 552
13.5 被搜索引擎收录 554
13.6 监控搜索列表 556
13.7 链接流行度 558
13.8 社交媒体优化 558
13.9 其他的网站推广活动 560
13.10 通过内联框架提供动态内容 563
本章小结 567
第14章 JavaScript 573
14.1 JavaScript概述 574
14.2 JavaScript的发展历程 574
14.3 JavaScript的常见用途 575
14.4 在网页中添加JavaScript 577
14.5 文档对象模型概述 580
14.6 事件与事件处理程序 583
14.7 变量 585
14.8 编程概念介绍 589
14.9 表单处理 595
14.10 无障碍访问与JavaScript 601
14.11 JavaScript资源 601
14.12 jQuery概述 602
14.13 在网页中添加jQuery 602
14.14 jQuery选择器 605
14.15 jQuery方法 605
14.16 jQuery图片库 608
14.17 jQuery插件 611
14.18 jQuery资源 615
本章小结 617
附录 网页开发人员手册 631
参考答案 653

　　第3章用层叠样式表CSS配置颜色与文本

　　本章学习目标

　　从打印媒介到万维网，样式表的发展历程

　　层叠样式表(CascadingStyleSheets，CSS)的优点

　　在网页上配置背景与文本颜色

　　创建用于配置通常颜色与文本属性的样式表

　　应用内联样式

　　使用内嵌的样式表

　　使用外部样式表

　　配置元素、类、id和派生选择器

　　在CSS中实现层叠(cascade)效果

　　验证CSS

　　现在你对HTML已经有所了解，是时候开始探索层叠样式表(CascadingStyleSheets，CSS)的奥秘了。网页设计师使用CSS，目的是将网页的样子与它所呈现的内容分离开来。CSS可用于文本、颜色以及网页布局的配置。它并不是新生事物——早在1996年，W3C就已经发布了首个CSS版本，并建议作为标准。到了1998年，另外一些有关如何放置网页元素的属性添加了进来，由此诞生了CSS2，这个版本用了十多年，直到2011年才被官方正式“推荐”(recommendation)。CSS继续向前发展，陆续增加了支持诸如嵌入字体、圆角、透明等效果的属性，也即CSS3的新特性。本章将介绍在写网页时如何使用CSS来配置颜色与文本。

　　3.1层叠样式表概览

　　样式表已经在桌面发布上应用了多年，作用在于向印刷媒体说明字符样式与字符间距。CSS则为网页开发人员提供了这些功能(甚至更多)。我们可以利用CSS来进行网页显示样式排版(字体、字号等等)与页面布局说明。CSSZenGarden(禅意花园)(http://www.csszengarden.com)向我们展示了CSS强大的功能与灵活性。可以访问这个网站，看看那些鲜活的CSS应用实例。请注意，访客选择的设计(CSS的作用)不同，网页所呈现的效果差别巨大。虽然CSS禅意花园里的作品都是由CSS高手完成的，但他们都曾经跟你一样，也是从基础学起的。

　　CSS是一种灵活的、交互式的、基于标准的语言，由W3C发布。我们可以访问http://www.w3.org/Style，了解官网上的CSS说明。请注意，虽然CSS已经使用多年，但它仍然被认为是一种新兴技术，并且不同浏览器对它的支持程度各不相同。在本书中我们主要关注于那些通用浏览器都能有较好支持的内容。

　　层叠样式表的优点

　　使用CSS有如下优点(图3.1)。

　　*能更好地控制字体和页面布局。这些特性包括字号、行间距、字符间距、缩进、边距和元素排列等。

　　*样式与结构分离。页面上的文本与颜色的格式可以单独配置与存储，从而使body部分独立开来，

　　*样式可以存储。我们可以将样式单独保存为一个文件，然后在网页上引用即可。修改样式时，HTML保持不变。这就意味着，如果你的客户打算将若干网页的背景颜色从红色改为白色，你只需要修改包含样式的一个文件即可，而不用挨个去改每一张网页文档了。

　　*文档可以变得更小。格式部分从文档中剥离出来了，因而实际的文档应该能变小。

　　*维护更方便。同样的道理，如果要修改样式，只需单独修改样式表。

　　图3.1单个CSS文件的强大功能

　　配置层叠样式表

　　使用CSS技术的方法有四种：内联、嵌入、外部以及导入。

　　*内联样式：代码写在网页的body部分，作为HTML标签的属性。因此样式的作用范围仅限于包含该属性的特定元素。

　　*嵌入样式(也称作内部样式)：在网页的head部分定义样式。这些样式说明对整张网页文档起作用。

　　*外部样式：样式写在独立的一个文本文件中。在写网页时，通过在head部分配置链接元素与外部样式文本文件产生关联。

　　*导入样式：与外部样式类似，样式也是写在外部文本文件中，网页中进行引用。通过使用@import指令将外部样式导入为嵌入样式，也可以导入到其他的外部样式表中。

　　样式选择器与声明

　　样式表由样式规则组成，这些规则说明了所应用的样式。每一个规则由两部分组成：选择器与声明。

　　*CSS样式规则选择器。选择器可以是一个HTML元素的名称、一个类名或一个id名称。稍后我们将讨论有关类选择器与id选择器的内容。

　　*CSS样式规则声明。声明指出你所设置的CSS属性(例如颜色)以及分配给该属性的值。

　　例如，如图3.2所示的CSS将某张网页上文本的颜色设置为蓝色。选择器是body标签，而声明将颜色属性的值设置为blue。

　　图3.2使用样式将文本颜色设置为蓝色

　　背景颜色属性

　　CSS中的background-color属性用于设置某个元素的背景颜色。下面的样式规则将会把某网页的背景色设置为黄色。请注意，声明是用大括号括起来的，而声明属性与声明值之间则用冒号分隔。

　　前言

　　这是一本网页开发的入门教程，内容涵盖了网页开发人员需要掌握的基础技术，具体如下所述：

　　?互联网概念

　　?用HTML5创建网页

　　?用层叠样式表(CSS)配置文本、颜色、页面布局

　　?网页设计最佳实践

　　?无障碍访问标准

　　?网页开发流程

　　?在页面上添加多媒体与交互式元素

　　?CSS3新特性

　　?网站性能提升与搜索引擎优化

　　?电子商务与万维网

　　?JavaScript

　　本书特别为读者提供了支持特性，即“网页开发者手册”，这是一系列附录资源的集合，包括HTML5参考、XHTML参考、HTML5和XHTML的比较、特殊实体字符列表、CSS属性参考、WCAG2.0快速参考以及FTP教程。

　　本书第7版主要关注HTML5，这种聚焦重点的做法对网页开发初学者来说是有益的。本书综合讲解HTML与CSS主题，例如文本配置、颜色配置、页面布局，同时重点突出设计、无障碍访问、万维网标准等方面的内容。第7版中的新特性主要有以下几项：

　　?增加了页面布局设计方面的内容

　　?增加了针对移动设备进行设计的内容

　　?增加了响应式网页设计技术与CSS媒体查询

　　?介绍了新的CSS3弹性盒(Flexbox)——可变布局容器模块

　　?更新了JavaScript相关内容，增加了针对jQuery的介绍

　　?更新了XHTML、HTML5和CSS参考部分的内容

　　?增加了供读者动手实践的练习

　　?更新了学习案例

　　?更新了代码示例、案例学习和网页资源

　　书中的学生文件可以到本书支持网站下载，网址为http://www.pearsonhighered.com/felke-morris。这些文件包括了动手练习的解答和网站案例学习的入门文件。

　　认真完成本书学习之后，你就能够利用现有技术来设计网页了。此外，本书也为你将来运用新的HTML5与CSS3代码技术打下了基础。

　　本书的组织结构

　　本书的组织结构如下图所示。

　　图P.1本书的组织比较灵活，读者可根据自己的需求选择阅读

　　本书广泛适用于各种教程与学习需求，读者可自行灵活掌握使用方法。第1章提供了一些介绍性的材料，视读者自身背景的不同可选择阅读或跳过。第2章至第4章介绍了HTML和CSS编码。第5章讨论了网页设计的最佳实践，可以在学习完第3章之后马上跳转至此(或者与第3章配合起来学习)。第6章至第9章继续介绍HTML与CSS。

　　后续章节各自为独立的学习体系，均可以视学习时间与学习需求的不同选择阅读：第7章(更多有关链接、布局、移动性)、第10章(网页开发)、第11章(网页多媒体与交互性)、第12章(电子商务概览)、第13章(网页提升)、第14章(对JavaScript和jQuery的简单介绍)。

　　各章概览如下所示。

　　?第1章“互联网与万维网介绍”，本章简单介绍了一些与互联网和万维网有关的术语与概念，这些知识是网页开发人员需要了解的。对许多读者来说，可将某些内容视作回顾。第1章为本书其余章节的基础。

　　?第2章“HTML基础”，在介绍HTML5的同时，我们还提供了一些示例与练习，以鼓励读者动手创建网页，从中获取有益经验。在学生文件中提供了动手实践环节的参考答案。

　　?第3章“用CSS配置颜色和文本”，本章介绍用层叠样式表(CascadingStyleSheetst，CSS)配置网页颜色与文本的技术。我们建议读者在阅读的过程中动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。

　　?第4章“视觉元素与图形”，本章讨论如何在网页上应用图形与视觉效果，包括图像优化、CSS边框、CSS图像背景、新的CSS3视觉效果以及新的HTML5元素等内容。我们建议读者在学习的过程中动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。

　　?第5章“网页设计”，本章主要关注推荐的网页设计实践与无障碍访问，并对部分内容加以强化，因为某些推荐的网站设计实践需要与其他章节相结合。

　　?第6章“页面布局”，本章继续之前已经开始的CSS学习，介绍了有关布放与浮动网页元素有关的技术，其中包括双栏式的CSS页面布局。新的HTML5语义元素与技术使得较早版本的浏览器也能兼容HTML5，我们将介绍相有关知识。学生文件的动手实践部分中提供了示例方案。

　　?第7章“链接、布局与移动性的更多内容”，本章回顾之前的一些主题，然后介绍了超链接、CSS精灵(CSSsprites)的使用、三栏式页面布局、配置与打印有关的CSS、设计移动互联网网页、用CSS多媒体查询设计自适应网页、新的CSS3弹性盒布局模块等知识。读者在阅读的过程中可以动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。

　　?第8章“表格”，本章主要关注用HTML元素创建表格。介绍了利用CSS来配置表格的方法。我们建议读者在阅读的过程中可以动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。

　　?第9章“表单”，本章主要讲解如何用HTML元素创建表单。介绍了利用CSS来配置表单的方法，以及新的HTML5表单控制元素与属性。我们建议读者在阅读的过程中动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。

　　?第10章“网页开发”，本章关注于网站开发过程，包括大规模项目的作业角色需求、网页设计过程以及网页寄存等内容。本章还介绍了网页主机检查表的有关知识。

　　?第11章“网页多媒体与交互性”，我们可以在网页上添加多媒体、交互性等元素，本章简单介绍了相关内容。这些主题包括新的HTML5视频和音频、Flash动画、Javaapplets、CSS图片库(CSSImageGallery)、新的CSS3变形与渐变属性、JavaScript、jQuery、Ajax以及新的HTML5API等。我们建议读者在阅读的过程中动手练习实践。相关的参考答案在学生文件的动手实践部分可以找到。

　　?第12章“电子商务概览”，本章介绍电子商务、安全性、网页上的订单处理流程等内容。

　　?第13章“网页提升”，本章从网页开发人员的角度讨论网站性能的提升问题，并介绍搜索引擎的优化知识。

　　?第14章“JavaScript和jQuery简介”，本章介绍利用JavaScript和jQuery写客户端脚本的技术。相关的示例方案在学生文件的动手实践部分可以找到。

　　?附录“网页开发者手册”，该附录包含读者在学习过程中需要的资源与教程，例如HTML5快速参考、特殊实体字符、CSS属性参考、HTML5与XHTML比较、WCAG2.0快速参考、网页安全色彩调色板以及FTP教程。

　　本书具有如下特点。

　　?题材选择广泛：本书既包含HTML5、CSS、JavaScript等“硬技术”(第2、3、4、6、7、8、9章)，也包含网页设计(第5章)、网站提升(第13章)、电子商务(第12章)等软技能。这就能为读者打下扎实而全面的基础，从而为从事网页设计相关工作助一臂之力。老师和学生在教学中会发现这是个十分有趣的过程，因为大家可以在学习创建网页与网站时一边讨论、一边融会贯通地综合使用“硬技术”和“软技能”。

　　?动手实践：网页开发是一项技能，任何技能都需要经过实践才能提升。本书强调了章节内部的动手实践环节，每一章结束还有练习，同时学习实际运行着的真实互联网网站案例。多种多样的练习内容便于老师根据课程或学期的需要灵活选择。

　　?网站案例学习：从第2章起贯穿全书我们提供了针对四个网站的案例研究。另一个案例从第5章开始。案例研究有助于巩固每一章学习的内容。教师可以学期为周期循环安排案例，学生们也可以根据自己的兴趣来选择。案例学习的参考答案可以从本书的教师资源中心下载，地址是http://www.pearsonhighered.com/irc。

　　?网页研究我们在每一章中都安排了网页研究环节，从而激励学生们进一步钻研该章主题。

　　?关注网页设计本书中大多数章节里都设计了配套的活动，以深入探索与该章主题相关的网页设计技巧。这些活动将帮助学生巩固、拓展和提升课程中所学主题。

　　?FAQ：在作者的网页开发课程中，学生们经常会问一些类似的问题。作者对此加以整理，在本书中增加了这一环节，并添加了FAQ标识。

　　?自测题：每一章有两至三篇自测题，汇聚了若干问题，便于学生们在学习过程中及时总结自我评估。每组问题上都有特殊的自测题图标。

　　?关注无障碍访问：开发易于访问的网站的重要性日益彰显，因此本书将对无障碍访问的关注贯穿始终。在有关无障碍访问的内容处我们设置了特殊图标以便于查找。

　　?关注道德标准：本书中与网页开发有关的道德标准内容以高亮显示，并设置了特殊的图标。

　　?参考材料：本书附录中提供了网页开发人员手册，内容包含HTML5快速参考、特殊实体字符、HTML5与XHTML比较、CSS属性参考、WCAG2.0快速参考、FTP教程、网页安全色调色板等。

　　补充材料

　　学生资源

　　编写网页练习中的学生文件、网站实例研究以及相关VideoNotes资源，都可以在本书的配套网站上获取，网址是http://www.pearsonhighered.com/felke-morris。如果书籍推出新版本，相应的资源仍能提供免费的访问。

　　教师资源

　　我们为教师提供了下列教学辅助资源。请访问Pearson的教学资源中心(http://www.pearsonhighered.com/irc)。我们提供的内容如下：

　　?每章课后练习的答案

　　?实例研究练习的答案

　　?测试题

　　?PPT展示资源

　　?示例教学大纲

　　作者的个人网站

　　除了出版社的支持网站外，本书作者建有个人网站，网址为http://www.webdevfoundations.net。在这个站点上为读者提供了另外一些有用的资源，包括复习练习以及展示各章示例、链接、更新信息的页面。出版社不负责该网站的维护。