html5离线访问

最新推荐文章于 2024-04-13 17:28:33 发布

原创最新推荐文章于 2024-04-13 17:28:33 发布 · 755 阅读

0 ·

CC 4.0 BY-SA版权

03html5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用HTML5的应用程序缓存特性实现网页离线访问。通过在HTML文件中添加manifest属性，并指定一个清单文件来缓存必要的资源，如HTML、CSS和JavaScript文件等。这种方式确保了即使在网络不可用的情况下，用户也能访问到应用的基本内容。

03html5-lixianfangwen.html

<!DOCTYPE html>
<html manifest="lixianfangwen.manifest">
<head  lang="en">
    <meta charset="UTF-8">
    <title>html5离线访问</title>
    <link rel="stylesheet" href="lixian.css"/>
    <script src="lixian.js"></script>
</head>
<body>
<!--stackedit.io-->
    <p>哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <article>
        <p>做应用程序缓存，正常开发</p>
        <p>html添加一个manifest属性，指向一个文件</p>
    </article>
</body>
</html>

lixianfangwen.manifest

CACHE MANIFEST
#version 1.0.1

CACHE:
    03html5-lixianfangwen.html
    lixian.css
    lixian.js
NETWORK:
    *

lixian.css

/*::before    是元素一开始的时候，在元素内部添加*/
body::before {
    content: "css注入的内容";
    font-size: 80px;
}

lixian.js

<!DOCTYPE html>
<html manifest="lixianfangwen.manifest">
<head  lang="en">
    <meta charset="UTF-8">
    <title>html5离线访问</title>
    <link rel="stylesheet" href="lixian.css"/>
    <script src="lixian.js"></script>
</head>
<body>
<!--stackedit.io-->
    <p>哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    <article>
        <p>做应用程序缓存，正常开发</p>
        <p>html添加一个manifest属性，指向一个文件</p>
    </article>
</body>
</html>