前端開發面試題及答案

時間：2024-12-05 14:24:35 詩琳試題我要投稿

相關推薦

前端開發面試題及答案

　　在社會的各個領域，我們總免不了要接觸或使用試題，借助試題可以檢驗考試者是否已經具備獲得某種資格的基本能力。什么樣的試題才是好試題呢？下面是小編為大家整理的前端開發面試題及答案，希望能夠幫助到大家。

前端開發面試題及答案

　　前端開發面試題及答案 1

　　1、對Web標準以及W3C的理解與認識?

　　答：標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈CSS和JS腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件、容易維護、改版方便，不需要變動頁面內容、提供打印版本而水需要復制內容、提高網站易用性。

　　2、XHTML和HTML有什么區別?

　　答：HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言最主要的不同：

　　XHTML元素必須被正確地嵌套;

　　XHTML元素必須被關閉;

　　標簽名必須用小寫字母;

　　XHTML文檔必須擁有根元素。

　　3、Doctype?嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 答：Doctype用于聲明文檔使用哪種規范(HTML/XHTML)

　　該標簽可聲明三種DTD類型，分別為嚴格版本、過度版本以及基于框架的HTML文檔。

　　加入XML聲明可觸發，解析方式更改為IE5.5擁有IE5.5的bug。

　　4、行內元素有哪些?塊級元素有哪些?CSS的盒模型?

　　答：行內元素：a b br i span input select

　　塊級元素：div p h1 h2 h3 h4 form ul

　　CSS盒模型：內容，border margin padding

　　5、CSS引入的方式有哪些?link和@import的區別是?

　　答：方式：內聯內嵌外鏈導入

　　區別：同時加載

　　前者無兼容性，后者CSS2.1以下瀏覽器不支持

　　Link支持使用javascript 改變樣式，后者不可。

　　6.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?

　　答：標簽選擇符、類選擇符、id選擇符

　　繼承不如指定 id>class>標簽選擇

　　后者優先級高

　　7、前端頁面有哪三層構成，分別是什么?作用是什么?

　　答：結構層HTML 表示層CSS 行為層JS

　　8、你做的頁面在哪些瀏覽器測試過?這些瀏覽器的內核分別是什么? 答：Ie(Ie內核)

　　火狐(Gecko)

　　谷歌(webkit)

　　opear(Presto)

　　9、img標簽上title與 alt屬性的區別是什么?

　　答：Alt當圖片不顯示時，用文字代表

　　Title為該屬性提供信息。

　　10、描述CSS Reset的作用和用途

　　答：Reset重置瀏覽器的CSS默認屬性瀏覽器的品種不同，樣式不同，然后重

　　置，讓他們統一。

　　11、http狀態碼有那些?分別代表是什么意思?

　　100-199 用于指定客戶端應響應的某些動作。

　　200-299 用于表示請求成功。

　　300-399 用于已經移動的文件并且常被包含在定位頭信息中指定新的地址信息。 400-499 用于指出客戶端的錯誤。

　　400 語義有誤，當前請求無法被服務器理解。

　　401 當前請求需要用戶驗證

　　403 服務器已經理解請求，但是拒絕執行它。

　　500-599 用于支持服務器錯誤。

　　503 – 服務不可用

　　13.解釋css sprites，如何使用。

　　Css 精靈把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

　　14.瀏覽器標準模式和怪異模式之間的區別是什么?

　　盒子模型渲染模式的不同

　　使用 window.top.document.compatMode 可顯示為什么模式

　　15.你如何對網站的文件和資源進行優化?期待的解決方案包括：

　　文件合并

　　文件最小化/文件壓縮

　　使用CDN托管

　　緩存的'使用

　　16.什么是語義化的HTML?

　　直觀的認識標簽對于搜索引擎的抓取有好處

　　17.清除浮動的幾種方式，各自的優缺點

　　1.使用空標簽清除浮動 clear:both(理論上能清楚任何標簽，增加無意義的標簽)

　　2.使用overflow:auto(空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用于兼容IE)

　　3.是用afert偽元素清除浮動(用于非IE瀏覽器)

　　18.css hack

　　_marging \IE 6

　　+margin \IE 7

　　Marging:0 auto 9 所有Ie

　　Margin \IE 8

　　前端開發面試題之Javascript部分

　　1.javascript的typeof返回哪些數據類型

　　Object number function boolean underfind

　　2.例舉3種強制類型轉換和2種隱式類型轉換?

　　強制(parseInt,parseFloat,number)

　　隱式(== – ===)

　　3.split() join() 的區別

　　前者是切割成數組的形式，后者是將數組轉換成字符串

　　4.數組方法pop() push() unshift() shift()

　　Push()尾部添加 pop()尾部刪除

　　Unshift()頭部添加 shift()頭部刪除

　　5.事件綁定和普通事件有什么區別

　　6.IE和DOM事件流的區別

　　1.執行順序不一樣、

　　2.參數不一樣

　　3.事件加不加on

　　4.this指向問題

　　7.IE和標準下有哪些兼容性的寫法

　　Var ev = ev || window.event

　　document.documentElement.clientWidth || document.body.clientWidth

　　Var target = ev.srcElement||ev.target

　　8.ajax請求的時候get 和post方式的區別

　　一個在url后面一個放在虛擬載體里面

　　有大小限制

　　安全問題

　　應用不同一個是論壇等只需要請求的，一個是類似修改密碼的

　　9.call和apply的區別

　　Object.call(this,obj1,obj2,obj3)

　　Object.apply(this,arguments)

　　10.ajax請求時，如何解釋json數據

　　使用eval parse 鑒于安全性考慮使用parse更靠譜

　　11.b繼承a的方法

　　12.JavaScript this指針、閉包、作用域

　　13.事件委托是什么

　　讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行!

　　14.閉包是什么，有什么特性，對頁面有什么影響

　　閉包就是能夠讀取其他函數內部變量的函數。

　　15.如何阻止事件冒泡和默認事件

　　canceBubble return false

　　16.添加刪除替換插入到某個接點的方法

　　obj.appendChidl()

　　obj.innersetBefore

　　obj.replaceChild

　　obj.removeChild

　　17.解釋jsonp的原理，以及為什么不是真正的ajax

　　動態創建script標簽，回調函數

　　Ajax是頁面無刷新請求數據操作

　　18.javascript的本地對象，內置對象和宿主對象

　　本地對象為array obj regexp等可以new實例化

　　內置對象為gload Math 等不可以實例化的

　　宿主為瀏覽器自帶的document,window 等

　　19.document load 和document ready的區別

　　Document.onload 是在結構和樣式加載完才執行js

　　Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

　　20.”==”和“===”的不同

　　前者會自動轉換類型

　　后者不會

　　21.javascript的同源策略

　　一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協議和端口號的組合

　　前端開發面試題及答案 2

　　1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？

　　（1）、聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器的解析器，用什么文檔類型規范來解析這個文檔。

　　（2）、嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標準運行。

　　（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

　　（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

　　2、行內元素有哪些？塊級元素有哪些？

　　（1）CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，比如div默認display屬性值為“block”，成為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。

　　（2）行內元素有：a b span img input select strong（強調的語氣）塊級元素有：div ulol li dl dtdd h1 h2 h3 h4…p

　　3、link和@import的區別是？

　　（1）link屬于XHTML標簽，而@import是CSS提供的；

　　（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；

　　（3）import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題；

　　（4）link方式的樣式的權重高于@import的權重。

　　4、瀏覽器的內核分別是什么？

　　IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原為Presto，現為Blink；

　　5、HTML5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？

　　HTML5現在已經不是SGML的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

　　繪畫canvas用于媒介回放的video和audio元素本地離線存儲localStorage長期存儲數據，瀏覽器關閉后數據不丟失；sessionStorage的數據在瀏覽器關閉后自動刪語意化更好的內容元素，比如article、footer、header、nav、section表單控件，calendar、date、time、email、url、search新的技術webworker，websockt，Geolocation

　　6、對語義化如何理解？

　　（1）import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題；

　　（2）link方式的樣式的權重高于@import的權重。

　　4、瀏覽器的內核分別是什么？

　　IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原為Presto，現為Blink；

　　5、HTML5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？

　　HTML5現在已經不是SGML的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

　　6、對語義化如何理解？

　　（3）import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題；

　　（4）link方式的樣式的權重高于@import的權重。

　　4、瀏覽器的內核分別是什么？

　　IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原為Presto，現為Blink；

　　5、HTML5有哪些新特性？如何處理HTML5新標簽的'瀏覽器兼容問題？如何區分HTML和HTML5？

　　HTML5現在已經不是SGML的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

　　6、對語義化如何理解？

　　用正確的標簽做正確的事情！

　　HTML語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析；在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于SEO。使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

　　7、HTML5的離線儲存有幾種方式？

　　localStorage長期存儲數據，瀏覽器關閉后數據不丟失；sessionStorage數據在瀏覽器關閉后自動刪除。

　　8、iframe有那些缺點？

　　iframe會阻塞主頁面的Onload事件；

　　iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

　　9、請描述一下cookies，sessionStorage和localStorage的區別？

　　cookie在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會sessionStorage和localStorage的存儲空間更大；sessionStorage和localStorage有更多豐富易用的接口；sessionStorage和localStorage各自獨立的存儲空間；

【前端開發面試題及答案】相關文章：