网页特效设计基础第11章-jQuery在HTML5中的应用.ppt

1、刘刚刘刚 主编主编新一代信息技术“十三五”系列规划教材 第第1111章章 jQuery jQuery在在HTML5HTML5中的应用中的应用 随着互联网的不断发展，新的技术不断涌现，随着互联网的不断发展，新的技术不断涌现，HTML5 是其中突出的一项，它无疑会成为未来是其中突出的一项，它无疑会成为未来 10 年最热门的互联年最热门的互联网技术之一。网技术之一。jQuery可以很好地支持可以很好地支持HTML5的新特性，从的新特性，从而使我们设计出的网页更加美观、新颖。而使我们设计出的网页更加美观、新颖。本章我们将介绍本章我们将介绍 HTML5的基础知识以及如何在网站开的基础知识以及如何在网站开

2、发中综合使用发中综合使用 jQuery+HTML5。11.1 HTML5 11.1 HTML5 基础基础 11.1.1 HTML5 11.1.1 HTML5 的新特性的新特性 HTML5 是基于各种各样的理念进行设计的，这些是基于各种各样的理念进行设计的，这些设计理念体现了对可能性和可行性的新认识。设计理念体现了对可能性和可行性的新认识。1 1兼容性兼容性 HTML5 的一个核心理念就是保持一切新特性平滑的一个核心理念就是保持一切新特性平滑过渡。过渡。2 2实用性和用户优先实用性和用户优先 HTML5 规范是基于用户优先准则编写的，其主要规范是基于用户优先准则编写的，其主要宗旨是宗旨是“用户即

3、上帝用户即上帝”，这意味着在遇到无法解决的冲，这意味着在遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面的作者，突时，规范会把用户放到第一位，其次是页面的作者，再次是实现者（或浏览器），接着是规范制定者，最后再次是实现者（或浏览器），接着是规范制定者，最后才考虑理论的纯粹实现。才考虑理论的纯粹实现。3 3化繁为简化繁为简 HTML5 HTML5要的就是简单、避免不必要的复杂性。要的就是简单、避免不必要的复杂性。HTML5 HTML5 的口号是的口号是“简单至上，尽可能简化简单至上，尽可能简化”。因此，。因此，HTML5HTML5做了做了以下改进。以下改进。p 以浏览器原生能力替代复杂的

4、以浏览器原生能力替代复杂的 JavaScript JavaScript 代码。代码。p 新的简化的新的简化的 DOCTYPE DOCTYPE。p 新的简化的字符集声明。新的简化的字符集声明。p 简单而强大的简单而强大的 HTML5 API HTML5 API。11.1.2 11.1.2 浏览器对浏览器对 HTML5 HTML5 的支持的支持 目前绝大多数的主流浏览器都支持目前绝大多数的主流浏览器都支持 HTML5 HTML5，只是支持，只是支持的程度不同。要测试浏览器对的程度不同。要测试浏览器对 HTML5 HTML5 的支持程度，只需要的支持程度，只需要访问访问 html5test html

5、5test 网站即可。例如，使用网站即可。例如，使用 Google Chrome Google Chrome 68.0.3440.106 68.0.3440.106 版本测试版本测试HTML5HTML5的支持程度，得分为的支持程度，得分为 515 515 分（满分为分（满分为 550 550 分），如图分），如图 11-1 11-1 所示。所示。图图 11-1 使用使用 Google Chrome 68.0.3440.106 版本测试版本测试 HTML5 的支持程度的支持程度 目前我们使用国外厂商的主流浏览器进行测试的结目前我们使用国外厂商的主流浏览器进行测试的结果如表果如表 11-1 11-

6、1 所示。所示。表表 11-1 国外厂商的主流浏览器对国外厂商的主流浏览器对 HTML5 的支持程度的支持程度 从表从表 11-1 11-1 中可以看到，目前对中可以看到，目前对 HTML5 HTML5 支持最好支持最好的国外厂商主流浏览器是的国外厂商主流浏览器是 Google Google 公司的公司的 Chrome Chrome 浏浏览器。目前我们使用国内厂商的主流浏览器进行测试的览器。目前我们使用国内厂商的主流浏览器进行测试的结果如表结果如表 11-2 11-2 所示。所示。表表 11-2 国内厂商的主流浏览器对国内厂商的主流浏览器对 HTML5 的支持程度的支持程度11.2 jQuer

7、y 11.2 jQuery 与与 HTML5 HTML5 编程编程11.2.1 11.2.1 显示文件上传的进度条显示文件上传的进度条1 1HTML5 File API HTML5 File API HTML5 File API HTML5 File API 的设计初衷，是改善基于浏览器的设计初衷，是改善基于浏览器的的 Web Web 应用程序处理文件的上传方式，使文件直接拖应用程序处理文件的上传方式，使文件直接拖放上传成为可能。放上传成为可能。HTML5 File API HTML5 File API 用于对文件进行操用于对文件进行操作，使程序员可以对选择文件的表单控件进行操作，更作，使程序

8、员可以对选择文件的表单控件进行操作，更好地通过程序对访问文件和文件上传等功能进行控制。好地通过程序对访问文件和文件上传等功能进行控制。在在HTML5 File APIHTML5 File API中定义了一组对象，包括中定义了一组对象，包括 FileList FileList 对象、对象、File File 对象、对象、Blob Blob 对象、对象、FileReader FileReader 对象等。对象等。（1 1）FileListFileList：File File 对象的一个类似数组的序列。对象的一个类似数组的序列。（2 2）FileFile：表示：表示 FileList FileLis

9、t 中的一个单独的文件，中的一个单独的文件，File File 对象的主要属性如下。对象的主要属性如下。p namename：返回文件名，不包含路径信息。：返回文件名，不包含路径信息。p lastModifiedDatelastModifiedDate：返回文件的最后修改日期。：返回文件的最后修改日期。p sizesize：返回：返回 File File 对象的大小，单位是字节。对象的大小，单位是字节。p typetype：返回：返回 File File 对象媒体类型的字符串。对象媒体类型的字符串。2 2向服务器端发送向服务器端发送 FormData FormData 对象对象 使用使用 XM

10、LHttpRequest XMLHttpRequest 对象的对象的 send()send()方法可以使方法可以使用用 FormData FormData 对象模拟表单向服务器发送数据，语法如对象模拟表单向服务器发送数据，语法如下：下：xmlhttp.send(formData);xmlhttp.send(formData);其中创建其中创建 FormData FormData 对象有如下两种方法。对象有如下两种方法。（1 1）使用）使用 new new 关键字：关键字：var formData=new FormData();var formData=new FormData();（2 2）调

11、用表单对象的）调用表单对象的 getFormData()getFormData()方法获取表单对方法获取表单对象中的数据：象中的数据：FormData=FormData=formElement.getFormData(document.getElementById(form_formElement.getFormData(document.getElementById(form_id);id);向向 FormData FormData 对象中添加数据可以使用对象中添加数据可以使用 append()append()方法，语法如下：方法，语法如下：formData.append(key,value

12、);formData.append(key,value);如图如图 11-2 11-2 所示，选择要上传的文件，之后单击所示，选择要上传的文件，之后单击“上上传传”按钮，可以看到图按钮，可以看到图 11-3 11-3 所示的进度条，文件上传完所示的进度条，文件上传完毕后会出现图毕后会出现图 11-4 11-4 所示的提示信息。所示的提示信息。图图 11-2 选择上传文件选择上传文件 图图 11-3 显示进度条显示进度条图图 11-4 显示上传文件信息显示上传文件信息11.2.2 Canvas 11.2.2 Canvas 绘图绘图 Canvas Canvas 元素是元素是 HTML5 HTML5

13、 中新增的一个重要元素，中新增的一个重要元素，专门用来绘制图形。在页面上放置一个专门用来绘制图形。在页面上放置一个 Canvas Canvas 元素，元素，就相当于在页面上放置了一块就相当于在页面上放置了一块“画布画布”，可以在其中进，可以在其中进行图形的描绘。行图形的描绘。但是，在但是，在 Canvas Canvas 元素里进行绘画，并不是指用鼠元素里进行绘画，并不是指用鼠标来作画。在网页上使用标来作画。在网页上使用 Canvas Canvas 元素时，它会创建一元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为块矩形区域。默认情况下该矩形区域宽为 300 300 像素，像素，高为高为

14、150 150 像素，用户可以自定义具体的大小或者设置像素，用户可以自定义具体的大小或者设置 CanvasCanvas元素的其他特性。元素的其他特性。在页面中加入了在页面中加入了 Canvas Canvas 元素后，便可以通过元素后，便可以通过 JavaScript JavaScript 来自由地控制它。可以在其中添加图片、来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面进行绘图设置，还可以加线条以及文字，也可以在里面进行绘图设置，还可以加入高级动画。可放到入高级动画。可放到 HTML HTML 页面中的最基本的页面中的最基本的 Canvas Canvas元素代码如下所示：元素代

15、码如下所示：Canvas Canvas 的元素的常用属性如下。的元素的常用属性如下。p idid：Canvas Canvas 元素的标识元素的标识 id id。p heightheight：Canvas Canvas 画布的高度，单位为像素。画布的高度，单位为像素。p widthwidth：Canvas Canvas 画布的宽度，单位为像素。画布的宽度，单位为像素。之间的字符串指定当前浏览器之间的字符串指定当前浏览器不支持不支持 Canvas Canvas 时显示的字符。时显示的字符。jCanvasjCanvas插件的脚本文件为插件的脚本文件为 jcanvas.min.js jcanvas.m

16、in.js，其，其中中 jCanvas jCanvas 插件中的主要绘图方法如表插件中的主要绘图方法如表 11-3 11-3 所示。所示。表表 11-3 jCanvas 插件中的主要绘图方法说明插件中的主要绘图方法说明 Canvas Canvas 采用采用 HTML HTML 颜色表示法，可以使用下面颜色表示法，可以使用下面 4 4 种方式表示。种方式表示。1 1颜色关键字颜色关键字 可以使用颜色关键字来表示颜色，例如，可以使用颜色关键字来表示颜色，例如，“red”“red”表表示红色，示红色，“blue”“blue”表示蓝色，表示蓝色，“green”“green”表示绿色等。表示绿色等。2

17、2十六进制字符串十六进制字符串 可以使用一个十六进制字符串表示颜色，格式为可以使用一个十六进制字符串表示颜色，格式为#RGB#RGB。其中，其中，R R 表示红色集合，表示红色集合，G G 表示绿色集合，表示绿色集合，B B 表示蓝色集表示蓝色集合。例如：合。例如：#FFF#FFF 表示白色，表示白色，#000#000 表示黑色。表示黑色。3 3RGB RGB 颜色值颜色值 也可以使用也可以使用 rgb(r,g,b)rgb(r,g,b)格式表示颜色。其中格式表示颜色。其中 r r 表示红色集合，表示红色集合，g g 表示绿色集合，表示绿色集合，b b 表示蓝色集合。其表示蓝色集合。其中中 r

18、r、g g、b b 都是十进制数，取值范围是都是十进制数，取值范围是 0 0255255。常。常用的用的 RGB RGB 如表如表 11-4 11-4 所示。所示。表表 11-4 常用颜色的常用颜色的 RGB 表示表示4 4RGBA RGBA 颜色值颜色值 指定颜色也可以使用指定颜色也可以使用 rgba()rgba()的方法定义透明颜色，的方法定义透明颜色，格式如下：格式如下：rgba(r,g,b,a,alpha)rgba(r,g,b,a,alpha)其中其中 r r 表示红色集合，表示红色集合，g g 表示绿色集合，表示绿色集合，b b 表示表示蓝色集合。蓝色集合。r r、g g、b b 都

19、是十进制数，取值范围为都是十进制数，取值范围为 0 0255255。Alpha Alpha 的取值范围为的取值范围为 0 01 1，用来设置透明度，用来设置透明度，0 0 表示完全透明，表示完全透明，1 1 表示不透明。表示不透明。1 11.2.3 jQuery+HTML5 1.2.3 jQuery+HTML5 实现图片旋转效果实现图片旋转效果 在在 HTML4 HTML4 中要实现图片的旋转效果需要编写大量的代中要实现图片的旋转效果需要编写大量的代码，而在码，而在HTML5 HTML5 中，只需要在页面中创建新增的中，只需要在页面中创建新增的元素，通过导入元素，通过导入jQuery jQue

20、ry 库调用该元素加载图片的方法就可库调用该元素加载图片的方法就可以轻松实现图片的旋转效果了。以轻松实现图片的旋转效果了。如图如图 11-6 11-6 所示，单击所示，单击“逆时针旋转逆时针旋转 90 90 度度”，效果，效果如图如图 11-7 11-7 所示，之后再单击所示，之后再单击“旋转旋转 270 270 度度”，效果如图，效果如图11-8 11-8 所示。所示。图图 11-6 原始图像原始图像 图图 11-7 逆时针旋转逆时针旋转 90 度度图图 11-8 旋转旋转 270 度度11.2.4 11.2.4 基于基于 HTML5 HTML5 播放声音的播放声音的 jQuery jQue

21、ry 插件插件 audioPlay audioPlay 在在 HTML5 HTML5 出现以前，要在网页中播放多媒体是需出现以前，要在网页中播放多媒体是需要借助要借助 Flash Flash 插件的，因此浏览器需要安装插件的，因此浏览器需要安装 Flash Flash 插插件。件。HTML5 HTML5 提供了新的标签提供了新的标签，可以很方便地在，可以很方便地在网页中播放音频文件，而不需要安装插件。本节介绍一网页中播放音频文件，而不需要安装插件。本节介绍一个基于个基于 HTML5 HTML5 播放声音的播放声音的 jQuery jQuery 插件插件 audioPlay audioPlay，

22、使用它可以非常方便地在网页中播放音频。使用它可以非常方便地在网页中播放音频。可以使用可以使用 audioPlay audioPlay 插件的插件的 audioPlay()audioPlay()方法在方法在鼠标指针经过一个鼠标指针经过一个 HTML HTML 元素时自动播放指定的音频文元素时自动播放指定的音频文件，这个音频文件可以是件，这个音频文件可以是 mp3 mp3 文件或者文件或者 ogg ogg 文件，方文件，方法的具体参数以及相关说明请参见表法的具体参数以及相关说明请参见表 11-5 11-5。表表 11-5 audioPlay()方法的参数说明方法的参数说明11.2.5 Web St

23、orage 11.2.5 Web Storage 编程编程 随着随着 Web Web 应用的发展，客户端存储的使用也越来应用的发展，客户端存储的使用也越来越多，而实现客户端存储的方式则是多种多样的。最简越多，而实现客户端存储的方式则是多种多样的。最简单而且兼容性最佳的方案是单而且兼容性最佳的方案是 Cookies Cookies，但是作为真正的，但是作为真正的客户端存储，客户端存储，Cookies Cookies 还是有以下这些不足。还是有以下这些不足。p 大小：大小：Cookies Cookies 的大小被限制在的大小被限制在 4KB 4KB。p 带宽：带宽：Cookies Cookies

24、是随是随 HTTP HTTP 事物一起发送的，因此事物一起发送的，因此会浪费一部分发送会浪费一部分发送 Cookies Cookies 时使用的带宽。时使用的带宽。p 复杂性：复杂性：Cookies Cookies 操作起来比较麻烦，所有的信息要操作起来比较麻烦，所有的信息要被拼到一个长字符串里面。被拼到一个长字符串里面。p 对对 Cookies Cookies 来说，在相同的站点与多事务处理保持来说，在相同的站点与多事务处理保持联系不是很容易。联系不是很容易。在这种情况下，在在这种情况下，在 HTML5 HTML5 中提供了一种在客户端本地中提供了一种在客户端本地保存数据的功能，它就是保存数

25、据的功能，它就是 Web Storage Web Storage 功能。功能。Web Storage Web Storage 功能，顾名思义，就是在功能，顾名思义，就是在 Web Web 上存储数上存储数据的功能，而这里的存储，是针对客户端本地而言的。据的功能，而这里的存储，是针对客户端本地而言的。它包含两种不同的存储类型：它包含两种不同的存储类型：sessionStorage sessionStorage 和和 localStoragelocalStorage。不管是。不管是sessionStoragesessionStorage还是还是localStoragelocalStorage，它们

26、都能支持在同域下存储它们都能支持在同域下存储 5MB 5MB 数据，这相比数据，这相比 Cookies Cookies 有有着明显的优势。着明显的优势。1 1sessionStorage sessionStorage 将数据保存在将数据保存在 session session 对象中。所谓对象中。所谓 session session，是指用户在浏览某个网站时，从进入网站到浏览器关闭是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的所经过的这段时间，也就是用户浏览这个网站所花费的时间。时间。session session 对象可以用来保存在这段时间内所

27、要求对象可以用来保存在这段时间内所要求保存的任何数据。保存的任何数据。2 2localStoragelocalStorage 将数据保存在客户端本地的硬件设备中，即使浏览器将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。仍然可以继续使用。这两种不同的存储类型区别在于，这两种不同的存储类型区别在于，sessionStorage sessionStorage 为临时保存，而为临时保存，而 localStorage localStorage 为永久保存。为永久保存。目前目前 WebSt

28、orage WebStorage 的的 API API 有以下这些。有以下这些。p lengthlength：获得当前：获得当前 WebStorage WebStorage 中的数目。中的数目。p key(n)key(n)：返回：返回 WebStorage WebStorage 中的第中的第 n n 个存储条目。个存储条目。p getItem(key)getItem(key)：返回指定：返回指定 key key 的存储内容，如果不的存储内容，如果不存在则返回存在则返回 null null。注意，返回的类型是。注意，返回的类型是 String String 字字符串类型。符串类型。p setIt

29、em(key,value)setItem(key,value)：设置指定：设置指定 key key 的内容的值的内容的值为为 value value。p removeItem(key)removeItem(key)：根据指定的：根据指定的 key key，删除键值为，删除键值为 key key 的内容。的内容。p clearclear：清空：清空 WebStorage WebStorage 的内容。的内容。11.3 11.3 综合实例：旅游信息网前台页面设计综合实例：旅游信息网前台页面设计 旅游信息网是介绍关于长春旅游信息的网站，该网站旅游信息网是介绍关于长春旅游信息的网站，该网站主要包括主页

30、、自然风光页、人文气息页、美食页、旅游主要包括主页、自然风光页、人文气息页、美食页、旅游景点页、名校简介页及留下足迹页等页面。景点页、名校简介页及留下足迹页等页面。11.3.1 11.3.1 网站预览网站预览 首页主要显示旅游信息网的介绍及相关图片，其运行首页主要显示旅游信息网的介绍及相关图片，其运行效果如图效果如图 11-11 11-11 所示。所示。图图 11-11 旅游信息网首页旅游信息网首页 自然风光页面主要介绍长春的一些自然风光，例如自然风光页面主要介绍长春的一些自然风光，例如地理位置、气候等，运行效果如图地理位置、气候等，运行效果如图 11-12 11-12 所示。所示。图图 11

31、-12 自然风光页面自然风光页面 人文气息页面主要是对长春的体育事业和科学教育人文气息页面主要是对长春的体育事业和科学教育事业进行介绍，其运行效果如图事业进行介绍，其运行效果如图 11-13 11-13 所示。所示。图图 11-13 人文气息页面人文气息页面 美食页面主要介绍长春的一些特色美食，其运行效美食页面主要介绍长春的一些特色美食，其运行效果如图果如图 11-14 11-14 所示。所示。图图 11-14 美食页面美食页面 旅游景点页面主要介绍长春的一些旅游景点，其运旅游景点页面主要介绍长春的一些旅游景点，其运行效果如图行效果如图 11-15 11-15 所示。所示。图图 11-15 旅

32、游景点页面旅游景点页面 名校简介页面主要介绍长春的知名高等院校，其运名校简介页面主要介绍长春的知名高等院校，其运行效果如图行效果如图 11-16 11-16 所示。所示。图图 11-16 名校简介页面名校简介页面 留下足迹页面主要是添加了一张留下足迹页面主要是添加了一张 gif gif 格式的图片，格式的图片，并在其下方载入一段音频文件，当打开本页面时，音频并在其下方载入一段音频文件，当打开本页面时，音频文件会自动播放；另外，在该页的右侧栏添加了一张留文件会自动播放；另外，在该页的右侧栏添加了一张留言的表单，访客可以在此留言，其运行效果如图言的表单，访客可以在此留言，其运行效果如图 11-17

33、 11-17所示。所示。图图 11-17 留下足迹页面留下足迹页面11.3.2 11.3.2 网站主体结构设计网站主体结构设计 旅游信息网网页的主体结构如图旅游信息网网页的主体结构如图 11-18 11-18 所示。所示。这些网页中有几个主要的这些网页中有几个主要的 HTML5 HTML5 结构，分别是结构，分别是 headerheader元素、元素、asideaside元素、元素、sectionsection元素及元素及footerfooter元素。元素。图图 11-18 旅游信息网所有页面主体结构图旅游信息网所有页面主体结构图11.3.3 HTML5 11.3.3 HTML5 结构元素的使

34、用结构元素的使用 在设计旅游信息网前台页面时，主要用到了在设计旅游信息网前台页面时，主要用到了 HTML5 HTML5 的一些主体结构元素，分别是的一些主体结构元素，分别是 header header 结构元素、结构元素、aside aside 结构元素、结构元素、section section 结构元素和结构元素和 footer footer 结构元素，在结构元素，在大型的网站中，一个网页通常都由这几个结构元素组成。大型的网站中，一个网页通常都由这几个结构元素组成。p header header 结构元素：通常用来展示网站的标题、企业或结构元素：通常用来展示网站的标题、企业或公司的公司的 l

35、ogo logo 图片、广告（图片、广告（Flash Flash 等格式）、网站导航等格式）、网站导航条等。条等。p aside aside 结构元素：通常用来展示与当前网页或整个网站结构元素：通常用来展示与当前网页或整个网站相关的一些辅助信息。例如，在博客网站中，可以用来相关的一些辅助信息。例如，在博客网站中，可以用来显示博主的文章列表和浏览者的评论信息等；在购物网显示博主的文章列表和浏览者的评论信息等；在购物网站中，可以用来显示商品清单、用户信息、用户购买历站中，可以用来显示商品清单、用户信息、用户购买历史等；在企业网站中，可以用来显示产品信息、企业联史等；在企业网站中，可以用来显示产品信

36、息、企业联系方式、友情链接等。系方式、友情链接等。Aside Aside 结构元素可以有很多种形结构元素可以有很多种形式，其中最常见的形式是侧边栏。式，其中最常见的形式是侧边栏。p section section 结构元素：一个网页中要显示的主体内容通常结构元素：一个网页中要显示的主体内容通常被放置在被放置在 section section 结构元素中，每个结构元素中，每个 section section 结构元结构元素都应该有一个标题来显示当前展示的主要内容的标题素都应该有一个标题来显示当前展示的主要内容的标题信息。每个信息。每个 section section 结构元素中通常还应该包括一个

37、结构元素中通常还应该包括一个或多个或多个 section section 元素或元素或 article article 元素，用来显示网页元素，用来显示网页主体内容中每一个相对独立的部分。主体内容中每一个相对独立的部分。p footer footer 结构元素：通常，每一个网页中都具有结构元素：通常，每一个网页中都具有footer footer 结构元素，用来放置网站的版权声明和备案信息等，也结构元素，用来放置网站的版权声明和备案信息等，也可以放置企业的联系电话和传真等联系信息。可以放置企业的联系电话和传真等联系信息。11.3.4 11.3.4 网站公共部分设计网站公共部分设计 在本网站的网页

38、中，有两个公共的部分，分别是在本网站的网页中，有两个公共的部分，分别是header header 元素中的内容和元素中的内容和 footer footer 元素中的内容。这两元素中的内容。这两部分是本站每个网页中都包含的内容。部分是本站每个网页中都包含的内容。1 1设计网站设计网站 header header header header 元素是一个具有引导和导航作用的结构元元素是一个具有引导和导航作用的结构元素，很多企业网站中都有一个非常重要的素，很多企业网站中都有一个非常重要的 header header 元素，元素，一般位于网页的开头，用来显示企业名称、企业一般位于网页的开头，用来显示企业

39、名称、企业 logo logo 图片、整个网站的导航条以及图片、整个网站的导航条以及 Flash Flash 形式的广告条等。形式的广告条等。在本网站中，在本网站中，header header 元素中的内容包括：网站的元素中的内容包括：网站的 logo logo 图片、网站的导航以及通过图片、网站的导航以及通过 jQuery jQuery 技术来循环显技术来循环显示的特色图片，同时还为这些图片添加了说明性关键字。示的特色图片，同时还为这些图片添加了说明性关键字。header header 元素中的内容在浏览器中的显示结果如图元素中的内容在浏览器中的显示结果如图11-19 11-19 所示。所示

40、。图图 11-19 旅游信息网旅游信息网 header 元素在浏览器中的显示元素在浏览器中的显示 网站公共部分的网站公共部分的 header header 元素的结构如图元素的结构如图 11-20 11-20 所示。所示。图图 11-20 公共部分公共部分 header 元素的结构元素的结构p header header 元素中显示网站名称的代码分析。元素中显示网站名称的代码分析。在在divdiv中存放网站的名称及中存放网站的名称及 logo logo 图片，它在浏览图片，它在浏览器中的页面显示如图器中的页面显示如图 11-21 11-21 所示。所示。图图 11-21 网站名称及网站名称及

41、logo 的显示的显示 DIV DIV 元素主要是显示页面左边的元素主要是显示页面左边的 logo logo 图片，同时图片，同时通过通过显示网站的名称显示网站的名称“我爱长春我爱长春”，并通过，并通过属性对属性对“长春长春”两个字进行了加粗。其实现的两个字进行了加粗。其实现的代码如下：代码如下：我爱我爱长春长春 p header header 元素中元素中 nav nav 元素的代码分析。元素的代码分析。nav nav 元素是一个可以用作页面导航的连接组，其中的元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。导航元素链接到其他页面或当前页面的其他部分。n

42、avnav元元素可以被放置在素可以被放置在 header header 元素中，作为整个网站的导航条元素中，作为整个网站的导航条来使用。来使用。nav nav 元素中可以存放列表或导航地图，或其他任元素中可以存放列表或导航地图，或其他任何可以放置一组超链接的元素。在本网站中，网站标题部何可以放置一组超链接的元素。在本网站中，网站标题部分的分的 nav nav 元素中放置了一个导航地图，如图元素中放置了一个导航地图，如图 11-22 11-22所示。所示。图图 11-22 应用应用 nav 元素实现的网站导航条元素实现的网站导航条p header header 元素中显示宣传图片代码分析。元素中

43、显示宣传图片代码分析。接下来我们来看一下在接下来我们来看一下在 header header 元素中显示宣传图元素中显示宣传图片，这些宣传图片被放置在片，这些宣传图片被放置在 DIV DIV 元素中，该元素中放置元素中，该元素中放置 3 3张图片，并通过张图片，并通过 jQuery jQuery 技术循环播放这技术循环播放这 3 3 张图片；张图片；同时，在宣传图片的右侧显示对应的说明性文字，这些文同时，在宣传图片的右侧显示对应的说明性文字，这些文字在显示时是以列表形式出现的。宣传图片在浏览器中显字在显示时是以列表形式出现的。宣传图片在浏览器中显示的结果如图示的结果如图 11-23 11-23

44、所示。所示。图图 11-23 通过通过 jQuery 技术在技术在 header 元素中元素中实现图片的循环播放实现图片的循环播放2 2设计网站设计网站 footer footer footer footer 元素专门用来显示网站、网页或内容区块元素专门用来显示网站、网页或内容区块的脚注信息，在企业网站中的的脚注信息，在企业网站中的 footer footer 结构元素通常用结构元素通常用来显示版权声明、备案信息、企业联系电话及网站制作来显示版权声明、备案信息、企业联系电话及网站制作单位等内容。单位等内容。本实例中，网站页面的本实例中，网站页面的 footer footer 元素在浏览器中的元

45、素在浏览器中的显示结果如图显示结果如图 11-24 11-24 所示。所示。图图 11-24 通过通过 footer 元素实现的网站版权说明元素实现的网站版权说明11.3.5 11.3.5 网站主页设计网站主页设计1 1网站介绍及相关图片网站介绍及相关图片 在在 HTML5 HTML5 网站中，每个网页所展示的主体内容通网站中，每个网页所展示的主体内容通常都存放在常都存放在 section section 结构元素中，而且通常带有一个结构元素中，而且通常带有一个标题元素标题元素 header header。在主页中，网站介绍及相关图片的。在主页中，网站介绍及相关图片的显示结果如图显示结果如图

46、11-25 11-25 所示。所示。图图 11-25 网站介绍及相关图片的显示结果网站介绍及相关图片的显示结果2 2左侧导航的实现左侧导航的实现 aside aside 元素用来显示当前网页主体内容之外的、与当元素用来显示当前网页主体内容之外的、与当前网页显示内容相关的一些辅助信息。例如，可以是一些前网页显示内容相关的一些辅助信息。例如，可以是一些关于网站的宣传语，或者是网站管理者认为比较重要的信关于网站的宣传语，或者是网站管理者认为比较重要的信息。息。aside aside 元素的显示形式可以是多种多样的，其中最常元素的显示形式可以是多种多样的，其中最常用的形式是侧边栏的形式。用的形式是侧边

47、栏的形式。在主页中的在主页中的 aside aside 元素内应用到元素内应用到两个两个 article article 元素，一个元素，一个 article article 元素用以显示对长春一些特点的概述，元素用以显示对长春一些特点的概述，当单击这些概述的文字时，将以定义列当单击这些概述的文字时，将以定义列表的形式对这些概述的文字进行解释；表的形式对这些概述的文字进行解释；另外一个另外一个 article article 元素显示一张长春元素显示一张长春区域的地图，并在图片的下方对各区的区域的地图，并在图片的下方对各区的名称进行链接。主页左侧导航在浏览器名称进行链接。主页左侧导航在浏览器中

48、的效果如图中的效果如图 11-26 11-26 所示。所示。图图 11-26 主页左侧导航主页左侧导航11.3.6 11.3.6 留下足迹页面设计留下足迹页面设计 在留下足迹页面中，除了添加了公共部分的在留下足迹页面中，除了添加了公共部分的 header header 和和 footer footer外，还借助外，还借助 section section 元素和元素和 aside aside 元素实现元素实现了音乐播放和添加留言的功能。了音乐播放和添加留言的功能。1 1音乐播放音乐播放 留下足迹页面的主体内容相对来说比较简单，主要留下足迹页面的主体内容相对来说比较简单，主要是添加了一张是添加了一

49、张 gif gif 格式的图片。选择添加格式的图片。选择添加 gif gif 格式的格式的图片，因为它可以图片，因为它可以“闪动闪动”，从而使整个页面增加一些，从而使整个页面增加一些生机。在该图片的下方，通过生机。在该图片的下方，通过 audio audio标签加载了一段音标签加载了一段音频，并将其设置为自动播放，这样当进入这个网页的时频，并将其设置为自动播放，这样当进入这个网页的时候，不但可以看到美丽的画面，还可以听到一首好听的候，不但可以看到美丽的画面，还可以听到一首好听的歌曲。歌曲。当然，这里读者也可以通过设置背景音乐的形式达当然，这里读者也可以通过设置背景音乐的形式达到以上效果。但是为

50、了显示到以上效果。但是为了显示 HTML5 HTML5 的强大功能，这里的强大功能，这里使用了使用了 audio audio 标签来加载音频。当然更好的办法是直标签来加载音频。当然更好的办法是直接通过接通过 video video 标签加载一段视频，这样整个页面的效标签加载一段视频，这样整个页面的效果会更加绚丽。留下足迹页面中的播放音乐功能的效果果会更加绚丽。留下足迹页面中的播放音乐功能的效果如图如图 11-27 11-27 所示。所示。图图 11-27 留下足迹页面中的播放音乐功能留下足迹页面中的播放音乐功能2 2添加留言功能添加留言功能 在留下足迹页面中，使用在留下足迹页面中，使用 asi