前言

为何写作本书？

如果要盘点2010年IT届的十大热门技术，云计算、移动开发、物联网等无疑会在其中，HTML 5肯定也是少不了的。2010年，随着HTML 5的迅猛发展，各大浏览器开发公司（如Google、微软、苹果、Mozilla和Opera）的浏览器开发业务都变得异常繁忙。在整个2010年度，无论是Mozilla的Firefox、Google的Chrome、苹果的Safari、微软的Internet Explorer，还是欧普拉的Opera都处于不断推陈出新的状态当中。

2010年3月，在微软的MIX2010大会上，微软的工程师在介绍Internet Explorer 9浏览器的同时，还从前端技术的角度把互联网的发展分为了三个阶段：

第一阶段：Web 1.0的以内容为主的网络，前端主流技术是HTML和CSS；

第二阶段：Web 2.0的Ajax应用，热门技术是JavaScript、DOM、异步数据请求；

第三阶段：即将迎来的HTML 5时代，亮点是富图形和富媒体内容（Graphically-Rich and Media-Rich）。

前端技术将进入一个崭新的时代，至少已经开启了这扇门。

在这种局势下，学习HTML 5无疑成为Web开发者的一大重要任务，谁先学会HTML 5，谁就掌握了迈向未来Web平台的方向。因此，我希望能够借助本书帮助国内的Web开发者更好地学习HTML 5以及与之相伴的CSS 3技术，使大家能够早日运用这些技术开发出一个具有现代水平的、在未来的Web平台上能够正常运行的Web网站或Web应用程序。

第4版与第3版的区别

自2016年上半年本书第3版出版以来，一直受到广大读者的欢迎，笔者在这里首先感谢广大读者的支持。自本书第3版出版之后，HTML 5与CSS 3标准不断发展，2016年11月，W3C发布HTML 5.1版本；2017年12月，W3C发布HTML 5.2版本。各主流浏览器也以最快的速度对HTML 5中各种最新公布的API提供了支持，其中包括对ECMA Script 2015以上版本的支持、对indexedDB 2.0版本的支持、对Fetch API的支持、改用Service Worker对离线应用程序提供支持、对BroadcastChannel API的支持、对Web组件模块（其中包括HTML模块、Shadow DOM、自定义元素、HTML导入）的支持、对Web Animations API的支持等。因此，本书第4版以第3版的内容为基础，添加2016年上半年到2018年上半年之间HTML 5中新增的各种元素及API，同时更新各主流浏览器CSS 3的最新支持情况，以使读者能够学到HTML 5与CSS 3标准中的各种知识，了解各种最新的浏览器中对HTML 5与CSS 3标准的最新支持情况，以帮助读者能够早日将这些新的知识打造成一个HTML 5时代的功能强大的Web网站或Web应用程序。

具体来说，在第4版在第3版的基础上做出的主要修改如下所示：

·第2章“HTML5与HTML4的区别”中删除在HTML 5.1中被移除的元素。

·新增第5章“ECMAScript中的新增功能”。

·第7章“本地存储”（原书中第8章）中新增indexedDB 2.0部分。

·第8章“扩展的XMLHttpRequest API”（原书中第13章）修改为“扩展的XMLHttp-Request API及Fetch API”，新增8.4节“使用Fetch API”。

·新增第10章“使用Service Worker实现离线应用程序”。

·第11章“通信API”中新增11.4节“BroadcastChannel API”。

·新增第12章“Web组件”。

·第13章“绘制图形”（原书中第5章）中新增13.9.3节“将canvas元素中的图像转换为Blob对象”与13.9.5节“解码图像”。

·第18章“文字与字体相关样式”中新增18.4节“指定用户是否可选取文字的user-select属性”。

·第22章“CSS3中的动画功能”中新增22.3节“Web Animations API”。

·第23章“布局相关样式”中新增23.4节“网格布局”。

·第24章“Media Queries相关样式”一章修改为第24章“媒体查询表达式与特性查询表达式”，新增24.2节“特性查询表达式”。

·第25章“CSS 3的其他重要样式和属性”中新增25.4节“用于控制鼠标事件的pointer-events属性”与25.6节“CSS变量”。

本书面向的读者

本书主要适合如下人群阅读：

·具有一定基础的Web前端开发工程师

·具有一定美术功底的Web前端设计师和UI设计师

·Web项目的管理人员

·开设了Web开发等相关专业的高等院校师生和相关培训机构的学员及教师

如何阅读本书

本书从逻辑上共分为三个部分：

第一部分（第1～14章）　对HTML 5中新增的语法与标记方法、新增的元素、新增的API以及到本书截稿时这些元素与API受到了哪些浏览器的支持等进行了详细介绍。在对它们进行介绍的同时将其与HTML 4中的各种元素与功能进行了对比，以帮助读者更好地理解为什么需要使用HTML 5、使用HTML 5有什么好处、HTML 5中究竟增加了哪些目前HTML 4不具备而在第三代Web平台上将会起到重要作用的功能与API，以及这些功能与API的详细使用方法。

第二部分（第15～25章）　详细介绍了CSS 3中的各种新增样式与属性，其中主要包括CSS 3中的各种选择器、文字与字体、背景与边框、各种盒模型、CSS 3中的布局方式、CSS 3中的变形与动画、CSS 3中与媒体类型相关的一些样式与属性等。在介绍的同时也详细讲述了到本书截稿时这些样式与属性受到了哪些浏览器的支持，以及针对各种浏览器应该怎样在样式代码中进行各种属性的正确书写。

第三部分（第26章）　详细讲解了一个实例，该实例展示了如何使用HTML 5中新增的表单元素、如何读取本地数据库中的数据、如何保存数据到本地数据库、如何使用Fetch API读取服务器端的数据及提交数据到服务器端并处理服务器端响应、如何保存数据到LocalStorage及从LocalStorage读取保存后的数据、从而实现一个具有现代风格的Web应用程序，如何在这个由HTML 5语言及其功能编写而成的Web应用程序中综合使用CSS 3样式来完成页面的布局以及视觉效果的美化工作。

全书一共有300多个代码示例，每个代码示例都经过笔者上机实践，确保运行结果正确无误。每个代码示例的详细代码及其用到的脚本文件、各种资源文件都可在华章公司的官方网站（www.hzbook.com）本书的页面上下载，因为是用HTML 5编写的网页，所以这些文件可直接在各种浏览器中打开并查看运行结果。少量页面需要首先建立网站，然后通过访问网站中该页面的方式来进行查看，少量页面使用服务器端PHP脚本语言，可在Apache服务器中运行。书中详细介绍了对HTML 5中的各种元素、各种API和CSS 3中的各种属性和样式提供支持的浏览器，读者可以针对不同的页面选择正确的浏览器来查看其正确的运行结果。

致谢

在本书的写作过程中，策划编辑杨福川先生和李艺女士给予了很大的帮助和支持，并提出了很多中肯的建议，在此表示感谢。同时，还要感谢机械工业出版社的所有编审人员为本书的出版所付出的辛勤劳动。本书的成功出版是大家共同努力的结果，谢谢你们。

另外，在本书的写作过程当中，由于时间及水平上的原因，可能存在一些对HTML 5及CSS 3上认识不全面或疏漏的地方，敬请读者批评更正，作者的联系QQ为240824399，联系邮箱为240824399@qq.com，谨以最真诚的心希望能与读者交流，共同成长。