HTML5 App应用开发教程

越来越多的公司采用HTML5来快速开发移动跨平台App，它支持市面上流行的移动设备，本书将帮助读者快速学习如何利用HTML 5和Dcloud（数字天堂）的HTML5移动开发技术来开发移动App。本书介绍HTML5在移动APP开发的相关技术，CSS3的应用，JavaScript的编程知识，并使用了大量实例，介绍了利用Hbuider、MUI、HTML5+规范开发APP的流程和实现。

本书配有丰富的学习资源，包括学习建议、演示文件（PPT）、实例源代码、练习文件、习题等。书中实例所需要的服务端API已进行了Internet部署，可以直接调用。

本书主要介绍HTML5在移动App开发中的应用技术、CSS 3的应用及JavaScript的编程知识，并使用大量实例介绍利用Hbuider、MUI、HTML5+规范开发App的流程和实现；将帮助读者快速学习如何利用HTML5和DCloud的HTML5移动开发技术来开发移动App，也可以作为对HTML5 App实践感兴趣的读者和专业开发人员的参考用书。

本书配有丰富的学习资源，包括学习建议、演示文件（PPT）、实例源代码、练习文件、习题等。书中实例所需要的服务端API已进行了Internet部署，可以直接调用。

黄波，成都东软学院优秀创业导师，具有丰富的教学经验和实战经验，基于TOPCARS-CDIO进行了软件技术相关专业的改革与实践。

第1章HTML5 App应用开发概述

1.1HTML5介绍

1.1.1终将失败的Flash

1.1.2Web移动应用的未来

1.2HTML5新特性

1.3拥抱HTML5

1.4HTML5 App的发展

1.5HTML5 App与原生App的比较

1.6HTML5 App开发环境搭建

1.6.1开发工具的安装

1.6.2最接近原生App体验的MUI框架

1.6.3HTML5+应用介绍

1.6.4流应用介绍

1.7开发第一个HTML5 App

1.7.1练习： HelloWorld程序

1.7.2打包过程

小结

习题

第2章HTML5页面基础

2.1HTML简介

2.1.1标签

2.1.2标签的属性

2.1.3注释标签

2.2HTML5文档基本格式

2.3布局div标签

2.4文本控制标签

2.4.1标题h标签

2.4.2段落p标签

2.4.3水平线hr标签

2.4.4换行br标签

2.4.5特殊字符标记

2.4.6修饰span标签

2.5图像img标签

2.6超链接a标签

2.7列表标签

2.7.1无序列表ul标签

2.7.2有序列表ol标签

2.8语义化标签

2.9页面交互性标签

2.9.1细节展示details和summary标签

2.9.2进度条progess标签

2.10表格标签

2.11表单的应用

2.11.1表单form标签

2.11.2各种input输入标签

2.11.3input标签的其他属性

2.11.4其他表单标签

2.11.5实例： 注册表单

2.12移动开发中meta标签的应用

小结

习题

第3章CSS样式设计

3.1CSS简介

3.2CSS核心基础

3.2.1CSS样式规则

3.2.2CSS中的单位和颜色

3.2.3在HTML文档中应用CSS

3.3CSS选择器

3.3.1基础选择器

3.3.2其他选择器

3.4尺寸属性

3.5文本样式属性

3.6CSS高级特性

3.6.1继承性

3.6.2CSS层叠性和优先级

3.6.3Chrome调试CSS

3.7背景属性

3.7.1设置背景颜色

3.7.2设置背景图片

3.8边框属性

3.9CSS盒子模型

3.9.1内填充属性

3.9.2外边距属性

3.9.3boxsizing属性

3.10浮动和定位

3.10.1浮动

3.10.2定位

3.10.3块元素与行内元素

3.11CSS动画效果

3.11.1过渡

3.11.22D及3D变换

3.11.3动画控制

3.12其他一些常用的CSS属性

3.13移动设备的适配

3.14实例

3.14.1注册表单样式美化

3.14.2旅游App页面

小结

习题

第4章JavaScript编程基础

4.1JavaScript介绍

4.2使用JavaScript

4.2.1在页面中插入代码

4.2.2使用js文件

4.3JavaScript的基础语法

4.3.1数据类型

4.3.2变量定义

4.3.3数据类型的转换

4.3.4代码注释

4.3.5运算符

4.3.6常用语句

4.4函数

4.4.1函数定义及调用

4.4.2变量的作用域

4.4.3函数重载

4.4.4函数的返回值

4.4.5匿名函数

4.5JavaScript在Chrome中的调试

4.5.1在控制台输出

4.5.2断点调试

4.6JavaScript对象基础

4.6.1Object对象

4.6.2内置对象

4.6.3自定义类或对象

4.7JavaScript处理JSON

4.7.1JSON格式结构简介

4.7.2JSON序列化与反序列化

小结

习题

第5章JavaScript交互编程

5.1DOM介绍

5.2使用DOM

5.2.1document对象

5.2.2查找节点

5.2.3处理属性

5.2.4读取和设置内容

5.2.5创建和操作节点

5.3DOM的样式编程

5.3.1className属性

5.3.2classList对象

5.3.3style对象

5.4事件

5.4.1常用的一些事件

5.4.2内联属性监听事件

5.4.3DOM属性监听事件

5.4.4标准的事件监听函数

5.4.5事件触发过程

5.4.6事件的Event对象

小结

习题

第6章jQuery编程基础

6.1jQuery介绍

6.2使用jQuery

6.3使用$()函数

6.4jQuery的自定义选择器

6.4.1基本过滤器

6.4.2内容过滤器

6.4.3可见性过滤器

6.4.4表单选择器

6.5jQuery对象与DOM对象的转换

6.6jQuery对事件的处理

6.6.1页面加载后执行

6.6.2jQuery事件监听

6.7jQuery遍历方法

6.7.1遍历HTML元素对象

6.7.2遍历数组对象

6.7.3遍历JSON对象属性

6.8jQueryDOM交互

6.8.1操作HTML属性

6.8.2操作表单元素的值

6.8.3修改节点内容

6.8.4创建和添加HTML元素节点

6.8.5删除HTML元素节点

6.8.6复制HTML元素节点

6.8.7修改样式

6.9jQuery的扩展

6.10jQuery插件应用介绍

6.11实例： 记忆翻牌游戏

小结

习题

第7章AJAX通信技术

7.1AJAX技术介绍

7.2HTTP协议分析

7.2.1HTTP协议介绍

7.2.2Fiddler抓包神器

7.2.3HTTP请求与响应

7.2.4Fiddler手机数据抓包

7.2.5Fiddler模拟HTTP请求

7.2.6图片验证码

7.3XMLHttpRequest对象

7.3.1使用方法

7.3.2读取数据

7.3.3提交数据

7.3.4FormData对象

7.3.5解析XML数据

7.4CORS跨域问题

7.5RESTful API介绍

7.6jQuery中的AJAX方法

7.7实例： 送货地址管理

小结

习题

第8章WebSocket基础

8.1WebSocket的发展历程

8.2HTML5 WebSocket简介

8.3WebSocket实现

8.4实例： 聊天室

8.4.1WebSocket服务器端

8.4.2客户端实现

小结

习题

第9章播放多媒体

9.1HTML5标准中的音视频

9.1.1audio标签

9.1.2video标签

9.2audio和video标签的主要属性

9.3audio对象和video对象的API

9.4实例： 视频播放器

小结

习题

第10章本地存储

10.1HTML5本地存储技术概述

10.2localStorage和sessionStorage

10.2.1检查浏览器的支持

10.2.2相应的API

10.3Web SQL数据库

10.3.1创建或打开数据库

10.3.2执行SQL语句

10.4IndexedDB数据库

10.4.1数据库初始化

10.4.2对象存储空间

10.4.3索引

10.4.4事务

10.4.5IndexedDB的CRUD操作

10.4.6游标

小结

习题

第11章Canvas绘图

11.1Canvas介绍

11.2绘制图形

11.2.1绘制直线

11.2.2绘制贝塞尔曲线

11.2.3绘制填充

11.2.4使用渐变色

11.2.5绘制矩形

11.2.6绘制圆弧

11.3绘制文字

11.4绘制图片

11.5擦除

11.6坐标变换

11.7像素操作

11.8实例： 九宫格手势解锁

小结

第3章 CSS样式设计

学习目标
 熟练掌握CSS的样式规则，CSS在HTML5页面中的应用和各种CSS选择器的使用，CSS的层叠性和优先级。
 熟练掌握各种HTML5 App开发常用的CSS属性和页面的适配。
 掌握使用Chrome的“开发者工具”对CSS样式进行调试。

CSS样式设计是HTML5 App开发中最重要的技术之一，有了它才真正实现了内容与外观的分离，通过它可以控制页面的布局、样式、动画，移动设备的适配。目前CSS也是各公司HTML5工程师必备的技能之一。本章针对CSS的语法规则、各种在App开发中常用的CSS属性、CSS在Chrome中的调试等重要内容作详细的讲解。

3.1CSS简介
CSS即层叠样式表(Cascading StyleSheet)。在页面制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景，甚至动画效果实现精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的外观。CSS禅意花园(http://www.csszengarden.com/)是网站设计领域最著名的网站之一，网站提供了一张HTML页面，设计师们为它设计出成百上千个CSS样式文件，这张页面通过更换样式表呈现出各式各样、另人惊叹的效果，如图3-1所示，这两张页面的源码是一样的，只是样式表文件不同，这让人不禁感叹CSS的强大。

在页面中使用CSS技术，可以设计出更加整洁、漂亮的页面，它解决了内容与外观分离的问题。科学地编写CSS，还可以大大提高页面样式的复用性。
CSS目前的最新版本是CSS3，由于各浏览器厂商对CSS3的各属性支持程度不一样，因此，有少数CSS3属性需要用厂商的前缀加以区分，通常把这些加上私有前缀的属性叫“私有属性”，以便于在不同的浏览器下更好地体验CSS3特性。表3-1列举了各主流浏览器的私有属性。

内核浏览器私有前缀

TridentIE8/IE9/IE10/IE11ms
WebkitChrome/Safariwebkit
GeckoFireFoxmoz
PrestoOperao

当一个CSS3属性成为标准属性，并且被主流浏览器普遍兼容的时候，就可以省略私有前缀了。

前言

为什么要写这本书
近年来移动互联网的发展十分迅猛，而HTML5开发也受到了各世界顶级软件公司的极力推崇和支持，大量的投资以及苹果公司、谷歌公司、微软公司，W3C的一次次联盟正说明了这点。目前主流移动操作系统iOS、Android以及Windows Phone的浏览器都支持HTML5，也更加凸显了HTML5技术在未来移动设备端的地位。
HTML5技术从诞生以来，就具备跨平台开发的特性，目前国内外已经有很多基于HTML5的跨平台开发工具，开发者并不需要任何的原生应用编程经验，只需要一些HTML的相关知识，懂一些CSS和JavaScript，运用工具中所提供的各种丰富的功能模块，便可在很短时间内完成App的开发，并使其具备完美的原生体验。HTML5技术让移动开发更简单，更适合开发当今流行的移动应用。
截至2015年，已经有80%的App是全部或部分基于HTML5技术的。移动互联网行业的快速发展催生了开发热，各大企业对于HTML5开发类人才的需求不断增大，HTML5 App开发人员的缺口巨大，这也激发了广大编程人员学习HTML5 App开发以及众多院校开设这方面课程的热情。
虽然HTML5技术在开发市场上已经占有了很大比例，相关技术书籍也不少，但是大部分都集中在传统的网页技术上。对于如何使用它来进行相关App开发，却鲜有涉及，并且这些书也不适合直接作为教材。为了便于读者学习HTML5 App相关开发技术以及相关高校课程的开设，我们结合这两年授课过程的总结，以及与企业联合定制培养HTML5 App相关人才的经验，编写了本书。
在技术选型上，本书选择了DCloud数字天堂(北京)网络技术有限公司的HBuilder IDE、HTML5+ Runtime和MUI框架，它们的完美结合做到了接近原生App的功能和体验，给开发者提供了许多便利。截至2017年1月1日，HBuilder的开发者数量已高达70万人，成为中国最主流的HTML5开发工具。
经过半年多见缝插针式的奋战，本书终于顺利交稿了，我们感到欣慰，同时也为能将自己多年来参与项目开发和指导的经验以及教学上的心得与各位读者分享而感到高兴。

本书特点
1. 内容丰富，由浅入深
本书以“看得懂、学得会、做得出”为原则，系统地介绍了HTML5 App开发的各种技术和知识，通过每章的内容逐渐引领读者进入HTML5 App的开发世界。
书中所讲解的知识基础而实用，并且课程量适中，能让读者在认真学习本课程后基本具备HTML5 App的开发能力，成功进入到App开发的世界中。
2. 结构清晰，讲解到位
本书中配合每个需要讲解的知识点都给出了丰富的插图与完整的实例，使得初学者易于上手。书中所有实例都是实际开发中的例子，结构清晰明了，便于学习。同时书中还给出了很多关于HTML5 App开发的实用技巧与心得，具有较高的参考价值。最后一章还给出了一个综合的App开发实例“美食汇”的开发讲解。
3. 提供书中所有实例源码
为了便于学习，读者可以方便地从清华大学出版社网站（http://www.tup.com.cn/）获取本书配套资源包，资源包中包含了书中所有案例的完整源代码，最大限度地帮助读者快速掌握各方面的知识与技术。对于书中所有需要访问的服务器端API，我们已经部署在Internet上，便于读者方便练习，更集中精力掌握App开发的前端相关技术。
4. 配套的详细课件和习题
为了便于课堂授课，教师可以很方便地从清华大学出版社网站（http://www.tup.com.cn/）获取所有章节对应的PPT课件。这大大降低了教师备课的难度和时间成本，使得教师可以更好地把精力集中在教学环节，提高授课质量。同时每章最后都配有精心设计的习题，并提供了相应的答案，便于读者复习和教师出题。

本书共分为14章，按照由简到难的顺序进行内容安排。其中包括了HTML5 App开发的多方面的知识；若作为教材使用，课内学时建议为64学时。本书第1、5、7、12、13、14章由黄波和王彩编写，第2、4、6、8章由张小华编写，第3、9、10、11章由黄平编写。书中的源代码由王彩整理。
本书适合作为高等院校计算机及相关专业的教材，也可以作为相关培训机构的培训教材，以及对HTML5 App开发技术感兴趣人员的自学用书。
HTML5 App开发是一个发展迅速的技术，很多方面还在不断完善和变化。由于能力和水平所限，虽然竭尽全力，但仍然难免存在错误和疏漏，希望各位专家、老师和同学提出问题，与编者共同讨论。编者的邮箱为html5toApp@163.com。