2018-05-22 40 個(gè)重要的 HTML5 面試題及答案

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

SGML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言)是一個(gè)標(biāo)準(zhǔn),告訴我們?cè)趺慈ブ付ㄎ臋n標(biāo)記厌丑。他是只描述文檔標(biāo)記應(yīng)該是怎么樣的元語(yǔ)言击奶,HTML是被用SGML描述的標(biāo)記語(yǔ)言。

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

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

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

總之,SGML是所有類(lèi)型的父類(lèi)硫麻,較舊的HTML利用SGML爸邢,HTML4.0使用派生自XML的XHTML

什么是HTML5?

HTML5是最新的HTML標(biāo)準(zhǔn)拿愧,他的主要目標(biāo)是提供所有內(nèi)容而不需要任何的像flash杠河,silverlight等的額外插件,這些內(nèi)容來(lái)自動(dòng)畫(huà)浇辜,視頻券敌,富GUI等

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

為什么HTML5里面我們不需要DTD(文檔類(lèi)型定義Document?Type?Definition)?

HTML5沒(méi)有使用SGML或者XHTML柳洋,他是一個(gè)全新的東西待诅,因此你不需要參考DTD,對(duì)于HTML5熊镣,你僅需放置下面的文檔類(lèi)型代碼告訴瀏覽器識(shí)別這是HTML5文檔

如果我不放入?卑雁,HTML5還會(huì)工作么?

不會(huì)绪囱,瀏覽器將不能識(shí)別他是HTML文檔序厉,同時(shí)HTML5的標(biāo)簽將不能正常工作

哪些瀏覽器支持HTML5?

幾乎所有的瀏覽器Safari毕箍,Chrome弛房,F(xiàn)irefox,Opera而柑,IE都支持HTML5

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

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

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

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

:代表HTML的頭部數(shù)據(jù)

:頁(yè)面的腳部區(qū)域

:頁(yè)面導(dǎo)航元素

:自包含的內(nèi)容

:使用內(nèi)部article去定義區(qū)域或者把分組內(nèi)容放到區(qū)域里

:代表頁(yè)面的側(cè)邊欄內(nèi)容

HTML5中的datalist是什么射富?

HTML5中的Datalist元素有助于提供文本框自動(dòng)完成特性膝迎,如下圖所示:

以下是DataList功能的HTML代碼:

HTML5中什么是不同的新的表單元素類(lèi)型?

這里有10個(gè)重要的新的表單元素在HTML5中被介紹

Color

Date

Datetime-local

Email

Time

Url

Range

Telephone

Number

Search

讓我們一步一步了解這10個(gè)元素

如果你想顯示顏色選擇對(duì)話(huà)框

如果你想顯示日歷對(duì)話(huà)框

如果你想顯示含有本地時(shí)間的日歷

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

對(duì)于URL驗(yàn)證設(shè)置類(lèi)型為”url”限次,如下圖顯示的HTML代碼

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

如果你想顯示范圍控制柴灯,你可以使用類(lèi)型”range”

想讓文本框作為搜索引擎

想只能輸入時(shí)間

如果你想使用文本框接受電話(huà)號(hào)碼

HTML5中什么是輸出元素卖漫?

當(dāng)你需要計(jì)算兩個(gè)輸入的和值到一個(gè)標(biāo)簽中的時(shí)候你需要輸出元素。例如你有兩個(gè)文本框(如下圖)赠群,你想將來(lái)自這兩個(gè)輸入框中的數(shù)字求和并放到標(biāo)簽中羊始。

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

?+

?=

為了簡(jiǎn)單起見(jiàn),你也可以使用“valueAsNumber”來(lái)代替“parseInt”查描。你同樣能在output元素中使用“for”使其更加可讀

什么是SVG(可縮放矢量圖形Scalable?Vector?Graphics)突委?

SVG(可縮放矢量圖形Scalable?Vector?Graphics)表示可縮放矢量圖形。他是基于文本的圖形語(yǔ)言叹誉,使用文本,線(xiàn)條闷旧,點(diǎn)等來(lái)進(jìn)行圖像繪制长豁,這使得他輕便,顯示更加迅速忙灼。

我們能看到使用HTML5的SVG的簡(jiǎn)單例子么匠襟?

比方說(shuō),我們希望使用HTML5?SVG去顯示以下簡(jiǎn)單的線(xiàn)條

下面是HTML5代碼

HTML5中canvas是什么该园?

Canvas是HTML中你可以繪制圖形的區(qū)域酸舍。

我們?nèi)绾问褂肅anvas來(lái)畫(huà)一條簡(jiǎn)單的線(xiàn)?

定義Canvas區(qū)域

獲取訪(fǎng)問(wèn)canvas上下文區(qū)域

繪制圖形

定義Canvas區(qū)域

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

獲取畫(huà)布區(qū)域的訪(fǎng)問(wèn)

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

var?c=document.getElementById("mycanvas");

var?ctx=c.getContext("2d");

繪制圖形

現(xiàn)在一旦你獲取了訪(fǎng)問(wèn)上下文双妨,我們就可以開(kāi)始在上下文中繪制了淮阐。首先調(diào)用“move”方法并從一個(gè)點(diǎn)開(kāi)始,使用線(xiàn)條方法繪制線(xiàn)條然后使用stroke方法結(jié)束刁品。

ctx.moveTo(10,10);

ctx.lineTo(200,100);

ctx.stroke();

以下是完整的代碼

function DrawMe()

{

var c=document.getElementById("mycanvas");

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

ctx.moveTo(10,10);

ctx.lineTo(200,100);

ctx.stroke();

}

你可以得到以下輸出

Canvas和SVG圖形的區(qū)別是什么泣特?

Note:-如果你看了之前的兩個(gè)的問(wèn)題,Canvas和SVG都可以在瀏覽器上繪制圖形挑随。因此在這個(gè)問(wèn)題中状您,面試官想知道你在什么時(shí)候選用哪種方式。

SVGCanvas

這個(gè)就好像繪制和記憶,換句話(huà)說(shuō)任何使用SVG繪制的形狀都能被記憶和操作膏孟,瀏覽器可以再次顯示Canvas就像繪制和忘記眯分,一旦繪制完成你不能訪(fǎng)問(wèn)像素和操作它

SVG對(duì)于創(chuàng)建圖形例如CAD軟件是良好的,一旦東西繪制骆莹,用戶(hù)就想去操作它Canvas在繪制和忘卻的場(chǎng)景例如動(dòng)畫(huà)和游戲是良好的

因?yàn)闉榱酥蟮牟僮骺怕В枰涗涀鴺?biāo),所以比較緩慢因?yàn)闆](méi)有記住以后事情的意向幕垦,所以更快

我們可以用繪制對(duì)象的相關(guān)事件處理我們不能使用繪制對(duì)象的相關(guān)事件處理丢氢,因?yàn)槲覀儧](méi)有他們的參考

分辨率無(wú)關(guān)分辨率相關(guān)

如何使用Canvas和HTML5中的SVG去畫(huà)一個(gè)矩形?

HTML5使用SVG繪制矩形的代碼

HTML5使用Canvas繪制矩形的代碼

var?c=document.getElementById("mycanvas");

var?ctx=c.getContext("2d");

ctx.rect(20,20,150,100);

ctx.stroke();

CSS(級(jí)聯(lián)樣式表cascading style sheets)中的選擇器是什么先改?

選擇器在你想應(yīng)用一個(gè)樣式的時(shí)候疚察,幫助你去選擇元素。舉例仇奶,下面是簡(jiǎn)單的被命名為”instro”的樣式貌嫡,他適用于HTML元素顯示紅色背景

.intro{

background-color:red;

}

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

My name is Shivprasad koirala.

I write interview questions.

如何使用ID值來(lái)應(yīng)用一個(gè)CSS樣式岛抄?

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

This is HTML interview questions.

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

#mytext

{

background-color:yellow;

}

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

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

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;

}

ASP.NET interview questions

c#?interview questions

.NET interview questions?withanswers

當(dāng)控制得到焦點(diǎn)的時(shí)候設(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)榱腥侍郑缈紤]下面的雜志新聞在一個(gè)大的文本中,但是我們需要在他們之間使用邊界劃分為3列实昨,這里HTML5的列布局就有所幫助了

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

我們需要把text劃分為多少列

指定列數(shù)我們需要使用column-count洞豁,對(duì)于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;

你想在這些列之間畫(huà)一條線(xiàn)么?

如果是荒给,那么多厚呢族跛?

-moz-column-rule:4px?outset?#ff00ff;?/* Firefox */

-webkit-column-rule:4px?outset?#ff00ff;?/* Safari and Chrome */

column-rule:6px?outset?#ff00ff;

以下是完整代碼

.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;

}

你可以使用class屬性來(lái)應(yīng)用樣式到文本

Your text goes here which you want to divide in to 3 columns.

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

CSS和模型是圍繞在HTML元素周?chē)亩xBorder邊界锐墙,padding內(nèi)邊距和margin外邊距的矩形空間

Border邊界:定義了元素包含的最大區(qū)域礁哄,我們能夠使邊界可見(jiàn),不可見(jiàn)溪北,定義高度和寬度等桐绒;

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

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

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

.box?{

width:?200px;

border:?10px?solid?#99c;

padding:?20px;

margin:?50px;

}

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

Some text

Some other text

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

這里面試官期待你回答兩個(gè)CSS的文本效果烁竭,以下是兩種需要注意的效果

陰影文本效果

.specialtext

{

text-shadow:?5px?5px?5px?#FF0000;

}

文字包裝效果

.breakword

{word-wrap:break-word;}

什么是Web Workers菲茬?為什么我們需要他們?

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

function?SomeHeavyFunction()

{

for?(i?=?0;?i?<?10000000000000;?i++)

{

x?=?i?+?x;

}

}

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

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

如果你能移動(dòng)這些繁重的循環(huán)到Javascript文件中终吼,采用異步的方式運(yùn)行镀赌,這意味著瀏覽器不需要等到循環(huán)接觸,我們可以有更敏感的瀏覽器际跪,這就是web?worker的作用商佛。

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

Web Worker線(xiàn)程的限制是什么姆打?

Web worker線(xiàn)程不能修改HTML元素良姆,全局變量和Window.Location一類(lèi)的窗口屬性。你可以自由使用Javascript數(shù)據(jù)類(lèi)型幔戏,XMLHttpRequest調(diào)用等玛追。

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

創(chuàng)建一個(gè)worker線(xiàn)程评抚,我們需要通過(guò)Javascript文件名創(chuàng)建worker對(duì)象

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

我們需要使用“PostMessage”發(fā)送信息給worker對(duì)象豹缀,下面是相同的代碼伯复。

worker.postMessage();

當(dāng)worker線(xiàn)程發(fā)送數(shù)據(jù)的時(shí)候慨代,我們?cè)谡{(diào)用結(jié)束的時(shí)候,通過(guò)”onMessage”事件獲取

worker.onmessage?=?function?(e)

{

document.getElementById("txt1").value?=?e.data;

};

這個(gè)繁重的循環(huán)在“MyHeavyProcess.js”的Javascript文件中啸如,以下代碼侍匙,當(dāng)Javascript文件想發(fā)送信息,他使用”postmessage”叮雳,同時(shí)任何來(lái)自發(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ù)器更新帘不。以一個(gè)股票應(yīng)用為例说莫,瀏覽器必須定期從服務(wù)器更新最新的股票值。

現(xiàn)在實(shí)現(xiàn)這類(lèi)需求開(kāi)發(fā)者通常寫(xiě)一些PULL的代碼寞焙,到服務(wù)器同時(shí)抓取某些區(qū)間數(shù)據(jù)〈⑾粒現(xiàn)在PULL的解決方案是很好的互婿,但是這使得網(wǎng)絡(luò)健談?dòng)泻芏嗟恼{(diào)用,同時(shí)增加了服務(wù)器的負(fù)擔(dān)辽狈。

因此相比于PULL慈参,如果我們能采用某種PUSH的解決方案那會(huì)是很棒的。簡(jiǎn)而言之刮萌,當(dāng)服務(wù)器更新的時(shí)候驮配,將會(huì)發(fā)送更新到瀏覽器客戶(hù)端,那可以被接受通過(guò)使用”SERVER?SENT?EVENT”

因此首要的是瀏覽器需要連接將會(huì)發(fā)送更新的服務(wù)器資源着茸,比方說(shuō)我們有一個(gè)”stock.aspx”頁(yè)面會(huì)發(fā)送股票更新壮锻,因此連接該頁(yè)面,我們需要使用附加時(shí)間來(lái)源對(duì)象元扔,如下所示:

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

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

source.onmessage?=?function?(event)?{

document.getElementById("result").innerHTML?+=?event.data?+?"
";

};

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

EventCommand

發(fā)送數(shù)據(jù)到客戶(hù)端data?:?hello

告訴客戶(hù)端10s內(nèi)重試retry?:?10000

提出具體事件與數(shù)據(jù)event?:?successdata?:?You?are?logged?in.

因此擅羞,舉例說(shuō)明尸变,如果你想下面的ASP.NET代碼一樣發(fā)送數(shù)據(jù),請(qǐng)標(biāo)記內(nèi)容類(lè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);

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

event:?message

data?:?hello

HTML5中的本地存儲(chǔ)概念是什么?

很多時(shí)候我們會(huì)存儲(chǔ)用戶(hù)本地信息到電腦上娃承,例如:比方說(shuō)用戶(hù)有一個(gè)填充了一半的長(zhǎng)表格奏夫,然后突然網(wǎng)絡(luò)連接斷開(kāi)了挑秉,這樣用戶(hù)希望你能存儲(chǔ)這些信息到本地承边,當(dāng)網(wǎng)絡(luò)恢復(fù)的時(shí)候,他想獲取這些信息然后發(fā)送到服務(wù)器進(jìn)行存儲(chǔ)

現(xiàn)代瀏覽器擁有的存儲(chǔ)被叫做“Local Storage”,你可以存儲(chǔ)這些信息闺骚。

我們?nèi)绾螐谋镜卮鎯?chǔ)中添加和移除數(shù)據(jù)梳猪?

數(shù)據(jù)添加到本地存儲(chǔ)采用鍵值對(duì)麻削,以下示例顯示了城市數(shù)據(jù)”India”添加了鍵”Key001”

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

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

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

你也可以使用以下代碼,存儲(chǔ)Javascript對(duì)象在本地存儲(chǔ)中

var?country?=?{};

country.name?=?“India”;

country.code?=?“I001”;

localStorage.setItem(“I001”,?country);

var?country1?=?localStorage.getItem(“I001”);

如果你想存儲(chǔ)Json格式春弥,你可以使用“JSON.stringify”方法呛哟,如下所示:

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

本地存儲(chǔ)的生命周期是什么?

本地存儲(chǔ)沒(méi)有生命周期匿沛,它將保留知道用戶(hù)從瀏覽器清除或者使用Javascript代碼移除扫责。

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

?CookiesLocal?storage

客戶(hù)端/服務(wù)端客戶(hù)端和服務(wù)端都能訪(fǎng)問(wèn)數(shù)據(jù)逃呼。Cookie的數(shù)據(jù)通過(guò)每一個(gè)請(qǐng)求發(fā)送到服務(wù)端只有本地瀏覽器端可訪(fǎng)問(wèn)數(shù)據(jù)鳖孤,服務(wù)器不能訪(fǎng)問(wèn)本地存儲(chǔ)直到故意通過(guò)POST或者GET的通道發(fā)送到服務(wù)器

大小每個(gè)cookie有4095byte每個(gè)域5MB

過(guò)期Cookies有有效期借帘,所以在過(guò)期之后cookie和cookie數(shù)據(jù)會(huì)被刪除沒(méi)有過(guò)期數(shù)據(jù),無(wú)論最后用戶(hù)從瀏覽器刪除或者使用Javascript程序刪除淌铐,我們都需要?jiǎng)h除

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

會(huì)話(huà)存儲(chǔ)和本地存儲(chǔ)類(lèi)似腿准,但是數(shù)據(jù)在會(huì)話(huà)中有效际起,簡(jiǎn)而言之?dāng)?shù)據(jù)在你關(guān)閉瀏覽器的時(shí)候就被刪除了。

為了創(chuàng)建一個(gè)會(huì)話(huà)存儲(chǔ)你需要使用“sessionStorage.variablename.”在以下的代碼我們創(chuàng)建了一個(gè)名為”clickcount”的變量吐葱;

如果你刷新瀏覽器則數(shù)目增加街望,但是如果你關(guān)閉瀏覽器,“clickcount”變量又會(huì)從0開(kāi)始弟跑。

if(sessionStorage.clickcount)

{

sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;

}

else

{

sessionStorage.clickcount?=?0;

}

本地存儲(chǔ)和事務(wù)存儲(chǔ)之間的區(qū)別是什么灾前?

本地存儲(chǔ)數(shù)據(jù)持續(xù)永久,但是會(huì)話(huà)在瀏覽器打開(kāi)時(shí)有效知道瀏覽器關(guān)閉時(shí)會(huì)話(huà)變量重置

什么是WebSQL孟辑?

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

WebSql是HTML5的一個(gè)規(guī)范嗎炭玫?

不是,許多人把它標(biāo)記為HTML5貌虾,但是他不是HTML5的規(guī)范的一部分吞加,這個(gè)規(guī)范是基于SQLite的。

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

第一步我們需要做的是使用如下所示的“OpenDatabase”方法打開(kāi)數(shù)據(jù)庫(kù)衔憨,第一個(gè)參數(shù)是數(shù)據(jù)庫(kù)的名字,接下來(lái)是版本袄膏,然后是簡(jiǎn)單原文標(biāo)題践图,最后是數(shù)據(jù)庫(kù)大小哩陕;

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

為了執(zhí)行SQL平项,我們需要使用“transaction”方法赫舒,并調(diào)用”executeSql”方法來(lái)使用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")');

}

萬(wàn)一你要使用“select”查詢(xún)你會(huì)得到數(shù)據(jù)”result”集合悍及,我們可以通過(guò)循環(huán)展示到HTML的用戶(hù)界面

db.transaction(function?(tx)

{

tx.executeSql('SELECT * FROM tblcust',?[],?function?(tx,?results)?{

for?(i?=?0;?i?<?len;?i++)

{

msg?=?"

"?+?results.rows.item(i).log?+?"

";

document.querySelector('#customer).innerHTML += msg;

}

}, null);

});

HTML5中的應(yīng)用緩存是什么?

一個(gè)最需要的事最終是用戶(hù)的離線(xiàn)瀏覽接癌,換句話(huà)說(shuō)心赶,如果網(wǎng)絡(luò)連接不可用時(shí),頁(yè)面應(yīng)該來(lái)自瀏覽器緩存缺猛,離線(xiàn)應(yīng)用緩存可以幫助你達(dá)到這個(gè)目的

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

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

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

CACHE MANIFEST

#?version?1.0

CACHE?:

Login.aspx

所有manifest文件都以“CACHE?MANIFEST”語(yǔ)句開(kāi)始.

#(散列標(biāo)簽)有助于提供緩存文件的版本.

CACHE?命令指出哪些文件需要被緩存.

Mainfest文件的內(nèi)容類(lèi)型應(yīng)是“text/cache-manifest”.

以下是如何在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)建一個(gè)緩存manifest文件以后,接下來(lái)的事情實(shí)在HTML頁(yè)面中提供mainfest連接琐簇,如下所示:

當(dāng)以上文件第一次運(yùn)行蒸健,他會(huì)添加到瀏覽器應(yīng)用緩存中,在服務(wù)器宕機(jī)時(shí)婉商,頁(yè)面從應(yīng)用緩存中獲取似忧。

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

應(yīng)用緩存通過(guò)變更“#”標(biāo)簽后的版本版本號(hào)而被移除丈秩,如下所示:

CACHE MANIFEST

#?version?2.0(new)

CACHE?:

Login.aspx

Aboutus.aspx

NETWORK?:

Pages.aspx

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

應(yīng)用緩存中的回退幫助你指定在服務(wù)器不可訪(fǎng)問(wèn)的時(shí)候,將會(huì)顯示某文件蘑秽。例如在下面的manifest文件中饺著,我們說(shuō)如果誰(shuí)敲擊了”/home”同時(shí)服務(wù)器不可到達(dá)的時(shí)候,”homeoffline.html”文件應(yīng)送達(dá)肠牲。

FALLBACK:

/home/?/homeoffline.html

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

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

NETWORK:

home.aspx

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市俏险,隨后出現(xiàn)的幾起案子严拒,更是在濱河造成了極大的恐慌,老刑警劉巖竖独,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件裤唠,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡莹痢,警方通過(guò)查閱死者的電腦和手機(jī)种蘸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)竞膳,“玉大人航瞭,你說(shuō)我怎么就攤上這事√贡伲” “怎么了刊侯?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)锉走。 經(jīng)常有香客問(wèn)我滨彻,道長(zhǎng)藕届,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任亭饵,我火速辦了婚禮休偶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘辜羊。我一直安慰自己椅贱,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布只冻。 她就那樣靜靜地躺著庇麦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪喜德。 梳的紋絲不亂的頭發(fā)上山橄,一...
    開(kāi)封第一講書(shū)人閱讀 51,155評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音舍悯,去河邊找鬼航棱。 笑死,一個(gè)胖子當(dāng)著我的面吹牛萌衬,可吹牛的內(nèi)容都是我干的饮醇。 我是一名探鬼主播,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼秕豫,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼朴艰!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起混移,我...
    開(kāi)封第一講書(shū)人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤祠墅,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后歌径,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體毁嗦,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年回铛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了狗准。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡茵肃,死狀恐怖腔长,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情免姿,我是刑警寧澤饼酿,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布榕酒,位于F島的核電站胚膊,受9級(jí)特大地震影響故俐,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜紊婉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一药版、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧喻犁,春花似錦槽片、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至传轰,卻和暖如春剩盒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背慨蛙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工辽聊, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人期贫。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓跟匆,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親通砍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子玛臂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容