HTML5 App应用开发教程 pdf epub mobi txt 电子书 下载 2026

编辑推荐

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

内容简介

越来越多的公司采用HTML5来快速开发移动跨平台App，它支持当前市场流行的移动设备。
本书主要介绍了HTML5在移动App开发中的应用技术、CSS 3的应用及JavaScript的编程知识，并使用大量实例介绍利用Hbuider、MUI、HTML5+规范开发App的流程和实现。
本书将帮助读者快速学习如何利用HTML5和DCloud的HTML5移动开发技术来开发移动App，也可以作为对HTML5 App实践感兴趣的读者和专业开发人员的参考用书。

作者简介

黄波 成都东软学院教师，获得“成都东软学院优秀创业导师”称号，具有丰富的写作经验和实战经验。

目录

目录

第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�瞫izing属性

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样式设计
学习目标
�r 熟练掌握CSS的样式规则，CSS在HTML5页面中的应用和各种CSS选择器的使用，CSS的层叠性和优先级。
�r 熟练掌握各种HTML5 App开发常用的CSS属性和页面的适配。
�r 掌握使用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的强大。


图3��1禅意花园的不同CSS设计



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


表3��1各主流浏览器私有属性



内核浏览器私有前缀

TridentIE8/IE9/IE10/IE11�瞞s��
WebkitChrome/Safari�瞱ebkit��
GeckoFireFox�瞞oz��
PrestoOpera�瞣��

当一个CSS3属性成为标准属性，并且被主流浏览器普遍兼容的时候，就可以省略私有前缀了。
3.2CSS核心基础
3.2.1CSS样式规则

前言/序言

前言





为什么要写这本书
近年来移动互联网的发展十分迅猛，而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、5、7、12、13、14章由黄波和王彩编写，第2、4、6、8章由张小华编写，第3、9、10、11章由黄平编写。书中的源代码由王彩整理。
本书适合作为高等院校计算机及相关专业的教材，也可以作为相关培训机构的培训教材，以及对HTML5 App开发技术感兴趣人员的自学用书。
HTML5 App开发是一个发展迅速的技术，很多方面还在不断完善和变化。由于能力和水平所限，虽然竭尽全力，但仍然难免存在错误和疏漏，希望各位专家、老师和同学提出问题，与编者共同讨论。编者的邮箱为html5toApp@163.com。
本书特点
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章 HTML5 App应用开发概述
简要介绍HTML5的一些新特性，HTML5 App与原生App的比较，开发环境HBuilder的使用21
第2章 HTML5页面基础
了解HTML语言特性，介绍HTML5文档基本格式，以及用于HTML5 App开发的一些常用标签63

续表



章名主 要 内 容课内
学时课外
学时
第3章 CSS样式设计
介绍CSS样式规则和使用，在App开发中的一些常用CSS属性，使用Chrome调试CSS
8
6
第4章 JavaScript编程基础介绍JavaScript的一些基本语法、定义函数、各种内置对象的使用，JSON数据处理，调试技巧73
第5章 JavaScript 交互编程
介绍JavaScript的各种DOM操作和样式编程
5
3
第6章 jQuery编程基础介绍jQuery的选择器、事件的监听、各种DOM交互和功能扩展52
第7章 AJAX通信技术
介绍AJAX的技术原理、HTTP协议，Fiddler抓包工具、XMLHttpRequest对象的使用，jQuery的AJAX方法支持，RESTFul API使用
6
3
第8章 WebSocket基础介绍WebSocket的技术原理以及相应的API22
第9章 播放多媒体介绍audio和video标签的使用，以及相应的API22
第10章 本地存储介绍HTML5中本地存储技术localStorage、sessionStorage、Web SQL和IndexedDB的使用33
第11章 Canvas绘图
介绍Canvas以及相应绘图API的使用
3
2
第12章 HTML5+Runtime介绍HTML5+的模块组成，在页面中使用HTML5+ API，WebView模块的一些典型使用44
第13章 MUI框架
介绍MUI项目页面的布局、一些内置方法，事件和窗口管理、典型的一些UI组件和插件，AJAX通信调用，在Chrome中调试Android程序
6
4
第14章 综合实例： 美食汇App给出一个完整的Android App开发实例58

注： 建议课外学时为46学时，便于完成一些实例的练习，任何编程的学习都不能指望在课堂上解决所有的问题，必须在课外进行适时练习。教学或学习过程中可按实际情况对学时和内容进行调整。


本书配套资源包使用说明
下载本书配套资源包的压缩文件，解压后用Chrome浏览器打开其中的“index.html”，界面如下图所示，单击左侧树形菜单中各章节每个例子的编号，右侧将显示该例子的效果和说明。

穿越时空的像素之舞：构建下一代网页应用 想象一下，那些曾经只能在桌面端才能实现的复杂功能，如今可以在你的指尖轻盈流转；那些曾经束缚于浏览器窗口的沉闷界面，如今能拥有媲美原生应用的流畅与生动。这不是遥不可及的科幻，而是我们今天即将踏上的旅程——HTML5 App应用开发教程，它将带领你深入洞察现代网页开发的精髓，解锁构建功能强大、交互丰富、体验卓越的应用程序的终极秘籍。 你是否曾被那些精美绝伦的网页游戏吸引？是否曾为某些网站在离线状态下依然能流畅运行而惊叹？是否曾体验过视频和音频播放的无缝切换，或是被生动的三维图形和动画所震撼？这些令人印象深刻的体验，无一不是HTML5及其生态系统强大能力的生动体现。本书将为你揭示这一切背后的原理，让你从一个旁观者转变为一个技艺精湛的创造者。 告别“只能看看”，拥抱“我能创造” 过去，网页开发似乎总是与“静态”、“有限”划上等号。但HTML5的出现，彻底打破了这一桎梏。它不仅仅是HTML的最新版本，更是一个集成了多媒体、图形、本地存储、通信等一系列强大API的综合平台。本书将循序渐进地引导你掌握这些核心技术，让你能够： 构建响应式、跨平台的视觉盛宴： 掌握HTML5的语义化标签，构建结构清晰、易于SEO的网页骨架。深入理解CSS3的强大样式能力，从响应式布局到复杂的动画效果，让你的界面设计无限可能。不再需要为不同的设备尺寸编写不同的代码，只需一套代码，即可适应所有屏幕。 赋予网页生命力的交互： JavaScript作为网页的灵魂，将在本书中得到淋漓尽致的展现。我们将从基础语法出发，逐步深入事件处理、DOM操作、AJAX异步通信，让你能够轻松实现复杂的用户交互和动态内容更新。学习如何利用JavaScript创建流畅的动画、响应用户的每一个细微动作，让你的应用“活”起来。 释放数据存储的潜力： 还在为用户每次访问都需要重新输入信息而烦恼吗？HTML5提供了Web Storage（localStorage和sessionStorage）以及IndexedDB等强大的本地存储解决方案。本书将教会你如何高效地利用这些技术，将用户偏好、应用状态甚至离线数据安全地保存在用户本地，提升用户体验，减少服务器压力。 驾驭多媒体的无界之美： `