《HTML5移动Web开》课后习题及答案

第1章

1.请列举移动开发的几种方式。

答案：当前，针对移动端的开发方式可以分为三种，具体如下。

（1）移动Web：就是在移动Web浏览器中运行的Web应用。

（2）NativeApp：用Android和Object-C等原生语言开发的移动应用。

（3）HybridApp：将移动Web页面封装在原生外壳中，以APP的形式与用户交互。

2.请列举基于HTML5的移动Web开发支持那些新功能。

答案：

（1）多媒体

（2）Canvas

（3）本地存储

（4）离线应用

（5）地理定位

（6）移动Web框架

第2章

1.请简述Web Storage具有哪些特点。

答案：

（1）设置数据和读取数据比较方便

（2）容量较大，sessionStorage约5M，localStorage约20M

（3）只能存储字符串，如果要存储JSON对象，可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。

2.请简述manifest 文件可分哪三个部分，并说名每个部分的作用。

答案：

（1）CACHE MANIFEST：在此标题下列出的文件将在首次下载后进行缓存。

（2）NETWORK：在此标题下列出的文件需要与服务器的连接，且不会被缓存。

（3）FALLBACK：在此标题下列出的文件规定当页面无法访问时的回退页面（比如404 页面）。

第3章

1.请简述如何获取当前坐标位置。

答案：

“navigator. geolocation”对象可以公开访问地理位置的方法，其中navigator为浏览

器内置对象。检测浏览器是否支持定位API，只需要检测geolocation是否存在于

navigator中即可。对于移动Web开发者，大多数情况只需要获取用户的当前位置，

此时我们可以使用getCurrentPosition()方法来获取当前位置的坐标值。

getCurrentPosition()调用时会发起一个异步请求，浏览器会调用系统底层的硬件（如GPS）来更新当前的位置信息，当信息获取到之后会在回调函数中传入position对象。

2.请简述选择文件的两种方式。

答案：

（1）可以通过file类型的input元素或者拖放的方式进行选择文件操作。

（2）通过拖拽来选择文件，需要通过访问dataTransfer的files属性来访问。

第4章

1.请列举移动端有哪的三种视口。

答案：在移动端浏览器当中，存在着三种视口分别为：可见视口、布局视口（视窗视口）和理想视口。

2.请列举4个移动端基本的Touch事件，并说明触发条件。

答案：

（1）touchstart手指触摸屏幕时触发

（2）touchmove手指在屏幕上滑动时触发

（3）touchend手指离开屏幕时触发

（4）touchcancel系统取消touch事件的时候触发

第5章

1.请简述商城首页中商品模块的开发顺序与思路。

整体商品展示模块，包括公共的商品盒子、秒杀区块和商品区块三个部分。

2.请列举Zepto.js的默认模块。

第6章

1.请简述什么是栅格系统。

答案：栅格系统（又称网格系统）就是用固定的格子进行网页布局，是一种清晰、工整的设计风格。栅格系统最早是应用于印刷媒体上，后来被应用于网页布局中，而随着响应式设计的流行，栅格系统开始被赋予了新的意义，即一种响应式设计的实现方式。

2.请简述什么是媒体查询及媒体查询在网页开发中的作用。

答案：媒体查询是向不同设备提供不同样式的一种不错方式，它为每种类型的用户提供了最佳的体验。作为CSS3规范的一部分，媒体查询扩展了media属性的角色。允许设计人员基于各种不同的设备属性（比如屏幕宽度、方向等）来确定目标样式。

第7章

1.请简述Bootstrap包中提供了哪些内容。

Bootstrap包中提供的内容包括基本结构、CSS、布局组件、JavaScript插件等，具体如下：

●基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

●CSS：Bootstrap 自带全局的CSS 设置、定义基本的HTML 元素样式、可扩展的

class，以及一个先进的栅格系统。

●布局组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导

航、警告框、弹出框等等。

●JavaScript 插件：Bootstrap 包含了十几个自定义的jQuery 插件。可以直接包含所

有的插件，也可以逐个包含这些插件。

●定制：开发人员可以定制Bootstrap 的组件、LESS 变量和jQuery 插件来得到一

套自定义的版本。

3.请简述Bootstrap 栅格系统的工作原理。

Bootstrap 栅格系统的工作原理如下所示：

●“行”必须包含在布局容器.container类或.container-fluid类中，以便为其赋予合适

的排列（aligment）和内补（padding）。

●通过“行（row）”在水平方向创建一组“列（column）”，并且，只有“列（column）”

可以作为“行（row）”的直接子元素。

●行使用的样式“.row”，列使用样式“col-*-*”，我们的内容应当放置于“列（column）”

内，列大于12时，将另起一行排列。

●Bootstrap 栅格系统为不同屏幕宽度定义了不同的类。

第8章

1.请列举一个项目从开始到上线的开发流程需要哪些步骤。

答案：（1）产品创意

（2）产品原形

（3）美工设计

（4）前端实现

（5）后端实现

（6）测试、试运行、上线