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

1、web前端開發(fā)面試題匯總1天前653瀏覽2評論前端面試題匯總HTML&CSS1. 常用那幾種瀏覽器測試？有哪些內(nèi)核 （LayoutEngine）?（Q1）瀏覽器：IE，Chrome，F(xiàn)ireFox， Safari，Opera。（Q2）內(nèi)核：Tride nt，Gecko，Presto，Webkit。2. 說下行內(nèi)元素和塊級元素的區(qū)別？行內(nèi)塊元素的兼容性使用？（IE8以下）行內(nèi)元素：會在水平方向排列，不能包含塊級元素，設(shè)置width無效，height無效（可以設(shè)置line-height），margin 上下無效，padding 上下無效。塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接

2、著一個斷行。兼容性：display:i nlin e-block;display:i nlin e;zoom:1;3. 清除浮動有哪些方式？比較好的方式是哪一種？（1）父級 div 定義 height。（2）結(jié)尾處加空div標簽clear:both。（3）父級div定義偽類:after和zoom。（4）父級 div 定義 overflow:hidden 。（5）父級 div 定義 overflow:auto。（6）父級div也浮動，需要定義寬度。（7）父級 div 定義 display:table 。(8) 結(jié)尾處加br標簽clear:both?？偨Y(jié)：比較好的是第3種方式，簡潔方便。4. bo

3、x-sizing常用的屬性有哪些？分別有什么作用？常用的屬性： box-siz ing: conten t-box border-box in herit;作用：content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪 制元素的內(nèi)邊距和邊框(元素默認效果)。border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪 制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高 度。5. Doctype作用？標準模式與兼容模式各有什么區(qū)別？(Q1)告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式

4、呈現(xiàn)。(Q2)標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在 兼容模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止 站點無法工作。6. HTML5 為什么只需要寫< Doctype html> ？HTML5不基于SGML，因此不需要對DTD進行引用；但是需要doctype來 規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運行)。而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。7. 頁面導(dǎo)入樣式時，使用link和import有什么區(qū) 別？(1) link屬于XHTML標簽，除了加載CSS夕卜，還能用于定

5、義RSS,定義 rel連接屬性等作用；而import是CSS提供的，只能用于加載CSS;(2) 頁面被加載的時，link會同時被加載，而import引用的CSS會等到頁面被加載完再加載；(3) import是CSS2.1提出的，只在IE5以上才能被識別，而link是XHTML 標簽，無兼容問題?？傊?，link要優(yōu)于import。8. 介紹一下你對瀏覽器內(nèi)核的理解？IE 瀏覽器的內(nèi)核 Tride nt、Mozilla 的 Gecko、Chrome 的 Bli nk ( WebKit 的 分支)、Opera內(nèi)核原為Presto，現(xiàn)為 Blink；內(nèi)核主要分成兩部分：渲染弓 |擎(layout en

6、gineer 或 Rendering Engine)和 JS 弓 I擎渲染引擎：負責(zé)取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例 如加入CSS等)，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。 瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。 所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、 顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序 都需要內(nèi)核。JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。 最開始渲染引擎和 JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染 引擎。9. html5有哪些新特性？如何處理HTML5新標簽的瀏覽器

7、兼容問題？如何區(qū)分HTML和HTML5 ?(Q1) HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲, 多任務(wù)等功能的增加。(1)繪畫 canvas;用于媒介回放的 video和audio元素；本地離線存儲localStorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessio nStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除；(5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section; (6)表 單控件，calendar、date、time、email、url、search;(7)新的技術(shù) webworker, websocket,

8、Geolocation;(Q2) IE8/IE7/IE6 支持通過document.createElement 方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式。也可以直接使用成熟的框架、比如 html5shim，10. 簡述一下你對 HTML語義化的理解？用正確的標簽做正確的事情。1. html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引 擎解析；2. 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;3. 使閱讀源代碼

9、的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。11 #常見兼容性問題？png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.瀏覽器默認的margin和padding不同。解決方案是加一個全局的margin:0;padding:0;來統(tǒng)一。IE6雙邊距bug:塊屬性標簽float后，又有橫行 的margin情況下，在ie6顯示margin比設(shè)置的大。 浮動ie產(chǎn)生的雙倍距離 #box float:left; width:10px; margin:0 0 0 100px;這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加 入 _display:inline

10、;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)漸進 識別的方式，從總體中逐漸排除局部。首先，巧妙的使用9”這一標記，將IE游覽器從所有情況中分離出來。 接著， 再次使用“ +” IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。css .bbbackground-color:#f1ee18;/ 所有識別/ .background-color:#00deff9; / IE6、7、8 識別/+background-color:#a200ff;/ IE6、7 識別/ _background-color:#1eObd1;/ IE6 識別/IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，

11、也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬 性.解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性.IE下,even對象有x,y屬 性，但是沒有pageX,pageY 屬性;Firefox下,event對象有pageX,pageY 屬性, 但是沒有x,y屬性.解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的 HTTP請求數(shù)。Chrome中文界面下默認會將小于12px的文本強制按照12px顯示,可通過加 入 CSS 屬性-webkit-text-size-adjust: non e; 解決.超鏈接訪

12、問過后hover樣式就不出現(xiàn)了被點擊訪問過的超鏈接樣式不在具有 hover和active 了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:li nk a:visited a:hover a:active 12.HTML5的離線儲存，描述一下cookies ，sessionstorage 和 localStorage 的區(qū)別？cookie在瀏覽器和服務(wù)器間來回傳遞。sessionStorage和localStorage不會sessi on Storage 和 localStorage 的存儲空間更大；sessionStorage和localStorage有更多豐富易用的接口；ses

13、sionStorage和localStorage各自獨立的存儲空間；CSS 一、 介紹一下CSS的盒子模型？(1 )有兩種，IE盒子模型、標準 W3C盒子模型；IE的content部分包 含了 border 和 pading;(2)盒模型:內(nèi)容(co nte nt)、填充(paddi ng)、邊界(margi n)、 邊框(border).二、css選擇符有哪些？哪些屬性可以繼承？優(yōu)先級 算法如何計算？新增偽類有那些？1.id 選擇器(# myid)2. 類選擇器(.myclassname)3. 標簽選擇器(div, hi, p)4. 相鄰選擇器(hi + p)5. 子選擇器(ul >

14、li)6. 后代選擇器(li a)7. 通配符選擇器(*)8. 屬性選擇器(arel = "external")9. 偽類選擇器(a: hover, li: nth - child )可繼承的樣式：fon t-size fo nt-family color, UL LI DL DD DT;不可繼承的樣式：border padd ing margin width height優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準；載入樣式以最后載入的定位為準；優(yōu)先級為：！important > id > class > tag ,important比 內(nèi)聯(lián)優(yōu)先級高三

15、、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>元素。:en abled :disabled 控制表單控件的禁用狀態(tài)。

16、:checked單選框或復(fù)選框被選中。四、如何居中div ?如何居中一個浮動元素？?水平居中：給div設(shè)置一個寬度，然后添加 margin:0 auto屬性divwidth:200px; margi n:0 auto; ?垂直居中：確定容器的寬高：如寬500高300的層設(shè)置層的外邊距.div Width:500px height:300px; 高度可以不設(shè)Marg in: -150px 0 0 -250px; positio n:relative;相對定位background-color:pink;/ 方便看效果left:50%; top:50%;五、列出display的值，說明他們的作用。p

17、osition的值，relative和absolute 定位原點是1. block象塊類型元素一樣顯示。none缺省值。象行內(nèi)元素類型一樣顯示。inline-block象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。list-item象塊類型元素一樣顯示，并添加樣式列表標記。2.?absolute生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。?fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進行定位。?relative生成相對定位的元素，相對于其正常位置進行定位。?static默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, le

18、ft, right z-index 聲明）?inherit規(guī)定從父元素繼承position屬性的值。六、CSS3有哪些新特性 # ？?CSS3 實現(xiàn)圓角(border-radius:8px )，陰影(box-shadow:10px)，對文子加特效(text-shadow、) 線性漸變(gradient) 旋轉(zhuǎn)(transform)transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);旋轉(zhuǎn),縮放,定位,傾斜增加了更多的CSS選擇器多背景rgba七、一個滿屏品字布局如何設(shè)計八、為什么要初始化CSS

19、樣式。因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最 小的情況下初始化。最簡單的初始化方法就是：paddi ng: 0; margi n: 0; （不建議）如淘寶的樣式初始化：body, hi, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, lege nd, butt on, in put,textarea, th, td margin:0

20、; padding:0; body, butt on, i nput, select, textarea fon t:12px/1.5tahoma, arial, 5b8b4f53; hi, h2, h3, h4, h5, h6 fon t-size:100%; address, cite, dfn, em, var fon t-style:no rmal; code, kbd, pre, samp fon t-family:courier new, courier, mono space; small fon t-size:12px; ul, ol list-style: non e; a

21、text-decorati on:non e; a:hover text-decoratio n:u nderli ne; sup vertical-alig n:text-top; sub vertical-alig n:text-bottom; lege nd color:#000; fieldset, img border:0; butt on, in put, select, textarea fon t-size:100%; table border-collapse:collapse; border-spaci ng:0; 九、 absolute 的containing block

22、計算方式跟正常流有什么不同？ 十、 position 跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？一、對BFC規(guī)范的理解？W3C CSS 2.1規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行定位，以 及與其他元素的關(guān)系和相互作用。十二、css定義的權(quán)重以下是權(quán)重的規(guī)則：標簽的權(quán)重為1, class的權(quán)重為10 , id的權(quán)重為100， 以下例子是演示各種定義的權(quán)重值：/權(quán)重為1/div /權(quán)重為10/.class1 / 權(quán)重為100/id1 /權(quán)重為100+1=101 /id1 div /權(quán)重為10+1=11 /.class1 di

23、v / 權(quán)重為10+10+仁21 / .classl .class2 div如果權(quán)重相同，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)十三、解釋下浮動和它的工作原理？清除浮動的技巧十四、用過媒體查詢，針對移動端的布局嗎？十五、使用CSS預(yù)處理器嗎？喜歡那個？SASS十六、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？多數(shù)顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為：1/60 * 1000ms = 16.7ms十七、display:inline-block什么時候會顯示間隙，如何解決？移除空格、使用 margin 負值、使用 font-size:0、letter

24、-spacing、word-spacingJavaScript介紹js的數(shù)據(jù)類型ECMAScript 有 5 種原始類型(primitive type ) ，即卩 Undefined、Null、Boolean、Number 和String。js有哪些內(nèi)置對象？數(shù)據(jù)圭寸裝類對象(五種)：Object、Array、Boolean、Number 和 String ；其他對象：Function、Arguments、Math、Date、RegExp、Errorthis對象的理解this總是指向函數(shù)的直接調(diào)用者(所謂當前對象，而非間接調(diào)用者) 如果有new關(guān)鍵字，this指向new出來的那個對象；在事件中

25、，this指向觸發(fā)這個事件的對象，特殊的是IE中的attachEvent 中的this總是指向全局對象 Window。eval ()是做什么的？把對應(yīng)的字符串解析成JS代碼并運行；應(yīng)該避免使用eval不安全，非常耗性能(2次，一次解析成js語句，一次 執(zhí)行)。由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval，var obj =eval( ( +str +')'。)DOM怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查 找節(jié)點創(chuàng)建新節(jié)點創(chuàng)建一個 DOM 片段 createDocumentFragment() 創(chuàng)建一個具體的元素 createEleme nt()創(chuàng)建一個文本節(jié)點creat

26、eTextNode()添加、移除、替換、插入 appe ndChild() removeChild() replaceChild() in sertBefore()在已有的子節(jié)點前插入一個新的子節(jié)點：？ ？查找通過標簽名稱：getEleme ntsByTagName().通過元素的Name屬性的值(IE容錯能力較強，會得到一個數(shù)組，其中包括id等于 name 值的）：getElementsByName（）.通過元素 Id，唯一性：getElementByld（）null 禾口 undefined的區(qū)別？null是一個表示”無”的對象，轉(zhuǎn)為數(shù)值時為0;undefined是一個表示”無”的原始值，

27、轉(zhuǎn)為數(shù)值時為 NaN。undefined :（1） 變量被聲明了，但沒有賦值時，就等于undefined。（2） 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。（3）對象沒有賦值的屬性，該屬性的值為 undefined。（4）函數(shù)沒有返回值時，默認返回 undefined。null:（1）作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。（2）作為對象原型鏈的終點。new操作符具體干了什么呢？（1 ）創(chuàng)建一個空對象，并且this變量引用該對象，同時還繼承了該函數(shù) 的原型。（2）屬性和方法被加入到this引用的對象中。（3）新創(chuàng)建的對象由this所引用，并且最后隱式的返回 this。

28、JSON的了解?JSON(JavaScript Object Notatio n) 是一種輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。格式：采用鍵值對，例如： age':'數(shù)據(jù)格式簡單，易于讀寫，占用帶寬小12' , n ame : ' back'call（）和apply（）的區(qū)別和作用?apply()函數(shù)有兩個參數(shù)：第一個參數(shù)是上下文，第二個參數(shù)是參數(shù)組成的數(shù) 組。如果上下文是null ,則使用全局對象代替。女口： function.apply(this,1,2,3);call()的第一個參數(shù)是上下文，后續(xù)是實例傳入的參數(shù)序列。女口：

29、fun ctio n. call(this,1,2,3);如何獲取UA ?什么是ua ? ?其他1.HTTP狀態(tài)碼知道哪些？100 Continue繼續(xù)，一般在發(fā)送post請求時，已發(fā)送了 http header之后服務(wù)端將返回此信息，表示確認，之后發(fā)送具體參數(shù)信息200 OK正常返回信息201 Created請求成功并且服務(wù)器創(chuàng)建了新的資源202 Accepted服務(wù)器已接受請求，但尚未處理301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位 置。302 Found 臨時性重定向。 303 See Other 臨時性重定向，且總是使用GET請求新的URI。304 Not M

30、odified自從上次請求后，請求的網(wǎng)頁未修改 過。400 Bad Request服務(wù)器無法理解請求的格式，客戶端不應(yīng)當嘗試再次使 用相同的內(nèi)容發(fā)起請求。401 Un authorized 請求未授權(quán)。 403 Forbidden 禁止訪問。404 Not Found 找不到如何與 URI相匹配的資源。500 InternalServer Error最常見的服務(wù)器端錯誤。503 Service Un available 服務(wù)器端暫時無法處理請求（可能是過載或維護）1.你有哪些性能優(yōu)化的方法?（1）減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip , CDN托管，data緩存,圖片服務(wù)器。（2）前端模板JS+ 數(shù)據(jù)，減少由于HTML標簽導(dǎo)致的帶寬浪費，前端用變量保存 AJAX請求