硕 士 研 究 生 读 书 报 告
题目:基于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
the 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等新技术成为最热点的话题。与此同时，跨平台的HTML5已经开始威胁Flash在Web上的统治地位。随着HTML5和CSS3逐渐兴起，基于HTML5的应用在未来更有可能对移动互联网领域起到巨大的影响。
HTML5首先强化了Web网页的表现能力，其次追加了本地数据库等相关功能。所谓的HTML5实际上是指包括HTML、CSS和JavaScript在内的一套技术组合，目前支持HTML5的主流浏览器有Google Chrome、Firefox、InternetExplorer9和10等。随着科技的发展,移动终端已进入人们的生活,而传统的网页开发技术很难适应这种小屏幕界面,HTML5的问世在很大程度上解决了这一难题。介绍了 HTML5的特性并提出了简单明了、可订制性、以用户为中心的移动Web设计原则。HTML5新增的视频、音频、画布、离线应用等功能为网页开发带来了新 的希望和曙光。新技术不仅能很好地适应移动终端界面,而且很大程度上减少了代码冗余,提高了设备运行效率
关键词：网页布局，移动网络，网页设计，移动互联网，科技发展，网页技术，新网页技术。
Abstract
The combination of HTML5 and CSS3 technology, it is the traditional Webpage layout is the use 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, the 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 of 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 Chrome, Firefox, InternetExplorer9 and 10. With the development of science and technology, the mobile terminal has entered people's 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 large 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 can 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.
一、 移动互联网的发展
3G网络的正式商用使得国内的移动互联网业务逐渐发展起来。Android和iPhone等智能手机的出现，更让移动互联网领域得到充分的发挥。未来，移动互联网业务将会朝着多元化的方向发展。强大的功能、开放的平台、友好的用户界面和更好的用户体验将使得移动Web技术应用在以下几个方面：
(1) 移动广告：通过移动设备(手机、PSP、平板电脑等)访问移动应用或移
动网页时显示的广告，广告形式包括：图片、文字、插播广告、HTML5、重力感应广告等。
(2) 移动搜索：移动设备为终端，进行对普遍互联网的搜索，从而实现高速、
准确的获取信息资源。主要实现方式有两种，一种是使用WAP接人搜索WAP／WEB，一种是3G直接搜索WEB内容。
(3) 移动购物：用户通过移动设备(如手机)接人无线互联网购买商品或服务
的业务。
(4) 移动社交网络：用户通过各种移动智能终端(手机、PSP、平板电脑等)
接人移动网络实现诸如QQ、Facebook、微博以及一些传统社交网站或应用。
(5) 多媒体：用户通过移动设备接入无线网络享受音乐、电影、动画等多种
服务。
(6) 移动游戏：在移动设备上为用户提供基于移动互联网的网游服务。
二、 基于HTML5的移动WEB应用。
移动Web应用以借助移动智能设备的无线网络接人使用网络应用服务提供
商提供的服务。移动智能设备除具有强大的硬件特性外，更拥有庞大的软件应用数量。针对移动Web应用的开发，除基于SDK开发方式外，还支持Web开发方式，例如iPhone上的AppStore就是典型的WebApp应用软件。尤其是HTML5和Webkit的不断发展，让移动Web应用更加强大。
2.1 HTML5介绍
HTML5是用于取代1999年所制定的HTML4．01和XHTML1．0标准的HTML标准版本，虽然处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5强化了WEB网页的表现性能，且追加了本地数据库等WEB应用的功能。作为下一代web技术的标准，HTML5标准定义的规范非常广泛。目前已经在移动浏览器中得到支持。
2.2基于webkit的移动Web浏览器
移动智能终端内置的移动Web浏览器，不同于WAP浏览器，不仅可以识别HTML,CSS,JavaScript等代码，而且都是基于Webkit为核心的。Webkit实际上是一种浏览器引擎，同时也是一个开源项目，起源于KDE，在桌面浏览器，Chome谷歌浏览器，Safari浏览器都已经内置了WebKit引擎。并支持HTML5，CSS3特性。在移动端方面，两大浏览器内置移动Web浏览器，更是继承了各自桌面端浏览器的特点，为用户提供了更出色的移动Web用户体验。
通过对Web应用页面和Facebook在iPhone上UI界面布局方式分析，得出三种给予HTML5语义常用的界面布局，如图1所示。
图1 常用移动web页面布局
其中，header、article、footer和nav是HTML5的新语义元素。他们的定义如下：
元素定义文档的页面组合，通常是一些引导和导航信息，同时可以包含列表、搜索框和主题相关的logo。元素在HTML5规范中，表示文档、页面，用来表示一块独立的文章内容，如一则网站新闻，一篇博客文章等。此标签可以相互嵌套。元素定义文档或章节的末尾 部分，通常包含一些章节的基本信息，如作者信息、相关链接及版权信息。元素定义为用来构建导航，显示导航连接。Nav标签主要作用是放入一些当前页面的主要导航链接。2.3 移动Web页面布局设计
由于PC与移动设备的分辨率差异。使得传统网站不能正常显示与移动设备上。在HTML页面利用viewpoint和media queries样式转换，可以实现移动设备的屏幕大小，定制网站的跨平台布局效果。
（1） viewpoint虚拟窗口
viewpoint是Apple为了解决移动版Safari的屏幕分辨率大小问题，专门定
义的一个虚拟窗口，并定义其窗口的大小或缩放功能。不同浏览器对viewpoint窗口的默认大小支持是不同的，具体如表1.
表1 不同浏览器的viewpoint窗口默认值
在HTML页面代码的meta元素中定义viewpoint虚拟窗口，主要作用是设
置web页面适应移动设备的屏幕大小，实现代码如下” name=”viewpoint”content=”width=device-width”,initial-scale=1,user-scalable=0”/>
上述的代码的主要作用是自定义虚拟窗口，并制定虚拟窗口的宽度为移动设备屏幕宽度，初始缩放比例大小为1倍，同时不允许使用用户使用手动缩放功能。代码中content定义的六种属性分别为：指定虚拟窗口的屏幕宽度的大小，指定虚拟窗口屏幕高度的大小，指定初始缩放比例，指定用户缩放的最大和最小比例。
（2） Media Queries样式模块
Media Queries这功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式。 首先来看一个简单的实例： 代码： rel=\"stylesheet\"media=\"screen
and
(max-width:
600px)\"
href=\"small.css\" />
上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容： 1、screen：这个不用说大家都知道，指的是一种媒体类型； 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 query和css的属性集合很相似，主要区别在：
1、Media query只接受单个的逻辑表达式作为其值，或者没有值； 2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；
3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况
4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种
下面我们一起来看看Media Queries的具体使用方式 一、最大宽度Max Width：
上面表示的是：当屏幕大于或等于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上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率 。
我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。
Media_query定义查询关键字，可以使用not关键字和only关键字。Not关键字表示对后面的样式表达式执行取反操作。Only关键字作用是
不让支持media queries的设备能读取该样式。
4实例开发介绍
本例以具体页面设计为例，如图2所示，利用上述技术对页面布局进行viewpoint和media 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页面语义元素，
…….
2) 添加viewpoint和media queries样式模块 name=”viewpoint”content=”width=device-width,initial-scale=1,userscalable=0”/>
rel=”style”type=”text/css”
media=”only
screen
and(max-width:800px)”href=”style.css”/>
3) 页面代码重构
用
样式标签对页面对象进行格式化，并定义单个对象的class，一边在独立的CSS样式表文件中引用并设置样式。具体代码可以通过DreamweaverCS5代码设计视图中查看。 4）修改样式表文件style.css。
5）重构的移动版web在 Opera Mobile Emulator效果如图所示：
5. 对Html5移动WEB开发的认识和理解
为前端应用程序赋予可移植性
即使在一开始，以HTML为用户接口基础的模式，是应用在用户以浏览器连上Web服务器的架构下，但是，因为具有不少好处，所以，渐渐也有不少人将这种方式应用在客户端(client)应用程序。
传统上，客户端应用程序都是以原生(native)的方式开发而成，使用操作系统或平台上原生的API、原生的用户接口组件，但是在应用以HTML为基础的技术之后，原生的部份主要只剩下启动的应用程序本身，绝大多数用户所接触到的接口部份，皆是以HTML为基础的技术(当然包括了JavaScript)所完成的。
为什么有愈来愈多的开发者对这种模式趋之若鹜呢?我想最主要的因素之一，便是这种模式在应用程序的前端提供了极佳的可移植性。
很多年前，就有不少人预言，操作系统做 为应用程序运行平台的特性，将会愈来愈不明显，接下来只会有一种主要的平台，那就是Web。这样的预言到了今天来看，几乎可以论断它的实现。即使不同的操 作系统依然存在(但Windows平台也不若以往那般强势)，但是，人们对于操作系统的倚赖却愈来愈低，原因便是人们早就习惯在浏览器上连往各种不同的网 络服务、使用各种应用程序。
以往，浏览器尚有大大小小的兼容性、标准化的问题，而到了今天，这些问题已经消除了许多。以Web做为一个共通的平台，在各种浏览器上呈现、运行，难度也降低很多。无论你使用什么平台，从手机、平板、到个人计算机，都有浏览器。即使仍然有若干细节性的问题，但我们应该可以说浏览器是目前最具可移植性的平台。
除了提供更高的可移植性之外，许多软件开发者会考虑使用以HTML为基础的技术于客户端应用程序，是因为便于弹性的修改，以及动态的部署。
所以，很多开发者必须在他们的应用程序中加上自动更新的机制，无论是使用者手动检查、或是应用程序自动检查，都要能够检查是否有新的版本，并且下载新版 本，接着予以更新。这无疑是个复杂的机制，而且你不见得能够确定客户端应用程序的确无误的完成版本升级的动作。当你的服务器端已经改版到新的逻辑，但客户 端应用程序却没有时，就有可能引发一些不可预期的问题。 客户端应用程序也有可能好长一段时间都没有改版了，更新程序还得检查其版本和最新版本间的组态差异，才能正确将其更新。总之，这并不是一个容易处理的议 题。
不过，当你使用HTML来做为客户端应 用程序的基础时，应用程序可以说是随时从服务器上取得，随时都是最新的版本。在这种架构下，数据是在服务器上取得计算、产生HTML网页的逻辑则是在服务 器上产生，再搭配浏览器上执行的JavaScript程序，提供一些动态生成的效果及互动方式。即使应用程序需要改版，也只需要部署到服务器端即可。除非 客户端的启动程序需要修改，否则，只要在服务器端完成部署，客户端即可随时使用到最新版本的应用程序，不需要针对客户端的应用程序做任何的改版。
以Web为中心，不需投入各种原生平台的开发
除了部署方便之外，当你采用HTML为基础的模式来开发客户端应用程序时，你所需要的开发技巧还是和Web应用程序设计一样，并不
需要随着不同的原生平台，而使用该平台下的语言、应用程序框架、SDK及API等，只需要专注在相同的技术领域即可。
对于开发团队而言，也不需要招募太多技能组合的程序设计者，只需要以Web应用程序技术领域为主即可。不论是技术、平台、人、还有思维，一切依旧以 Web为中心。在现今这种以Web程序设计为主流的开发世代来说，这可以说是一大优势。对于想要兼容网站使用者，以及特定客户端应用程序用户的网络服务来 说，更是可以共享资源。
当Web应用程序开始流行在MVC的基本概念下，在前端大量倚赖JavaScript来动态呈现数据，同时运用Ajax方式至服务器端取得数据时，不同的客户端，无论是个人计算机浏览器、平板计算机浏览器、手机浏览器、或是平板、手机、个人计算机上的专用客户端应用程序，都可以共享服务器端上的所有服务，以及和客户端沟通的协议，唯一需要随着平台而改变的，仅有在客户端处理用户接口的部份而已。
以Web为中心的开发概念，可以将对多种平台的支持，都集中在单一的计算资源之下，这也是以HTML为基础的模式的好处。