內(nèi)容

　　介紹

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

　　這些問題不是你得到工作的高效解決方案，但是可以在你想快速復(fù)習(xí)相關(guān)主題的時候有所幫助。

　　快樂地找工作。

　　SGML（標(biāo)準(zhǔn)通用標(biāo)記語言）和HTML（超文本標(biāo)記語言），XML（可擴(kuò)展標(biāo)記語言）和HTML的之間有什么關(guān)系？

　　SGML（標(biāo)準(zhǔn)通用標(biāo)記語言）是一個標(biāo)準(zhǔn)，告訴我們怎么去指定文檔標(biāo)記。他是只描述文檔標(biāo)記應(yīng)該是怎么樣的元語言，HTML是被用SGML描述的標(biāo)記語言。

　　因此利用SGML創(chuàng)建了HTML參照和必須共同遵守的DTD，你會經(jīng)常在HTML頁面的頭部發(fā)現(xiàn)“DOCTYPE”屬性，用來定義用于解析目標(biāo)DTD 

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

　　現(xiàn)在解析SGML是一件痛苦的事情，所以創(chuàng)建了XML使事情更好。XML使用了SGML，例如：在SGML中你必須使用起始和結(jié)束標(biāo)簽，但是在XML你可以有自動關(guān)閉的結(jié)束標(biāo)簽。

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

<!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標(biāo)準(zhǔn)，他的主要目標(biāo)是提供所有內(nèi)容而不需要任何的像flash，silverlight等的額外插件，這些內(nèi)容來自動畫，視頻，富GUI等

　　HTML5是萬維網(wǎng)聯(lián)盟（W3C）和網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組（WHATWG）之間合作輸出的

　　為什么HTML5里面我們不需要DTD（Document Type Definition文檔類型定義）？

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

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

　　不會，瀏覽器將不能識別他是HTML文檔，同時HTML5的標(biāo)簽將不能正常工作

　　哪些瀏覽器支持HTML5？

　　幾乎所有的瀏覽器Safari，Chrome，F(xiàn)irefox，Opera，IE都支持HTML5

　　HTML5的頁面結(jié)構(gòu)同HTML4或者更前的HTML有什么區(qū)別？

　　一個典型的WEB頁面包含頭部，腳部，導(dǎo)航，中心區(qū)域，側(cè)邊欄?，F(xiàn)在如果我們想在在HTML4的HTML區(qū)域中呈現(xiàn)這些內(nèi)容，我們可能要使用DIV標(biāo)簽。

　　但是在HTML5中通過為這些區(qū)域創(chuàng)建元素名稱使他們更加清晰，也使得你的HTML更加可讀

　　以下是形成頁面結(jié)構(gòu)的HTML5元素的更多細(xì)節(jié)：

　　HTML5中的datalist是什么？

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

　　以下是DataList功能的HTML代碼： 

<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個元素

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

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

　　如果你想顯示日歷對話框 

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

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

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

　　如果你想創(chuàng)建一個含有email校驗(yàn)的HTML文本框，我們可以設(shè)置類型為“email” 

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

　　對于URL驗(yàn)證設(shè)置類型為”url”，如下圖顯示的HTML代碼 

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

　　如果你想用文本展示數(shù)字范圍，你可以設(shè)置類型為“number” 

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

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

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

　　想讓文本框作為搜索引擎 

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

　　想只能輸入時間 

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

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

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

　　HTML5中什么是輸出元素？

　　當(dāng)你需要計(jì)算兩個輸入的和值到一個標(biāo)簽中的時候你需要輸出元素。例如你有兩個文本框（如下圖），你想將來自這兩個輸入框中的數(shù)字求和并放到標(biāo)簽中。

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

<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”使其更加可讀 

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

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

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

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

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

　　下面是HTML5代碼 

<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中你可以繪制圖形的區(qū)域

　　我們?nèi)绾问褂肅anvas來畫一條簡單的線？

　　定義Canvas區(qū)域

　　定義Canvas區(qū)域你需要使用下面的HTML代碼，這定義了你能進(jìn)行繪圖的區(qū)域 

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

　　獲取畫布區(qū)域的訪問

　　在畫布上進(jìn)行繪圖我們首先需要獲取上下文區(qū)域的關(guān)聯(lián)，下面是獲取畫布區(qū)域的代碼。 

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

　　繪制圖形

　　現(xiàn)在一旦你獲取了訪問上下文，我們就可以開始在上下文中繪制了。首先調(diào)用“move”方法并從一個點(diǎn)開始，使用線條方法繪制線條然后使用stroke方法結(jié)束。 

ctx.moveTo(10,10);
ctx.lineTo(200,100);
ctx.stroke();

　　以下是完整的代碼 

<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圖形的區(qū)別是什么？

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

SVG Canvas
這個就好像繪制和記憶，換句話說任何使用SVG繪制的形狀都能被記憶和操作，瀏覽器可以再次顯示 Canvas就像繪制和忘記，一旦繪制完成你不能訪問像素和操作它
SVG對于創(chuàng)建圖形例如CAD軟件是良好的，一旦東西繪制，用戶就想去操作它 Canvas在繪制和忘卻的場景例如動畫和游戲是良好的
因?yàn)闉榱酥蟮牟僮?，需要記錄坐?biāo)，所以比較緩慢 因?yàn)闆]有記住以后事情的意向，所以更快
我們可以用繪制對象的相關(guān)事件處理 我們不能使用繪制對象的相關(guān)事件處理，因?yàn)槲覀儧]有他們的參考
分辨率無關(guān) 分辨率相關(guān)

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

　　HTML5使用SVG繪制矩形的代碼 

<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繪制矩形的代碼 

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

　　CSS（cascading style sheets級聯(lián)樣式表）中的選擇器是什么？

　　選擇器在你想應(yīng)用一個樣式的時候，幫助你去選擇元素。舉例，下面是簡單的被命名為”instro”的樣式，他適用于HTML元素顯示紅色背景 

<style>
.intro{
background-color:red;
}
</style>

　　應(yīng)用上面的”intro”樣式給div，我們可以使用”class”選擇器，如下圖所示 

<div class="intro">
<p>My name is Shivprasad koirala.</p>
<p>I write interview questions.</p>
</div>

　　如何使用ID值來應(yīng)用一個CSS樣式？

　　假設(shè)，你有一個HTML段落標(biāo)簽，使用id是”mytext”，就和下面的片段中顯示的那樣 

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

　　你可以使用”#”選擇器和”id”的名字創(chuàng)建一種樣式，并把CSS值應(yīng)用到段落標(biāo)簽中，因此應(yīng)用樣式到”mytext”元素，我們可以使用”#mytext”，如下所示 

<style>
#mytext
{
background-color:yellow;
}
</style>

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

　　設(shè)置所有段落標(biāo)簽背景色為黃色 

div p
{ 
background-color:yellow;
}

　　設(shè)置所有div內(nèi)部的段落標(biāo)簽為黃色背景 

div p
{ 
background-color:yellow;
}

　　設(shè)置所有div之后的段落標(biāo)簽為黃色背景 

div+p
{ 
background-color:yellow;
}

　　設(shè)置所有含有“target”屬性的變?yōu)辄S色背景 

a[target]
{ 
background-color:yellow;
}
<a >ASP.NET interview questions</a>
<a  target="_blank">c# interview questions</a>
<a  target="_top">.NET interview questions with answers</a>

　　當(dāng)控制得到焦點(diǎn)的時候設(shè)置所有的元素為黃色背景 

input:focus
{ 
background-color:yellow;
}

　　根據(jù)相關(guān)連接操作設(shè)置超鏈接樣式 

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

　　CSS中使用列布局是什么？

　　CSS列布局幫助你分割文本變?yōu)榱?，例如考慮下面的雜志新聞在一個大的文本中，但是我們需要在他們之間使用邊界劃分為3列，這里HTML5的列布局就有所幫助了

　　為了實(shí)現(xiàn)列布局我們需要指定以下內(nèi)容

　　指定列數(shù)我們需要使用column-count，對于Chrome和firefox分別需要”webkit”和“moz-column” 

-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>
.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屬性來應(yīng)用樣式到文本 

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

　　你能解釋一下CSS的盒子模型么？

　　CSS和模型是圍繞在HTML元素周圍的定義Border(邊界)，padding(內(nèi)邊距)和margin(外邊距)的矩形空間

　　Border(邊界)：定義了元素包含的最大區(qū)域，我們能夠使邊界可見，不可見，定義高度和寬度等；

　　Padding(內(nèi)邊距)：定義了邊界和內(nèi)部元素的間距

　　Margin：定義了邊界和任何相鄰元素的間距

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

.box {
    width: 200px;
    border: 10px solid #99c;
    padding: 20px;
    margin: 50px;
}

　　現(xiàn)在如果我們應(yīng)用了以上的CSS到一個如下顯示的DIV標(biāo)簽，你輸出將會和下面圖形中顯示的那樣。我已經(jīng)創(chuàng)建兩個測試“Some text”和“Some other text”，因此我們能看到多少margin(外邊距)的屬性功能 

<div align="middle" class="box">
Some text
</div>
Some other text

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

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

　　陰影文本效果 

.specialtext
{
text-shadow: 5px 5px 5px #FF0000;
}

　　文字包裝效果 

<style>
.breakword
{word-wrap:break-word;}
</style>

　　什么是Web Workers？為什么我們需要他們？

　　考慮以下會執(zhí)行上百萬次的繁重的循環(huán)代碼 

function  SomeHeavyFunction()
{
for (i = 0; i < 10000000000000; i++)
{
x = i + x;
}
}

　　比方說上面的循環(huán)代碼在HTML按鈕點(diǎn)擊以后執(zhí)行，現(xiàn)在這個方法執(zhí)行是同步的，換句話說這個瀏覽器必須等到循環(huán)完成才能操作 

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

　　這個會進(jìn)一步導(dǎo)致瀏覽器凍結(jié)并且沒有相應(yīng)，屏幕還會顯示如下的異常信息

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

　　Web worker幫助我們用異步執(zhí)行Javascript文件

　　Web Worker線程的限制是什么？

　　Web worker線程不能修改HTML元素，全局變量和Window.Location一類的窗口屬性。你可以自由使用Javascript數(shù)據(jù)類型，XMLHttpRequest調(diào)用等。

　　我們?nèi)绾卧贘avaScript中創(chuàng)建一個worker線程？

　　創(chuàng)建一個worker線程，我們需要通過Javascript文件名創(chuàng)建worker對象 

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

　　我們需要使用“PostMessage”發(fā)送信息給worker對象，下面是相同的代碼。 

worker.postMessage();

　　當(dāng)worker線程發(fā)送數(shù)據(jù)的時候，我們在調(diào)用結(jié)束的時候，通過”onMessage”事件獲取 

worker.onmessage = function (e) 
{
document.getElementById("txt1").value = e.data;
};

　　這個繁重的循環(huán)在“MyHeavyProcess.js”的Javascript文件中，以下代碼，當(dāng)Javascript文件想發(fā)送信息，他使用”postmessage”，同時任何來自發(fā)送者的信息都在“onmessage”事件中接收到。 

var x =0
self.onmessage = function (e) {
    for (i = 0; i < 1000000000; i++)
    {
        x = i + x;
    }
    self.postMessage(x);
};

　　如何中止Web Worker? 

w.terminate();

　　為什么我們需要HTML5的服務(wù)發(fā)送事件？

　　網(wǎng)絡(luò)世界的普遍需求是從服務(wù)器更新。以一個股票應(yīng)用為例，瀏覽器必須定期從服務(wù)器更新最新的股票值。

　　現(xiàn)在實(shí)現(xiàn)這類需求開發(fā)者通常寫一些PULL的代碼，到服務(wù)器同時抓取某些區(qū)間數(shù)據(jù)?，F(xiàn)在PULL的解決方案是很好的，但是這使得網(wǎng)絡(luò)健談有很多的調(diào)用，同時增加了服務(wù)器的負(fù)擔(dān)。

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

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

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

　　當(dāng)我們將要接受服務(wù)器發(fā)送的更新信息時，我們需要附加功能。我們需要附加功能到”onmessage”事件就像以下顯示的那樣。 

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

　　現(xiàn)在來自服務(wù)端，我們需要去發(fā)送事件，下面是一些用命令需要從服務(wù)端發(fā)送的重要事件列表

Event Command
發(fā)送數(shù)據(jù)到客戶端 data : hello
告訴客戶端10s內(nèi)重試 retry : 10000
提出具體事件與數(shù)據(jù) event : successdata : You are logged in.

　　因此，舉例說明，如果你想下面的ASP.NET代碼一樣發(fā)送數(shù)據(jù)，請標(biāo)記內(nèi)容類型設(shè)置給文本/事件 

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

　　以下是設(shè)置10s后重試的命令 

Response.Write("retry: 10000");

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

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

　　來自服務(wù)器端的以下信息將會觸發(fā)Javascript的”message”方法 

event: message
data : hello

　　HTML5中的本地存儲概念是什么？

　　很多時候我們會存儲用戶本地信息到電腦上，例如：比方說用戶有一個填充了一半的長表格，然后突然網(wǎng)絡(luò)連接斷開了，這樣用戶希望你能存儲這些信息到本地，當(dāng)網(wǎng)絡(luò)恢復(fù)的時候，他想獲取這些信息然后發(fā)送到服務(wù)器進(jìn)行存儲
現(xiàn)代瀏覽器擁有的存儲被叫做“Local Storage”,你可以存儲這些信息。

　　我們?nèi)绾螐谋镜卮鎯χ刑砑雍鸵瞥龜?shù)據(jù)？

　　數(shù)據(jù)添加到本地存儲采用鍵值對，以下示例顯示了城市數(shù)據(jù)”India”添加了鍵”Key001” 

localStorage.setItem(“Key001”,”India”);

　　從本地存儲中檢索數(shù)據(jù)我們可以提供鍵名并使用”getItem”方法 

var country = localStorage.getItem(“Key001”);

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

var country = {};
country.name = “India”;
country.code = “I001”;
localStorage.setItem(“I001”, country);
var country1 = localStorage.getItem(“I001”);

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

localStorage.setItem(“I001”,JSON.stringify(country));

　　本地存儲的生命周期是什么？

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

　　本地存儲和cookies（儲存在用戶本地終端上的數(shù)據(jù)）之間的區(qū)別是什么？

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

 

　　什么是事務(wù)存儲？我們?nèi)绾蝿?chuàng)建一個事務(wù)存儲？

　　會話存儲和本地存儲類似，但是數(shù)據(jù)在會話中有效，簡而言之?dāng)?shù)據(jù)在你關(guān)閉瀏覽器的時候就被刪除了。

　　為了創(chuàng)建一個會話存儲你需要使用“sessionStorage.variablename.”在以下的代碼我們創(chuàng)建了一個名為”clickcount”的變量；

　　如果你刷新瀏覽器則數(shù)目增加，但是如果你關(guān)閉瀏覽器，“clickcount”變量又會從0開始。 

if(sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount = 0;
}

　　本地存儲和事務(wù)存儲之間的區(qū)別是什么？
本地存儲數(shù)據(jù)持續(xù)永久，但是會話在瀏覽器打開時有效知道瀏覽器關(guān)閉時會話變量重置

　　什么是WebSQL？

　　WebSQL是一個在瀏覽器客戶端的結(jié)構(gòu)關(guān)系數(shù)據(jù)庫，這是瀏覽器內(nèi)的本地RDBMS(關(guān)系型數(shù)據(jù)庫系統(tǒng))，你可以使用SQL查詢

　　WebSql是HTML5的一個規(guī)范嗎？

　　不是，許多人把它標(biāo)記為HTML5，但是他不是HTML5的規(guī)范的一部分，這個規(guī)范是基于SQLite的

　　我們?nèi)绾问褂肳ebSQL？

　　第一步我們需要做的是使用如下所示的“OpenDatabase”方法打開數(shù)據(jù)庫，第一個參數(shù)是數(shù)據(jù)庫的名字，接下來是版本，然后是簡單原文標(biāo)題，最后是數(shù)據(jù)庫大小； 

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

　　為了執(zhí)行SQL，我們需要使用“transaction”方法，并調(diào)用”executeSql”方法來使用SQL 

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”查詢你會得到數(shù)據(jù)”result”集合，我們可以通過循環(huán)展示到HTML的用戶界面 

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中的應(yīng)用緩存是什么？

　　一個最需要的事最終是用戶的離線瀏覽，換句話說，如果網(wǎng)絡(luò)連接不可用時，頁面應(yīng)該來自瀏覽器緩存，離線應(yīng)用緩存可以幫助你達(dá)到這個目的

　　應(yīng)用緩存可以幫助你指定哪些文件需要緩存，哪些不需要。

　　HTML5中我們?nèi)绾螌?shí)現(xiàn)應(yīng)用緩存？

　　首先我們需要指定”manifest”文件，“manifest”文件幫助你定義你的緩存如何工作。以下是”mainfest”文件的結(jié)構(gòu) 

CACHE MANIFEST
# version 1.0
CACHE :
Login.aspx

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

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();

　　創(chuàng)建一個緩存manifest文件以后，接下來的事情實(shí)在HTML頁面中提供mainfest連接，如下所示： 

<html manifest="cache.aspx">

　　當(dāng)以上文件第一次運(yùn)行，他會添加到瀏覽器應(yīng)用緩存中，在服務(wù)器宕機(jī)時，頁面從應(yīng)用緩存中獲取

　　我們?nèi)绾嗡⑿聻g覽器的應(yīng)用緩存？

　　應(yīng)用緩存通過變更“#”標(biāo)簽后的版本版本號而被移除，如下所示： 

CACHE MANIFEST
# version 2.0(new)
CACHE :
Login.aspx
Aboutus.aspx
NETWORK :
Pages.aspx

　　應(yīng)用緩存中的回退是什么？

　　應(yīng)用緩存中的回退幫助你指定在服務(wù)器不可訪問的時候，將會顯示某文件。例如在下面的manifest文件中，我們說如果誰敲擊了”/home”同時服務(wù)器不可到達(dá)的時候，”homeoffline.html”文件應(yīng)送達(dá) 

FALLBACK:
/home/ /homeoffline.html

　　應(yīng)用緩存中的網(wǎng)絡(luò)是什么？

　　網(wǎng)絡(luò)命令描述不需要緩存的文件，例如以下代碼中，我們說”home.aspx”永遠(yuǎn)都不應(yīng)該被緩存或者離線訪問。 

NETWORK:
home.aspx

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。