离线应用程序缓存功能允许我们指定Web应用程序所需的全部资源，
这样浏览器就能在加载HTML文档时把它们都下载下来。
1)定义浏览器缓存：
启用离线缓存——创建一个清单文件，并在html元素的manifest属性里引用它；
指定离线应用程序里要缓存的资源——在清单文件的顶部或者CACHE区域里列出资源；
指定资源不可用时要显示的备用内容——在清单文件的FALLBACK区域里列出内容；
指向始终向服务器请求的资源——在清单文件的BETWORK区域里列出内容；
示例：首先创建fruit.appcache的清单文件
CACHE MANIFEST
example.html
banana100.png
FALLBACK:
* 404.html
NETWORK:
cherries100.png
CACHE:
apple100.png
再创建404.html文件，用于链接指向的html文件不在离线缓存中就可以用它来代替
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Offline</title>
</head>
<body>
<h1>您要的页面找不到了！</h1>
或许您可以帮我们找找孩子！
</body>
</html>最后创建需要启用离线缓存的html文件
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Example</title>
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
</style>
</head>
<body>
<img id="imgtarget" src="banana100.png"/>
<p>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</p>
<a href="otherpage.html">Link to another page</a>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
document.getElementById("imgtarget").src = e.target.id + "100.png";
}
</script>
</body>
</html>2）检测浏览器状态：
window.navigator.online——如果浏览器确定为离线就返回false,如果浏览器可能在线则返回true；
3）使用离线缓存：
可以通过调用window.applicationCache属性直接使用离线缓存，它会返回一个ApplicationCache对象；
ApplicationCache对象成员：
update()——更新缓存以确保清单里的项目都已下载了最新的版本；
swapCache()——交换当前缓存与较新的缓存；
status——返回缓存的状态；
3.1）ApplicationCache对象的status属性值：
0——UNCACHED——此文档没有缓存，或者缓存数据尚未被下载；
1——IDLE——缓存没有执行任何操作；
2——CHECKING——浏览器正在检查清单或清单所指定项目的更新；
3——DOWNLOADING——浏览器正在下载清单或内容的更新；
4——UPDATEREADY——有更新后的缓存数据可用；
5——OBSOLETE——缓存数据已经废弃，不应该再使用了。这是请求清单文件时返回HTTP状态码4xx所造成的
（通常表明清单文件已被移走/删除）；
3.2）ApplicationCache对象定义的事件，在缓存状态改变时触发：
checking——浏览器正在获取初始清单或者检查清单更新；
noupdate——没有更新可用，当前的清单是最新版；
downloading——浏览器正在下载清单里指定的内容；
progress——在下载阶段中触发；
cached——清单里指定的所有内容都已被下载和缓存了；
updateready——新资源已下载并且可以使用了；
obsolete——缓存已废弃；
CACHE MANIFEST CACHE: example.html banana100.png cherries100.png apple100.png FALLBACK: * offline2.html
<!DOCTYPE HTML>
<html manifest="fruit.appcache">
<head>
<title>Example</title>
<style>
img {border: medium double black; padding: 5px; margin: 5px;}
p {margin-top: 10px; margin-bottom: 10px}
table {margin: 10px; border-collapse: collapse;}
th, td {padding: 2px;}
body > * {float: left;}
</style>
</head>
<body>
<p>
<img id="imgtarget" src="banana100.png"/>
<p>
<button id="banana">Banana</button>
<button id="apple">Apple</button>
<button id="cherries">Cherries</button>
</p>
<p>
<button id="update">Update</button>
<button id="swap">Swap Cache</button>
</p>
The status is: <span id="status"></span>
</p>
<table id="eventtable" border="1">
<tr><th>Event Type</th></tr>
</table>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
window.applicationCache.onchecking = handleEvent;
window.applicationCache.onnoupdate = handleEvent;
window.applicationCache.ondownloading = handleEvent;
window.applicationCache.onupdateready = handleEvent;
window.applicationCache.oncached = handleEvent;
window.applicationCache.onobselete = handleEvent;
function handleEvent(e) {
document.getElementById("eventtable").innerHTML +=
"<tr><td>" + e.type + "</td></td>";
checkStatus();
}
function handleButtonPress(e) {
switch (e.target.id) {
case 'swap':
window.applicationCache.swapCache();
break;
case 'update':
window.applicationCache.update();
checkStatus();
break;
default:
document.getElementById("imgtarget").src = e.target.id
+ "100.png";
}
}
function checkStatus() {
var statusNames = ["UNCACHED", "IDLE", "CHECKING", "DOWNLOADING",
"UPDATEREADY", "OBSOLETE"];
var status = window.applicationCache.status;
document.getElementById("status").innerHTML = statusNames[status];
}
</script>
</body>
</html>Atas ialah kandungan terperinci html5之创建离线Web应用程序的示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Memahami Kod H5: Asas HTML5Apr 17, 2025 am 12:08 AMHTML5 adalah teknologi utama untuk membina laman web moden, menyediakan banyak elemen dan ciri -ciri baru. 1. HTML5 memperkenalkan unsur -unsur semantik seperti, dan lain -lain, yang meningkatkan struktur laman web dan SEO. 2. Sokongan unsur multimedia dan menanamkan media tanpa pemalam. 3. Borang meningkatkan jenis input baru dan sifat pengesahan, memudahkan proses pengesahan. 4. Menawarkan fungsi storan luar talian dan tempatan untuk meningkatkan prestasi laman web dan pengalaman pengguna.
Kod H5: Amalan Terbaik untuk Pemaju WebApr 16, 2025 am 12:14 AMAmalan terbaik untuk kod H5 termasuk: 1. Gunakan pengisytiharan dan pengekodan watak yang betul; 2. Gunakan tag semantik; 3. Mengurangkan permintaan HTTP; 4. Gunakan pemuatan asynchronous; 5. Mengoptimumkan imej. Amalan ini dapat meningkatkan kecekapan, penyelenggaraan dan pengalaman pengguna halaman web.
H5: Evolusi piawaian dan teknologi webApr 15, 2025 am 12:12 AMPiawaian dan teknologi web telah berkembang dari HTML4, CSS2 dan JavaScript mudah setakat ini dan telah menjalani perkembangan yang ketara. 1) HTML5 memperkenalkan API seperti kanvas dan webstorage, yang meningkatkan kerumitan dan interaktiviti aplikasi web. 2) CSS3 menambah fungsi animasi dan peralihan untuk menjadikan halaman lebih berkesan. 3) JavaScript meningkatkan kecekapan pembangunan dan kebolehbacaan kod melalui sintaks moden node.js dan ES6, seperti fungsi anak panah dan kelas. Perubahan ini telah mempromosikan pembangunan pengoptimuman prestasi dan amalan terbaik aplikasi web.
Adakah H5 adalah singkat untuk HTML5? Meneroka butiranApr 14, 2025 am 12:05 AMH5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.
H5 dan HTML5: Istilah yang biasa digunakan dalam pembangunan webApr 13, 2025 am 12:01 AMH5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.
Apa yang dirujuk oleh H5? Meneroka konteksApr 12, 2025 am 12:03 AMH5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo
H5: Alat, Rangka Kerja, dan Amalan TerbaikApr 11, 2025 am 12:11 AMAlat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.
Warisan HTML5: Memahami H5 pada masa kiniApr 10, 2025 am 09:28 AMHtml5hassignificlylylectransformedwebdevelopmentbyintroducingsemanticelements, enhancingmultimediasupport, andimprovingperformance.1) itmadewebebsitesmoreaccessibleandseo-friendlywithSemhyViVeShive, dan
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
Dreamweaver CS6
Alat pembangunan web visual
