9道前端面試題及答案，趕緊收藏！

1、什麼是W3C標準？

WEB標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括物件模型（如W3C DOM）、ECMAScript等。

2、bootstrap響應式原理

是透過柵格系統和媒體查詢實現的 // 小螢幕（平板，大於等於 768px）@media (min-width: @screen-sm-min) { ... }// 中等螢幕（桌面顯示器，大於等於 992px）@media (min-width: @screen-md-min) { ... }// 大螢幕（大桌面顯示器，大於等於 1200...

3、HTML/XHTM的區別

XHTML 與 HTML 4.01 標準沒有太多的不同。

XHTML 元素必須被正確地巢狀。

XHTML 元素必須被關閉。

標籤名必須用小寫字母。

XHTML 文件必須擁有根元素。

如果你依然在程式設計的世界裡迷茫，不知道自己的未來規劃，可以加入web前端學習交流群：731771211 裡面可以與大神一起交流並走出迷茫。小白可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！群裡不停更新最新的教程和學習方法（進群送web前端系統學習路線，詳細的前端專案實戰教學影片），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

點選：

4、頁面構架和佈局

佈局可以是編碼方面的，也可以是視覺方面的。

編碼方面的涉及到語義化標籤(也包含了div+css)佈局、iframe框架(特殊地方使用)佈局和表格佈局(只用於一些特殊的地方，不推薦全站使用)，具體你可以百度下了解學習下相關知識。

如果是視覺互動方面的，就比較多了，每年都會有新的設計佈局，高階一點的比如視差型別佈局，全屏佈局，瀑布流，無縫拼圖佈局等，這些都不侷限於傳統的佈局方式；傳統電子商務、資訊類的大多采用單欄、兩欄或者三欄佈局，還有更多欄佈局；解析度相關的寬屏佈局和窄屏佈局，感應式佈局。太多的選擇了，要學習的東西也比較多，要慢慢了解啦。還有更多的佈局需要慢慢摸索和體驗。我把我知道的說了。

至於手機端，例舉一些：豎排列表、橫排方塊、九宮格、TAB切換式、手風琴佈局(有多個分類及其內容同時展示)、抽屜/側邊欄、標籤場景式），因為螢幕小，要增加使用者體驗都可以根據具體情況用不同的佈局方式。

5、BootStrap學習筆記，優缺點總結

優點：

BT的優勢之一就是可以根據使用者螢幕尺寸調整頁面，使其在各個尺寸上都表現良好。

BT預先定義了很多CSS類，使用的時候直接給class賦予對應的類名即可，如text-left，text-align，.table等。最有代表性的就是btn類，BT定義了一個.bt的基礎類，如果還想要其他樣式可以在這個基礎類上進行擴充套件，實現不同的視覺效果。

BT的JavaScript外掛非常豐富，既可以用現成的也可以自己擴充，BT提供了一個整合板的BT.js您可以直接拿過來使用也可以單個使用引入*.js即可。

不足：

對IE相容也存在不小的問題，BT將所有的元素盒模型都設定成了border-box，這是IE混雜模式下的盒模型，光這點就導致了不能相容IE。此外還用到了大量的H5標籤以及CSS3語法，這些語法標籤相容性方面同樣存在不小的問題，當然網上存在很多相容IE的辦法，但需要引入其他檔案，有些還不小，勢必導致載入速度變慢，影響使用者體驗。

BT對IE6，7的相容性肯定不好，對IE8的支援也需要一些額外的檔案。

IE8的媒體查詢需要response.js的配合才能實現

BT 不支援 IE 古老的相容模式。為了讓 IE 瀏覽器執行最新的渲染模式下，建議將此 標籤加入到你的頁面中：

按 F12 鍵開啟 IE 的除錯工具，就可以看到 IE 當前的渲染模式是什麼。

BT屬於前端UI庫，可以快速搭建前端頁面，以及設計響應式介面，還可以使用saas重新設計元件，

6、JQeury學習筆記，優缺點總結

優點:

jQuery實現指令碼與頁面的分離，是操作DOM的首選js庫。

最少的程式碼做最多的事情

最少的程式碼做最多的事情，這是jQuery的口號，而且名副其實。使用它的高階selector，開發者只需編寫幾行程式碼就能實現令人驚奇的效果。開發者無需過於擔憂瀏覽器差異，它除了還完全支援Ajax，而且擁有許多提高開發者程式設計效率的其它抽象概念。jQuery把JavaScript帶到了一個更高的層次。以下是一個非常簡單的示例：

程式碼如下:

$("p.neat").addClass("ohmy").show("slow");

透過以上簡短的程式碼，開發者可以遍歷“neat”類中所有的

元素，然後向其增加“ohmy”類，同時以動畫效果緩緩顯示每一個段落。開發者無需檢查客戶端瀏覽器型別，無需編寫迴圈程式碼，無需編寫複雜的動畫函式，僅僅透過一行程式碼就能實現上述效果。

效能

在大型JavaScript框架中，jQuery對效能的理解最好。儘管不同版本擁有眾多新功能，其最精簡版本只有18KB大小，這個數字已經很難再減少。jQuery的每一個版本都有重大效能提高。

外掛

基於jQuery開發的外掛目前已經有大約數千個。開發者可使用外掛來進行表單確認、圖表種類、欄位提示、動畫、進度條等任務。

節省開發者學習時間

當然要想真正學習jQuery，開發者還是需要投入一點時間，尤其是如果你要編寫大量程式碼或自主外掛的話，更是如此。但是，開發者可以採取“各個擊破”的方式，而且jQuery提供了大量示例程式碼，入門是一件非常容易的事情。

不足：

不能向後相容

外掛相容性。

jQuery的穩定性

在大型框架中，jQuery核心程式碼庫對動畫和特效的支援相對較差。

7、”高內聚 ，低耦合“到底是什麼意思？

‘高內聚，低耦合’是相對於程式碼而言，一個專案中：

每個模組之間相互聯絡的緊密程度，模組之間聯絡越緊密，則耦合性越高，模組的獨立性就越差！反之同理；

一個模組中各個元素之間的聯絡的緊密程度，如果各個元素（語句、程式段）之間的聯絡程度越高，則內聚性越高，即‘高內聚’ ！

如:一個專案中有20個方法呼叫良好，但是要修改了其中一個，另外的19個都要進行修改，這就是高耦合！獨立性太差！

現在的軟體結構設計，都會要求“高內聚，低耦合”，來保證軟體的高質量！mark！

8、對前後端聯合開發 的技術原理（Ajax、Json）有一定認識，理解DOM、Xml概念， 熟悉前後臺互動方式。

Ajax非同步互動原理：Ajax其核心有JavaScript、XMLHTTPRequest、DOM物件組成，透過XmlHttpRequest物件來向伺服器發非同步請求，從伺服器獲得資料，然後用JavaScript來操作DOM而更新頁面。

Json：一般我用的比較多的是透過AJAX非同步來獲取JSON資料。

DOM：文件物件模型，一個網頁中所有的東西都是dom節點，根節點是，它可以無線巢狀。用來獲取或設定文件中標籤的屬性，例如獲取或者設定input表單的value值。

BOM：瀏覽器物件模型。用來獲取或設定瀏覽器的屬性、行為，例如：新建視窗、獲取螢幕解析度、瀏覽器版本號等。

XML：被設計用來傳輸和儲存資料，被設計用來格式化和顯示資料。僅僅是純文字。

-前後臺互動方式：

9、GET和POST請求的區別

GET提交的資料會放在URL之後，以?分割URL和傳輸資料，引數之間以&相連，如EditPosts.aspx?name=test1&id=123456. POST方法是把提交的資料放在HTTP包的Body中.

GET提交的資料大小有限制（因為瀏覽器對URL的長度有限制），而POST方法提交的資料沒有限制.

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

GET方式提交資料，會帶來安全問題，比如一個登入頁面，透過GET方式提交資料時，使用者名稱和密碼將出現在URL上，如果頁面可以被快取或者其他人可以訪問這臺機器，就可以從歷史記錄獲得該使用者的賬號和密碼.