摘 要HTML5作为新的规范被W3C接受，综合基于HTML5移动应用用户提供更好的体验。通常所说的HTML5WEB是指一系列的HTML5、CSS3、JavaScriptAPI构成的Web应用平台体系。新的HTML5技术提供了丰富的设备兼容性、用户交互性等性能方面的优势，在移动端Web应用上扩大丰富了它的特性。在移动端的发展中，浏览器仍然作为其核心运行引擎，分为Web核心引擎和JavaScriptAPI扩展两大模块，Web核心引擎主要负责Web应用代码中的HTML，CSS，JavaScript脚本，处理、渲染页面整体的布局格式以及其中的图像、文本、音频、视频等；而JavaScriptAPI扩展则完成应用的具体功能调用，通过终端系统能力、网络交互能力将通用的Web应用API接口功能在终端上实现。目前大量的现有的基于互联网的资源正在迅速融入基于HTML5的移动应用程序。然而，这可能会导致在适应资源为各种类型的现有的移动设备的一些困难。为了提高基于网络资源为各种移动终端现有的HTML5的利用率，本文提出了一种新的移动Web应用程序的集成方法，它可以协助应用服务提供商提供的基于HTML5的移动混合应用的各种移动端。这是一个巨大的新兴HTML5网络资源快速移植到移动应用程序通过各种移动终端接受新的尝试。本文还考察了必要的机制和手段，支持拟议的框架与现有的基础设施无缝地工作。最后，一个原型集成平台的建立和全面的仿真测试，证明其可行性高。
目 录
第一章 绪 论 1
1.1背景 1
1.1.1移动时代兴起 1
1.1.2 HTML5技术的兴起 1
1.2 目的和研究内容 1
1.2.1 目的 1
1.2.2 研究内容 1
第二章 HTML5技术介绍 3
2.1 HTML5技术 3
2.2 HTML5技术与原生的比较 5
2.3 HTML5应用领域 6
第三章 界面需求分析 8
3.1 界面功能分析与设计 8
3.2 结构框架搭建 9
第四章 界面实现 11
4.1 环境部署 11
4.2 首页设计与实现 11
 *景先生毕设|www.jxszl.com +Q: @351916072@ 
4.2.1 首页代码结构 11
4.2.2 main代码实现 12
4.2.3 点击各个模块跳转方式 13
4.2.4 实现效果 14
4.3 新闻页面、校园活动、校园超市 14
4.3.1 新闻页面 15
4.3.2校园活动 15
4.3.3 校园超市实现 17
4.4 校园论坛功能 22
4.5 扫一扫功能 23
4.6 更多界面 23
4.7 利用IDE封装成APP 24
结束语 25
致 谢 26
参考文献 27
第一章 绪 论
1.1背景
1.1.1移动时代兴起
从电脑pc端的桌面应用到手机、平板移动终端应用，很多用户向着移动端开始靠拢，移动端的使用在不断的普及中，以其便携性逐渐成为主流。
随着移动设备和移动互联网的发展，人们对与手机的使用变的很普遍，手机是人们生活出行必带的一件物品。这几年手机的功能变化变的多种多样，从当初的只能打电话发短信，如今手机可以社交、出行的帮手、等等层出不穷的功能，一再的刷新我们对于移动端设备的认知。众多的功能不仅为我们生活和学习提供了很多的便利，同时带动了互联网整体行业的发展。
1.1.2 HTML5技术的兴起
HTML5技术未成熟之前，对于移动互联网，大家更习惯利用App访问应用。
HTML5技术14年被定为W3C标准以后，逐渐走入开发市场。不仅获得各大浏览器的支持，提供CSS3、JavaScriptAPI调用原生接口、Web存储、通信等技术，而且通过apicloud、hello H5+、phonegap等可以直接将其直接封装成跨平台的app。
1.2 目的和研究内容
1.2.1 目的
以前的学生在未进入学校之前，通常通过pc端的浏览器查看学校官网、校园的介绍、校园的师资等等的信息来了解校园信息。在移动互联网时代，大学生校园并没有提供一个专门针对大学生群体的一个移动端网站或者App，供学生浏览校园的方方面面。这对与新生去了解学校来说存在了诸多问题。
本次研究的目的就是利用HTML5提供的丰富的JavaScript API、本地缓存等技术实现一款面向学生群体App的前端部分。
1.2.2 研究内容
本课题主要研究内容为利用HTML5技术通过中间件实现跨平台的虚拟校园App。主要分为以下几点：
HTML5的跨平台技术
众所周知web开发一直以来的问题存在与不同设备分辨率适配和浏览器兼容。HTML5的媒体查询技术可以让我们对于不同的设备设置不同的样式已达到响应式开发，HTML5的标准化同时让不同的浏览器达到一个统一标准。
利用中间组件将HTML5封装成App
HTML5本身提供的7万个API与原生开发40万+的API比较，HTML5开发APP还存在一定差距。中间组件将原生的API封装好供JavaScript调用，让HTML5可以真正的开发与原生想媲美的APP。
Web离线应用
HTML5通过 Application Cache接口使页面加载数据时，允许用户自定义一些要缓存的图片、HMTL、CSS、JavaScript等文件，使用户在不联网的情况下，还可以正常的访问缓存过得文件。
HTML5视频与音频
Web上的多媒体应用从最初的MIDI和GIF动画，发展到现在到处可见的MP3音乐、Flash动画和各种在线视频，同时也产生了用于播放多媒体的各种工具和插件。Html5的开发者使用Audio和Video在不需要插件的下就能播放音频和视频。
第二章 HTML5技术介绍
2.1 HTML5技术
Html5作为新出来的技术，在web开发上给开发者多了一种选择，现阶段能在各个平台兼容才可以满足开发的需求。
1）结构规范让代码更加简洁
新的html5中引用了新的元素，淘汰了一部分html4中的元素，使我们在构建网页变了更加的方便。绝大部分的元素还是继续被沿用，使用div作为模块化方便了写程序的进程。
Html5中引用新元素来解决不同方面的问题。那些div元素可以用这些新元素代替：header, nav, section等等。新标签在使用中减少了浏览器在运行中的解析过程，提升了速度与效率。
2）提供丰富的表单元素属性加快移动端开发

原文链接：http://www.jxszl.com/jsj/rjgc/165437.html