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

2024年1月31日发(作者：)

第1章

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

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

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

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

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

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

答案：

（1） 多媒体

（2）

（3）

（4）

（5）

（6）

Canvas

本地存储

离线应用

地理定位

移动Web框架

第2章

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

答案：

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

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

（3） 只能存储字符串，如果要存储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

event

ajax

form

ie

默认

√

√

√

√

√

说明

核心模块；包含Zepto的核心方法。

事件模块；通过on()&

off()处理事件。

无刷新异步模块；XMLHttpRequest 和 JSONP 实用功能。

表单模块；序列化 & 提交web表单。

增加支持桌面的Internet Explorer 10+和Windows Phone 8。。

第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）测试、试运行、上线

2.请列举9个“黑马商城”项目中应用的重点知识。

答案：（1）视口

（2）媒体查询

（3）Bootstrap响应式工具

（4）Bootstrap布局容器

（5）Bootstrap栅格系统

（6）Bootstrap轮播图

（7）underscore

（8）Bootstrap标签页

（9）Touch事件