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