《HTML5 实战宝典》是一本学习HTML5的宝典,以实际项目为驱动,内容全面,讲解通俗,适合各层次的学习者。《HTML5 实战宝典》分为14章,由浅入深地讲解了HTML5的基本概念和基本功能,包括地理位置定位、本地存储、离线存储、WebSocket、Canvas、表单等,而且对每一个概念的讲解都配备了恰如其分的示例和代码,让读者通过动手实践,切身体会到这些概念的含义和价值。《HTML5 实战宝典》前半部分结合实例深入讲解了HTML5在PC端的大放异彩的功能,后半部分则深入讲解HTML5在移动端的应用开发知识,系统地讨论了离线存储、本地存储和HTML5 Canvas游戏等主题。《HTML5 实战宝典》适合各个层次的前端开发人员学习,无论是出于工作需要,还是好奇心的驱使,只要你想深入理解HTML5,本书都会让你大有收获。
HTML5 CSS3奠定了打造Web应用的基础,它们可以让网站更易开发、更易维护、更具用户友好性。同时借助许多基于HTML 5的移动开发框架可以让开发任务变得更加简单,更好地进行移动Web开发。HTML5通过代码方式,增加交互功能,同时结合后台开发技术,进行Web和App开发,通过HTML5技术可以显著改善用户体验。
前 言关于《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 实战宝典》的过程中做出了不懈的努力。优逸客科技有限公司
优逸客科技有限公司成立于2013年,总部位于山西太原。公司是由业界互联网技术专家共同发起成立。优逸客是国内互联网前端开发实训行业的拓荒者,是企业级产品设计方案提供商,是中国UI职业教育的知名品牌。公司的互联网技术实训体系是依据历时一年的深度调研,并结合企业对人才实际需求研发而成的。我们在此基础上配以完善的职业规划体系,规范的人才培养流程和标准。经过3年发展,公司已先后在北京、山西、陕西等区域建立了互联网人才实训基地,已培养出5000余名互联网高端技术人才。在未来,我们将继续秉承专注、口碑的理念,逐渐成长为我国领先的互联网人才培养公司。优逸客汇聚了一批具有丰富Web开发经验的布道师,我们很早就意识到,移动化是一个再明显不过的趋势,未来几年里,移动端将是Web开发的主战场,而HTML5就是一把锋利的武器,配合程序逻辑,我们将能利用它创造无限的可能。
序前言第1章 HTML5概述11.1 一个新的Web开发平台21.2 HTML5为什么受欢迎21.3 HTML5的可持续性41.4 HTML5的发展历程5第2章 HTML5规范72.1 新的文档声明和语法规范82.2 废弃的标签和属性102.3 新的结构标签和属性122.4 对于浏览器的支持情况19第3章 HTML5表单新功能注册和登录验证实战243.1 表单新控件详解253.2 构建表单用户界面313.3 表单验证383.4 注册和登录实战41第4章 文件处理和拖拽文件上传实战514.1 File API524.2 HTML5 拖拽事件574.3 dataTransfer对象624.4 利用拖拽效果完成上传功能64第5章 客户端存储在线可编辑表格实战685.1 客户端存储概述695.2 利用localStorage API 管理 数据695.3 利用sessionStorage API管理 数据715.4 在线可编辑表格实战72第6章 HTML5通信技术在线五子棋实战776.1 WebSocket 概述786.2 WebSocket 的原理及运行机制786.3 在线五子棋实战79第7章 HTML5画布在线绘图板857.1 绘制基本图形867.2 擦除Canvas画板1017.3 绘制复杂图形1037.4 绘制文本1087.5 图片操作1117.6 像素操作1127.7 矩阵变换与坐标关系1157.8 绘图板实战118第8章 多媒体自定义炫酷播放器1258.1 HTML5对多媒体的支持1268.2 音频和视频标签1278.3 音频和视频API1298.4 播放器实战132第9章 移动端触摸事件1389.1 移动端事件模型1399.2 移动端事件详解1419.3 可拖拽轮播图143第10章 离线应用14810.1 离线应用概述14910.2 离线资源缓存14910.3 在线状态检测15110.4 离线应用示例151第11章 history历史记录15711.1 应用场景15811.2 HTML5历史记录详解15811.3 history新特性结合ajax增强单页 面体验160第12章 新闻APP16412.1 HBuilder开发环境16512.2 HBuilder Webview详解16612.3 新闻APP页面制作16812.4 结合HBuilder实现新闻APP171第13章 地理位置定位17913.1 位置信息获取18013.2 浏览器支持情况18013.3 隐私18113.4 HTML5 Geolocation API18113.5 构建应用18413.6 百度地图API185第14章 微信游戏开发18714.1 微信二次开发平台简介18814.2 微信二次开发原理18814.3 微信二次开发步骤18814.4 自动回复功能示例19314.5 微信游戏开发技术背景19514.6 微信游戏推送方式19514.7 像素鸟游戏以及布局19514.8 像素鸟效果实现197附 录203附录A:编辑工具简介204附录B:HTML5相关API207附录C:相关开发环境的安装217