1、 硕 士 研 究 生 读 书 报 告 题目 :基于 HTML5移动 Web页面开发技术研究 作者姓名 ： 敖游 作者学号 ： yxb144325068 指导教师 ： 程学林 学科专业 ： 软件与服务工程 所在学院 ： 软件学院 提交日期 ： 二 15 年 1月 Research and development to mobile web pages based on HTML5 technology. A Dissertation Submitted to Zhejiang University In partial fulfillment of the requirements for th
2、e degree of Master of Engineering Major Subject: Software Engineering Advisor :Cheng Xuelin By Ao You Zhejiang University, P.R.China 2015 摘要 HTML5 和 CSS3 技术的结合，它对传统的网页布局是使用媒体查询模块式重建。跨平台应用移植的设计是基于 WebKit 内核的移动浏览器 所 执行 。 随着 3G网络的不断普及，移动互联网的发展速度已经远远超出我们的估计。在移动互联网领域， Android、 iOS 等新技术成为最热点的话题。与此同时，跨平台的
3、HTML5已经开始威胁 Flash 在 Web 上的统治地位。随着 HTML5 和 CSS3 逐渐兴起，基于HTML5 的应用在未来更有可能对移动互联网领域起到巨大的影响。 HTML5首先强化了 Web网页的表现能力，其次追加了本地数据库等相 关功能。所谓的 HTML5 实际上是指包括 HTML、 CSS 和 JavaScript 在内的一套技术组合，目前支持 HTML5 的主流浏览器有 Google Chrome、 Firefox、 InternetExplorer9和 10 等。 随着科技的发展 ,移动终端已进入人们的生活 ,而传统的网页开发技术很难适应这种小屏幕界面 ,HTML5 的问世
4、在很大程度上解决了这一难题。介绍了 HTML5的特性并提出了简单明了、可订制性、以用户为中心的移动 Web设计原则。HTML5 新增的视频、音频、画布、离线应用等功能为网页开发带来了新 的希望和曙光 。新技术不仅能很好地适应移动终端界面 ,而且很大程度上减少了代码冗余 ,提高了设备运行效率 关键词 ： 网页布局 ， 移动网络，网页 设计 ， 移动互联网， 科技发展 ，网页技术， 新网页技术 。 Abstract The combination of HTML5 and CSS3 technology, it is the traditional Webpage layout is the us
5、e of media query module type reconstruction. Design of cross platform application transplantation is performed mobile browser based on WebKit kernel. With the popularization of 3G network, the development speed of the mobile Internet has far exceeded our estimate. In the field of mobile Internet, th
6、e new technology of Android, iOS has become the most popular topic. At the same time, cross platform HTML5 has begun to dominance of threat to Flash on Web. With the HTML5 and CSS3 gradually on the rise, the HTML5 based applications in the future are more likely to the enormous impact on the field o
7、f mobile Internet play. HTML5 first improves the Web Webpage performance, followed by an additional local database and other related functions. The so-called HTML5 actually refers to include HTML, CSS and JavaScript, a technology combination, the current mainstream browsers support HTML5 Google Chro
8、me, Firefox, InternetExplorer9 and 10. With the development of science and technology, the mobile terminal has entered peoples life, and the development of the traditional technology Webpage is difficult to adapt to this kind of small screen interface, the advent of HTML5 solved this problem to a la
9、rge extent. Introduced the characteristic of HTML5 and puts forward a simple and clear, can be customized, user centered design principles of mobile Web. HTML5 added video, audio, canvas, offline application function brings new hope and the dawn was Webpage development. The new technology not only c
10、an adapt well to the mobile terminal interface, but also greatly reduces the code redundancy, improve the operation efficiency of equipment Keywords： Webpage layout, mobile network, Webpage design, mobile Internet, the development of science and technology, Webpage technology, new Webpage technology
11、. 一、 移动互联网的发展 3G 网络的正式商用使得国内的移动互联网业务逐渐发展起来。 Android 和iPhone 等智能手机的出现，更让移动互联网领域得到充分的发挥。未来，移动互联网业务将会朝着多元化的方向发展。强大的功能、开放的平台、友好的用户界面和更好的用户体验将使得移动 Web 技术应用在以下几个方面： (1)移动广告：通过移动设备 (手机、 PSP、平板电脑等 )访问移动应用或移动网页时显示的广告，广告形式包括：图片、文字、插播广告、 HTML5、重力感应广告等。 (2)移动搜索：移动设备为终端，进行对普遍互联网的搜索，从而实现高速、准确的获取信息资源。主要实现方式有两种，一种是
12、使用 WAP 接人搜索WAP WEB，一种是 3G 直接搜索 WEB 内容。 (3)移动购物：用户通过移动设备 (如手机 )接人无线互联网购买商品或服务的业务。 (4)移动社交网络：用户通过各种移动智能终端 (手机、 PSP、平板电脑等 )接人移动网络实现诸如 QQ、 Facebook、 微博 以及 一些 传统社交网站或应用 。 (5)多媒体：用户通过移动设备接入无线网络享受音乐、电影、动画等多种服务。 (6)移动游戏：在移动设备上为用户提供基于移动互联网的网游服务。 二、 基于 HTML5 的移动 WEB 应用 。 移动 Web 应用以借助移动智能设备的无线网络接人使用网络应用服务提供商提供
13、的服务。移动智能设备除具有强大的硬件特性外，更拥有庞大的软件应用数量。针对移动 Web 应用的开发，除基于 SDK 开发方式外，还支持 Web 开发方式，例如 iPhone上的 AppStore就是典型的 WebApp应用软件。尤其是 HTML5和 Webkit的不断发展，让移动 Web 应用更加强大。 2.1 HTML5 介绍 HTML5 是用于取代 1999 年所制定的 HTML4 01 和 XHTML1 0 标准的 HTML 标准版本，虽然处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。 HTML5强化了 WEB 网页的表现性能 ， 且追加了 本地数据库等 WEB 应用的功能
14、 。 作为下一代 web 技术的标准， HTML5 标准定义的规范 非常广泛 。 目前已经在移动浏览器 中得到支持。 2.2 基于 webkit 的移动 Web浏览器 移动智能终端内置 的移动 Web 浏览器，不同于 WAP 浏览器 ，不仅可以识别HTML,CSS,JavaScript 等代码，而且都是基于 Webkit 为核心的。 Webkit 实际上是一 种 浏览器引擎，同时也是一个开源项目，起源于 KDE， 在桌面浏览器， Chome谷歌浏览器， Safari 浏览器都已经内置了 WebKit 引擎。并支持 HTML5， CSS3 特性 。在移动端方面，两大浏览器 内置移动 Web 浏览
15、器，更是继承了各自桌面端浏览器的特点，为用户提供了更出色的移动 Web 用户体验。 通过 对 Web 应用页面和 Facebook 在 iPhone 上 UI 界面 布局方式分析，得出三种给予 HTML5 语义 常用的界面布局，如图 1 所示 。 图 1 常用 移动 web 页面布局 其中， header、 article、 footer 和 nav 是 HTML5 的 新语义元素。他们的定义如下 ： 元素 定义文档的页面组合，通常是一些引导和导航信息，同时可以包含列表、搜索框和主题相关的 logo。 元素 在 HTML5 规范 中，表示文档、页面 ， 用来表示一块独立的文章内容，如一则网站新
16、闻，一篇博客文章等。此标签 可以相互嵌套 。 元素定义文档 或章节的 末尾 部分 ， 通常包含一些章节的基本信息，如作者信息、相关链接及版权信息。 元素 定义为用来构建导航，显示导航连接。 Nav 标签 主要作用 是 放入一些当前页面的主要导航链接。 2.3 移动 Web 页面布局设计 由于 PC 与移动设备的分辨率差异 。使得传统网站不能正常显示与移动设备上 。 在 HTML 页面 利用 viewpoint 和 media queries 样式转换，可以实现移动设备的屏幕大小，定制网站的跨平台布局效果。 （ 1） viewpoint 虚拟窗口 viewpoint 是 Apple 为了解决 移
17、动版 Safari 的屏幕分辨率大小问题，专门定义的一个虚拟窗口 ， 并定义其窗口的 大小 或缩放功能 。 不同 浏览器 对viewpoint 窗口的默认大 小 支持是不同的，具体如表 1. 表 1 不同 浏览器的 viewpoint 窗口默认值 在 HTML 页面代码 的 meta 元素中定义 viewpoint 虚拟窗口，主要作用是设置 web 页面 适应 移动设备的屏幕大小，实现代码如下 ” 上述的代码 的主要作用是自定义虚拟窗口，并制定虚拟窗口的宽度为移动设备屏幕宽度， 初始缩放比例大小为 1倍 ，同时不允许使用用户使用手动缩放功能。代码中 content 定义的六种属性分别为：指定虚
18、拟窗口的屏幕宽度的 大小 ，指定虚拟窗口 屏幕高度 的 大小 ， 指定初始缩放比例， 指定 用户 缩放 的最大和最小比例。 （ 2） Media Queries 样式 模块 Media Queries 这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的 web 页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式 。 首先来看一个简单的实例： 代码 ： 上面的 media 语句表示的是：当页页宽度小于或等于 600px,调用 small.css样式表来渲染你的 Web 页面。首先来看 media 的语句中包含的内容： 1、 screen：这个不用
19、说大家都知道，指的是一种媒体类型； 2、 and：被称为关键词，与其相似的还有 not,only，稍后会介绍； 3、（ max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。 为了更能理解 Media Query，我们在次回到前面的实例上：转换成 css 中的写法为： media screen and (max-width: 600px) 选择器 属性：属性值； 其 实 就 是 把 small.css 文 件 中 的 样 式 放 在 了 media srceen and (max-width;600px) 的大括号之中。在语句上面的语句结构中，可以看出 Media qu
20、ery 和 css 的属性集合很相似，主要区别在： 1、 Media query 只接受单个的逻辑表达式作为其值，或者没有值； 2、 css 属性用于声明如何表现页页的信息；而 Media Query 是一个用于判断输出设备是 否满足某种条件的表达式； 3、 Media Query 其中的大部分接受 min/max 前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况 4、 CSS 属性要求必须有属性值， Media Query 可以没有值，因为其表达式返回的只有真或假两种 下面我们一起来看看 Media Queries 的具体使用方式 一、最大宽度 Max Width： 上面
21、表示的是：当屏幕大于或等于 900px 时，将采用 big.css 样式来渲染 Web 页面。 二、多个 Media Queries 使用 Media Query 可以结合多个媒体查询，换句话说，一个 Media Query 可以包含 0到多个表达式，表达式又可以包含 0 到多个关键字，以及一种 Media Type。正如上面的其表示的是当屏幕在 600px-900px 之间时采用 style.css样式来渲染 web 页面。 三、 设备屏幕的输出宽度 Device Width 上面的代码指的是 iphone.css 样式适用于最大设备宽度为 480px，比如说 iPhone 上的显示，这里的
22、 max-device-width 所指的是设备的实际分辨率，也就是指可视面积分辨率 。 我们可以 使用 media query为 android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给 android 手机的页面重构问题。 Media_query 定义 查询关键字，可以使用 not 关键字和 only 关键字。Not 关键字表示对后面的样式表达式执行取反操作。 Only 关键字 作用是不让支持 media queries 的 设备 能读取该样式。 4实例 开发介绍 本例 以具体 页面设计为例，如图 2 所示 ，利用上述技术对页面布局进行 viewpoint 和 medi
23、a queries 样式模块的重构设计，以适应移动 web浏览器的屏幕大小 。 图 2 传统 web 页面布局 4.1 开发测试环境 DreamweaverCS5 用于 HTML 代码和 CSS 样式表文件编辑环境。Opera Mobile Emulator 设置模拟 手机浏览器环境， 在 DreamweaverCS5对代码 的样式 进行 重构设计 ， 在页面 meta 和 head 标签中添加 viewpoint和 media queries 样式模块 实现 web 的页面移动版应用设计。 4.2 代码 核心实现 1) 重构页面结构 ，创建标 准 的移动 web 界面 在 页面 标签内 添加给予 HTML5 的 移动 web 页面语义元素， .
