[毕业论文]基于HTML5 CSS3的相册设计与实现 - 图文(2)

第一章 HTML5幻灯片相册概述

第一节 研究内容

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

第二节 研究意义

利用HTML5和CSS3实现一个幻灯片相册的应用，以此来学习这个最新的Web技术，以适应潮流的发展，让用户感受HTML带来的全新体验。

第三节 研究现状和发展趋势

国内市场支持HTML5标准的浏览器已经从2010年的不到2%发展到2012年超过三成的比例，2013年这一比例将有望突破70%。越来越多PC浏览器开始重视并且支持HTML5发展的同时，HTML5也越来越受到移动互联网的重视。

许多大网站开始采用HTML5页面，例如淘宝，京东等，足以见得HTML5发展之快。

相对于 PC 平台而言，移动平台一直是开发者更为关心的，因为移动平台

浏览器品种较少，版本也普遍集中在最新正式版。同时，由于移动设备的更新换代速度要比 PC 更快,硬件支持和浏览器的状况都要比 PC平台的状况更好。移动平台上主流的 5 款浏览器(iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0)，目前对标准

- 2 -

的支持度均高于 60%。其中表现居首的是 Chrome for Android，而支持度相对较低的 Android 系统自带的浏览器 Android Browser 对 HTML5 的支持度也在 60%以上。

此外，硬件加速促进了HTML5标准的发展和应用。在使用 HTML5 开发时，开发者经常会谈到的一个问题就是性能。使用 HTML5 动画、Canvas、WebGL 究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对 HTML5 的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chrome 18+、Firefox 4+、IE 9+、Safari 5.1+、Opera 12+。国内的有360 安全浏览器、搜狗浏览器以及QQ 浏览器。手机系统情况也比较乐观，主流的智能手机系统 iOS、Android 以及 Windows Phone 上的原生浏览器都已经支持硬件加速。Android 4.0+上的 Chrome在硬件加速方面更是超越了原生浏览器的表现。

2012 年 12 月 17日，W3C 发布了 HTML5 以及 Canvas 2D 两个标准的完全定义版本，标志着 HTML5 的标准已经在趋向稳定。在2013年，支持 HTML5 的 PC 浏览器将会有一个较大的增长。 除Chrome、Firefox 之外，微软推出的 IE9、IE10 对HTML5 的支持度都大幅提升，相信 HTML5 大面积使用只是时间问题。此外，移动平台的HTML5比PC平台发展得更快。由于移动设备的更新换代速度远远超过PC，而且硬件性能也能够完全支持HTML5。

- 3 -

第二章 HTML5相关技术及简介

第一节 HTML5发展历史及趋势

HTML5是HTML下的一个主要修订版本，现在仍处于发展阶段。目标是取代1999年所订定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案已公布，在2010年9月正式向公众推荐。HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。目前Firefox（火狐浏览器），IE9及其更高版本，Chrome，Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

第二节 HTML部分新特性

一、HTML5新API

除了原先的DOM接口，HTML5增加了更多样化的API：

① 实时二维绘图

Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。 ② 定时媒体播放

HTML5 音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。

③ 离线存储数据库（离线网络应用程序）

- 4 -

④ 编辑 ⑤ 拖放 ⑥ 跨文档通信 ⑦ 通信／网络

Communication APIs：构建实时和跨源（cross-origin）通信的两大基础： 跨文档通信（Cross Document Messaging）与 XMLHttpRequest Level 2。

二、HTML5的优点

① SEO(搜索引擎优化)得到提升

一些常用的图形效果有CSS3表达方式，包括不透明贴图、圆角、阴影。这些效果与CSS3渐变色一起使得上传更为简洁，跨平台维护也更为容易。此外，它们还在SEO(搜索引擎优化)方面具有优势。

② 更快的图片下载速度，尤其是对于移动用户

在网页设计中，“渐变”是一种背景效果：你的网页上的“窗口”拥有更精致的底纹或纹理。公司设计人员有更大的空间来平衡明暗度、匹配边界，实现让大数浏览者叹为观止的色彩或风格。

③ Web应用开发更容易，尤其是移动应用

最后一个优势是，HTML5解决方案是一个可媲美原生应用的编程环境。这对于移动终端用户来说非常重要，原生应用开发成本昂贵：其编程人员薪水高、许可证各类繁多，可移植性差。HTML5在优势在于许多应用能够被完整的编在HTML5内。

④ 更精美的动画效果

除了上面所提到的功能外，其特色功能还包括

HTML5能够以更低的成本和更短的下载时间展现媲美目前顶级网页设计人员设计的外观，语义标记具有SEO和维护优势。HTML5现在拥有的一些效果已经超越早期标准的效果，其中之一就是动画制作。

第三节 JavaScript及jQuery简介

一、JavaScript

JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器

- 5 -

端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。由于Ajax的出现，JavaScript的功能被越来越多的丰富，能做的事情也越来越多，是Web2.0时代的象征。

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。

JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。