1、問答知道的網(wǎng)頁制作會用到的圖片格式有哪些？

Webp：WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%

2、問答1.SGML（標(biāo)準(zhǔn)通用標(biāo)記語言）和HTML（超文本標(biāo)記語)

解析：①HTML是SGML的一個實例，它的DTD作為標(biāo)準(zhǔn)被固定下來，因此，HTML不能作為定義其它置標(biāo)語言的元語言。XML是SGML的一個子集，嚴(yán)格地講，XML也還是SGML。與HTML不同的是，XML有DTD，因而也可以象SGML那樣，作為元語言，來定義其它文件系統(tǒng)，或稱其它置標(biāo)語言。如果把置標(biāo)語言分為元置標(biāo)語言和實例置標(biāo)語言的話，SGML和XML都是元置標(biāo)語言，而HTML和由XML派生的XHTML都是實例置標(biāo)語言。②SGML(standard general markup language)是一種在WEB發(fā)明之前就已存在的使用標(biāo)記來描述文檔資料的通用語言，它是一種定義標(biāo)記語言的元語言，HTML和XML都是由SGML發(fā)展過來的.HTML(HyperText Markup Language)是SGML定義下的一個描述性的語言，是SGML的一個應(yīng)用，它不能用來定義新的應(yīng)用，HTML，用于一些Internet的短期的數(shù)據(jù).HTMI文檔格式非常松散，導(dǎo)致解析的復(fù)雜性增加，也導(dǎo)致了不同瀏覽器瀏覽的不同.XML(extend MarkUp Lanuage)是SGML的一個簡化版本，是SGML的一個子集，嚴(yán)格意義上講，XML就是SGML.如果一些數(shù)據(jù)要長期使用，并且要更多的一些結(jié)構(gòu)，XML將更好.XML比HTML嚴(yán)格，如果出現(xiàn)語法錯誤，瀏覽器將不發(fā)解析顯示

③ 標(biāo)準(zhǔ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//DTDHTML 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“Q!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。

3、你對CSS中的浮動的理解以及如何清理浮動

浮動的元素 脫離標(biāo)準(zhǔn)文檔流（后面簡稱：脫標(biāo)）。

浮動的元素可以并排（包含div之類塊級元素），并且可以設(shè)置寬和高。因為行內(nèi)元素不能設(shè)置寬和高是標(biāo)準(zhǔn)文檔流的限制，所以脫標(biāo)之后就沒有這些限制。（絕對定位、固定定位也可以脫離標(biāo)準(zhǔn)文檔流）

我們可以理解浮動的元素，先浮（脫標(biāo)）再動（left），那么脫標(biāo)之后，該元素就不占有標(biāo)準(zhǔn)文檔流的空間，標(biāo)準(zhǔn)文檔流的其他元素還是按照從上而下排列。這里可以理解成上下倆層空間的。

一個span元素浮動之后就可以設(shè)置寬和高，那么就代表在浮動的世界里，沒有塊級和行內(nèi)元素之分。一個元素一旦浮動了，無論它是塊級的還是行內(nèi)的，就能夠并排，能夠設(shè)置寬和高。

清除浮動的原因：

1.因為浮動的元素實際上不占有高，那么沒有高的盒子，就沒有安全感。例如，想設(shè)置下margin都沒有辦法。

2.因為浮動的元素對其它元素有影響，該影響就是布局混亂。例如，想用2個ul做2行元素都沒辦法實現(xiàn)。

注意：沒有高度的父盒子是管不住浮動的兒子的對其他元素的影響的。

清除浮動的方法：

1.給父盒子加高（height）

這個方法不推薦，因為網(wǎng)站開發(fā)過程中需要浮動的元素比較多，通過加高的方法會使得css代碼變多，拖慢頁面加載速度。

2.外墻法（在盒子外面添加一個帶有clear：both屬性的盒子）

3.內(nèi)墻法（給盒子加上clear：both屬性，推薦使用）

4.溢出影藏(overflow:hidden)

給一個盒子添加了overflow:hidden,該盒子就會有高度,也可以用來清楚浮動的影響.

4、 CSS引入的方式有哪些？Link和@import的區(qū)別是？

引入方式：
行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。

一、行內(nèi)樣式

使用style屬性引入CSS樣式。

二、內(nèi)部樣式表

在style標(biāo)簽中書寫CSS代碼。style標(biāo)簽寫在head標(biāo)簽中。

示例：

三、外部樣式表

CSS代碼保存在擴(kuò)展名為.css的樣式表中

HTML文件引用擴(kuò)展名為.css的樣式表，有兩種方式：鏈接式、導(dǎo)入式。

語法：

1、鏈接式

2、導(dǎo)入式

Link和@import的區(qū)別是
本質(zhì)上，這兩種方式都是為了加載css文件，但還是存在細(xì)微的差別。

差別1：老祖宗的差別，link屬于XHTML標(biāo)簽，而@import完全是css提供的一種方式。

link標(biāo)簽除了可以加載css外，還可以做很多其他的事情，比如定義RSS，定義rel連接屬性等，@import只能加載CSS。

差別2：加載順序的差別：當(dāng)一個頁面被夾在的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再加載。所以有時候瀏覽@import加載CSS的頁面時會沒有樣式（就是閃爍），網(wǎng)速慢的時候還挺明顯。

差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題，完全兼容。

差別4：使用dom控制樣式時的差別。當(dāng)時用JavaScript控制dom去改變樣式的時候，只能使用link標(biāo)簽，因為@import不是dom可以控制的（不支持）。

差別5（不推薦）：@import可以在css中再次引入其他樣式表，比如創(chuàng)建一個主樣式表，在主樣式表中再引入其他的樣式表

5、CSS(cascading style sheets級聯(lián)樣式表）中的選擇器是

選擇器在你想應(yīng)用一個樣式的時候，幫助你去選擇元素。

舉例，下面是簡單的被命名為“instro”的樣式，他適用于HT

ML元素顯示紅色背景

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

器，如下圖所示

My name is Shivprasad koirala

I write interview questions

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

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

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

7、CSS中使用列布局是什么？

CSS列布局幫助你分割文本變?yōu)榱?#xff0c;例如考慮下面的雜志新聞在一個大的文本中，但是我們需要在他們之間使用邊界劃分為3列，這里HTML5的列布局就有所幫助了為了實現(xiàn)列布局我們需要指定以下內(nèi)容為了實現(xiàn)列布局我們需要指定以下內(nèi)容·我們需要把text劃分為多少列指定列數(shù)我們需要使用column-count，對于Chrome和firefox分別需要”webkit”和“moz-column”

CSS和模型是圍繞在HTML元素周圍的定義Border(邊界)，padding(內(nèi)邊距)和margin(外邊距)的矩形空間Border(邊界）：定義了元素包含的最大區(qū)域，我們能夠使邊界可見，不可見，定義高度和寬度等；Padding（內(nèi)邊距）：定義了邊界和內(nèi)部元素的間距Margin：定義了邊界和任何相鄰元素的間距例如以下是簡單的CSS代碼定義了盒子的邊界，內(nèi)邊距和外邊距值.box{width:200px;border:10pxsolid#99c;padding:20px;margin:50px;}現(xiàn)在如果我們應(yīng)用了以上的CSS到一個如下顯示的DIV標(biāo)簽，你輸出將會和下面圖形中顯示的那樣。我已經(jīng)創(chuàng)建兩個測試“Some text”和“Some other text”，因此我們能看到多少margin(外邊距)的屬性功能

Some text

Some other text

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

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

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

文字包裝效果

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

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

function SomeHeavyFunction()

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

x = i +x;}

}

比方說上面的循環(huán)代碼在HTML按鈕點擊以后執(zhí)行，現(xiàn)在這個方法執(zhí)行是同步的，換句話說這個瀏覽器必須等到循環(huán)完成才能操作<input type='button’οnclick=‘SomeHeavyFunction();’/>這個會進(jìn)一步導(dǎo)致瀏覽器凍結(jié)并且沒有相應(yīng)，屏幕還會顯示如下的異常信息

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

11、 Web Worker線程的限制是什么？

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

12、請列舉幾種可以清除浮動的方法

(1)、父級div定義 height 原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。 優(yōu)點：簡單、代碼少、容易掌握 缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產(chǎn)生問題 建議：不推薦使用，只建議高度固定的布局時使用

(2)、結(jié)尾處加空div標(biāo)簽 clear:both 原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度 優(yōu)點：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題 缺點：不少初學(xué)者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好 建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

(3)、父級div定義 偽類:after 和 zoom 原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動問題 優(yōu)點：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等） 缺點：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持。 建議：推薦使用，建議定義公共類，以減少CSS代碼。

(4)、父級div定義 overflow:hidden 原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度 優(yōu)點：簡單、代碼少、瀏覽器支持好 缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。 建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用。

(5)、父級div定義 overflow:auto 原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度 優(yōu)點：簡單、代碼少、瀏覽器支持好 缺點：內(nèi)部寬高超過父級div時，會出現(xiàn)滾動條。
建議：不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。

13、display:none和visibility:hidden的區(qū)別是什么？

1.display:none是徹底消失，不在文檔流中占位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會解析該元素；

2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產(chǎn)生回流（當(dāng)頁面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁面重新構(gòu)建，此時就是回流。所有頁面第一次加載時需要產(chǎn)生一次回流），而visibility切換是否顯示時則不會引起回流。

14、如何讓一段文本中的所有英文單詞的首字母大寫

/首字母大寫/

.a {text-transform:capitalize;}

/全都是大寫/

.b {text-transform:uppercase;}

/全都是小寫/

.c {text-transform:lowercase;}

15、為什么要初始化CSS樣式

首先是因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

其次初始化CSS樣式可以提高編碼質(zhì)量，保持代碼的統(tǒng)一性，如果不初始化整個頁面做完很糟糕，重復(fù)的CSS樣式很多。去掉標(biāo)簽的默認(rèn)樣式如：margin,padding，其他瀏覽器默認(rèn)解析字體大小，字體設(shè)置。

16、css定義的權(quán)重

如果權(quán)重相同，則最后定義的樣式會起作用

id 權(quán)重為 100，類和偽類權(quán)重為 10，元素和偽元素全重為 1

否定偽類選擇器 :not() 的權(quán)重:它的權(quán)重是由括號內(nèi)的內(nèi)容決定

如果兩個選擇器作用在同一元素上，則權(quán)重高者生效

CSS2 規(guī)范中規(guī)定: !important 用于單獨指定某條樣式中的單個屬性。對于被指定的屬性，有 !important 指定的權(quán)重值大于所有未用 !important 指定的規(guī)則。

17、CSS新增偽類舉例

偽元素

::first-letter 將樣式 添加到文本的首字母

::first-line 將樣式添加到文本的首行

::before 在某元素之前插入某些內(nèi)容

::after 在某元素之后插入某些內(nèi)容

18、如何居中div？如何居中一個浮動元素？

給div設(shè)置一個寬度，然后添加margin:0auto屬性

div{width:200px；margin:0auto;}

居中一個浮動元素確定容器的寬高寬500高300的層設(shè)置層的外邊距

.div{Width:500px；height:300px；//高度可以不設(shè)

Margin:-150px00-250px;

position:relative;//相對定位

background-color:pink;//方便看效果

left:50%;top:50%；}

19、CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算

1.id選擇器（#myid）

2.類選擇器（.myclassname)

3.標(biāo)簽選擇器（div,h1.p)

4.相鄰選擇器（hl+p）

5.子選擇器（ul<li）

6.后代選擇器（li a）

7.通配符選擇器（*）

8.屬性選擇器（a[rel=’external’])

9.偽類選擇器（a：hover.li：nth-child)

可繼承的樣式：font-size font-family color,UL LI DL DD DT;

不可繼承的樣式：border padding margin width height;優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)；

載入樣式以最后載入的定位為準(zhǔn)；

優(yōu)先級為：
!important > id > class > tag

important 比 內(nèi)聯(lián)優(yōu)先級高

CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個p元素的每個p元素。

p:last-of-type 選擇屬于其父元素的最后p 元素的每個p元素。

p:only-of-type 選擇屬于其父元素唯一的p元素的每個p元素。

p:only-child 選擇屬于其父元素的唯一子元素的每個p元素。

p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個p元素。

:enabled ：disabled 控制表單控件的禁用狀態(tài)。

：checked 單選框或復(fù)選框被選中。

20、 瀏覽器的內(nèi)核分別是什么？

IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內(nèi)核原為Presto，現(xiàn)為Blink；

21、常見兼容性問題？

不同瀏覽器的標(biāo)簽?zāi)J(rèn)外補(bǔ)丁margin和內(nèi)補(bǔ)丁padding不同

發(fā)生概率：100%

解決方案：使用CSS通配符*，設(shè)置內(nèi)外補(bǔ)丁為0

*{ margin: 0; padding: 0;}

塊屬性標(biāo)簽float之后，又有橫向的margin值，在IE6中顯示會比設(shè)置的大（IE6雙邊距bug）

發(fā)生概率：90%

解決方案：在float標(biāo)簽樣式控制中加入display:inline;

設(shè)置較小的高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中超出自己設(shè)置的高度

發(fā)生概率：60%

解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height小于你設(shè)置的高度。

行內(nèi)標(biāo)簽設(shè)置display:block;后又采用float布局，再設(shè)置橫向margin值時，在IE6中顯示會比設(shè)置的大（IE6雙邊距bug）

發(fā)生概率：20%

解決方案：在display:block;后面加上display:inline;display:table;

圖片默認(rèn)有間距

發(fā)生概率：20%

解決方案：使用float為img布局

標(biāo)簽最低高度設(shè)置min-height不兼容

發(fā)生概率：5%

解決方案：例如要設(shè)置一個標(biāo)簽的最小高度為200px

{ min-height: 200px;

height: auto!important;

height: 200px;

overflow: visible;}

透明度兼容設(shè)置

發(fā)生概率：主要看你要寫的東西設(shè)不設(shè)透明度

解決方案：一句話

transparent_class {

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity:0.5;

opacity:0.5;

}

opacity:0.5;This is the “most important” one because it is the currentstandard in CSS. This will work in most versions of Firefox, Safari, andOpera.This would be all you need if all browsers supported current standards. Which,of course, they don’t.

filter:alpha(opacity=50);This one you need for IE.

-moz-opacity:0.5;You need this one to support way old school versions of theMozilla browsers like Netscape Navigator.

-khtml-opacity:0.5;This is for way old versions of Safari (1.x) when therendering engine it was using was still referred to as KTHML, asopposed to thecurrentWebKit.

Box Model的bug

描述：給一個元素設(shè)置了高度和寬度的同時，還為其設(shè)置margin和padding的值，會改變該元素的實際大小。

解決辦法：在需要加 margin和padding的div內(nèi)部加一個div,在這個div里設(shè)置margin和padding值。

IE6中的列表li樓梯狀bug

描述：通常在li中的元素（比如a）設(shè)置了浮動float，但li本身不浮動。

解決辦法：

ul li{float:left;}

或 ul li{display:inline;}

10.li空白間距

描述：在IE下，會增加li和li之間的垂直間距

解決辦法：給li里的a顯式的添加寬度或者高度

li a{width:20px;}

或者

li a{display:block;float:left;clear:left;}

或者

li {display:inline;}

li a{display:block;}

或者

在每個列表li上設(shè)置一個實線的底邊，顏色和li的背景色相同

11.overflow：auto;和position:relative的碰撞

描述：此bug只出現(xiàn)在IE6和IE7中，有兩個塊級元素，父元素設(shè)置了overflow：auto;子元素設(shè)置了position:relative;且高度大于父元素，在IE6-7中子元素不會被隱藏而是溢出。

解決方案：給父元素也設(shè)置position:relative;

12.浮動層的錯位

描述：當(dāng)內(nèi)容超出外包容器定義的寬度時會導(dǎo)致浮動層錯位問題。在Firefox、IE7、IE8及其他標(biāo)準(zhǔn)瀏覽器里,超出的內(nèi)容僅僅只是超出邊緣;但在IE6中容器會忽視定義的width值,寬度會錯誤地隨內(nèi)容寬度增長而增長。如果在這個浮動元素之后還跟著一個浮動元素,那么就會導(dǎo)致錯位問題。

解決方案：overflow：hidden;

13.IE6克隆文本的bug

描述：若你的代碼結(jié)構(gòu)如下

…

很有可能在IE6網(wǎng)頁上出現(xiàn)一段空白文本

解決方案：

使用條件注釋

刪除所有注釋

在注釋前面的那個浮動元素加上 display：inline；

14.IE的圖片縮放

描述：圖片在IE下縮放有時會影響其質(zhì)量

解決方案：img{ -mg-interpolation-mode:bicubic;}

15.IE6下png圖片的透明bug

描述：使用透明圖片,使用png24或png32圖片在IE6下面顯示圖片會有一層淡藍(lán)色的背景。

解決方案：

.img{

background:url(‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’);

_background:0;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=‘scale’);

}

img{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=‘scale’);}

或

16.透明背景bug

描述：在IE瀏覽器中，框架不會自動把背景設(shè)為透明

解決方案：

在iframe調(diào)用的content.html頁面中設(shè)置

body{background-color: transparent;}

16.禁用IE默認(rèn)的垂直滾動條

解決方案：

html{

overflow:auto;

}

22、GET和POST的區(qū)別，何時使用POST？

GET：一般用于信息獲取，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制，一般在2000個字符

POST：一般用于修改服務(wù)器上的資源，對所發(fā)送的信息沒有限制。

GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，

也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。

然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更安全

23、漸進(jìn)增強(qiáng)和優(yōu)雅降級

漸進(jìn)增強(qiáng)：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗。

優(yōu)雅降級：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。

24、HTTP和HTTPS

HTPP協(xié)議通常承載于TCP協(xié)議之上，在HTTP和TCP之間添加一個安全協(xié)議層（ssL或TsL），這個時候，就成了我們常說的HTTPS。默認(rèn)HTTP的端口號為80，HTTPs的端口號為443。

25、為什么HTTPS安全

因為網(wǎng)絡(luò)請求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點都可能篡改信息，而如果使用HTTPS，密鑰在你和終點站才有。https之所以比http安全，是因為他利用。1/t1s協(xié)議傳輸。它包含證書，卸載，流量轉(zhuǎn)發(fā)，負(fù)載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性

26、什么是Etag?

當(dāng)發(fā)送一個服務(wù)器請求時，瀏覽器首先會進(jìn)行緩存過期判斷。瀏覽器根據(jù)緩存過期時間判斷緩存文件是否過期。情景一：若沒有過期，則不向服務(wù)器發(fā)送請求，直接使用緩存中的結(jié)果，此時我們在瀏覽器控制臺中可以看到200OK(from cache），此時的情況就是完全使用緩存，瀏覽器和服務(wù)器沒有任何交互的。

情景二：若已過期，則向服務(wù)器發(fā)送請求，此時請求中會帶上①中設(shè)置的文件修改時間，和Etag

然后，進(jìn)行資源更新判斷。服務(wù)器根據(jù)瀏覽器傳過來的文件修改時間，判斷自瀏覽器上一次請求之后，文件是不是沒有被修改過；根據(jù)Etag，判斷文件內(nèi)容自上一次請求之后，有沒有發(fā)生變化

情形一：若兩種判斷的結(jié)論都是文件沒有被修改過，則服務(wù)器就不給瀏覽器發(fā)index.html的內(nèi)容了，直接告訴它，文件沒有被修改過，你用你那邊的緩存吧——304Not Modified，此時瀏覽器就會從本地緩存中獲取index.htm1的內(nèi)容。此時的情況叫協(xié)議緩存，瀏覽器和服務(wù)器之間有一次請求交互。

情形二：若修改時間和文件內(nèi)容判斷有任意一個沒有通過，則服務(wù)器會受理此次請求，之后的操作同①①只有g(shù)et請求會被緩存，post請求不會

27、Expires和Cache-Control

1、Cache-Control

Cache-Control屬性是在服務(wù)器端配置的，不同的服務(wù)器有不同的配置，apache、nginx、IIS、tomcat等配置都不盡相同。

以Apache為例，在http.conf中做如下配置：

<filesMatch ”.(jpg|jpeg|png|gif|ico)$”>

Header set Cache Control max-age=16768000,public

<filesMatch ”.(css|js)$”>

Header set Cache Control max-age=2628000,public

問題：瀏覽器緩存的資源，若又想更新資源，如何實現(xiàn)？

解決：通過修改該資源的名稱來實現(xiàn)。修改了資源名稱，瀏覽器會當(dāng)做不同的資源。

28、Expires

Expires屬性也是在服務(wù)端配置的，具體的配置也根據(jù)服務(wù)器而定。

問題：可能存在客戶端時間跟服務(wù)端時間不一致的問題。

解決：建議Expires結(jié)合Cache-Control一起使用。

總結(jié)

以上是生活随笔為你收集整理的htmlCSS面试题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。