HTML5知識總結

時間  2021-07-11
欄目 HTML5 简体版
原文   原文鏈接

40個重要的HTML5面試題及答案

2013/07/22 · Web前端, 開發 · 5 評論 · HTML5

分享到： 150
本文由  伯樂在線 -  某小浩 翻譯。未經許可，禁止轉載！
英文出處： Shivprasad koirala。歡迎加入 翻譯組。

內容

介紹

我是一個ASP.NET MVC的開發者，最近在我找工作的時候被問到很多與HTML5相關的問題和新特性。所以以下40個重要的問題將幫助你複習HTML5相關的知識。

這些問題不是你得到工作的高效解決方案，但是可以在你想快速複習相關主題的時候有所幫助。

快樂地找工作。

SGML（標準通用標記語言）和HTML（超文本標記語言），XML（可擴展標記語言）和HTML的之間有什麼關係？

SGML（標準通用標記語言）是一個標準，告訴我們怎麼去指定文檔標記。他是隻描述文檔標記應該是怎麼樣的元語言，HTML是被用SGML描述的標記語言。

因此利用SGML創建了HTML參照和必須共同遵守的DTD，你會經常在HTML頁面的頭部發現「DOCTYPE」屬性，用來定義用於解析目標DTD

XHTML
1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

現在解析SGML是一件痛苦的事情，所以創建了XML使事情更好。XML使用了SGML，例如：在SGML中你必須使用起始和結束標籤，但是在XML你可以有自動關閉的結束標籤。

XHTML創建於XML，他被使用在HTML4.0中。你可以參考下面代碼片段中展示的XML DTD

XHTML
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

總之，SGML是所有類型的父類，較舊的HTML利用SGML，HTML4.0使用派生自XML的XHTML

什麼是HTML5？

HTML5是最新的HTML標準，他的主要目標是提供所有內容而不需要任何的像flash，silverlight等的額外插件，這些內容來自動畫，視頻，富GUI等

HTML5是萬維網聯盟（W3C）和網絡超文本應用技術工作組（WHATWG）之間合作輸出的

爲什麼HTML5裏面我們不需要DTD（Document Type Definition文檔類型定義）？

HTML5沒有使用SGML或者XHTML，他是一個全新的東西，因此你不需要參考DTD，對於HTML5，你僅需放置下面的文檔類型代碼告訴瀏覽器識別這是HTML5文檔

如果我不放入<! DOCTYPE html> ，HTML5還會工作麼？

不會，瀏覽器將不能識別他是HTML文檔，同時HTML5的標籤將不能正常工作

哪些瀏覽器支持HTML5？

幾乎所有的瀏覽器Safari，Chrome，Firefox，Opera，IE都支持HTML5

HTML5的頁面結構同HTML4或者更前的HTML有什麼區別？

一個典型的WEB頁面包含頭部，腳部，導航，中心區域，側邊欄。現在如果我們想在在HTML4的HTML區域中呈現這些內容，我們可能要使用DIV標籤。

但是在HTML5中通過爲這些區域創建元素名稱使他們更加清晰，也使得你的HTML更加可讀

以下是形成頁面結構的HTML5元素的更多細節：

  • <header>：代表HTML的頭部數據
  • <footer>：頁面的腳部區域
  • <nav>：頁面導航元素
  • <article>：自包含的內容
  • <section>：使用內部article去定義區域或者把分組內容放到區域裏
  • <aside>：代表頁面的側邊欄內容

HTML5中的datalist是什麼？

HTML5中的Datalist元素有助於提供文本框自動完成特性，如下圖所示：

以下是DataList功能的HTML代碼：

XHTML
1
2
3
4
5
6
7
8
<input list = "Country" >
<datalist id = "Country" >
   <option value = "India" >
   <option value = "Italy" >
   <option value = "Iran" >
   <option value = "Israel" >
   <option value = "Indonesia" >
</datalist>

HTML5中什麼是不同的新的表單元素類型？

這裏有10個重要的新的表單元素在HTML5中被介紹

  1. Color
  2. Date
  3. Datetime-local
  4. Email
  5. Time
  6. Url
  7. Range
  8. Telephone
  9. Number
  10. Search

讓我們一步一步瞭解這10個元素

如果你想顯示顏色選擇對話框

XHTML
1
<input type = "color" name = "favcolor" >

如果你想顯示日曆對話框

XHTML
1
<input type = "date" name = "bday" >

如果你想顯示含有本地時間的日曆

XHTML
1
<input type="datetime-local" name="bdaytime">

如果你想創建一個含有email校驗的HTML文本框，我們可以設置類型爲「email」

XHTML
1
<input type = "email" name = "email" >

對於URL驗證設置類型爲」url」，如下圖顯示的HTML代碼

XHTML
1
<input type = "url" name = "sitename" >

如果你想用文本展示數字範圍，你可以設置類型爲「number」

XHTML
1
<input type = "number" name = "quantity" min = "1" max = "5" >

如果你想顯示範圍控制，你可以使用類型」range」

XHTML
1
<input type = "range" min = "0" max = "10" step = "2" value = "6" >

想讓文本框作爲搜索引擎

XHTML
1
<input type = "search" name = "googleengine" >

想只能輸入時間

XHTML
1
<input type = "time" name = "usr_time" >

如果你想使用文本框接受電話號碼

XHTML
1
<input type = "tel" name = "mytel" >

HTML5中什麼是輸出元素？

當你需要計算兩個輸入的和值到一個標籤中的時候你需要輸出元素。例如你有兩個文本框（如下圖），你想將來自這兩個輸入框中的數字求和並放到標籤中。

下面是如何在HTML5中使用輸出元素的代碼

XHTML
1
2
3
4
5
<form onsubmit = "return false"   ö ninput = "o.value = parseInt(a.value) + parseInt(b.value)" >
   <input name = "a" type = "number" > +
   <input name = "b" type = "number" > =
   <output name = "o" />
</form>

爲了簡單起見，你也可以使用「valueAsNumber」來代替「parseInt」。你同樣能在output元素中使用「for」使其更加可讀

XHTML
1
<output name = "o" for = "a b" > </output>

什麼是SVG（Scalable Vector Graphics可縮放矢量圖形）？

SVG（Scalable Vector Graphics可縮放矢量圖形）表示可縮放矢量圖形。他是基於文本的圖形語言，使用文本，線條，點等來進行圖像繪製，這使得他輕便，顯示更加迅速

我們能看到使用HTML5的SVG的簡單例子麼？

比方說，我們希望使用HTML5 SVG去顯示以下簡單的線條

下面是HTML5代碼

XHTML
1
2
3
<svg id = "svgelem" height = "[object SVGAnimatedLength]" xmlns = "http://www.w3.org/2000/svg" >
<line style = "stroke: rgb(255, 0, 0); stroke-width: 2px;" y2 = "[object SVGAnimatedLength]" x2 = "[object SVGAnimatedLength]" y1 = "[object SVGAnimatedLength]" x1 = "[object SVGAnimatedLength]" >
</line>

HTML5中canvas是什麼？

Canvas是HTML中你可以繪製圖形的區域

我們如何使用Canvas來畫一條簡單的線？

  • 定義Canvas區域
  • 獲取訪問canvas上下文區域
  • 繪製圖形

定義Canvas區域

定義Canvas區域你需要使用下面的HTML代碼，這定義了你能進行繪圖的區域

XHTML
1
<canvas id = "mycanvas" width = "600" height = "500" style = "border:1px solid #000000;" > </canvas>

獲取畫布區域的訪問

在畫布上進行繪圖我們首先需要獲取上下文區域的關聯，下面是獲取畫布區域的代碼。

XHTML
1
2
var c =document .getElementById ( "mycanvas" ) ;
var ctx =c .getContext ( "2d" ) ;

繪製圖形

現在一旦你獲取了訪問上下文，我們就可以開始在上下文中繪製了。首先調用「move」方法並從一個點開始，使用線條方法繪製線條然後使用stroke方法結束。

XHTML
1
2
3
ctx .moveTo (10 ,10 ) ;
ctx .lineTo (200 ,100 ) ;
ctx .stroke ( ) ;

以下是完整的代碼

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
<body   onload = "DrawMe();" >
<canvas id = "mycanvas" width = "600" height = "500" style = "border:1px solid #000000;" > </canvas>
</body>
<script>
function DrawMe ( )
{
var c =document .getElementById ( "mycanvas" ) ;
var ctx =c .getContext ( "2d" ) ;
ctx .moveTo (10 ,10 ) ;
ctx .lineTo (200 ,100 ) ;
ctx .stroke ( ) ;
}

你可以得到以下輸出

image14

 

Canvas和SVG圖形的區別是什麼？

Note：-如果你看了之前的兩個的問題，Canvas和SVG都可以在瀏覽器上繪製圖形。因此在這個問題中，面試官想知道你在什麼時候選用哪種方式。

SVG Canvas
這個就好像繪製和記憶，換句話說任何使用SVG繪製的形狀都能被記憶和操作，瀏覽器可以再次顯示 Canvas就像繪製和忘記，一旦繪製完成你不能訪問像素和操作它
SVG對於創建圖形例如CAD軟件是良好的，一旦東西繪製，用戶就想去操作它 Canvas在繪製和忘卻的場景例如動畫和遊戲是良好的
因爲爲了之後的操作，需要記錄座標，所以比較緩慢 因爲沒有記住以後事情的意向，所以更快
我們可以用繪製對象的相關事件處理 我們不能使用繪製對象的相關事件處理，因爲我們沒有他們的參考
分辨率無關 分辨率相關

如何使用Canvas和HTML5中的SVG去畫一個矩形？
HTML5使用SVG繪製矩形的代碼

XHTML
1
2
3
<svg xmlns = "http://www.w3.org/2000/svg" version = "1.1" >
<rect style = "fill: rgb(0, 0, 255); stroke-width: 1px; stroke: rgb(0, 0, 0);" height = "[object SVGAnimatedLength]" width = "[object SVGAnimatedLength]" >
</rect>

HTML5使用Canvas繪製矩形的代碼

XHTML
1
2
3
4
var c =document .getElementById ( "mycanvas" ) ;
var ctx =c .getContext ( "2d" ) ;
ctx .rect (20 ,20 ,150 ,100 ) ;
ctx .stroke ( ) ;

CSS（cascading style sheets級聯樣式表）中的選擇器是什麼？
選擇器在你想應用一個樣式的時候，幫助你去選擇元素。舉例，下面是簡單的被命名爲」instro」的樣式，他適用於HTML元素顯示紅色背景

XHTML
1
2
3
4
5
<style>
.intro {
background-color : red ;
}
</style>

應用上面的」intro」樣式給div，我們可以使用」class」選擇器，如下圖所示

XHTML
1
2
3
4
<div class = "intro" >
<p> My name is Shivprasad koirala. </p>
<p> I write interview questions. </p>
</div>

如何使用ID值來應用一個CSS樣式？
假設，你有一個HTML段落標籤，使用id是」mytext」，就和下面的片段中顯示的那樣

XHTML
1
<p id = "mytext" > This is HTML interview questions. </p>

你可以使用」#」選擇器和」id」的名字創建一種樣式，並把CSS值應用到段落標籤中，因此應用樣式到」mytext」元素，我們可以使用」#mytext」，如下所示

XHTML
1
2
3
4
5
6
<style>
#mytext
{
background-color : yellow ;
}
</style>

迅速修訂一些重要的選擇器

設置所有段落標籤背景色爲黃色

XHTML
1
2
3
4
div p
{
background -color :yellow ;
}

設置所有div內部的段落標籤爲黃色背景

XHTML
1
2
3
4
div p
{
background -color :yellow ;
}

設置所有div之後的段落標籤爲黃色背景

XHTML
1
2
3
4
div +p
{
background -color :yellow ;
}

設置所有含有「target」屬性的變爲黃色背景

XHTML
1
2
3
4
5
6
7
a [target ]
{
background -color :yellow ;
}
<a href = "http://www.questpond.com" > ASP.NET interview questions </a>
<a href = "http://www.questpond.com" target = "_blank" > c# interview questions </a>
<a href = "http://www.questpond.org" target = "_top" > .NET interview questions with answers </a>

當控制得到焦點的時候設置所有的元素爲黃色背景

XHTML
1
2
3
4
input :focus
{
background -color :yellow ;
}

根據相關連接操作設置超鏈接樣式

XHTML
1
2
3
4
a :link      {color :green ; }
a :visited {color :green ; }
a :hover    {color :red ; }
a :active    {color :yellow ; }

CSS中使用列布局是什麼？
CSS列布局幫助你分割文本變爲列，例如考慮下面的雜誌新聞在一個大的文本中，但是我們需要在他們之間使用邊界劃分爲3列，這裏HTML5的列布局就有所幫助了

爲了實現列布局我們需要指定以下內容

  • 我們需要把text劃分爲多少列

指定列數我們需要使用column-count，對於Chrome和firefox分別需要」webkit」和「moz-column」

XHTML
1
2
3
-moz -column -count :3 ; / * Firefox * /
-webkit -column -count :3 ; / * Safari and Chrome * /
column -count :3 ;

  • 兩列之間我們想要多少差距

XHTML
1
2
3
-moz -column -gap :40px ; / * Firefox * /
-webkit -column -gap :40px ; / * Safari and Chrome * /
column -gap :20px ;

· 你想在這些列之間畫一條線麼？如果是，那麼多厚呢？

XHTML
1
2
3
-moz -column -rule :4px outset #ff00ff ; / * Firefox * /
-webkit -column -rule :4px outset #ff00ff ; / * Safari and Chrome * /
column -rule :6px outset #ff00ff ;

以下是完整代碼

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.magazine
{
-moz-column-count : 3 ; /* Firefox */
-webkit-column-count : 3 ; /* Safari and Chrome */
column-count : 3 ;
 
-moz-column-gap : 40px ; /* Firefox */
-webkit-column-gap : 40px ; /* Safari and Chrome */
column-gap : 20px ;
 
-moz-column-rule : 4px outset #ff00ff ; /* Firefox */
-webkit-column-rule : 4px outset #ff00ff ; /* Safari and Chrome */
column-rule : 6px outset #ff00ff ;
}
</style>

你可以使用class屬性來應用樣式到文本

XHTML
1
2
3
<div class = "magazine" >
Your text goes here which you want to divide in to 3 columns.
</div>

你能解釋一下CSS的盒子模型麼？
CSS和模型是圍繞在HTML元素周圍的定義Border(邊界)，padding(內邊距)和margin(外邊距)的矩形空間
Border(邊界)：定義了元素包含的最大區域，我們能夠使邊界可見，不可見，定義高度和寬度等；
Padding(內邊距)：定義了邊界和內部元素的間距
Margin：定義了邊界和任何相鄰元素的間距

例如以下是簡單的CSS代碼定義了盒子的邊界，內邊距和外邊距值

XHTML
1
2
3
4
5
6
.box {
    width : 200px ;
    border : 10px solid #99c ;
    padding : 20px ;
    margin : 50px ;
}

現在如果我們應用了以上的CSS到一個如下顯示的DIV標籤，你輸出將會和下面圖形中顯示的那樣。我已經創建兩個測試「Some text」和「Some other text」，因此我們能看到多少margin(外邊距)的屬性功能

XHTML
1
2
3
4
<div align = "middle" class = "box" >
Some text
</div>
Some other text

你能解釋一些CSS3中的文本效果麼？

這裏面試官期待你回答兩個Css的文本效果，以下是兩種需要注意的效果

陰影文本效果

XHTML
1
2
3
4
.specialtext
{
text -shadow : 5px 5px 5px #FF0000 ;
}

文字包裝效果

XHTML
1
2
3
4
<style>
.breakword
{ word-wrap : break-word ; }
</style>

什麼是Web Workers？爲什麼我們需要他們？
考慮以下會執行上百萬次的繁重的循環代碼

XHTML
1
2
3
4
5
6
7
function   SomeHeavyFunction ( )
{
for (i = 0 ; i < 10000000000000; i ++ )
{
x = i + x ;
}
}

比方說上面的循環代碼在HTML按鈕點擊以後執行，現在這個方法執行是同步的，換句話說這個瀏覽器必須等到循環完成才能操作

XHTML
1
<input type = "button" onclick = "SomeHeavyFunction();" />

這個會進一步導致瀏覽器凍結並且沒有相應，屏幕還會顯示如下的異常信息

如果你能移動這些繁重的循環到Javascript文件中，採用異步的方式運行，這意味着瀏覽器不需要等到循環接觸，我們可以有更敏感的瀏覽器，這就是web worker的作用

Web worker幫助我們用異步執行Javascript文件

Web Worker線程的限制是什麼？
Web worker線程不能修改HTML元素，全局變量和Window.Location一類的窗口屬性。你可以自由使用Javascript數據類型，XMLHttpRequest調用等。

我們如何在JavaScript中創建一個worker線程？
創建一個worker線程，我們需要通過Javascript文件名創建worker對象

XHTML
1
var worker = new Worker ( "MyHeavyProcess.js" ) ;

我們需要使用「PostMessage」發送信息給worker對象，下面是相同的代碼。

XHTML
1
worker .postMessage ( ) ;

當worker線程發送數據的時候，我們在調用結束的時候，通過」onMessage」事件獲取

XHTML
1
2
3
4
worker .onmessage = function (e )
{
document .getElementById ( "txt1" ) .value = e .data ;
} ;

這個繁重的循環在「MyHeavyProcess.js」的Javascript文件中，以下代碼，當Javascript文件想發送信息，他使用」postmessage」，同時任何來自發送者的信息都在「onmessage」事件中接收到。

XHTML
1
2
3
4
5
6
7
8
var x =0
self .onmessage = function (e ) {
    for (i = 0 ; i < 1000000000; i ++ )
     {
        x = i + x ;
     }
    self .postMessage (x ) ;
} ;

如何中止Web Worker?

XHTML
1
w .terminate ( ) ;

爲什麼我們需要HTML5的服務發送事件？
網絡世界的普遍需求是從服務器更新。以一個股票應用爲例，瀏覽器必須定期從服務器更新最新的股票值。

現在實現這類需求開發者通常寫一些PULL的代碼，到服務器同時抓取某些區間數據。現在PULL的解決方案是很好的，但是這使得網絡健談有很多的調用，同時增加了服務器的負擔。

因此相比於PULL，如果我們能採用某種PUSH的解決方案那會是很棒的。簡而言之，當服務器更新的時候，將會發送更新到瀏覽器客戶端，那可以被接受通過使用」SERVER SENT EVENT」

因此首要的是瀏覽器需要連接將會發送更新的服務器資源，比方說我們有一個」stock.aspx」頁面會發送股票更新，因此連接該頁面，我們需要使用附加時間來源對象，如下所示：

XHTML
1
var source = new EventSource ( "stock.aspx" ) ;

當我們將要接受服務器發送的更新信息時，我們需要附加功能。我們需要附加功能到」onmessage」事件就像以下顯示的那樣。

XHTML
1
2
3
source .onmessage = function (event ) {
  document .getElementById ( "result" ) .innerHTML += event .data + "<br>" ;
} ;

現在來自服務端，我們需要去發送事件，下面是一些用命令需要從服務端發送的重要事件列表

Event Command
發送數據到客戶端 data : hello
告訴客戶端10s內重試 retry : 10000
提出具體事件與數據 event : successdata : You are logged in.

因此，舉例說明，如果你想下面的ASP.NET代碼一樣發送數據，請標記內容類型設置給文本/事件

XHTML
1
2
3
4
Response . ContentType = "text/event-stream" ;
Response .Expires = -1 ;
Response .Write ( "data: " + DateTime .Now .ToString ( ) ) ;
Response .Flush ( ) ;

以下是設置10s後重試的命令

XHTML
1
Response .Write ( "retry: 10000" ) ;

如果你想附加事件，我們需要使用「addEventListener」事件，如下代碼所示：

XHTML
1
2
3
source .addEventListener ( 'message' , function (e ) {
  console .log (e .data ) ;
} , false ) ;

來自服務器端的以下信息將會觸發Javascript的」message」方法

XHTML
1
2
event : message
data : hello

HTML5中的本地存儲概念是什麼？
很多時候我們會存儲用戶本地信息到電腦上，例如：比方說用戶有一個填充了一半的長表格，然後突然網絡連接斷開了，這樣用戶希望你能存儲這些信息到本地，當網絡恢復的時候，他想獲取這些信息然後發送到服務器進行存儲
現代瀏覽器擁有的存儲被叫做「Local Storage」,你可以存儲這些信息。

我們如何從本地存儲中添加和移除數據？
數據添加到本地存儲採用鍵值對，以下示例顯示了城市數據」India」添加了鍵」Key001」

XHTML
1
localStorage .setItem (「Key001」 ,」India」 ) ;

從本地存儲中檢索數據我們可以提供鍵名並使用」getItem」方法

XHTML
1
var country = localStorage .getItem (「Key001」 ) ;

你也可以使用以下代碼，存儲Javascript對象在本地存儲中

XHTML
1
2
3
4
5
var country = { } ;
country .name = 「India」 ;
country .code = 「I001」 ;
localStorage .setItem (「I001」 , country ) ;
var country1 = localStorage .getItem (「I001」 ) ;

如果你想存儲Json格式，你可以使用「JSON.stringify」方法，如下所示：

XHTML
1
localStorage .setItem (「I001」 ,JSON .stringify (country ) ) ;

本地存儲的生命週期是什麼？
本地存儲沒有生命週期，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除。

本地存儲和cookies（儲存在用戶本地終端上的數據）之間的區別是什麼？

  Cookies Local storage
客戶端/服務端 客戶端和服務端都能訪問數據。Cookie的數據通過每一個請求發送到服務端 只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲直到故意通過POST或者GET的通道發送到服務器
大小 每個cookie有4095byte 每個域5MB
過期 Cookies有有效期，所以在過期之後cookie和cookie數據會被刪除 沒有過期數據，無論最後用戶從瀏覽器刪除或者使用Javascript程序刪除，我們都需要刪除

 

什麼是事務存儲？我們如何創建一個事務存儲？
會話存儲和本地存儲類似，但是數據在會話中有效，簡而言之數據在你關閉瀏覽器的時候就被刪除了。
爲了創建一個會話存儲你需要使用「sessionStorage.variablename.」在以下的代碼我們創建了一個名爲」clickcount」的變量；
如果你刷新瀏覽器則數目增加，但是如果你關閉瀏覽器，「clickcount」變量又會從0開始。

XHTML
1
2
3
4
5
6
7
8
if (sessionStorage .clickcount )
{
sessionStorage .clickcount =Number (sessionStorage .clickcount ) +1 ;
}
else
{
sessionStorage .clickcount = 0 ;
}

本地存儲和事務存儲之間的區別是什麼？
本地存儲數據持續永久，但是會話在瀏覽器打開時有效知道瀏覽器關閉時會話變量重置

什麼是WebSQL？
WebSQL是一個在瀏覽器客戶端的結構關係數據庫，這是瀏覽器內的本地RDBMS(關係型數據庫系統)，你可以使用SQL查詢

WebSql是HTML5的一個規範嗎？
不是，許多人把它標記爲HTML5，但是他不是HTML5的規範的一部分，這個規範是基於SQLite的

我們如何使用WebSQL？
第一步我們需要做的是使用如下所示的「OpenDatabase」方法打開數據庫，第一個參數是數據庫的名字，接下來是版本，然後是簡單原文標題，最後是數據庫大小；

XHTML
1
var db =openDatabase ( 'dbCustomer' , '1.0' ,'Customer app’ , 2 * 1024 * 1024 ) ;

爲了執行SQL，我們需要使用「transaction」方法，並調用」executeSql」方法來使用SQL

JavaScript
1
2
3
4
5
6
db . transaction ( function ( tx )
{
tx . executeSql ( 'CREATE TABLE IF NOT EXISTS tblCust(id unique, customername)' ) ;
tx . executeSql ( 'INSERT INTO tblcust (id, customername) VALUES(1, "shiv")' ) ;
tx . executeSql ( 'INSERT INTO tblcust (id, customername) VALUES (2, "raju")' ) ;
}

萬一你要使用「select」查詢你會得到數據」result」集合，我們可以通過循環展示到HTML的用戶界面

JavaScript
1
2
3
4
5
6
7
8
9
10
db . transaction ( function ( tx )
{
   tx . executeSql ( 'SELECT * FROM tblcust' , [ ] , function ( tx , results ) {
   for ( i = 0 ; i < len ; i ++ )
{
     msg = "<p><b>" + results . rows . item ( i ) . log + "</b></p>" ;
     document . querySelector (' # customer ) . innerHTML +=    msg ;
}
} , null ) ;
} ) ;

HTML5中的應用緩存是什麼？
一個最需要的事最終是用戶的離線瀏覽，換句話說，如果網絡連接不可用時，頁面應該來自瀏覽器緩存，離線應用緩存可以幫助你達到這個目的
應用緩存可以幫助你指定哪些文件需要緩存，哪些不需要。

HTML5中我們如何實現應用緩存？
首先我們需要指定」manifest」文件，「manifest」文件幫助你定義你的緩存如何工作。以下是」mainfest」文件的結構

XHTML
1
2
3
4
CACHE MANIFEST
# version 1 .0
CACHE :
Login .aspx

  • 所有manifest文件都以「CACHE MANIFEST」語句開始.
  • #（散列標籤）有助於提供緩存文件的版本.
  • CACHE 命令指出哪些文件需要被緩存.
  • Mainfest文件的內容類型應是「text/cache-manifest」.

以下是如何在ASP.NET C#使用manifest緩存

C#
1
2
3
4
5
6
7
Response . ContentType = "text/cache-manifest" ;
Response . Write ( "CACHE MANIFEST \n" ) ;
Response . Write ( "# 2012-02-21 v1.0.0 \n" ) ;
Response . Write ( "CACHE : \n" ) ;
Response . Write ( "Login.aspx \n" ) ;
Response . Flush ( ) ;
Response . End ( ) ;

創建一個緩存manifest文件以後，接下來的事情實在HTML頁面中提供mainfest連接，如下所示：

XHTML
1
<html manifest = "cache.aspx" >

當以上文件第一次運行，他會添加到瀏覽器應用緩存中，在服務器宕機時，頁面從應用緩存中獲取

我們如何刷新瀏覽器的應用緩存？
應用緩存通過變更「#」標籤後的版本版本號而被移除，如下所示：

XHTML
1
2
3
4
5
6
7
CACHE MANIFEST
# version 2 .0 (new )
CACHE :
Login .aspx
Aboutus .aspx
NETWORK :
Pages .aspx

應用緩存中的回退是什麼？ 應用緩存中的回退幫助你指定在服務器不可訪問的時候，將會顯示某文件。例如在下面的manifest文件中，我們說如果�

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程