视频-第11章jquery在html5中的应用

本章要求：第11章jQuery在HTML5中的应用HTML5的基础知识使用HTML5+jQuery实现文件上传进度条的显示使用HTML5+jQuery实现图片旋转效果使用HTML5+jQuery实现图片旋转效果使用jQuery插件在HTML5中实现声音的播放WebStorage编程应用旅游信息网前台页面的实现主要内容1.HTML5基础2.jQuery与HTML5编程3.综合实例：旅游信息网前台页面设计第11章jQuery在HTML5中的应用11.1HTML5基础11.1.1HTML的发展历程11.1.2HTML5的新特性11.1.3浏览器对HTML5的支持

11.1.1HTML的发展历程

1993年HTML首次以因特网草案的形式发布。20世纪90年代的人见证了HTML的快速发展，从2.0版，到3.2版和4.0版，再到1999年的4.01版，一直到现在正逐步普及的HTML5。随着HTML的发展，W3C（万维网联盟）掌握了对HTML规范的控制权。致力于将Web平台提升到一个新的高度，一组人在2004年成立了WHATWG（WebHypertextApplicationTechnologyWorkingGroup，Web超文本应用技术工作组），他们创立了HTML5规范，同时开始专门针对Web应用开发新功能——这被WHATWG认为是HTML中最薄弱的环节。Web2.0这个新词也是在那个时候被发明的。Web2.0实至名归，开创了Web的第二个时代，旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站——这其中的新功能数不胜数。2006年，W3C又重新介入HTML，并于2008年发布了HTML5的工作草案。2009年，XHTML2工作组停止工作。又过一年，因为HTML5能解决非常实际的问题，所以在规范还没有具体订下来的情况下，各大浏览器厂家就已经按耐不住了，开始对旗下产品进行升级以支持HTML5的新功能。这样，得益于浏览器的实验性反馈，HTML5规范也得到了持续地完善，HTML5以这种方式迅速融入到了对Web平台的实质性改进中。11.1.2HTML5的新特性

兼容性虽然到了HTML5时代，但并不代表现在用HTML4创建出来的网站必须全部要重建。HTML5并不是颠覆性的革新。相反，实际上HTML5的一个核心理念就是保持一切新特性平滑过渡。尽管HTML5标准的一些特性非常具有革命性，但是HTML5旨在进化而非革命。这一点正是通过兼容性体现出来的。正是因为保障了兼容性才能让人们毫不犹豫的选择HTML5开发网站。实用性和用户优先HTML5规范是基于用户优先准则编写的，其主要宗旨是“用户即上帝”，这意味着在遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面的作者，再次是实现者（或浏览器），接着是规范制定者，最后才考虑理论的纯粹实现。因此，HTML5的绝大部分是实用的，只是有些情况下还不够完美。实用性是指要求能够解决实际问题。HTML5内只封装了切实有用的功能，不封装复杂而没有实际意义的功能。化繁为简HTML5要的就是简单、避免不必要的复杂性。HTML5的口号是“简单至上，尽可能简化”。因此，HTML5做了以下改进：以浏览器原生能力替代复杂的JavaScript代码。新的简化的DOCTYPE。新的简化的字符集声明。简单而强大的HTML5API。11.1.3浏览器对HTML5的支持

要测试浏览器对HTML5的支持程序，只需要访问网址即可，例如，使用GoogleChrome36.0.1985.125版本测试HTML5的支持程度，得分为509分（满分为550分），如图11-1所示。图11-1使用GoogleChrome36.0.1985.125版本测试HTML5的支持程度使用目前国外厂商的主流浏览器进行测试的结果如表11-1所示。

浏览器版本得分Chrome36.0.1985.125509Opera（欧朋浏览器）23.0.1522.77505Firefox31.0473InternetExplorer（IE浏览器）11.0.9600.17207369Safari（苹果浏览器）260从表11-1可以看到，目前对HTML5支持最好的国外厂商主流浏览器是Google公司的Chrome浏览器。使用目前国内厂商的主流浏览器进行测试的结果如表11-2所示。

说明：表11-1和表11-2中的测试结果是笔者使用各浏览器的最新版本测试出来的结果，该测试结果可能会随时变化；而且，随着HTML5的普及，相信各浏览器厂商会越来越重视对HTML5的支持。

浏览器版本得分傲游浏览器000515猎豹安全浏览器606503360安全浏览器04483百度浏览器0185439QQ浏览器7.7.2333搜狗高速浏览器371512711.2jQuery与HTML5编程

11.2.1显示文件上传的进度条11.2.2Canvas绘图11.2.3jQuery+HTML5实现图片旋转效果11.2.4基于HTML5播放声音的jQuery插件audioPlay11.2.5WebStorage编程11.2.1显示文件上传的进度条1．HTML5FileAPIHTML5FileAPI的设计初衷，是改善基于浏览器的Web应用程序处理文件的上传方式，使文件直接拖放上传成为可能。HTML5FileAPI用于对文件进行操作，使程序员可以对选择文件的表单控件进行操作，更好地通过程序对访问文件和文件上传等功能进行控制。在HTML5FileAPI中定义了一组对象，包括FileList对象、File对象、Blob对象、FileReader对象等。（1）FileList：File对象的一个类似数组的序列。（2）File：表示FileList中的一个单独的文件，File对象的主要属性如下：name：返回文件名，不包含路径信息。lastModifiedDate：返回文件的最后修改日期。size：返回File对象的大小，单位是字节。type：返回File对象媒体类型的字符串。在JavaScript中，获取file类型的input元素的FileList数组的方法如下：document.getElementById("file类型的input元素id").files;获取FileList数组中的File对象的方法如下：

document.getElementById("file类型的input元素id").files[index];2．向服务器端发送FormData对象使用XMLHttpRequest对象的send()方法可以使用FormData对象模拟表单向服务器发送数据，语法如下：

xmlhttp.send(formData);其中创建FormData对象有如下两种方法：（1）使用new关键字

varformData=newFormData();（2）调用表单对象的getFormData()方法获取表单对象中的数据

FormData=formElement.getFormData(document.getElementById("form_id"));向FormData对象中添加数据可以使用append()方法，语法如下：

formData.append(key,value);例如：

formData.append("username",”轻鸿”);

formData.append("address",”长春市”);在发送FormData对象之前也需要调用open()方法设置提交数据的方式以及接收和处理数据的服务端脚本，例如：

xmlhttp.open("POST","upfile.php");【例11-1】

显示文件上传的进度条（1）创建index.html，构建上传文件的form表单，以及进度条，主要代码如下：<h3>上传文件</h3><formenctype="multipart/form-data"id="form1"name="form1"><p>请选择您要上传的文件</p><inputtype="file"name="upload_file"id="upload_file"/><br/><inputtype="button"name="btn"id="btn"value="上传"/></form><progressid="progress"value="0"max="100"></progress><divid="pro_div"></div>（2）给按钮添加click事件，创建FormData对象并将文件数据添加至其中，创建XMLHttpRequest对象向服务端发送FormData对象实现无刷新上传，并在<progress>元素中显示上传进度，代码如下：$(document).ready(function(){ $("#btn").click(function(){ varformdata=newFormData(); //创建FormData对象//向FormData中添加数据 formdata.append("upload_file",document.getElementById("upload_file").files[0]); varxmlhttp; if(window.XMLHttpRequest){ xmlhttp=newXMLHttpRequest(); }else{ xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); }//为progress添加监听事件 xmlhttp.upload.addEventListener("progress",function(event){ if(putable){ varplete=Math.round(event.loaded*100/event.total); document.getElementById("pro_div").innerHTML=plete.toString()+"%"; //显示上传百分比 document.getElementById("progress").value=plete; } },false); xmlhttp.addEventListener("load",function(event){ document.write(event.target.responseText); },false); xmlhttp.addEventListener("error",function(event){ alert("上传出现错误！"); },false); xmlhttp.addEventListener("abort",function(event){ alert("取消上传！"); },false); xmlhttp.open("POST","upfile.php"); xmlhttp.send(formdata); }) })（3）处理上传文件的服务端脚本upfile.php文件首先定义文件上传路径，之后判断，如果临时文件存在，那么进行上传操作，如果上传成功，返回文件路径、文件名称、文件类型、文件大小以及临时文件组成的字符串，内容如下：<?php $dir=getcwd()."\\upload\\"; //定义上传目录

$path=$dir.$_FILES["upload_file"]["name"]; //定义上传文件路径

if(!is_dir($dir)){ //如果指定目录不存在

mkdir($dir); //创建指定目录

} if(file_exists($_FILES["upload_file"]["tmp_name"])){ move_uploaded_file($_FILES["upload_file"]["tmp_name"],$path);//上传文件

echo"文件为：".$path."<br/>"; //文件路径

echo"文件名称：".$_FILES["upload_file"]["name"]."<br/>"; //文件名称

echo"文件类型：".$_FILES["upload_file"]["type"]."<br/>"; //文件类型

echo"文件大小：".$_FILES["upload_file"]["size"]."<br/>"; //文件大小

echo"临时文件为：".$_FILES["upload_file"]["tmp_name"]."<br/>";//临时文件

}else{ echo"上传失败！"; }?>在如图11-2所示，选择要上传的文件，之后点击上传，可以看到如图11-3所示的进度条。图11-2选择上传文件

图11-3显示进度条

文件上传完毕后会出现如图11-4所示提示信息。图11-4显示上传文件信息

注意：（1）上传文件一定要设置enctype="multipary/form-data"，这是使用表单上传文件的固定编码格式，如果不设置这项，则服务端获取不到文件信息。（2）如果客户端和服务端网速很快的话，很难看到进度信息。因此为了明显的看到上传过程的进度信息，建议选择一个较大的文件上传。但是在PHP中，上传较大文件需要修改PHP的配置文件php.ini的upload_max_filesize项，设置为足够大。否则会上传失败。

11.2.2Canvas绘图

Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。但是，在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，用户可以自定义具体的大小或者设置canvas元素的其他特性。在页面中加入了canvas元素后，我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图设置，还可以加入高级动画。可放到HTML页面中的最基本的canvas元素代码如下所示。<canvasid=”xxx”height=”xx”width=”xx”></canvas>Canvas的元素的常用属性如下：id：canvas元素的标识id。height：canvas画布的高度，单位为像素。width：canvas画布的宽度，单位为像素。<canvas></canvas>之间的字符串指定当前浏览器不支持Canvas时显示的字符。说明：IE9以上的版本、Firefox、Opera、GoogleChrome和Safari支持Canvas元素。IE8及以前的版本不支持canvas元素。

jCanvas插件封装了CanvasAPI，使Canvas绘图变得更加简单。jCanvas插件的脚本文件为jcanvas.min.js，其中jCanvas插件中主要绘图方法如表11-3所示。

绘图方法说明drawArc({strokeStyle：边框颜色，strokeWidth：边框宽度，x：圆弧的圆心的横坐标，y：圆弧圆心的纵坐标，radius：圆弧半径，start：圆弧的起始角度，end：圆弧的结束角度})绘制圆弧drawEllipse({fillStyle：填充颜色，x：圆心的横坐标，y：圆心的纵坐标，width：宽度，height：高度})绘制椭圆drawRect({fillStyle：填充颜色，x：矩形左上角的横坐标，y：矩形左上角的纵坐标，width：宽度，height：高度，fromCenter：是否从中心绘制})绘制矩形drawLine({fillStyle：填充颜色，x1：端点1的横坐标，y1：端点1的纵坐标，x2：端点2的横坐标，y2：端点2的纵坐标，x3：端点3的横坐标，y3：端点3的纵坐标，x4：端点4的横坐标，y4：端点4的纵坐标，strokeWidth：边框宽度})绘制直线drawText({fillStyle：填充颜色，strokeStyle：边框颜色，strokeWidth：边框宽度，x：横坐标，y：纵坐标，font：字体，text：文本字符串})绘制文本drawImage({source：图片文件名，x：横坐标，y：纵坐标，width：宽度，height：高度，scale：缩放比例，fromCenter：是否从中心绘制})绘制图片Canvas采用HTML颜色表示法，可以使用如下4种方式表示。（1）颜色关键字可以使用颜色关键字来表示颜色，例如“red”表示红色、“blue”表示蓝色、“green”表示绿色等。（2）十六进制字符串可以使用一个十六进制字符串表示颜色，格式为#RGB。其中，R表示红色集合，G表示绿色集合,B表示蓝色集合。例如：#FFF表示白色，#000表示黑色。（3）RGB颜色值也可以使用rgb(r,g,b)格式表示颜色。其中r表示红色集合，g表示绿色集合，b表示蓝色集合。其中r、g、b都是十进制数，取值范围是0-255。常用的RGB如表11-4所示。颜色红色值绿色值蓝色值RGB表示黑色000RGB(0,0,0)蓝色00255RGB(0,0,255)红色25500RGB(255,0,0)绿色02550RGB(0,255,0)黄色2552550RGB(255,255,0)白色255255255RGB(255,255,255)（4）RGBA颜色值指定颜色也可以使用rgba()的方法定义透明颜色，格式如下：

rgba(r,g,b,a,alpha)其中r表示红色集合，g表示绿色集合，b表示蓝色集合。r、g、b都是十进制数，取值范围为0-255。Alpha的取值范围为0-1，用来设置透明度，0表示完全透明，1表示不透明。【例11-2】

使用jcanvas插件绘制一个浅蓝色的正方形（1）创建index.html，引入jquery文件和jCanvas插件文件，代码如下：<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script><scripttype="text/javascript"src="../js/jcanvas.min.js"></script>（2）在页面中添加<canvas>元素，具体代码如下：<canvaswidth="300"height="200"></canvas>（3）编写jQuery代码，使用jCanvas插件的drawRect()方法实现绘制一个浅蓝色的正方形，具体代码如下：$(function(){ $("canvas").drawRect({ fillStyle:"lightblue", x:150,y:80, width:100, height:100 })})运行本实例，效果如图11-5所示。

图11-5绘制一个浅蓝色的正方形11.2.3jQuery+HTML5实现图片旋转效果

在HTML4中要实现图片的旋转效果需要编写大量的代码，而在HTML5中，只需要在页面中创建新增的<canvas>元素，通过导入jQuery库调用该元素加载图片的方法就可以轻松实现图片的旋转效果了。

【例11-3】

实现图片旋转效果（1）创建index.html，引入jquery文件和jquery.rotate.js文件，代码如下：<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script><scripttype="text/javascript"src="../js/jquery.rotate.js"></script>（2）在页面中添加待旋转图片的<img>元素，并添加一个<ul>元素，通过点击该元素下的<li>元素实现各种旋转，具体代码如下：<divid="imgdiv"><divid="rimg"> <imgsrc="images/11.png"id="bimg"/></div><ul> <li>顺时针旋转90度</li> <li>逆时针旋转90度</li> <li>旋转180度</li> <li>旋转270度</li></ul></div>（3）编写CSS样式，详细请参见光盘。（4）编写jQuery代码，分别实现让图片顺时针旋转90度、逆时针旋转90读、旋转180度和270度。具体代码如下：$(document).ready(function(){ $("#imgdivulli").each(function(i){ //遍历ul下的li元素

$(this).bind("click",function(){ //绑定单击事件

switch(i){ case0: //第1个li元素

$("#bimg").rotate(90); //将id为bimg的元素顺时针旋转90度

break; case1: //第2个li元素

$("#bimg").rotate(-90); //将id为bimg的元素逆时针旋转90度

break; case2: //第3个li元素

$("#bimg").rotate(180); //将id为bimg的元素旋转180度

break; //第4个li元素

case3: $("#bimg").rotate(270); //将id为bimg的元素旋转270度

break; } }) }) })（5）其中第（4）步中使用的rotate()方法来源于jquery.rotate.js文件，它通过接收用户传入的旋转角度值，在页面中动态创建一个canvas元素，并将页面中的图片旋转指定角度，加载至canvas元素中。该文件的具体内容请参见光盘。

在如图11-6所示页面，单击逆时针旋转90度，效果如图11-7所示。图11-6原始图像

图11-7逆时针旋转90度

之后再单击旋转270度，效果如图11-8所示。图11-8旋转270度

11.2.4基于HTML5播放声音的jQuery插件audioPlay

在HTML5出现以前，要在网页中播放多媒体是需要借助flash插件的，因此浏览器需要安装Flash插件。HTML5提供了新的标签<audio>，可以很方便的在网页中播放音频文件，而不需要安装插件。可以使用audioPlay插件的audioPlay()方法在鼠标经过一个HTML元素时自动播放指定的音频文件，这个音频文件可以是mp3文件或者ogg文件，方法的具体参数以及相关说明请参见表11-5参数默认值说明Name“audioPlay“字符串，用来分组，用在页面上同时播放多组元素时urlMp3""字符串，必选参数。Mp3格式的音频文件地址urlOgg""字符串，必选参数，ogg格式的音频文件地址Clone""布尔型。同一组元素是否播放同一个声源【例11-4】

使用audioPlay插件播放菜单的背景音乐（1）创建index.html，引入jquery文件和jquery-audioPlay.js文件，代码如下：<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script><scripttype="text/javascript"src="../js/jquery-audioPlay.js"></script>（2）在页面中制作导航菜单，具体代码如下：<divid="top"></div><dl> <dt>员工管理</dt> <dd><divclass="item">添加员工信息</div><divclass="item">管理员工信息</div> </dd> <dt>招聘管理</dt> <dd><divclass="item">浏览应聘信息</div><divclass="item">添加应聘信息</div><divclass="item">浏览人才库</div> </dd><dtclass="title"><ahref="#">退出系统</a></dt></dl><divid="bottom"></div>（3）编写CSS样式，详细请参见光盘。（4）编写jQuery代码，使鼠标经过子菜单时播放指定的音频文件，具体代码如下：$(document).ready(function(){ $("dd").audioPlay({ name:"playOnce", urlMp3:"media/test.mp3", urlOgg:"media/test.ogg", clone:true })})运行本实例，当鼠标经过子菜单时，可以听到音频文件播放声音。页面运行效果如图11-9所示。

图11-9使用audioPlay插件播放菜单的背景音乐11.2.5WebStorage编程

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是cookies，但是作为真正的客户端存储，cookies还是有些不足：大小：cookies的大小被限制在4KB。带宽：cookies是随HTTP事物一起发送的，因此会浪费一部分发送cookies时使用的带宽。复杂性：cookies操作起来比较麻烦；所有的信息要被拼到一个长字符串里面。对cookies来说，在相同的站点与多事务处理保持联系不是很容易。在这种情况下，在HTML5中提供了一种在客户端本地保存数据的功能，它就是WebStorage功能。WebStorage功能，就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的它包含两种不同的存储类型：SessionStorage和LocalStorage。不管是SessionStorage还是LocalStorage，它们都能支持在同域下存储5MB数据，这相比cookies有着明显的优势。1．sessionStorage将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。Session对象可以用来保存在这段时间内所要求保存的任何数据。2．localStorage将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。这两种不同的存储类型区别在于，sessionStorage为临时保存，而localStorage为永久保存下面我们讲解如何使用WebStorage的API。目前WebStorage的API有如下这些：length：获得当前webstorage中的数目。key(n)：返回webstorage中的第N个存储条目。getItem(key)：返回指定key的存储内容，如果不存在则返回null。注意，返回的类型是String字符串类型。setItem(key,value)：设置指定key的内容的值为value。removeItem(key)：根据指定的key，删除键值为key的内容。clear：清空webstorate的内容。可以看到，webstorageAPI的操作机制实际上是对键值对进行的操作。下面是一些相关的应用：数据的存储与获取在localStorage中设置键值对数据可以应用setItem()，代码如下所示：

localStorage.setItem("key","value);获取数据可以应用getItem()，代码如下所示：

varval=localStorage.getItem("key");当然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下：

localStorage.key="value";

varval=localStorage.key;HTML5存储是基于键值对（key/value）的形式存储的，每个键值对称为一个项（item）。存储和检索数据都是通过指定的键名，键名的类型是字符串类型。值可以是包括字符串、布尔值、整数，或者浮点数在内的任意JavaScript支持的类型。但是，最终数据是以字符串类型存储的。调用结果是将字符串value设置到sessionStorage中，这些数据随后可以通过键key获取。调用setItem()时，如果指定的键名已经存在，那么新传入的数据会覆盖原先的数据。调用getItem()时，如果传入的键名不存在，那么会返回null，而不会抛出异常。数据的删除和清空removeItem()用于从Storage列表删除数据，代码如下：varval=localStorage.removeItem(key);也可以通过传入数据项的key从而删除对应的存储数据，代码如下：varval=localStorage.removeItem(1);说明：数字1会被转换为string，因为key的类型就是字符串。

clear()方法用于清空整个列表的所有数据，代码如下：

localStorage.clear();注意：removeItem可以清除给定的key所对应的项，如果key不存在则“什么都不做”；clear会清除所有的项，如果列表本来就是空的就“什么都不做”。

【例11-5】

使用localStorage保存留言内容（1）创建index.html，引入jquery文件，代码如下：<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）使用<table>元素制作留言页面，使表单中包含2个type="text"的<input>元素和1个<textarea>元素，分别用于录入用户名，标题和留言内容，具体代码如下：tablewidth="761"border="0"align="center"cellpadding="0"cellspacing="0"bordercolor="#FEFEFE"bgcolor="#FFFFFF"><formaction=""method="post"name="form1"id="form1"><tr><tdwidth="761"align="center"bgcolor="#F9F8EF"><tablewidth="749"border="0"align="center"cellpadding="0"cellspacing="0"style="BORDER-COLLAPSE:collapse"><tr><tdwidth="749"height="57"background="images/a_03.jpg">  </td></tr><tr><tdheight="36"colspan="3"align="left"background="images/a_05.jpg"bgcolor="#F9F8EF"scope="col">        姓

名：

<inputname="username"id="username"value=""maxlength="64"type="text"/></td></tr><tr><tdheight="36"colspan="3"align="left"background="images/a_05.jpg"bgcolor="#F9F8EF">        标题：

<inputmaxlength="64"size="30"name="title"id="title"type="text"/></td>

</tr><tr><tdheight="126"colspan="3"align="left"background="images/a_05.jpg"bgcolor="#F9F8EF">        内

容：

<textareaname="content"cols="60"rows="8"id="content"style="background:url(./images/mrbccd.gif)"></textarea>

<tablewidth="734"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="703"height="40"align="center"><inputname="button"type="button"id="button"value="填写留言"/></tr></table> </td></tr><tr><tdheight="35"background="images/a_07.jpg">  </td></tr></table> </td></tr></form></table>（3）编写CSS样式，详细请参见光盘。（4）编写jQuery代码，当文本框和文本域的内容变化时触发change事件，将文本框和文本域的值写入localStorage中，加载页面时判断，如果localStorage存在，则读取localStorage中数据并显示在文本框和文本域中，具体代码如下：$(document).ready(function(){ $("input[type=text],textarea").change(function(){//当文本框和文本域内容变化时//将当前元素的值写入键值为当前元素name值的localStorage中

localStorage[$(this).attr("name")]=$(this).val(); }) if(localStorage){//如果存在localStorage if(localStorage.username){//如果localStorage中存在username的值//将用户名的值设置为localStorage中username的值

$("#username").val(localStorage.username); } if(localStorage.title){//如果localStorage中存在title的值//将标题的值设置为localStorage中title的值

$("#title").val(localStorage.title); } if(localStorage.content){//如果localStorage中存在content的值//将留言内容设置为localStorage中content的值

$("#content").val(localStorage.content); } }})运行本实例，填写用户名、标题和留言内容，之后重新加载页面，可以看到之前填写的内容都被保存起来，页面运行效果如图11-10所示。图11-10localStorage存储11.3综合实例：旅游信息网前台页面设计

旅游信息网是介绍关于长春旅游信息的网站，该网站主要包括主页、自然风光页、人文气息页、美食页、旅游景点页、名校简介页及留下足迹页等页面。旅游信息网由多个网页构成，下面看一下旅游信息网中主要页面的运行效果。说明：由于每个子页面中的header部分和footer部分都是相同的，所以在浏览各个子页面时主要演示其主体部分的运行效果。

网站预览

首页主要显示旅游信息网的介绍及相关图片，其运行效果如图11-11所示。

图11-11旅游信息网首页自然风光页面主要是介绍长春的一些自然风光，如地理位置、气候等，运行效果如图11-12所示。

图11-12自然风光页面

人文气息页面主要是对长春的体育事业和科学教育事业进行介绍，其运行效果如图11-13所示。图11-13人文气息页面

美食页面主要是介绍长春的一些特色美食，其运行效果如图11-14所示。图11-14美食页面

旅游景点页面主要是介绍长春的一些旅游景点，其运行效果如图11-15所示。图11-15旅游景点页面

名校简介页面主要是介绍长春的知名高等院校，其运行效果如图11-16所示。图11-16名校简介页面

留下足迹页面主要是添加了一张gif格式的图片，并在其下方载入一段音频文件，当打开本页面时，音频文件会自动播放；另外，在该页的右侧栏添加了一张留言的表单，访客可以在此留言，其运行效果如图11-17所示。图11-17留下足迹页面网站主体结构设计

旅游信息网网页的主体结构如图11-18所示。图11-18旅游信息网所有页面主题结构图

这些网页中有几个主要的HTML5结构，分别是：header元素、aside元素、section元素及footer元素。

HTML5结构元素的使用

在设计旅游信息网前台页面时，主要用到了HTML5的一些主体结构元素，分别是header结构元素、aside结构元素、section结构元素和footer结构元素，在大型的网站中，一个网页通常都由这几个结构元素组成，下面分别进行介绍。header结构元素：通常用来展示网站的标题、企业或公司的logo图片、广告（Flash等格式）、网站导航条等等。aside结构元素：通常用来展示与当前网页或整个网站相关的一些辅助信息。例如，在博客网站中，可以用来显示博主的文章列表和浏览者的评论信息等；在购物网站中，可以用来显示商品清单、用户信息、用户购买历史等；在企业网站中，可以用来显示产品信息、企业联系方式、友情链接等。Aside结构元素可以有很多种形式，其中最常见的形式是侧边栏。section结构元素：一个网页中要显示的主体内容通常被放置在section结构元素中，每个section结构元素都应该有一个标题来显示当前展示的主要内容的标题信息。每个section结构元素中通常还应该包括一个或多个section元素或article元素，用来显示网页主体内容中每一个相对独立的部分。footer结构元素：通常，每一个网页中都具有footer结构元素，用来放置网站的版权声明和备案信息等，也可以放置企业的联系电话和传真等联系信息。在没有加入任何实际内容之前，这些网页的代码的基本结构如下：<!DOCTYPEhtml><head><title>我爱长春</title><metacharset="utf-8"><linkrel="stylesheet"href="css/reset.css"type="text/css"media="all"><linkrel="stylesheet"href="css/grid.css"type="text/css"media="all"><linkrel="stylesheet"href="css/style.css"type="text/css"media="all"></head><body> <header></header> <sectionid="content"> <article></article> </section> <aside></aside> <footer></footer></body></html>说明：上面代码中，页面开头使用了HTML5中的“<!DOCTYPEhtml>”语句来声明页面中将使用HTML5。在head标签中，除了meta标签中使用了更简洁的编码指定方式之外，其他代码均与HTML4中的head标签中的代码完全一致。此页面中使用了很多结构元素，用来替代HTML4中的div元素，因为div元素没有任何语义性，而HTML5中推荐使用具有语义性的结构元素，这样做的好处就是可以让整个网页结构更加清晰，浏览器、屏幕阅读器以及其他阅读此代码的人也可以直接从这些元素上分析出网页中什么位置放置了什么内容。网站公共部分设计

在本网站的网页中，有两个公共的部分，分别是header元素中的内容和footer元素中的内容这两部分是本站每个网页中都包含的内容，下面具体介绍一下这两个公共部分的主要内容。1．设计网站headerheader元素是一个具有引导和导航作用的结构元素，很多企业网站中都有一个非常重要的header元素，一般位于网页的开头，用来显示企业名称、企业logo图片、整个网站的导航条，以及flash形式的广告条等。在本网站中，header元素中的内容包括：网站的logo图片、网站的导航以及通过jQuery技术来循环显示的特色图片，同时还为这些图片添加了说明性关键字。

header元素中的内容在浏览器中的显示结果如图11-19所示。图11-19旅游信息网header元素在浏览器中的显示网站公共部分的header元素的结构示意图如图11-20所示。图11-20公共部分header元素的结构示意图说明：关于CSS样式不是本章讲解的重点，因此省略了CSS样式部分的代码，读者可参见光盘。

header元素中显示网站名称的代码分析在div中存放网站的名称及logo图片，它在浏览器中的页面显示如图11-21所示。图11-21网站logo及名称的显示div元素主要是显示页面左边的logo图片，同时通过<h2></h2>显示网站的名称“我爱长春”，并通过<strong>属性对“长春”两个字进行了加粗。其实现的代码如下：<divclass="logo"> <h2>我爱<strong>长春</strong></h2></div>header元素中nav元素的代码分析Nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。Nav元素可以被放置在header元素中，作为整个网站的导航条来使用。Nav元素中可以存放列表或导航地图，或其他任何可以放置一组超链接的元素。在本网站中，网站标题部分的nav元素中放置了一个导航地图，如图11-22所示。图11-22应用nav元素实现的网站导航条Header元素中应用到的nav元素的代码如下：<nav> <ul> <li><ahref="index.html"class="current">主页</a></li> <li><ahref="index-1.html">自然风光</a></li> <li><ahref="index-2.html">人文气息</a></li> <li><ahref="index-3.html">美食</a></li> <li><ahref="index-4.html">旅游景点</a></li> <li><ahref="index-5.html">名校简介</a></li> <li><ahref="index-6.html">留下足迹</a></li> </ul></nav>header元素中显示宣传图片代码分析接下来，看一下在header元素中显示宣传图片，这些宣传图片被放置在div元素中，该元素中放置3张图片，并通过jQuery技术循环播放这3张图片；同时，在宣传图片的右侧显示对应的说明性文字，这些文字的显示时是以列表形式出现的。宣传图片在浏览器中显示的结果如图11-23所示图11-23通过jQuery技术在header元素中实现图片的循环播放实现的主要代码如下：<divclass="rap"> <ahref="#"><imgsrc="images/big-img1.jpg"alt=""width="571"height="398"></a> <ahref="#"><imgsrc="images/big-img2.jpg"alt=""width="571"height="398"></a> <ahref="#"><imgsrc="images/big-img3.jpg"alt=""width="571"height="398"></a></div><ulclass="pagination"> <li> <ahref="#"rel="0"> <imgsrc="images/f_thumb1.png"alt=""> <spanclass="left">

北国风光<br/>

万里雪飘<br/> </span> <spanclass="right">

堆雪人<br/>

溜爬犁<br/> </span> </a> </li> <li> <ahref="#"rel="1"> <imgsrc="images/f_thumb2.png"alt=""> <spanclass="left">

净月潭<br/> 33568平方米<br/>

樟子松

</span> <spanclass="right">

夏避暑<br/>

秋赏叶<br/>

冬玩雪

</span> </a> </li> <li> <ahref="#"rel="2"> <imgsrc="images/f_thumb3.png"alt=""> <spanclass="left">

伪满洲国<br/>

红色旅游<br/>

跑马场

</span> <spanclass="right">

中和门<br/>

同德殿<br/>

怀远楼

</span>

</a> </li></ul>jQuery代码如下：$(function(){ //fadedslider $("#faded").faded({ speed:500, autoplay:5000, autorestart:3000, autopagination:false });})本案例中实现图片切换是使用jQuery的faded插件，其中faded()方法中的speed是设置从一张图片切换到另一张图片的速度；autoplay用来设置自动播放，5000毫秒切换一次图片，如果设置为false则只能手动切换图片；autopagination是用来设置是否自动添加分页标记，本实例我们自己书写了分页的样式，因此不需要该插件为我们自动添加分页图标。插件中的其他参数使用插件jquery.faded.js中的默认设置，具体设置为：$.fn.faded.defaults={ speed:300, crossfade:false, bigtarget:false, loading:false, autoheight:false, pagination:"pagination", autopagination:true, nextbtn:"next", prevbtn:"prev", loadingimg:false, autoplay:false, autorestart:false, random:false};2设计网站footerfooter元素专门用来显示网站、网页或内容区块的脚注信息，在企业网站中的footer结构元素通常用来显示版权声明、备案信息、企业联系电话及网站制作单位等内容。本实例中，网站页面的footer元素在浏览器中的显示结果如图11-24所示。图11-24通过footer元素实现的网站版权说明footer元素中的内容相对来说比较简单，它存放了两个div元素，其中上面的div元素仅有来设置footer的样式的类名为container_16，第二个div元素中存放版权信息、公司地址、公司电话等。其实现的主要代码如下：<footer> <divclass="container_16"> <divid="main"> ：<strong>吉林省明日科技有限公司</strong>    地址：长春市二道区东盛大街89号亚泰广场C座2205室    电话： </div> </div></footer>

网站主页设计1．网站介绍及相关图片在HTML5网站中，每个网页所展示的主体内容通常都存放在section结构元素中，而且通常带有一个标题元素header。在主页中，网站介绍及相关图片的显示结果如图11-25所示。图11-25网站介绍及相关图片的显示在主页中，页面主体section元素中显示了长春的简介，以及一些精美的图片，其结构相对来说比较简单，主要是通过article元素组成的。主页中的section元素内容的代码如下：<sectionid="mainContent"class="grid_10"> <article> <h2>长春欢迎你</h2> <h3>长春，吉林省省会...中国特大城市之一。</h3> <h4>长春地处东北平原中央，是东北地区天然地理中心，东北亚几何中心，东北亚十字经济走廊核心。总面积20604平方公里。</h4> <p>新的长春，…都注定了长春必定辉煌！</p> <ahref="#"class="button">更多</a> </article> <articleclass="last"> <h2>魅力长春</h2> <h5>长春素有“汽车城”、“电影城”、“光电之城”“科技文化城”、“大学之城”、“森林城”、“雕塑城”的美誉，是中国汽车、电影、光学、生物制药、轨道客车等行业的发源地。</h5> <ulclass="img-listclearfix"> <li><ahref="#"><imgsrc="images/thumb1.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb2.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb3.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb4.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb5.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb6.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb7.jpg"alt=""></a></li>

<li><ahref="#"><imgsrc="images/thumb8.jpg"alt=""></a></li> <li><ahref="#"><imgsrc="images/thumb9.jpg"alt=""></a></li> </ul> <ahref="#"class="button">更多</a> </article></section>第一个<article>显示了关于长春的介绍性文字，其主要是通过标题文字标记的使用，来达到文字的层次效果。第二个<article>显示了关于长春的荣誉称号，并通过列表的形式来展示图片，使页面显示效果更加美观。2．左侧导航的实现Aside元素用来显示当前网页主体内容之外的、与当前网页显示内容相关的一些辅助信息。例如，可以是一些关于网站的宣传语，或者是网站管理者认为比较重要的信息。Aside元素的显示形式可以是多种多样的，其中最常用的形式是侧边栏的形式。在主页中的aside元素内应用到两个article元素，一个article元素用以显示对长春一些特点的概述，当单击这些概述的文字时，将以定义列表的形式，对这些概述的文字进行解释；另外一个article元素显示一张长春区域的地图，并在图片的下方对各区的名称进行链接。

主页左侧导航在浏览器中的效果如图11-26所示。

图11-26主页左侧导航主页中的aside元素的代码如下：<asideclass="grid_6"> <divclass="prefix_1"> <article> <divclass="box"> <h2>长春美誉</h2> <dlclass="accordion"> <dt><imgsrc="images/icon1.gif"alt=""><ahref="#">汽车城</a></dt> <dd>中国第一汽车集团公司是中国最大的汽车工业科研生产基地，汽车产量占全国总产量的五分之一</dd> <dt><imgsrc="images/icon2.gif"alt=""><ahref="#">电影城</a></dt> <dd>长春电影制片厂是新中国电影事业的“摇篮”，为弘扬电影文化，长春市政府自九二年以来，每两年举办一届长春电影节，邀请国内外电影界知名人士和电影厂商汇聚长春，共创电影辉煌</dd> <dt><imgsrc="images/icon3.gif"alt=""><ahref="#">光电城<