HTML/CSS（四）Manifest 应用缓存 HTML5

柔光的暖阳◎ 2022-08-05 08:14 220阅读 0赞

Manifest文件

1.  CACHE MANIFEST  
    在此标题下的文件将在是首次加载的时候缓存
2.  NETWORK  
    在此标题下的文件需要与服务器连接，且不缓存
3.  FALLBACK  
    在此标题下的文件规定当页面无法访问时回退的页面（eg.404）

应用缓存示例  
index.html

<!DOCTYPE html>
    <html manifest="index.appcache">
    <head lang="en">
        <meta charset="UTF-8">
        <link href ="style.css" type ="text/css" rel="stylesheet">
        <title></title>
    </head>
    <body>
    <h1 class="h1">hello html5!</h1>
    </body>
    </html>

style.css

.h1{
    background-color: aqua;
    }

index.appcache

CACHE MANIFEST 
    CACHE:
         index.html
         style.css

打开服务器访问localhost/index.html

![这里写图片描述][20150909092124428]

关闭服务器  未使用应用缓存任然可以得到结果

![这里写图片描述][20150909092511618]

关闭服务器  使用应用缓存任然可以得到结果 Application Cache中可以看到缓存的文件

![这里写图片描述][20150909093512198]

[20150909092124428]: /images/20220731/e667cc8cf8524fe0b4a564756ee166c1.png
[20150909092511618]: /images/20220731/86a181e54ba94d15b93faf2cf65bc0fa.png
[20150909093512198]: /images/20220731/a1eb4d3916614e2eb708c935f897be3b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5之manifest 应用缓存机制

H5之manifest 应用缓存机制 manifest 应用缓存机制好处编写 manife

迷南。/ 2023年10月10日 15:59/ 0 赞/ 60 阅读

相关 htmlcss使用及html5新特性笔记整理

【html基础】 Hyper text markup language 超文本标签语言。不是一种编程语言，而是一种标记语言标记语言是一套标记标签开发工具

女爷i/ 2023年03月03日 05:59/ 0 赞/ 21 阅读

相关 html5离线缓存不起效果，难道manifest属性废弃了吗？

html5中的离线缓存不起效果，什么原因？知道的小伙伴麻烦留言一下。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

以你之姓@/ 2023年01月04日 14:55/ 0 赞/ 169 阅读

相关 HTML5 应用程序缓存

通过创建cache manifest文件，可以轻松的创建web应用的离线版本。（web应用可进行缓存，并可在没有因特网连接时进行访问）优势： 1.离线浏览–用户可在应

迷南。/ 2022年09月21日 01:48/ 0 赞/ 166 阅读

相关音乐社交类登录注册htmlcss3+html5模板

[下载地址][Link 1] 一款通用的社交平台网站登录注册表单切换页面模板。支持手机验证码，图片验证码，第三方登录等功能。 ![8832d92220fd03c4fcef1

超、凢脫俗/ 2022年09月14日 00:27/ 0 赞/ 267 阅读

相关 uniapp应用缓存(HTML5产业联盟)

onLoad() { //应用缓存 //ifdef APP-PLUS plus.cache.calculate(size =

心已赠人/ 2022年08月29日 05:53/ 0 赞/ 282 阅读

相关 HTML5之---Manifest 文件--离线缓存

完整的 Manifest 文件 CACHE MANIFEST 2012-02-21 v1.0.0 /theme.css /logo.gi

朴灿烈づ我的快乐病毒、/ 2022年08月19日 08:38/ 0 赞/ 180 阅读

相关 HTML/CSS（四）Manifest 应用缓存 HTML5

Manifest文件 1. CACHE MANIFEST 在此标题下的文件将在是首次加载的时候缓存 2. NETWORK 在此标题下的文件需要与服

柔光的暖阳◎/ 2022年08月05日 08:14/ 0 赞/ 221 阅读

相关 HTML5应用程序缓存

1、如需启用应用程序缓存，请在文档的标签中包含 manifest 属性： <!DOCTYPE HTML> <html manifest="demo.appc

àì夳堔傛蜴生んèń/ 2022年06月08日 00:48/ 0 赞/ 234 阅读

相关 HTML5 应用程序缓存--manifest

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势： \- 离线浏览 - 用户可在应用离

ゝ一世哀愁。/ 2022年05月19日 08:07/ 0 赞/ 210 阅读