《HTML5与CSS3入门经典(第4版)》具有经典教材的特色，通俗易懂，结构清晰，由浅入深地阐述网页设计师必知必会的基本技能和概念：

概要介绍互联网与万维网

HTML5网页开发基础

运用CSS配置色彩与文本

运用CSS配置页面布局

配置图像与多媒体

探究新增的CSS3属性

应用网页设计*实践

设计无障碍、使用体验更好的网页

为搜索引擎优化而设计

选择域名

上线

第4版新增特色

在沿袭前几版经典教材风格的基础上，新版进行修订和更新，全面覆盖HTML CSS，主题涉及文本配置、色彩配置和页面布局，进一步聚焦于网页设计、无障碍和Web标准。

根据更新标准修订HTML5元素和属性

进一步探讨响应式网页设计技术与CSS媒体查询

进一步覆盖响应式图像技术，重点介绍新增的HTML5元素Picture

引入动态菜单的CSS编码技术

更新HTML5 CSS参考资源

新增动手实作，新增案例

修订范例代码与网络资源

新增附录，简要介绍Flexbox (CSS Flexible Box Layout)

《HTML5与CSS3入门经典(第4版)》针对HTML5和CSS3的*标准进行及时的更新和修订，包含的主题有：Internet和Web概念；创建HTML5网页；用CSS配置颜色和文本；用CSS配置页面布局；配置图像和多媒体；探索新增的CSS3特性；应用网页设计*实践；设计可访问和可用的网页；搜索引擎优化设计；选择域名；发布网站。

《HTML5与CSS3入门经典(第4版)》适合所有对网页设计感兴趣的读者阅读，是一本理想的入门教程。

特丽•
菲尔克-莫里斯博士（Terry Felke-Morris），美国哈珀学院荣休教授，她身兼作者、教师、设计师及摄影师多重身份，熟悉各种平台和软件开发语言，有超过25年的IT经验，讲授的课程有网页开发、计算机信息系统、教学技术和数学，以及信息管理和数据库研究生课程。

莫里斯博士富有创新精神，先后荣获2002—2003年度 Glenn A. Reich纪念奖（嘉奖她在教育技术方面所做的努力）和2006年度 Blackboard Greenhouse远程教学模范奖（嘉奖她在课堂教学中带头使用互联网），还作为2008年度远程教育优秀教师入选美国教育技术委员会。

莫里斯博士的《学习HTML5》系列已经出版发行到第8版，另一本以动手实作和案例学习著称的入门经典《HTML5与CSS3入门经典》系列也备受广大师生青睐。

她一直保持着旺盛的学习力，拥有教育学博士学位、信息系统硕士学位和远程教学硕士学位，她有很多从业资格证书，比如CIW电子商务设计师、CIW设计师、CIW认证讲师，WOW网络管理员和Adobe认证Dreamweaver 8开发人员等。

目录第1 章  互联网和万维网基础                   11.1　互联网和万维网                   2互联网                      2互联网的诞生                2互联网的发展                    2万维网的诞生                2第一个图形化浏览器          3各种技术的聚合              31.2　网页标准和无障碍访问             4W3C 推荐标准               4网页标准和无障碍访问        4无障碍访问和法律            4网页通用设计                51.3　浏览器和服务器                   6网络概述                    6客户端/ 服务器模型               6客户端                      7服务器                      71.4　Internet 协议                 8电子邮件协议                8超文本传输协议              8文件传输协议                8传输控制协议/Internet 协议    8IP 地址                          91.5　统一资源标识符(URI) 和域名      10URI 和URL                     10域名                       10顶级域名                   10通用顶级域名               11国家代码顶级域名           12域名系统DNS                   131.6　网上的信息                      14使用网上信息时的道德规范   151.7　HTML 概述                      16什么是HTML               16什么是XML                17什么是XHTML                  17HTML 的最新版本HTML5        171.8　网页幕后揭秘                    18文档类型定义(DTD)         18网页模板                   18html 元素                  18页头区域                   19主体区域                   191.9　第一个网页                      20动手实作1.1                20保存文件                   22复习和练习                      24复习题                     24动手练习                   24网上调研                   25聚焦网页设计               26第2 章  HTML 基础                     272.1　标题元素                        28动手实作2.1                28无障碍访问和标题           29HTML5 更多的标题选项     292.2　段落元素                        30动手实作2.2                30对齐                       312.3　换行和水平标尺                  32换行元素                   32水平标尺元素               32动手实作2.3                32动手实作2.4                332.4　块引用元素                      34动手实作2.5                352.5　短语元素                        362.6　有序列表                        38type 属性、start 属性和reversed属性                       38动手实作2.6                392.7　无序列表                        40动手实作2.7                412.8　描述列表                        42动手实作2.8                432.9　特殊字符                        44动手实作2.9                442.10　HTML 语法校验                 46动手实作2.10               462.11　结构元素                       48div 元素                    48header 元素                 48nav 元素                        48main 元素                       48footer 元素                      48动手实作2.11               492.12　练习使用结构元素               50动手实作2.12               502.13　锚元素                         52动手实作2.13               52链接目标                   53绝对链接                   53相对链接                   53block anchor                     53无障碍访问和超链接         532.14　练习使用链接                   54站点地图                   54动手实作2.14               542.15　电子邮件链接                   58动手实作2.15               59复习和练习                      60复习题                     60动手练习                   61聚焦网页设计               61案例学习                   61度假村案例学习：Pacifi c Trails Resort               62瑜珈馆案例学习：Path of Light Yoga Studio      65第3 章  网页设计基础                   713.1　为目标受众设计                  72浏览器                     73屏幕分辨率                 733.2　网站的组织                      74分级式组织                 74线性组织                   75随机组织                   753.3　视觉设计原则                    76重复：在整个设计中重复视觉元素                       76对比：添加视觉刺激和吸引注意力                     77近似：分组相关项目         77对齐：对齐元素实现视觉上的统一                       773.4　提供无障碍访问                  78通用设计和增强无障碍访问的受益者                     78无障碍设计有助于提高在搜索引擎中的排名               78法律规定                   79无障碍设计的热潮           793.5　文本的使用                      80文本设计的注意事项         803.6　调色板                          82十六进制颜色值             82网页安全色                 83无障碍设计和颜色           833.7　针对目标受众进行设计            84面向儿童                   84面向年轻人                 84面向所有人                 85面向老年人                 853.8　选择颜色方案                    86以一张图片为基础的方案     86色轮                       86变深、变浅和变灰           87单色                       88相似色                     88互补色                     88分散互补色                 89三色                       89四色                       89实现颜色方案               893.9　使用图片和多媒体                90文件大小和图片尺寸         90抗锯齿/ 锯齿化文本的问题        90只使用必要的多媒体         91提供替代文本               913.10　更多设计考虑                   92感觉到的加载时间           93第一屏                     93适当留白                   93水平滚动                   933.11　导航设计                       94网站要易于导航             94导航栏                     94面包屑导航                 94图片导航                   95动态导航                   95站点地图                   95站点搜索功能               953.12　线框和页面布局                 963.13　固定布局和流动布局             98固定布局                   98流动布局                   983.14　为移动网络设计                100三种方式                  100移动设备设计考虑          100桌面和移动网站的例子      101移动设计小结              1013.15　灵活响应的网页设计            1023.16　网页设计最佳实践              104复习和练习                     106复习题                    106动手练习                  107聚焦网页设计              108网页项目案例学习          108项目里程碑                108第4 章  CSS 基础                      1114.1　CSS 概述                       112层叠样式表的优点          112配置CSS 的方法                113层叠样式表的“层叠”      1134.2　CSS 选择符和声明               114CSS 语法基础              114background-color 属性       114color 属性                      115配置背景色和文本色        1154.3　CSS 颜色值语法                 1164.4　配置内联CSS                   118style 属性                      118动手实作4.1               1184.5　配置嵌入CSS                   120style 元素                      120动手实作4.2               1204.6　配置外部CSS                   122link 元素                       122动手实作4.3               1224.7　CSS 的class、ID 和后代选择符    124class 选择符                    124id 选择符                  124后代选择符                124动手实作4.4               1254.8　span 元素                       126span 元素                 126动手实作4.5               1264.9　练习使用CSS                   128将嵌入CSS 转换为外部CSS      128将网页与外部CSS 文件关联      128动手实作4.6               128VIII ｜ HTML5 与CSS3 入门经典( 第4 版)4.10　层叠                          1304.11　练习使用层叠                  132动手实作4.7               1324.12　CSS 语法校验                  134动手实作4.8               134复习和练习                     136复习题                    136动手练习                  137聚焦网页设计              137度假村案例学习：Pacifi c Trails Resort              138瑜珈馆案例学习：Path of Light Yoga Studio     141第5 章  图形和文本样式基础                 1435.1　图片                           144GIF 格式的图片            144JPEG 格式的图片           144PNG 格式的图片                1455.2　img 元素                   146动手实作5.1               146用alt 属性提供无障碍访问   1475.3　图片链接                       148动手实作5.2               148无障碍访问和图片链接      1495.4　配置背景图片                   150background-image 属性           150同时使用背景颜色和背景图片150浏览器如何显示背景图片    150background-attachment 属性       1515.5　定位背景图片                   152background-repeat 属性           152定位背景图片              152动手实作5.3               1535.6　用CSS3 配置多张背景图片   154渐进式增强                154动手实作5.4              1555.7　用CSS 配置字体            156font-family 属性                 156动手实作5.5               1565.8　CSS 文本属性                   158font-size 属性                   158font-weight 属性            158font-style 属性             159line-height 属性            159text-align 属性             159text-decoration 属性              159text-indent 属性            159text-transform 属性          159letter-spacing 属性               1595.9　练习配置图形和文本             160动手实作5.6               1605.10　用CSS 配置列表符号       162用图片代替列表符号        163动手实作5.7               1635.11　收藏图标                      164配置收藏图标              164动手实作5.8               1655.12　图像映射                      166map 元素                  166area 元素                  166探索矩形图像映射          1665.13　复习和练习                    168复习题                    168动手练习                  169聚焦网页设计              170度假村案例学习：Pacifi c Trails Resort              170瑜珈馆案例学习：Path of Light Yoga Studio     173第6 章  CSS 进阶                     1776.1　宽度和高度                     178width 属性                 178min-width 属性             178max-width 属性            179height 属性                     179动手实作6.1               179目录 ｜ IX6.2　框模型                         180内容                      180填充                      180边框                      180边距                      181框模型实例                1816.3　边距和填充                     182margin 属性                182padding 属性               1826.4　边框                           184动手实作6.2               1856.5　圆角                           186动手实作6.3               1876.6　页面内容居中                   188动手实作6.4               1886.7　CSS3 的边框和文本阴影          190CSS3 的box-shadow 属性    190CSS3 的text-shadow 属性    191动手实作6.5               1916.8　背景图片                       192CSS3 background-clip 属性       192CSS3 background-origin 属性      1936.9　背景图片的大小和缩放           1946.10　练习使用CSS3 属性        196动手实作6.6               1966.11　CSS3 的opacity 属性            198动手实作6.7               1986.12　CSS3 RGBA 颜色               200动手实作6.8               2006.13　CSS3 HSLA 颜色               202色调、饱和度、亮度和alpha    202HSLA 颜色示例            202动手实作6.9               2036.14　CSS3 的渐变                   204线性渐变语法              204辐射渐变语法              204CSS3 渐变和渐进式增强     204动手实作6.10              205复习和练习                     206复习题                    206动手练习                  207聚焦网页设计              207度假村案例学习：Pacifi c Trails Resort              207瑜珈馆案例学习：Path of Light Yoga Studio     211第7 章  页面布局基础                  2157.1　正常流动                       216动手实作7.1               2167.2　浮动                           218fl oat 属性                  218浮动元素和正常流动        219动手实作7.2               2197.3　清除浮动                       220clear 属性                      220用换行清除浮动            2207.4　溢出                           222overfl ow 属性                   222用overfl ow 属性清除浮动    222对比clear 属性与overfl ow 属性   .223用overfl ow 属性配置滚动条  2237.5　CSS 属性box-sizing              2247.6　基本双栏布局                   226动手实作7.3               226双栏布局的例子            2297.7　用无序列表实现垂直导航         230用CSS 配置无序列表            230用CSS text-decoration 属性消除下画线                    230动手实作7.4               2317.8　用无序列表实现水平导航         232CSS 的display 属性         232动手实作7.5               2337.9　用伪类实现CSS 交互性      234动手实作7.6               2347.10　练习CSS 双栏布局         236动手实作7.7               2367.11　用CSS 进行定位           238static 定位                 238fi xed 定位                      238相对定位                  238绝对定位                  2397.12　练习定位                      240动手实作7.8               2407.13　CSS 精灵                      242动手实作7.9               242复习和练习                     244复习题                    244动手练习                  245聚焦网页设计              245度假村案例学习：Pacifi c Trails Resort              245瑜珈馆案例学习：Path of Light Yoga Studio     247第8 章链接、布局和移动开发进阶       2498.1　相对链接的更多知识             250相对链接的例子            250动手实作8.1               2508.2　区段标识符                     252动手实作8.2               2538.3　fi gure 元素和fi gcaption 元素       254fi gure 元素                254fi gcaption 元素                  254添加图题                  254动手实作8.3               2558.4　图片浮动练习                   256动手实作8.4               2568.5　更多HTML5 元素           258section 元素               258article 元素                     258aside 元素                      258time 元素                  258动手实作8.5               2588.6　HTML5 与旧浏览器的兼容性      260配置CSS 块显示                260动手实作8.6               2608.7　CSS 对打印的支持               262打印样式最佳实践          262动手实作8.7               2638.8　移动网页设计                   264移动网页设计要考虑的问题  264为移动使用优化布局        264优化移动导航              265优化移动图片              265优化移动文本              265为One Web 而设计              2658.9　viewport meta 标记               2668.10　CSS3 媒体查询                 268什么是媒体查询            268使用link 元素的媒体查询例子268使用@media 规则的媒体查询示例                  2698.11　练习媒体查询                  270动手实作8.8               2708.12　灵活图像                      274动手实作8.9               2748.13　picture 元素                    276…8.14　灵活img 元素属性              278…8.15　测试移动显示                  280…第9 章  表格基础                          291…第10 章  表单基础                           311…第11 章  媒体和交互性基础                   355…第12 章  Web 发布基础                      391…

前言

《HTML5 与CSS3 入门经典》适合网页设计或开发初级课程。每个主题都用大约两页篇幅进行讲解，在指出关键知识点的同时，一般还包含动手实作。全书覆盖网页设计师需要掌握的所有基础知识，包括以下主题：

互联网和万维网的概念

用HTML5 创建网页

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

对网页上的图片和多媒体进行配置

探索新的CSS3 属性

网页设计最佳实践

对无障碍访问、可用性和搜索引擎优化的考量

取得域名和主机

发布到网上

在本书第3 版取得极大成功之后，第4 版新增了以下特色：

更丰富的动手实作

全面更新了范例代码、案例学习和网络资源

更新了HTML5.1 元素和属性

扩充了网页布局设计

扩充了灵活响应网页设计技术和CSS 媒体查询

扩充了灵活响应图像技术，包括新的HTML5 元素picture

更新了HTML5 和CSS 参考资源

一个新的附录讨论了CSS 灵活布局模块：Flexbox

本书特色

立足当下，展望未来。本书采用独特的教学方式，使学生在学习适合当下的网页设计技能的同时，掌握新的HTML5 编码技术，迎接未来的挑战。

精心挑选主题。本书既传授“硬”技能，比如HTML5 和层叠样式表( 第1 章和第2 章，第4 章~ 第11 章)，也传授“软”技能，比如网页设计( 第3 章) 和发布到网上( 第12 章)。打下良好基础之后，学生作为网页设计师追寻自己的职业梦想时，会更加得心应手。使用本书的学生和老师会发现，我们这个课程变得更有趣了。

学生在创建网页和网站时，可以一起讨论、综合和运用软硬技能。每个主题都用两页的篇幅来讲解，除了快速提供需要掌握的知识点，还通过动手实作来立即巩固所学到的知识。

每个主题两页篇幅。每个主题都用简洁的、两页篇幅的一个小节进行讲述。许多小节还包含马上就可以开始的动手实作，旨在帮助巩固新学的技能或概念。这种精心设计对学业沉重的学生尤其有用，因为他们需要立即搞清楚关键的概念。

动手实作。网页开发是一门技能，只有通过动手实作才能更好地掌握。本书十分强调实际动手能力的培养，体现在每章的动手实作练习题、章末练习题以及通过真实的案例学习来完成网站的开发。

FAQ。在我的网页开发课堂中，学生经常会问到一些同样的问题。书中列出了这些问题，并用FAQ 标志注明。

聚焦于无障碍设计。开发无障碍网页的重要性日益增强，所以无障碍网页设计技术将贯穿全书。这个特殊标记可以让您更方便地找到这些信息。

聚焦于道德与伦理。本书使用特殊的道德规范标记注明与网页开发有关的道德规范话题。

简明提示。提供有用的背景资料，或者帮助提高生产力。

深入探索。这个特殊标记代表可供深入探索的网络资源，方便学生对当前的主题进行深入学习。

参考资料。附录提供了丰富的参考资料，包括HTML5 参考、CSS 参考、HTML5和XHTML 的比较、WCAG 2.0 快速参考、ARIA Landmark Roles 概述以及CSS Flexible Box Layout (Flexbox) 简介。

视频讲解(Video Note) 讲解关键编程概念和技注意，由于是英文视频，所以为了方便索引，书中保留了这些视频的英文名称。

补充材料

案例学习作业答案

试题

PPT 演示文稿

示范教学大纲

作者网站。除了出版社为本书提供的配套网站，作者另外建了一个网站。

致谢

特别感谢Addison-Wesley 的工作人员，包括Matt Goldstein，Kristy Alaura 和Erin Ault。

感谢我的家人，尤其是我的“另一半”，感谢他的耐心、关爱、支持和鼓励。最后还要特别献给我的父亲，我们永远怀念他。

第2 章  HTML 基础

第1 章使用H T M L5 创建了第一个网页，并在浏览器中进行了测试。用D T D 指定了要使用的HTML 版本，并使用了，

， 这5 个标记。

本章继续学习HTML，要用HTML 元素( 包括新的HTML5 header，nav 和footer 元素)配置网页结构和文本格式。要学习超链接的知识，它使万维网成为信息互联网络。要配置锚元素，通过超链接使不同网页链接到一起。阅读本章时一定要把每个例子过一遍。网页编码是技术活儿，每种技术都需要练习。

学习内容

使用标题、段落、div、列表和块引用来配置网页主体

配置特殊实体字符、换行符和水平标尺

使用短语元素配置文本

校验网页语法

使用新的HTML5 元素header，nav和footer 配置网页

使用锚元素链接网页

配置绝对链接、相对链接和电子邮件链接

2.1　标题元素

标题(heading) 元素从h1 到h6 共六级。标题元素包含的文本被浏览器渲染为“块”(block)。标题上下自动添加空白(white space)。

字号最大，

最小。取决于所用字体，

，

和

标记中的文本看起来可能比默认字号小一点。

标题文本全都加粗。

图2.1 显示了6 级标题的效果。

图2.1　示例heading.html

动手实作2.1

为了创建图2.1 所示的网页，启动记事本或其他文本编辑器。打开学生文件

chapter1/template.html。修改title 元素并在body 区域添加标题。如以下蓝色代码所示。

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

将文件另存为heading2.html。打开网页浏览器( 如Edge 或Firefox) 测试网页。它看起来应该和图2.1 显示的页面相似。可将自己的文档与学生文件chapter2/heading.html 进行比较。

FAQ 为什么不将标题放到页头区域？

经常有学生试图将标题(heading) 元素或者说h 元素放到文档的页头(head) 而不是主体(body) 区域，造成浏览器显示的网页看起来不理想。虽然head 和heading 听起来差不多，但heading 一定要放到body 中。