HTML5实战宝典 pdf下载

　　《HTML5 实战宝典》是一本学习HTML5的宝典，以实际项目为驱动，内容全面，讲解通俗，适合各层次的学习者。《HTML5 实战宝典》分为14章，由浅入深地讲解了HTML5的基本概念和基本功能，包括地理位置定位、本地存储、离线存储、WebSocket、Canvas、表单等，而且对每一个概念的讲解都配备了恰如其分的示例和代码，让读者通过动手实践，切身体会到这些概念的含义和价值。《HTML5 实战宝典》前半部分结合实例深入讲解了HTML5在PC端的大放异彩的功能，后半部分则深入讲解HTML5在移动端的应用开发知识，系统地讨论了离线存储、本地存储和HTML5 Canvas游戏等主题。

　　《HTML5 实战宝典》适合各个层次的前端开发人员学习，无论是出于工作需要，还是好奇心的驱使，只要你想深入理解HTML5，本书都会让你大有收获。

　　优逸客科技有限公司成立于2013年，总部位于山西太原。公司是由业界互联网技术专家共同发起成立。优逸客是国内互联网前端开发实训行业的“拓荒者”，是企业级产品设计“方案提供商”，是中国UI职业教育的“品牌”。公司的互联网技术实训体系是依据历时一年的深度调研，并结合企业对人才实际需求研发而成的。我们在此基础上配以完善的职业规划体系，规范的人才培养流程和标准。经过3年发展，公司已先后在北京、山西、陕西等区域建立了互联网人才实训基地，已培养出5000余名互联网高端技术人才。在未来，我们将继续秉承“专注、口碑”的理念，逐渐成长为我国领先的互联网人才培养公司。

　　优逸客汇聚了一批具有丰富Web开发经验的布道师，我们很早就意识到，移动化是一个再明显不过的趋势，未来几年里，移动端将是Web开发的主战场，而HTML5就是一把锋利的武器，配合程序逻辑，我们将能利用它创造无限的可能。

序

前言

第1章 HTML5概述1

1.1 一个新的Web开发平台2

1.2 HTML5为什么受欢迎2

1.3 HTML5的可持续性4

1.4 HTML5的发展历程5

第2章 HTML5规范7

2.1 新的文档声明和语法规范8

2.2 废弃的标签和属性10

2.3 新的结构标签和属性12

2.4 对于浏览器的支持情况19

第3章 HTML5表单新功能——注册和登录验证实战24

3.1 表单新控件详解25

3.2 构建表单用户界面31

3.3 表单验证38

3.4 注册和登录实战41

第4章 文件处理和拖拽——文件上传实战51

4.1 File API52

4.2 HTML5 拖拽事件57

4.3 dataTransfer对象62

4.4 利用拖拽效果完成上传功能64

第5章 客户端存储——在线可编辑表格实战68

5.1 客户端存储概述69

5.2 利用localStorage API 管理

数据69

5.3 利用sessionStorage API管理

数据71

5.4 在线可编辑表格实战72

第6章 HTML5通信技术——在线五子棋实战77

6.1 WebSocket 概述78

6.2 WebSocket 的原理及运行机制78

6.3 在线五子棋实战79

第7章 HTML5画布——在线绘图板85

7.1 绘制基本图形86

7.2　擦除Canvas画板101

7.3　绘制复杂图形103

7.4　绘制文本108

7.5　图片操作111

7.6 像素操作112

7.7 矩阵变换与坐标关系115

7.8 绘图板实战118

第8章 多媒体——自定义炫酷播放器125

8.1 HTML5对多媒体的支持126

8.2 音频和视频标签127

8.3 音频和视频API129

8.4 播放器实战132

第9章 移动端触摸事件138

9.1 移动端事件模型139

9.2 移动端事件详解141

9.3 可拖拽轮播图143

第10章 离线应用148

10.1 离线应用概述149

10.2 离线资源缓存149

10.3 在线状态检测151

10.4 离线应用示例151

第11章 history历史记录157

11.1 应用场景158

11.2 HTML5历史记录详解158

11.3 history新特性结合ajax增强单页

面体验160

第12章 新闻APP164

12.1 HBuilder开发环境165

12.2 HBuilder Webview详解166

12.3 新闻APP页面制作168

12.4 结合HBuilder实现新闻APP171

第13章 地理位置定位179

13.1 位置信息获取180

13.2 浏览器支持情况180

13.3 隐私181

13.4 HTML5 Geolocation API181

13.5 构建应用184

13.6 百度地图API185

第14章 微信游戏开发187

14.1 微信二次开发平台简介188

14.2 微信二次开发原理188

14.3 微信二次开发步骤188

14.4 自动回复功能示例193

14.5 微信游戏开发技术背景195

14.6 微信游戏推送方式195

14.7 像素鸟游戏以及布局195

14.8 像素鸟效果实现197

附 录203

附录A：编辑工具简介204

附录B：HTML5相关API207

附录C：相关开发环境的安装217

　　前 言

　　关于《HTML5 实战宝典》

　　Web技术日新月异，每个置身其中的从业者都有逆水行舟，不进则退的感觉。尤其是在2014年10月29日，HTML5定稿之后，互联网进入了一个崭新的时代。HTML5奠定了打造下一代Web应用的基础，它可以让网站更易开发、更易维护、更具用户友好性。HTML5被设计为跨平台的技术，最新版本的Apple Safari、Google Chrome、Mozilla Firefox、Opera以及Microsoft Internet Explorer都支持HTML5的许多特性。在iPhone、iPad及Android移动设备上预装的浏览器也大多对HTML5提供了极好的支持。

　　《HTML5 实战宝典》系统地讲解了HTML5的基础理论和实际运用技术，通过大量实例对HTML5进行深入浅出的分析，不但讲解了HTML5在传统PC端的开发方法，而且着重讲解了如何开发混合型APP。全书注重实际操作，使读者在学习技术的同时，掌握Web开发和设计的精髓，提高综合应用的能力。

　　《HTML5 实战宝典》第一部分介绍了HTML5的历史背景、新的语义标签和语法规范、HTML5的优劣及与以往HTML版本相比的变化，同时揭示了HTML5背后的设计原理。第二部分介绍了HTML5新增表单的用法，拖拽、Canvas、地理位置定位、本地存储以及Canvas应用，并以项目为驱动，配有大量的代码和示例图片。第三部分则主要介绍了HTML5在移动端的应用和移动端的特性，包括离线存储、WebSocket等知识点，并且结合HBuilder制作WebAPP，同时结合现在当前热门的微信平台制作了一个微信小游戏，并辅以大量代码示例和图示。

　　由于《HTML5 实战宝典》讲解的知识由浅入深并且以项目为驱动，理论上适合任何对HTML5有学习欲望的读者，但是如果您有HTML、JavaScript等语言基础的话，阅读《HTML5 实战宝典》会更有如鱼得水的感觉，如果您正在学习或从事有关HTML5的开发工作，那么我相信您也一定能从《HTML5 实战宝典》中获得更为精准的知识和实战的开发经验。

　　《HTML5 实战宝典》代码开发环境

　　为了更好地学习《HTML5 实战宝典》并运行《HTML5 实战宝典》案例代码，首先需要搭建一个合适的开发环境：

　　（1）Sublime或者WebStorm编辑器，或者任意您熟悉的编辑器

　　（2）Chrome浏览器。

　　此外，《HTML5 实战宝典》的案例代码中，会用到PHP语言、Node.js和Wamp，相关环境搭建请参考《HTML5 实战宝典》附录部分.

　　引用的其他资源

　　在《HTML5 实战宝典》中，我们会引用部分W3C的官方文档和相关的API，官方文档是非常好的学习资源，请读者重视官方文档的学习。虽然我们也在《HTML5 实战宝典》当中列出了一些常用的API，但是我们还是建议读者参考官方文档，因为官方文档肯定是最准确和更新最及时的。

　　致谢

　　我们要感谢所有参与编写《HTML5 实战宝典》的人员，没有他们的付出，就没有这《HTML5 实战宝典》的存在。

　　首先要感谢优逸客公司创始人兼总经理张宏帅老师，张老师高瞻远瞩，严谨细心，在《HTML5 实战宝典》的编写过程中提出了很多宝贵的意见和建议，并为整个团队提供了充分的支持。

　　还要感谢优逸客公司副总经理兼实训总监严武军（Kevin）老师和实训副总监、技术总监岳英俊（Json）老师的指导和规划。在《HTML5 实战宝典》的编写过程中，他们严格把控进度和方向，提供了大量资料和参考文档，并直接参与编写。

　　还要感谢其他参与编写的人员,他们分别是：优逸客前端组负责人马彦龙（Money）老师，优逸客前端组负责人候宁洲（Nico）老师，优逸客高级布道师王琦（Herman）老师、李星（Star-li）老师、马松（Allen）老师、岳飞飞（Rose）老师等。

　　作者水平有限，纰漏之处在所难免，恳请广大读者批评指正，我们也感谢各位著名的、无名的互联网先驱们，他们所做的研究、开发和传播工作为我们的社会和团体做出了巨大的贡献。没有他们，就没有《HTML5 实战宝典》所讨论的话题，感谢《HTML5 实战宝典》的技术审稿人，他们在完善《HTML5 实战宝典》的过程中做出了不懈的努力。

　　优逸客科技有限公司

　　序我们生活的时代2015年，国务院提出“互联网 +”行动计划，推动了互联网产业进一步发展。对于互联网从业者来说，这是一个最好的时代，也是一个最坏的时代。互联网产业的深度发展，尤其是移动互联网产业的飞速发展，为从业者带来了前所未有的机遇，但也带来了前所未有的挑战。每天都有成千上万的互联网产品投入市场，激烈的竞争一刻不停。前端工程师作为互联网产业中的排头兵，永远冲在互联网产品开发的第一线，我们创造用户看得见摸得着的部分，我们创造产品的用户体验和价值，我们任重而道远。

　　用产品去改变世界互联网产业在不断发展，用户面对的“界面”也随之不断变化，从20世纪80年代的DOS字符界面，到Windows图形界面，到浏览器界面，再到当前的移动终端界面。界面的多样化决定了我们已进入一个用户体验的时代，以前的产品以功能为核心，而现在，用户体验就是一切。这就意味着，我们脑海中关于软件的理解需要更新，软件已经不能再单纯被当作程序或者系统去看待，而是应该从设计伊始就被当作一个产品去打造。

　　产品，就是一系列符合用户需求的功能的组合。产品思维是互联网思维中最重要的利器，互联网时代通过产品来改变世界，实现梦想。随着互联网的发展，我们可以观察到，产品的功能越来越趋于同质化，而产品的UI设计与前端开发则成了表达个性化和差异化的主战场，因为这两个领域可以体现出美妙的视觉表达和交互设计水平。

　　互联网比较传统媒体最大的特点就是交互，而友好的交互才能让用户产生好的用户体验，企业越来越重视用户体验，从技术上讲，就是越来越重视UI设计和前端开发。

　　前端开发技术发展经历了三个阶段：

　　第一阶段是Web 1.0时代的以内容为主的网页，主流技术是HTML4和CSS2第二阶段是Web 2.0时代的Ajax技术的应用，热门技术是JavaScript/DOM/异步数据请求第三阶段是HTML5+CSS3技术的应用，这两者相辅相成，使前端技术进入了一个崭新的时代。

　　HTML5+CSS3奠定了打造Web应用的基础，它们可以让网站更易开发、更易维护、更具用户友好性。同时借助许多基于HTML 5的移动开发框架可以让开发任务变得更加简单，更好地进行移动Web开发。HTML5通过代码方式，增加交互功能，同时结合后台开发技术，进行Web和App开发，通过HTML5技术可以显著改善用户体验。

　　关于我们优逸客科技有限公司成立于2013年，总部位于山西太原。公司是由业界互联网技术专家共同发起成立。优逸客是国内互联网前端开发实训行业的“拓荒者”，是企业级产品设计“方案提供商”，是中国UI职业教育的“品牌”。公司的互联网技术实训体系是依据历时一年的深度调研，并结合企业对人才实际需求研发而成的。我们在此基础上配以完善的职业规划体系，规范的人才培养流程和标准。经过3年发展，公司已先后在北京、山西、陕西等区域建立了互联网人才实训基地，已培养出5000余名互联网高端技术人才。在未来，我们将继续秉承“专注、口碑”的理念，逐渐成长为我国顶尖的互联网人才培养公司。

　　优逸客汇聚了一批具有丰富Web开发经验的布道师，我们很早就意识到，移动化是一个再明显不过的趋势，未来几年里，移动端将是Web开发的主战场，而HTML5就是一把锋利的武器，配合程序逻辑，我们将能利用它创造无限的可能。

　　“这个世界很美好，值得我们为之奋斗”——海明威编 者