快速掌握 10 個(gè) HTML5 必備技巧

TML5 對(duì)于初學(xué)者甚至是非程序員來說都有著十足的吸引力。實(shí)際上，只要你訪問網(wǎng)站，就會(huì)和 HTML 打交道。如果能夠熟悉一些關(guān)鍵的編程技巧，當(dāng)你對(duì)網(wǎng)站做一些細(xì)節(jié)調(diào)整或優(yōu)化基本的 Web 元素時(shí)就能節(jié)省大量的時(shí)間（甚至是金錢）。因此，本文精選了 10 個(gè)對(duì)于 Web 開發(fā)者來說非常實(shí)用的 HTML 編程技巧，而且它們不需要花太多時(shí)間精力就可以輕松掌握。

1. 可與本地緩存媒體資源交互

HTML5 FileSystem API 一開始被認(rèn)為是 AppCache 的替代方案，用來實(shí)現(xiàn)資產(chǎn)的動(dòng)態(tài)緩存。但是你知道嗎，其實(shí)你還可以用它來實(shí)現(xiàn)與用戶本地設(shè)備上存儲(chǔ)文件的交互。

例如，你可以在應(yīng)用中添加以下功能：

斷點(diǎn)上傳器：將文件復(fù)制到一個(gè)本地沙箱中，然后分批上傳。出現(xiàn)連接中斷、瀏覽器崩潰故障后可以重新啟動(dòng)上傳操作。
為游戲、音樂播放器，照片編輯器等媒體密集型應(yīng)用啟用本地緩存。
為內(nèi)容查看創(chuàng)建離線模式，例如離線視頻、電子郵件附件和文本等。

注意：FileSystem API 僅被 Chrome 支持。

如果你想嘗試離線存儲(chǔ)功能，還可以參考以下資源和代碼教程：

Eric Bidelman：如何使用 HTML5 FileSystem API[1]。
管理 HTML5 離線存儲(chǔ) [2]。
HTML5 中的脫機(jī)文件：FileSystem API[3]。

2. 進(jìn)行自動(dòng)表單驗(yàn)證

對(duì)于網(wǎng)站安全性和流暢的用戶體驗(yàn)來說，表單驗(yàn)證非常重要。所以我們應(yīng)該讓用戶更輕松地在你的網(wǎng)站上輸入各種正確類型的值。

在 HTML5 中有幾種新的輸入類型可用，這些類型已經(jīng)打包進(jìn)了預(yù)定義的驗(yàn)證功能：

'email'
'url'
'tel'

但當(dāng)你需要用戶提供某些標(biāo)準(zhǔn)輸入未指定的數(shù)據(jù)時(shí)（例如一個(gè)包含特殊字符的用戶名），往往就會(huì)出問題了。這就是“pattern”屬性派上用場(chǎng)的時(shí)候。

Pattern 可讓你定義自定義規(guī)則，然后使用正則表達(dá)式（RegEx）驗(yàn)證表單輸入。RegEx 指定了<input>元素值將要檢查的表達(dá)式。

下面是一個(gè)添加新規(guī)則的示例。例如，你要指定密碼不應(yīng)超過 15 個(gè)字符，并且只能包含小寫字母：

<form action="/action_page.php">
Password: <input?type="password"?name="pw"?pattern="[a-z].{1,15,}">
<input?type="submit">
</form>

為了更好地說明規(guī)則，你還可以添加一條自定義消息，告訴用戶為什么他們輸入的密碼不符合要求。只需再加上一行來自定義彈出消息即可：

<form action="/action_page.php">
Password: <input?type="password"?name="pw"?pattern="[a-z].{1,15,}"?title="One to fifteen characters, lowercase only".>>
<input?type="submit">
</form>

3. 為 HTML5 代碼元素創(chuàng)建縮寫

Emmet[4] 是一個(gè)很好用的文本編輯器插件，可以簡(jiǎn)化你的 HTML/CSS 編碼流程。這個(gè)工具使用的語法類似于 CSS 的選擇器，可讓你為標(biāo)準(zhǔn) HTML 代碼元素創(chuàng)建各種縮寫。

下面是一個(gè)例子。如果你輸入：

div#header>h1.logo>a{website}

則會(huì)收到：

<div?id="header">
<h1?class="logo"><a?href="">website</a></h1>
</div>

你可以使用 cheat sheet[5] 中的多種已有組合，也可以為任意 HTML 標(biāo)簽創(chuàng)建自定義組合，然后按 Tab 或 Ctrl + E 將其添加到文本編輯器中。我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

4. 實(shí)現(xiàn)更優(yōu)的視頻傳輸

使用 video 標(biāo)簽，可以將支持視頻播放的媒體播放器無縫嵌入到網(wǎng)頁中。

你可以選擇：

使用 getUserMedia() 或 WebRTC 啟用來自攝像頭的實(shí)時(shí)流。
使用 src 屬性播放本地托管的視頻：<video src="file.avi"/>。

此外，你必須為視頻指定“控件”（例如播放、暫停和音量調(diào)節(jié)），否則用戶將沒有任何控件可用。這里的示例代碼如下：

<video width="768"?height="432"?autoplay>
<source?src="video.mp4"?type="video/mp4">
</video>

為了進(jìn)一步改善觀看體驗(yàn)，你還可以嘗試使用以下屬性：

disablePictureInPicture[6]：禁止瀏覽器顯示畫中畫上下文菜單或自動(dòng)請(qǐng)求畫中畫。
loop：提示瀏覽器在結(jié)束播放后自動(dòng)重播視頻。
muted：自動(dòng)使視頻中的音頻靜音。
poster：將自定義圖像顯示為視頻縮略圖。否則，瀏覽器將顯示視頻的第一幀作為縮略圖。
preload：向?yàn)g覽器指示哪些參數(shù)將帶來最佳的用戶體驗(yàn)。你可以將它設(shè)置為 none（無預(yù)加載要求）；metadata：僅會(huì)預(yù)取視頻元數(shù)據(jù)；auto：即使用戶不希望觀看整個(gè)視頻，也要下載全部視頻數(shù)據(jù)。注意：autoplay 屬性的優(yōu)先級(jí)高于此屬性。

你可以在這個(gè) HTML 速查表 [7] 中找到更多使用方便的多媒體文件標(biāo)簽。

5. 改善圖像的顯示方式

<picture>標(biāo)簽有助于優(yōu)化圖像的顯示方式。

它通常用于：

樣式：指定在各種條件下應(yīng)如何顯示媒體（例如，為較小的屏幕加載圖像的較小版本）。這是創(chuàng)建響應(yīng)式設(shè)計(jì)的關(guān)鍵一環(huán)。
提升速度：根據(jù)用戶的屏幕規(guī)格指定應(yīng)加載的圖像尺寸。
瀏覽器支持：在各種類型的瀏覽器中提供不同的圖像格式，以顯示正確的內(nèi)容。

示例：

<picture>
<source?media="(min-width: 846px)"?srcset="img_1.jpg">
<source?media="(min-width: 300 px)"?srcset="img_2.jpg">
<img?src="img_3.jpg"?alt="logo">
</picture>

<picture>標(biāo)簽包含兩個(gè)附加子元素：

<source>：指定媒體元素的媒體資源。
<img>：定義一個(gè)圖像。

要啟用其他樣式選項(xiàng)，請(qǐng)將以下屬性添加到<source>元素：

srcset（必需）：使用它來定義圖像的目標(biāo) URL。
media（類似于媒體查詢）：是一個(gè)條件，用戶代理為每個(gè)<source>元素評(píng)估這個(gè)條件。
sizes：指定寬度描述符。
type：提供 MIME 類型定義。

<img>元素可用來確保在不支持<picture>元素的瀏覽器中正確顯示圖像。

6. 提升首屏頁面的加載速度

如果你希望你的網(wǎng)站在搜索結(jié)果中獲得靠前的排名，并提供出色的用戶體驗(yàn)，那么就需要重點(diǎn)關(guān)注頁面的加載速度。

但是，要在 Google Page Insights 中拿到高分并不是那么容易。雖然這一工具的確會(huì)標(biāo)出你的網(wǎng)站上應(yīng)該修復(fù)的內(nèi)容，但是對(duì)于從頭開始對(duì)網(wǎng)站進(jìn)行編碼的人們并沒有提供明確的優(yōu)化指導(dǎo)。

谷歌對(duì)于首屏設(shè)計(jì)的官方建議 [8] 有些含糊不清：

調(diào)整你的 HTML 結(jié)構(gòu)，以首先加載關(guān)鍵的首屏內(nèi)容。
減少你的資源使用的數(shù)據(jù)量。

所以我們來將其分解為更可操作的幾個(gè)步驟：

確保你的 CSS 是內(nèi)聯(lián)的。
盡量減少、合并和消除不必要的外部 CSS 文件。
自動(dòng)減少阻礙渲染的 CSS 數(shù)據(jù)。
使用 CSS 媒體類型和媒體查詢，將某些 CSS 資源指定為非渲染阻礙類型 [9]。
將<content>部分放在<sidebar>之前。
推遲加載 JavaScript。
生成可嵌入的字體數(shù)據(jù)以加快字體加載速度，并選擇 web 安全的字體 [10]。

然后再次運(yùn)行檢查任務(wù)，看看是否還有需要修復(fù)的內(nèi)容。

7. 網(wǎng)站加速

只要將 .zip 文件而不是 index.html 文件發(fā)送給瀏覽器，就可以節(jié)省大量帶寬和下載時(shí)間。

圖片來自 betterexplained[11]

要設(shè)置 .gzip 壓縮，你需要在 web 主機(jī) / 服務(wù)器上找到 htaccess 文件，并使用以下代碼對(duì)其進(jìn)行修改：

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include?file?.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

如果這樣做不起作用，請(qǐng)參考下面這些針對(duì)不同 web 服務(wù)器類型的教程：

Apache：https://httpd.apache.org/docs/current/mod/mod_deflate.html#enable
Litespeed：https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:config:gzip-compression
NGINX：https://docs.nginx.com/nginx/admin-guide/web-server/compression/

8. 利用 Microdata 進(jìn)行 SEO

你可以使用 microdata 將額外的上下文編入網(wǎng)頁。然后，網(wǎng)絡(luò)爬蟲就可以從你的頁面中渲染微數(shù)據(jù)，并為用戶提供更好的瀏覽體驗(yàn)，以更高的精確性對(duì)你的網(wǎng)站建立索引并為其提供更準(zhǔn)確的搜索結(jié)果排名。

簡(jiǎn)而言之，Microdata 由名稱 / 值（name/value）對(duì)組成，每一個(gè)項(xiàng)目（item）定義一組命名的屬性（property）。

項(xiàng)目具有項(xiàng)目類型、全局標(biāo)識(shí)符和一個(gè)屬性列表。要?jiǎng)?chuàng)建一個(gè)新項(xiàng)目，請(qǐng)使用 itemscope attribute。
屬性具有一個(gè)或多個(gè)值。要將屬性分配給項(xiàng)目，請(qǐng)使用 itemprop attribute。

9. 使用 HTML5 本地存儲(chǔ)代替 Cookie

Local Storage（也稱為 DOM 存儲(chǔ)）使你可以在本地存儲(chǔ)用戶數(shù)據(jù)，這樣就無需通過 HTTP 網(wǎng)絡(luò)請(qǐng)求發(fā)送數(shù)據(jù)了。它可以節(jié)省帶寬并提升數(shù)據(jù)存儲(chǔ)能力。看起來不錯(cuò)吧？

但是有一個(gè)重要的警告：本地存儲(chǔ)僅能保存在客戶端，而 cookie 既可以保存在服務(wù)器端也可以在客戶端。因此，如果你的網(wǎng)站使用了服務(wù)器端的 Cookie 來基于已知的用戶首選項(xiàng)自定義內(nèi)容，則遷移到本地存儲(chǔ)可能就需要重大的架構(gòu)更改工作了。

但在比較簡(jiǎn)單的情況下（例如你使用 Cookie 來存儲(chǔ)一些基本設(shè)置），本地存儲(chǔ)可能是一個(gè)很好的替代品，尤其是在網(wǎng)絡(luò)連接質(zhì)量較差的區(qū)域。另外請(qǐng)記住，本地存儲(chǔ)對(duì)于高敏感數(shù)據(jù)（例如財(cái)務(wù)信息）可能不是理想的選擇，并且建議你對(duì)本地存儲(chǔ)的所有數(shù)據(jù)都進(jìn)行額外的加密。

Jenkov 詳細(xì)介紹了如何設(shè)置和配置 HTML5 本地存儲(chǔ) [13]。

10. 編寫有編號(hào)項(xiàng)目的降序列表

文章最后介紹一個(gè)非常簡(jiǎn)單的技巧：你可以使用<reversed>屬性添加降序列表替代升序列表。

下面是一個(gè)示例代碼片段：

<ol?reversed>
<li>Ready</li>
<li>Set</li>
<li>Go!</li>
</ol>

聽起來可能沒有多大意義，但是當(dāng)你想在頁面中添加一些時(shí)髦的樣式時(shí)，它可能就會(huì)派上用場(chǎng)了。

小結(jié)

現(xiàn)在你應(yīng)該掌握了這 10 個(gè)新的 HTML5 技巧和竅門，它們應(yīng)該可以幫助你構(gòu)建更快、更人性化和更有吸引力的網(wǎng)站。不過千萬要記得，在開始實(shí)驗(yàn)之前先對(duì)你的網(wǎng)站進(jìn)行備份！

原文鏈接：https://mp.weixin.qq.com/s/qtQZUvsnIn0nsFbG51lQQw

作者：前端工匠

ia仔ke：quangneng.com/5081/

獲取資源：上方URL獲取資源

多維度前端+后端技術(shù)

MQ隊(duì)列、Redis緩存
VUE、html5
視頻流技術(shù)、文件上傳下載
AES、MD5

您提到了幾個(gè)不同的技術(shù)領(lǐng)域，我們可以逐一探討如何在這些方面提升您的技能。

1. 消息隊(duì)列（MQ）和 Redis 緩存

消息隊(duì)列 (Message Queue, MQ)

基礎(chǔ)知識(shí)：理解消息隊(duì)列的基本概念，如發(fā)布/訂閱模式、點(diǎn)對(duì)點(diǎn)模式等。
實(shí)現(xiàn)原理：了解消息隊(duì)列的內(nèi)部實(shí)現(xiàn)機(jī)制，例如消息持久化、消息確認(rèn)機(jī)制等。
常用系統(tǒng)：熟悉 RabbitMQ、Kafka、RocketMQ 等主流的消息隊(duì)列系統(tǒng)。
應(yīng)用場(chǎng)景：學(xué)習(xí)消息隊(duì)列在異步處理、負(fù)載均衡、系統(tǒng)解耦等方面的應(yīng)用場(chǎng)景。
運(yùn)維管理：掌握消息隊(duì)列的配置、監(jiān)控和故障排查技巧。

Redis 緩存

數(shù)據(jù)結(jié)構(gòu)：熟悉 Redis 提供的各種數(shù)據(jù)結(jié)構(gòu)，如字符串、列表、集合、哈希表、有序集合等。
使用場(chǎng)景：了解 Redis 在緩存、計(jì)數(shù)器、排行榜、會(huì)話存儲(chǔ)等場(chǎng)景中的應(yīng)用。
高級(jí)特性：學(xué)習(xí) Redis 的事務(wù)、Lua 腳本、持久化機(jī)制等高級(jí)特性。
集群與高可用：掌握 Redis 集群的搭建和維護(hù)，以及主從復(fù)制等高可用方案。

2. Vue.js 和 HTML5

Vue.js

基礎(chǔ)知識(shí)：理解 Vue 的核心概念，如響應(yīng)式系統(tǒng)、組件化開發(fā)、指令和生命周期鉤子等。
官方文檔：深入閱讀 Vue 的官方文檔，了解最新特性和最佳實(shí)踐。
組件庫：熟悉 Element UI、Vuetify 等流行的 Vue 組件庫。
狀態(tài)管理：學(xué)習(xí) Vuex 進(jìn)行復(fù)雜狀態(tài)管理的方法。
路由管理：使用 Vue Router 實(shí)現(xiàn)單頁應(yīng)用的路由管理。

HTML5

新特性：掌握 HTML5 引入的新標(biāo)簽和屬性，如 <article>, <section>, <header> 等。
多媒體：了解 <video> 和 <audio> 標(biāo)簽的使用方法，以及相關(guān)的 API。
表單增強(qiáng)：使用 HTML5 表單控件，如日期選擇器、顏色選擇器等。
離線存儲(chǔ)：學(xué)習(xí) HTML5 的離線存儲(chǔ)機(jī)制，如 localStorage 和 sessionStorage。
畫布和 SVG：掌握 <canvas> 和 SVG 的基本用法，用于繪制圖形和動(dòng)畫。

3. 視頻流技術(shù)和文件上傳下載

視頻流技術(shù)

編碼格式：了解 H.264、H.265 等視頻編碼格式。
流媒體協(xié)議：熟悉 HLS、RTMP、RTSP 等流媒體傳輸協(xié)議。
播放器集成：學(xué)習(xí)如何集成視頻播放器，如 Video.js 或 Plyr。
自適應(yīng)流：理解自適應(yīng)比特率流的概念及其實(shí)現(xiàn)方式。

文件上傳下載

表單提交：了解如何使用 HTML 表單上傳文件。
Ajax 上傳：學(xué)習(xí)如何使用 XMLHttpRequest 或 Fetch API 實(shí)現(xiàn)異步文件上傳。
分塊上傳：掌握大文件分塊上傳的技術(shù)，提高上傳效率和穩(wěn)定性。
進(jìn)度條：實(shí)現(xiàn)文件上傳過程中的進(jìn)度顯示功能。
斷點(diǎn)續(xù)傳：了解斷點(diǎn)續(xù)傳的技術(shù)原理和實(shí)現(xiàn)方式。

4. 密碼學(xué)：AES 和 MD5

AES (Advanced Encryption Standard)

加密算法：理解 AES 的工作原理，包括密鑰擴(kuò)展、輪函數(shù)等。
模式選擇：了解不同的工作模式，如 ECB、CBC、CFB、OFB 等。
安全考慮：注意密鑰管理和 IV 的使用，避免安全漏洞。

MD5 (Message-Digest Algorithm 5)

摘要算法：了解 MD5 的作用和基本原理，即如何生成固定長度的摘要。
應(yīng)用場(chǎng)景：知道 MD5 在校驗(yàn)文件完整性方面的用途。
安全問題：認(rèn)識(shí)到 MD5 已經(jīng)不適用于安全敏感的場(chǎng)景，如密碼存儲(chǔ)。

為了更深入地學(xué)習(xí)這些技術(shù)，你可以嘗試完成一些實(shí)際的項(xiàng)目來應(yīng)用這些知識(shí)。例如，你可以構(gòu)建一個(gè)基于 Vue.js 的前端應(yīng)用程序，其中包含視頻流播放、文件上傳下載等功能，并利用 Redis 和消息隊(duì)列進(jìn)行數(shù)據(jù)緩存和異步處理。同時(shí)，在項(xiàng)目中使用 AES 對(duì)敏感數(shù)據(jù)進(jìn)行加密，并使用 MD5 對(duì)文件進(jìn)行校驗(yàn)。這樣的實(shí)踐將幫助你更好地理解和掌握這些技術(shù)。

. HTTP狀態(tài)碼及其含義

1XX ：信息狀態(tài)碼

100 Continue 繼續(xù)，?般在發(fā)送 post 請(qǐng)求時(shí)，已發(fā)送了 http header 之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息

2XX ：成功狀態(tài)碼

200 OK 正常返回信息

201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源

202 Accepted 服務(wù)器已接受請(qǐng)求，但尚未處理

3XX ：重定向

301 Moved Permanently 請(qǐng)求的??已永久移動(dòng)到新位置。

302 Found 臨時(shí)性重定向。

303 See Other 臨時(shí)性重定向，且總是使? GET 請(qǐng)求新的 URI 。

304 Not Modified ?從上次請(qǐng)求后，請(qǐng)求的??未修改過。

4XX ：客戶端錯(cuò)誤

400 Bad Request 服務(wù)器?法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使?相同的內(nèi) 容發(fā)起請(qǐng)求。

401 Unauthorized 請(qǐng)求未授權(quán)。

403 Forbidden 禁?訪問。

404 Not Found 找不到如何與 URI 相匹配的資源。

5XX: 服務(wù)器錯(cuò)誤

500 Internal Server Error 最常?的服務(wù)器端錯(cuò)誤。

503 Service Unavailable 服務(wù)器端暫時(shí)?法處理請(qǐng)求（可能是過載或維護(hù)）。

7. 語義化的理解

?正確的標(biāo)簽做正確的事情！
HTML 語義化就是讓??的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；
在沒有樣式 CSS 情況下也以?種?檔格式顯示，并且是容易閱讀的。
搜索引擎的爬?依賴于標(biāo)記來確定上下?和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO 。
使閱讀源代碼的?對(duì)?站更容易將?站分塊，便于閱讀維護(hù)理解

8. 介紹?下你對(duì)瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎

渲染引擎：負(fù)責(zé)取得??的內(nèi)容（ HTML 、 XML 、圖像等等）、整理訊息（例如加?CSS 等），以及計(jì)算??的顯示?式，然后會(huì)輸出?顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于??的語法解釋會(huì)有不同，所以渲染的效果也不相同。所有??瀏覽器、電?郵件客戶端以及其它需要編輯、顯示?絡(luò)內(nèi)容的應(yīng)?程序都需要內(nèi)核
JS 引擎則：解析和執(zhí)? javascript 來實(shí)現(xiàn)??的動(dòng)態(tài)效果
最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)?，內(nèi)核就傾向于只指渲染引擎

9. html5有哪些新特性、移除了那些元素？

(1) HTML5 現(xiàn)在已經(jīng)不是 SGML 的?集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加

繪畫 canvas
?于媒介回放的 video 和 audio 元素本地離線存儲(chǔ) localStorage ?期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后?動(dòng)刪除
語意化更好的內(nèi)容元素，?如 article 、 footer 、 header 、 nav 、 section
表單控件， calendar 、 date 、 time 、 email 、 url 、 search
新的技術(shù) webworker 、 websocket 、 Geolocation

(2) 移除的元素：

純表現(xiàn)的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
對(duì)可?性產(chǎn)?負(fù)?影響的元素： frame 、 frameset 、 noframes

(3) ?持 HTML5 新標(biāo)簽：

IE8/IE7/IE6 ?持通過 document.createElement ?法產(chǎn)?的標(biāo)簽
可以利?這?特性讓這些瀏覽器?持 HTML5 新標(biāo)簽
瀏覽器?持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式當(dāng)然也可以直接使?成熟的框架、?如 html5shim

10. HTML5 的離線儲(chǔ)存怎么使?，?作原理能不能解釋?下？

在?戶沒有與因特?連接時(shí)，可以正常訪問站點(diǎn)或應(yīng)?，在?戶與因特?連接時(shí)，更新?戶機(jī)器上的緩存?件。

原理：

HTML5 的離線存儲(chǔ)是基于?個(gè)新建的 .appcache ?件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過這個(gè)?件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像 cookie ?樣被存儲(chǔ)了下來。之后當(dāng)?絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)???展示。

如何使?：