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

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

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

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

4、呈現(xiàn)。(Q2)標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在 兼容模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止 站點無法工作。6. HTML5 為什么只需要寫< Doctype html> ？HTML5不基于SGML，因此不需要對DTD進行引用；但是需要doctype來 規(guī)范瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行)。而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。7. 頁面導入樣式時，使用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. 介紹一下你對瀏覽器內核的理解？IE 瀏覽器的內核 Tride nt、Mozilla 的 Gecko、Chrome 的 Bli nk ( WebKit 的 分支)、Opera內核原為Presto，現(xiàn)為 Blink；內核主要分成兩部分：渲染弓 |擎(layout en

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

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

8、Geolocation;(Q2) IE8/IE7/IE6 支持通過document.createElement 方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式。也可以直接使用成熟的框架、比如 html5shim，10. 簡述一下你對 HTML語義化的理解？用正確的標簽做正確的事情。1. html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引 擎解析；2. 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于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比設置的大。 浮動ie產(chǎn)生的雙倍距離 #box float:left; width:10px; margin:0 0 0 100px;這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標簽樣式控制中加 入 _display:inline

10、;將其轉化為行內屬性。(_這個符號只有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在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會sessi on Storage 和 localStorage 的存儲空間更大；sessionStorage和localStorage有更多豐富易用的接口；ses

13、sionStorage和localStorage各自獨立的存儲空間；CSS 一、 介紹一下CSS的盒子模型？(1 )有兩種，IE盒子模型、標準 W3C盒子模型；IE的content部分包 含了 border 和 pading;(2)盒模型:內容(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)先級就近原則，同權重情況下樣式定義最近者為準；載入樣式以最后載入的定位為準；優(yōu)先級為：！important > id > class > tag ,important比 內聯(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單選框或復選框被選中。四、如何居中div ?如何居中一個浮動元素？?水平居中：給div設置一個寬度，然后添加 margin:0 auto屬性divwidth:200px; margi n:0 auto; ?垂直居中：確定容器的寬高：如寬500高300的層設置層的外邊距.div Width:500px height:300px; 高度可以不設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缺省值。象行內元素類型一樣顯示。inline-block象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。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) 旋轉(transform)transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);旋轉,縮放,定位,傾斜增加了更多的CSS選擇器多背景rgba七、一個滿屏品字布局如何設計八、為什么要初始化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ī)范中的一個概念，它決定了元素如何對其內容進行定位，以 及與其他元素的關系和相互作用。十二、css定義的權重以下是權重的規(guī)則：標簽的權重為1, class的權重為10 , id的權重為100， 以下例子是演示各種定義的權重值：/權重為1/div /權重為10/.class1 / 權重為100/id1 /權重為100+1=101 /id1 div /權重為10+1=11 /.class1 di

23、v / 權重為10+10+仁21 / .classl .class2 div如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現(xiàn)十三、解釋下浮動和它的工作原理？清除浮動的技巧十四、用過媒體查詢，針對移動端的布局嗎？十五、使用CSS預處理器嗎？喜歡那個？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有哪些內置對象？數(shù)據(jù)圭寸裝類對象(五種)：Object、Array、Boolean、Number 和 String ；其他對象：Function、Arguments、Math、Date、RegExp、Errorthis對象的理解this總是指向函數(shù)的直接調用者(所謂當前對象，而非間接調用者) 如果有new關鍵字，this指向new出來的那個對象；在事件中

25、，this指向觸發(fā)這個事件的對象，特殊的是IE中的attachEvent 中的this總是指向全局對象 Window。eval ()是做什么的？把對應的字符串解析成JS代碼并運行；應該避免使用eval不安全，非常耗性能(2次，一次解析成js語句，一次 執(zhí)行)。由JSON字符串轉換為JSON對象的時候可以用eval，var obj =eval( ( +str +')'。)DOM怎樣添加、移除、移動、復制、創(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是一個表示”無”的對象，轉為數(shù)值時為0;undefined是一個表示”無”的原始值，

27、轉為數(shù)值時為 NaN。undefined :（1） 變量被聲明了，但沒有賦值時，就等于undefined。（2） 調用函數(shù)時，應該提供的參數(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之后服務端將返回此信息，表示確認，之后發(fā)送具體參數(shù)信息200 OK正常返回信息201 Created請求成功并且服務器創(chuàng)建了新的資源202 Accepted服務器已接受請求，但尚未處理301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位 置。302 Found 臨時性重定向。 303 See Other 臨時性重定向，且總是使用GET請求新的URI。304 Not M

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