基于html5与css3高校互联网移动端网站优化

《基于html5与css3高校互联网移动端网站优化》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于HTML5与CSS3高校互联网移动端网站优化　　摘要：针对互联网与移动终端技术的不断发展，人们对移动设备的需求不断增加，原有的Web标准已不再适应移动端，原有高校网站在移动端已不能提高用户体验。以传统PC网站开发为基础，为实现与利用代码的复用性，文章使用基于移动设备的HTML5与CSS3和jQueryMobile等技术，构建了一个移动端网站，让其能够得到多种终端的支持，同时提出了一种使用该技术提升高校网站在移动端的内容、应用架构和服务模式的解决方案。　　关键词：HTML5；CSS3；移动浏览器；jQueryMobile；移动终端　　中图分类号：T

2、P316文献标识码：A文章编号：2095-1302（2016）06-00-02　　0引言6　　由于移动互联网技术的发展和移动智能设备的普及，很多用户开始选择在移动端进行浏览、娱乐和学习。据谷歌2012第一季度与市场调研机构IPSOS（益普索）对关于人们如何使用智能设备进行全世界范围的调查，得到的信息包括对移动设备手机的普及和使用情况记录的一些相关数据。人们利用智能设备进行对互联网的使用，包括对资源的搜索及视频的搜索、移动商务、移动广告和人们的社交网络与网络学习等。截止目前，中国智能手机的使用率已达到90%，它已经在人们的生活中扮演着一个重要角色，为此

3、，人们对智能设备的依赖程度也随之增加，其中约64%的用户每天都会用智能手机访问互联网。在办公室时、乘坐公共交通工具时、在餐馆时或在回家路上等，超过50%的使用者每天都会使用智能移动设备对互联网进行至少一次访问，主要行为包括对搜索引擎的使用，对电子邮件的收发，登录社交网站等，越来越多的用户将在未来更加频繁的使用智能手机访问互联网。　　随着移动终端（智能手机）的不断扩增和使用，显然PC机终端（开发）不能满足市场需求，越来越多的用户，特别是在校学生大多都选择使用移动浏览器如Safari，UC，Opera，Chorme等上网娱乐、办公。许多丰富的网页内容将在

4、移动浏览器端显示，它支持www标准协议，其中主要采用两种布局来显示PC网站的内容：①通过对网页的放大或缩小来显示；②通过自适应手机屏幕宽度，将PC版传统网站进行重新布局，利用手机出现的滚动条，对网页内容进行查看，但是这样显示的内容将会被打乱，而布局也随之变得混乱。面对这种情况，假如摒弃传统PC版网站的资源，重新开发新的移动设备端网站，就需要投入更多的时间、精力、金钱等开发成本，其中对人力、资源的浪费是巨大的。该设计在不变动PC版网站相关业务及数据访问的基础上，提出一个基于CSS3+HTML5+jQueryMobile的新移动技术实现平台的开发创建，对

5、HTML5相关核心技术等的导入，让移动端平台的建立实现跨平台有了新的思路。　　1设计思路　　本设计继续沿用现在主流的MVC三层架构思想进行修改设计，即将该程序分为三个层次，分别是显示层、业务层和数据持久层。　　（1）界面层：负责显示用户界面；6　　（2）业务层：根据用户需要的业务处理相关业务逻辑关系；　　（3）数据持久层：对数据库的访问交互，例如查询数据、插入、删除和修改数据库中的数据。　　该方案只增加一个与PC显示层同层的移动设备界面层，不改变传统网站的业务逻辑层和数据持久层，其应用程序架构如图1所示。　　其中，网页显示主要放在移动界面端，页面显示

6、由.aspx文件管理，内容包含jQueryMobile和前端开发，微软自带的服务器端控件等，后台使用C#语言编程，通过调用相应的业务功能逻辑层实现功能。移动设备界面层如图2所示。　　2移动开发环境搭建　　开发工具：VisualStudio2010或者VisualStudio2012；　　操作系统：Windows7旗舰版；　　服务器：InternetInformationServices；　　数据库：MicrosoftSQLServer2008R2；　　开发语言：C#。　　3核心技术和关键代码分析　　3.1HTML5技术　　HTML5是基于HTML4.

7、01和XHTML1.0标准的最新HTML版本，由WHATWG在2004年提出，被W3C组织于2007年接纳。2008年1月22日公布了HTML5的第一份正式草案，但HTML5仍处于完善之中，其中HTML5.1是在2016完成的。目前为止，很多浏览器都已经开始支持HTML5，譬如Safari，Chrome以及火狐浏览器等。6　　HTML5包含了像，这一类新的元素和属性标签，有利于搜索引擎的结果优化，在小屏幕设备上使用支持更方便，增强了互动性，减少了不必要的开发成本。HTML5标签中的header，footer，dialog等使开发者更容易地创建文档并帮

8、助文档改善。其中Canvas绘图提升了移动平台的绘图能力，并逐渐被各种浏览器所兼容。HTML5新元素的特性如