HTML学习资料下讲义.ppt

设计网站公共footer footer元素专门用来显示网站、网页或内容区块的脚注信息 ，在企业网站中的footer结构元素通常用来显示版权声明、备案 信息、企业联系电话及网站制作单位等内容。 显示网站介绍及相关图片 显示网站介绍及相关图片 主页左侧导航的实现 主页左侧导航的实现 播放音乐 添加留言功能的实现 浏览manifest清单 为了让浏览器能够正常阅读该文本文件，需要在Web应用程 序页面上的html标签的manifest属性中指定manifest文件的 URL地址。指定方法如下所示。 !--可以为每个页面单独指定一个manifest文件--! html manifest=mr.manifest ... /html !--也可以为整个Web应用程序指定一个总的manifest文件--! html manifest=mrsoft.manifest ... /html swapCache方法 概述：swapCache方法用来手工执行本地缓存的更新， 它只能在applicationCache对象的updateReady事件被 触发时调updateReady事件只有服务器上的manifest文 件被更新，并且把manifest文件中所要求的资源文件下载 到本地后触发。 顾名思义，这个事件的含义是“本地缓存 准备被更新”。当这个事件被触发后，我们可以用 swapCache方法来手工进行本地缓存的更新。 swapCache方法适用场合 如果本地缓存的容量非常大，本地缓存的更新工作将需要相 对较长的时间，而且还会把浏览器给锁住。这时，我们就需要一个提 示，告诉用户正在进行本地缓存的更新，该部分代码如下所示。 applicationCache.onUpdateReady = function(){ //本地缓存已被更新，通知用户。 alert(正在更新本地缓存); applicationCache.swapCache(); alert(“本地缓存已被更新，您可以刷新页面来得到本程序的必威体育精装版版本。); }; 说明：尽管使用swapCache方法立刻更新了本地缓存，但是并不意 味着我们页面上的图像和脚本文件也会被立刻更新，它们都是在重新 打开本页面时才会生效。 swapCache方法实例 例19.1 下面，来看一个完整的使用swapCache方法的实例 。在该实例中，使用到了applicationCache对象的另一个方法 applicationCache.update，该方法的作用是检查服务器上的 manifest文件是否有更新。在打开画面时设定了3秒钟执行一次 该方法，检查服务器上的manifest文件是否有更新。如果有更 新，浏览器会自动下载manifest文件中所有请求本地缓存的资 源文件，当这些资源文件下载完毕时，会触发updateReady事 件，询问用户是否立刻刷新页面以使用必威体育精装版版本的应用程序，如 果用户选择立刻刷新，则调用swapCache方法手工更新本地缓 存，更新完毕后刷新页面。 applicationCache对象的事件 applicationCache对象除了具有update方法与swapCache方 法之外，还具有一系列的事件，我们再通过前面讲过的浏览器与 服务器的交互过程来看一下在这个过程中这些事件是如何被触发 的。 首次访问http://localhost:82/mr/网站： （1）浏览器：请求访问http://localhost:82/mr/。 （2）服务器：返回index.html网页。 （3）浏览器：发现该网页具有manifest属性，触发checking事件，检 查manifest文件是否存在。不存在时，触发error事件，表示manifest 文件未找到，同时也不执行步骤6开始的交互过程。 （4）浏览器：解析inde.html网页，请求页面上所有资源文件。 （5）服务器：返回所有资源文件。 applicationCache对象的事件 （6）浏览器：处理manifest文件，请求manifest中所有要求本地缓存的文件， 包括index.html页面本身，即使刚才已经请求过该文件。如果你要求本地缓存所 有文件，这将是一个比较大的重复的请求过程。 （7）服务器：返回所有要求本地缓存的文件。 （8）浏览器：触发downloading事件，然后开始下载这些资源。在下载的同时 ，周期性地触发progress事件，开发人员可以用编程的手段获取多少文件已被下 载，多少文件仍然处于下载队列等信息。 （9）下载结束后触发cached事件，表示首次缓存成功，存入所有要求本地缓存 的资源文件。 再次访问http://local