web前端開發(fā)面試題匯總

1、web前端開發(fā)面試題匯總1天前653瀏覽2評論前端面試題匯總HTML&CSS1 .常用那幾種瀏覽器測試？有哪些核(LayoutEngine)?(Q1)瀏覽器：IE,Chrome,FireFox,SafariOpera。(Q2)核：Trident,Gecko,Presto,Webkit。2 .說下行元素和塊級元素的區(qū)別？行塊元素的兼容性使用？IE8以下行元素：會在水平方向排列，不能包含塊級元素，設(shè)置width無效，height無效(可以設(shè)置line-height)margin上下無效，padding上下無效。塊級元素：各占據(jù)一行，垂直方向排列。從新行開場完畢接著一個斷行。兼容性：display:

2、inline-block;display:inline;zoom:1;3.去除浮動有哪些方式？比擬好的方式是哪一種？1父級div定義height2結(jié)尾處加空div標(biāo)簽clear:both3父級div定義偽類：after和zoom。4父級div定義overflow:hidden。5父級div定義overflow:autoo6父級div也浮動，需要定義寬度。7父級div定義display:table8結(jié)尾處加br標(biāo)簽clear:bothr總結(jié)：比擬好的是第3種方式，簡潔方便。4 .box-sizing常用的屬性有哪些？分別有什么作用？常用的屬性：box-sizing:content-boxbord

3、er-boxinherit;作用：content-box:寬度和高度分別應(yīng)用到元素的容框。在寬度和高度之外繪制元素的邊距和邊框(元素默認(rèn)效果)。border-box元素指定的任何邊距和邊框都將在已設(shè)定的寬度和高度進(jìn)展繪制。通過從已設(shè)定的寬度和高度分別減去邊框和邊距才能得到容的寬度和高度。5 .Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別？(Q1)告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。(Q2)標(biāo)準(zhǔn)模式的排版和JS運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止

4、站點無法工作。6 .HTML5為什么只需要寫?HTML5不基于SGML,因此不需要對DTD進(jìn)展引用;但是需要doctype來規(guī)瀏覽器的行為讓瀏覽器按照它們應(yīng)該的方式來運行。而HTML4.01基于SGML,所以需要對DTD進(jìn)展引用，才能告知瀏覽器文檔所使用的文檔類型。7 .頁面導(dǎo)入樣式時，使用link和import有什么區(qū)別？1link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS,定義rel連接屬性等作用；而import是CSSS供的，只能用于加載CSS;2頁面被加載的時，link會同時被加載，而import引用的CSS會等到頁面被加載完再加載；3import是CSS2.1提出的，只

5、在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題。總之，link要優(yōu)于import。8 .介紹一下你對瀏覽器核的理解？IE瀏覽器的核Trident、Mozilla的GeckoChrome的BlinkWebKit的分支、Opera核原為Presto,現(xiàn)為Blink；核主要分成兩局部：渲染弓I擎(layoutengineerRenderingEngine)口JS弓I擎渲染引擎：負(fù)責(zé)取得網(wǎng)頁的容HTML、XML、圖像等等、整理訊息例如參加CSS等，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不一樣。所有網(wǎng)頁瀏覽器、電子

6、客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)容的應(yīng)用程序都需要核。JS引擎那么：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開場渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，核就傾向于只指渲染引擎。9 .html5有哪些新特性？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5?(Q1)HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。(1膾畫canvas;(2)用于媒介回放的video和audio元素；(3)本地離線存儲localStorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不喪失；(4)sessionStorage數(shù)據(jù)在瀏

7、覽器關(guān)閉后自動刪除；(5)語意化更好的容元素，比方articlefooter、headernav、section;(6宸單控件,calendardatatime、emailurl、search;(7)新的技術(shù)webworker,websocket,Geolocation;(Q2)IE8/IE7/IE6支持通過document.createElemen方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。也可以直接使用成熟的框架、比方html5shim,10 .簡述一下你對HTML語義化的理解？用正確的標(biāo)簽做正確的事情。1. html語義

8、化讓頁面的容構(gòu)造化，構(gòu)造更清晰，便于對瀏覽器、搜索引擎解析；2. 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;3. 使閱讀源代碼的人對更容易將分塊，便于閱讀維護理解。11#常見兼容性問題？png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的margin:0;padding:0;林統(tǒng)一。IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。浮動ie產(chǎn)生的雙倍距

9、離#boxfloat:left;width:10px;margin:。00100px;這種情況之下IE會產(chǎn)生20Px的距離，解決方案是在float的標(biāo)簽樣式控制中參加_display:inline等其轉(zhuǎn)化為行屬性。（_這個符號只有ie6會識別）漸進(jìn)識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9這一標(biāo)記，將IE游覽器從所有情況中別離出來。接著，再次使用“+用E8和IE7、IE6別離開來，這樣IE8已經(jīng)獨立識別。css.bbbackground-color:#f1ee18;所有識另1J/.background-color:#00deff9;/IE6、7、8識另1J/+background-

10、color:#a200ff;/IE6、7識另/_background-color:#1e0bd1;/IE6識別/IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute（）獲取自定義屬性；Firefox下，只能使用getAttribute（成取自定義屬性.解決方法:統(tǒng)一通過getAttribute（成取自定義屬性.IE下,even對象有x,y屬性，但是沒有pageX,pageYH性；Firefox下,event對象有pageX,pageYH性，但是沒有x,y屬性.解決方法：條件注釋缺點是在IE瀏覽器下可能會增加額外的請求數(shù)。Chrome中文界面下默認(rèn)會將小于12P

11、x的文本強制按照12px顯示,可通過參力口CSSH性-webkit-text-size-adjust:none單決.超訪問過后hover樣式就不出現(xiàn)了被點擊訪問過的超樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A:a:link。a:visited。a:hover。a:active。12.HTML5的離線儲存，描述一下cookies,sessionStorag和localStorage的區(qū)別?cookie在瀏覽器和效勞器間來回傳遞。sessionStorag和localStorag杯會sessionStorage口localStorage勺存儲空間更大；

12、sessionStorage口localStorageT更多豐富易用的接口；sessionStorage口localStorage自獨立的存儲空間；CSS一、介紹一下CSS的盒子模型？1有兩種，IE盒子模型、標(biāo)準(zhǔn)W3C盒子模型；IE的content局部包含了border和pading;2盒模型：容（content卜填充（padding）邊界（margin邊框（border）.二、CSS選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？新增偽類有那些？1.id選擇器#myid2.類選擇器.myclassname3標(biāo)簽選才?器div,h1,p4 .相令口選才舉器h1+p5 .子選擇器ulli6

13、.后代選才舉器lia7通配符選擇器*8屬性選擇器arel=external9偽類選擇器a:hover,li:nth-child可繼承的樣式：font-sizefont-familycolor,ULLIDLDDDT;不可繼承的樣式：borderpaddingmarginwidthheight優(yōu)先級就近原那么，同權(quán)重情況下樣式定義最近者為準(zhǔn)；載入樣式以最后載入的定位為準(zhǔn)；優(yōu)先級為:!importantidclasstagimportant比聯(lián)優(yōu)先級高三、CSS3新增偽類舉例p:first-of-type選擇屬于其父元素的首個元素的每個元素p:last-of-type選擇屬于其父元素的最后元素的每個

14、元素。p:only-of-type選擇屬于其父元素唯一的元素的每個元素。p:only-child選擇屬于其父元素的1t一子元素的每個元素。p:nth-child(2)選擇屬于其父元素的第二個子元素的每個元素。:enableddisabled空制表單控件的禁用狀態(tài)。:checked單項選擇框或復(fù)選框被選中。四、如何居中div?如何居中一個浮動元素？?水平居中：給div設(shè)置一個寬度，然后添加margin:。autd!性divwidth:200px;margin:。auto;?垂直居中：確定容器的寬高：如寬500高300的層設(shè)置層的外邊距.divWidth:500Pxheight:300px;/高度

15、可以不設(shè)Margin:-150px00-250px;position:relatiVfi對定位background-color:pink;/方便看效果left:50%;top:50%;五、列出display的俏，說明他們的作用。position的值,relative和absolute定位原點是1. block象塊類型元素一樣顯示。none缺省值。象行元素類型一樣顯示。inline-block象行元素一樣顯示，但其容象塊類型元素一樣顯示。list-item象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。2.?absolute生成絕對定位的元素，相對于static定位以外的第一個父元素進(jìn)展定位。?fix

16、ed老IE不支持生成絕對定位的元素，相對于瀏覽器窗口進(jìn)展定位。?relative生成相對定位的元素，相對于其正常位置進(jìn)展定位。static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中忽略top,bottom,left,rightz-index聲明inherit規(guī)定從父元素繼承position屬性的值。六、CSS3有哪些新特性#?CSS或現(xiàn)圓角border-radius:8pX,陰影box-shadow:10Px,對文字加特效text-shadow線性漸變gradient旋轉(zhuǎn)transformtransform:rotate(9deg)scale(0.85,0.90)translate(0px,-30

17、px)skew(-9deg,0deg);做轉(zhuǎn)，縮放，定位，傾斜增加了更多的CSS選擇器多背景rgba七、一個滿屏品字布局如何設(shè)計八、為什么要初始化CSS樣式。因為瀏覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡單的初始化方法就是：padding:0;margin:0;不建議如淘寶的樣式初始化：body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,le

18、gend,button,input,textarea,th,tdmargin:。；padding:。；body,button,input,select,textareafont:12px/1.5tahoma,arial,5b8b4f53;hi,h2,h3,h4,h5,h6font-size:100%;address,cite,dfn,em,varfont-style:normal;code,kbd,pre,sampfont-family:couriernew,courier,monospace;smallfont-size:12px;ul,ollist-style:none;atext-dec

19、oration:none;a:hovertext-decoration:underline;supvertical-align:text-top;subvertical-align:text-bottom;legendcolor:#000;fieldset,imgborder:。；button,input,select,textareafont-size:100%;tableborder-collapse:collapse;border-spacing:。；九、absolute的containingblock計算方式跟正常流有什么不同？十、positionK艮display、margincol

20、lapseoverflow、float這些特性相互疊加后會怎么樣？H一、對BFC規(guī)的理解？W3CCSS2.1規(guī)中的一個概念，它決定了元素如何對其容進(jìn)展定位，以及與其他元素的關(guān)系和相互作用。十二、css定義的權(quán)重以下是權(quán)重的規(guī)那么：標(biāo)簽的權(quán)重為1,class的權(quán)重為10,id的權(quán)重為100,以下例子是演示各種定義的權(quán)重值：/權(quán)重為1/div/權(quán)重為1。.class1。/權(quán)重為10。id1/權(quán)重為100+1=101/id1div/權(quán)重為10+1=11/.class1div/權(quán)重為10+10+1=21/.class1.class2div。如果權(quán)重一樣，那么最后定義的樣式會起作用，但是應(yīng)該防止這種情況

21、出現(xiàn)十三、解釋下浮動和它的工作原理？去除浮動的技巧十四、用過媒體查詢，針對移動端的布局嗎？十五、使用CSS預(yù)處理器嗎？喜歡那個？SASS十六、如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么？多數(shù)顯示器默認(rèn)頻率是60Hz,即1秒刷新60次，所以理論上最小間隔為：1/60*1000ms=16.7ms十七、display:inline-block什么時候會顯示間隙，如何解決？移除空格、使用margin負(fù)值、使用font-size:。letter-spacingword-spacingJavaScript介紹js的數(shù)據(jù)類型ECMAScript有5種原始類型primitivetype,即Undef

22、ined、Null、BooleanNumber和String。js有哪些置對象？數(shù)據(jù)封裝類對象五種：Object、Array、BooleanNumber和String；其他對象：Function、ArgumentsMath、Date、RegExpErrorthis對象的理解this總是指向函數(shù)的直接調(diào)用者所謂當(dāng)前對象，而非間接調(diào)用者如果有new關(guān)鍵字，this指向new出來的那個對象；在事件中，this指向觸發(fā)這個事件的對象，特殊的是IE中的attachEvent中的this總是指向全局對象Windowoeval是做什么的?把對應(yīng)的字符串解析成JS代碼并運行；應(yīng)該防止使用eval-4平安，非常

23、耗性能2次，一次解析成js語句，一次執(zhí)行。由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval,varobj=eval(+str+)。DOM怎樣添加、移除、移動、復(fù)制、創(chuàng)立和查找節(jié)點創(chuàng)立新節(jié)點創(chuàng)立一個DOM片段createDocumentFragment()創(chuàng)立一個具體的元素createElement()創(chuàng)立一個文本節(jié)點createTextNode()添力口、移除、替換、插入appendChild()removeChild()replaceChild()insertBefore()在已有的子節(jié)點前插入一個新的子節(jié)點：？查找通過標(biāo)簽名稱：getElementsByTagName().通過元素的

24、Name屬性的值(IE容錯能力較強，會得到一個數(shù)組，其中包括id等于name值的)：getElementsByName().通過元素Id,唯一性：getElementById()null和undefined的區(qū)別？null是一個表示無的對象，轉(zhuǎn)為數(shù)值時為0;undefined是一個表示無的原始值，轉(zhuǎn)為數(shù)值時為NaN。undefined:1變量被聲明了，但沒有賦值時，就等于undefined2)調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined3對象沒有賦值的屬T4,該屬性的值為undefined4函數(shù)沒有返回值時，默認(rèn)返回undefinednull：1作為函數(shù)的參數(shù)，表示該函數(shù)的

25、參數(shù)不是對象。2作為對象原型鏈的終點。new操作符具體干了什么呢？1創(chuàng)立一個空對象，并且this變量引用該對象，同時還繼承了該函數(shù)的原型。2屬性和方法被參加到this引用的對象中。3新創(chuàng)立白對象由this所引用，并且最后隱式的返回this。JSON的了解？JSON(JavaScriptObjectNotation)!一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScrip的一個子集。數(shù)據(jù)格式簡單，易于讀寫，占用帶寬小格式：采用鍵值又例如：age:12,name:backcall()和apply()的區(qū)別和作用?apply()8數(shù)有兩個參數(shù)：第一個參數(shù)是上下文，第二個參數(shù)是參數(shù)組成的數(shù)組。如果上下文

26、是null,那么使用全局對象代替。如：function.apply(this,1,2,3);call()的第一個參數(shù)是上下文，后續(xù)是實例傳入的參數(shù)序列。如：function.call(this,1,2,3);如何獲取UA?什么是ua?functionwhatBrowser()document.Browser.Name.value=navigator.appName;document.Browser.Version.value=navigator.appVersion;document.Browser.Code.value=navigator.appCodeName;document.Brows

27、er.Agent.value=navigator.userAgent;其他1.狀態(tài)碼知道哪些？100Continue繼續(xù)，一般在發(fā)送post請求時，已發(fā)送了heade叱后效勞端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息200OK正常返回信息201Created請求成功并且效勞器創(chuàng)立了新的資源202Accepted效勞器已承受請求，但尚未處理301MovedPermanently請求的網(wǎng)頁已永久移動到新位置。302Found臨時性重定向。303SeeOther臨時性重定向，且總是使用GET請求新的URI。304NotModified自從上次請求后，請求的網(wǎng)頁未修改正。400BadRequest

28、效勞器無法理解請求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用一樣的容發(fā)起請求。401Unauthorized請求未授權(quán)。403Forbidden制止訪問。404NotFound找不到如何與URI相匹配的資源。500InternalServerError最常見的效勞器端錯誤。503ServiceUnavailabl嗷勞器端暫時無法處理請求可能是過載或維護。1. 你有哪些性能優(yōu)化的方法？1減少請求次數(shù)：CSSSprites,JSCSS源碼壓縮、圖片大小控制適宜；網(wǎng)頁Gzip,CDN托管，data緩存，圖片效勞器。2前端模板JS徽據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請