web 前端面試題總結

阿新 • • 發佈：2018-11-08

你如何理解HTML結構的語意化?

1、去掉或樣式丟失的時候能讓頁面呈現清晰的結構。
2、螢幕閱讀器（如果訪客有視障）會完全根據你的標記來"讀"你的網頁。
3、PDA、手機等裝置可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些裝置對CSS的支援較弱）。
4、搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重。
5、你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用於表現的標記，而只注重語義標記。
6、便於團隊開發和維護。

Doctype文件宣告的嚴格模式和混雜模式，如何觸發這兩種模式，區分它們有何意義?

1、如何觸發兩種模式

加入xml頭部宣告，可以觸發IE瀏覽器的Quirks mode，觸發之後，瀏覽器解析方式就和IE5.5一樣，擁有IE5.5一樣的bug和其他問題，行為（Javascript）也是如此。

2、IE6的觸發：在XHTML的DOCTYPE前加入XML宣告

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3、IE7的觸發：在XML宣告和XHTML的DOCTYPE之間，加入HTML註釋

<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4、IE6和IE7都可以觸發的：在HTML4.01的DOCTYPE文件頭部，加入HTML註釋

<!-- quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5、在頁面頂部加 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ，將觸發"怪異模式"

6、沒有使用DTD宣告或者使用HTML4以下（不包括HTML4）的DTD宣告時，基本上所有的瀏覽器都是使用quirks mode呈現

談談以前端角度出發做好SEO需要考慮什麼？

1、瞭解搜尋引擎如何抓取網頁和如何索引網頁。
2、Meta標籤優化。
3、如何選取關鍵詞並在網頁中放置關鍵詞。
4、瞭解主要的搜尋引擎。
5、主要的網際網路目錄
6、按點選付費的搜尋引擎。
7、搜尋引擎登入。
8、連結交換和連結廣泛度（Link Popularity）。
9、標籤的合理使用。

我們知道可以以外鏈的方式引入CSS檔案，請談談外鏈引入CSS有哪些方式，這些方式的效能有區別嗎？

CSS的引入方式最常用的有三種：

第一：在head部分加入 <link rel="stylesheet" type="text/css" href="my.css"/>, 引入外部的CSS檔案。
第二：在head部分加入
<style type="text/css"> 
div{margin: 0;padding: 0;border:1px red solid;} 
</style>
第三：直接在頁面的標籤里加 <div style="border:1px red solid;">

CSS Sprite是什麼，談談這個技術的優缺點？

CSS sprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到中去，減少對伺服器的請求次數，提高訪問速度。

1、優點：

（1）利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的效能，這也是CSS Sprite的優點，也是其被廣泛傳播和應用的主要原因。
（2）解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素命名，從而提高了網頁的製作效率。
（3）換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來也很方便。

2、缺點：

（1）在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內顯示不必要的背景。這些還好，最痛苦的是在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易將背景斷裂。
（2）CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位是針線活，沒什麼難度，但是很繁瑣。
（3）CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片，無需改的好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字加了，還要改動css。

以CSS3標準定義一個webkit核心瀏覽器識別的圓角（尺寸隨意）

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;

行內元素有哪些？塊級元素有哪些？CSS的盒模型？

行內元素有：a b span I em img input select strong
級元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
盒模型：margin border padding width

前端頁面有哪三層構成，分別是什麼？作用是什麼？

網頁分成三個層次，即：結構層、表示層、行為層。

1、網頁的結構層（structurallayer）由HTML 或XHTML 之類的標記語言負責建立。標籤，也就是那些出現在尖括號裡的單詞，對網頁內容的語義含義做出這些標籤不包含任何關於如何顯示有關內容的資訊。例如，P標籤表達了這樣一種語義："這是一個文字段。"
2、網頁的表示層（presentationlayer）由CSS 負責建立。CSS對"如何顯示有關內容"的問題做出了回答。
3、網頁的行為層（behaviorlayer）負責回答"內容應該如何對事件做出反應"這一問題。這是Javascript 語言和DOM 主宰的領域。

html中form裡action方法的get和post有什麼區別？

1、Get是用來從伺服器上獲得資料，而Post是用來向伺服器上傳遞資料。
2、Get將表單中資料的按照variable=value的形式，新增到action所指向的URL後面，並且兩者使用"?"連線，而各個變數之間使用"&"連線。Post是將表單中的資料放在form的資料體中，按照變數和值相對應的方式，傳遞到action所指向URL。
3、Get是不安全的，因為在傳輸過程，資料被放在請求的URL中，而如今現有的很多伺服器、代理伺服器或者使用者代理都會將請求URL記錄到日誌檔案中，然後放在某個地方，這樣就可能會有一些隱私的資訊被第三方看到。另外，使用者也可以在瀏覽器上直接看到提交的資料，一些系統內部訊息將會一同顯示在使用者面前。Post的所有操作對使用者來說都是不可見的。
4、Get傳輸的資料量小，這主要是因為受URL長度限制。而Post可以傳輸大量的資料，所以在上傳檔案只能使用Post（當然還有一個原因，將在後面的提到）。
5、Get限制Form表單的資料集的值必須為ASCII字元。而Post支援整個ISO10646字符集。
6、Get是Form的預設方法。

html元素的id跟class什麼區別

id和class是網頁中兩個通用屬性，他們協同工作使整個頁面豐富多彩，當我們為一個元素定義樣式時，二者都可用，但有區別：

1、在css樣式表中書寫時，id選擇符字首應加"#"，class選擇符字首應加"."
2、id屬性在一個頁面中書寫時只能使用一次，而class可以反覆使用
3、id作為元素標籤用於區分不同結構和內容，而class作為一個樣式，可以應用到任何結構和內容當中去
4、佈局上的一般原則：id先確定結構和內容再為它定義樣式。而class正好相反，是先定義樣式，然後在頁面中根據不同需求把樣式應用到不同結構和內容上
5、目前瀏覽器都允許同一個頁面出現多個相同屬性值的id，一般情況能正常顯示，不過當javascript通過id來控制元素時就會出錯
6、在實際應用中，class常被用到文字版塊和頁面修飾上，而id多被用在巨集偉佈局和設計包含塊，或包含框的樣式。

Ajax是什麼？

Ajax不是一個技術，它實際上是幾種技術，每種技術都有其獨特這處，合在一起就成了一個功能強大的新技術。Ajax包括：

1、XHTML和CSS
2、使用文件物件模型(Document Object Model)作動態顯示和互動
3、使用XML和XSLT做資料互動和操作
4、使用XMLHttpRequest進行非同步資料接收
5、使用JavaScript將它們繫結在一起

你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?經常遇到的瀏覽器的相容性有哪些？怎麼會出現？解決方法是什麼？

1、DOCTYPE 影響 CSS 處理
2、FF: 設定 padding 後， div 會增加 height 和 width，但 IE 不會，故需要用 !important 多設一個 height 和 width
3、FF: 支援 !important， IE 則忽略，可用 !important 為 FF 特別設定樣式
4、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制內容不要換行
5、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px, 解決方法： div{margin:30px!important;margin:28px;} 注意這兩個margin的順序一定不能寫反，!important這個屬性IE不能識別，但別的瀏覽器可以識別。

html5 離線儲存

Html5的一個重要特性就是離線儲存，所謂的離線儲存就是將一些資原始檔儲存在本地，這樣後續的頁面重新載入將使用本地資原始檔，在離線情況下可以繼續訪問web應用，同時通過一定的手法（更新相關檔案或者使用相關API），可以更新、刪除離線儲存等操作。

Html5的離線儲存使用一個manifest檔案來標明哪些檔案是需要被儲存的，使用如 <html manifest='offline.manifest'> 來引入一個manifest檔案，這個檔案的路徑可以是相對的，也可以是絕對的，如果你的web應用很多，而且希望能集中管理manifest檔案，那麼靜態檔案伺服器是個不錯的選擇。

iframe的優缺點？

1、缺點：

在網頁中使用框架結構最大的弊病是搜尋引擎的"蜘蛛"程式無法解讀這種頁面。當"蜘蛛"程式遇到由數個框架組成的網頁時，它們只看到框架而無法找到鏈接，因此它們會以為該網站是個死站點，並且很快轉身離去。對一個網站來說這無異於一場災難。如果你想銷售產品，你需要客戶;如想得到客戶，你首先要讓人們訪問你的網站，而要做到這一點，你就非求助於搜尋引擎不可。你花費了大量的時間、精力和金錢開設了一家網上商店，卻又故意不讓搜尋引擎檢索你，這就好象開家零售商店，卻將窗戶全部漆成黑色，而且還不掛任何招牌一樣。

2、優點：

從上文中我們可以發現，使用ifame框架的弊端是無法被搜尋引擎所爬行抓取。但凡事總是具有兩面性。它的這個缺點也可能是他的優點。利用這一點那我們就可以把我們站點上一些需要給我們的使用者檢視，但是不需要搜尋引擎爬行的內容用ifame框架進行顯示，這樣就可以讓ifram發揮真正的效果了，而且有我們站點中的程式碼也可以得到很大的精簡，舉一個例子，新增微博直播資訊，這些微博資訊我們並不需要提供給搜尋引擎，而我們需要提供的是與訪客的一個互動的體驗，如果我們使用ifame框架嵌入微博的資訊，不僅可以簡便的新增站點的微博直播平臺，同時我們看到程式碼也十分的精簡。

iframe好在能夠把原先的網頁全部原封不動顯示下來,但是如果用在首頁,是搜尋引擎最討厭的.那麼你的網站即使做的再好,也排不到好的名次!如果是動態網頁，用include還好點！但是必須要去除他的<html><head><title><body>標籤！

框架的優點

過載頁面時不需要過載整個頁面，只需要過載頁面中的一個框架頁(減少了資料的傳輸，增加了網頁下載速度)
方便製作導航欄

框架的缺點

會產生很多頁面，不容易管理
不容易列印
瀏覽器的後退按鈕無效
程式碼複雜,無法被一些搜尋引擎索引到
多數小型的移動裝置（PDA 手機）無法完全顯示框架
多框架的頁面會增加伺服器的http請求
由於上面諸多缺點，因此不符合標準網頁設計的理念,已經被標準網頁設計拋棄

提示: 目前框架的所有優點完全可以使用Ajax實現，因此已經沒有必要使用框架了。

CSS盒模型原理

1、W3C 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分。
2、IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

CSS display:none和visibility:hidden的區別

visibility:hidden隱藏，但在瀏覽時保留位置
display:none視為不存在，且不載入

jQuery是什麼？

jQuery是javascript編寫一個可重用的JavaScript庫。

不使用jQuery設定UI文字的JavaScript程式碼如下：

document.getElementById("txt1").value = "hello";

用jQuery類庫後的的JavaScript程式碼如下：

$("#txt1").val("Hello");

可見，在使用jQuery類庫後的JavaScript程式碼明顯簡潔了很多，也更符合IT行業特點：短、平、快。

jquery與JavaScript的關係，jQuery會取代JavaScript嗎？

JavaScript：是一門Web最流行的指令碼語言。
jQuery: 是一個優秀的Javascript框架。它是輕量級的js庫，它相容CSS3，還相容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

jQuery是並不是要取代的JavaScript。使用jQuery使Web開發變得簡單。

如何使用jQuery庫？

從jquery.com下載的jquery.js檔案（最新的jQuery版本V1.11.1或V2.1.1）。 jQuery的檔案規則，如"jquery-1.4.1.j s"，其中1.4.1是JS檔案的版本的版本號。

在開發Web程式前，需要包含的JavaScript，如圖下面的程式碼：

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

CDN（內容分發網路）是什麼？

在開發Web頁面，考慮最多的問題之一是頁面在客戶端電腦的響應：時間越短，使用者體驗越好。

而制約使用者體驗的關鍵因素之一是瀏覽器下載Web檔案大小，包括*.html、圖片、*.js、*.css等檔案。

為了最大化複用和節約頻寬，故CDN應運而生：其基本思路是儘可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。其目的是使使用者可就近取得所需內容，解決 Internet網路擁擠的狀況，提高使用者訪問網站的響應速度。

如何使用jQuery CDN？

（1）推薦使用官方的CDN節點，使用程式碼如下：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

2）還有Google提供的jQuery CDN：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

（3）同時微軟也提供了jQuery CDN的節點：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>

如何在CDN網路不可訪問情況下，能自動訪問網站的jQuery檔案？

一般情況下，CDN網路節點是可靠的。但是偶爾也有失靈的時候，故為了提供雙保險，可進行判斷網路載入CDN失敗，則自動載入網站上的jQuery, 示例程式碼如下：

<script type="text/javascript" src="http:/ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
if (typeof jQuery == 'undefined')  
{  
    document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));  
}
</script>

同版本的jQuery.js檔案和jQuery.min.js有何不同？

相同：這兩個檔案提供相同的jQuery的功能，即在函式呼叫上沒有區別。
不同：jQuery.js檔案，適合讓程式設計師閱讀。jQuery.min.js檔案，通過壓縮和刪除所有的空格，以節省頻寬和空間，使得檔案更小，用於網路傳輸，不適合程式設計師閱讀。

何時使用jquery.js，何時使用jquery.min.js？

開發除錯場景下：用jQuery.js檔案，因為你想除錯，能夠看到javascript程式碼。
生產部署環境下：用jQuery.min.js檔案，可減少網路寬度，加快網頁載入速度。

jQuery.vsdoc.js檔案是什麼?

*.vsdoc.js檔案是用來在微軟的開發環境Visual Studio下使用的，方便得獲得jQuery的智慧感知，當你輸入jQuery函授後，會自動提示函式的型別、函式使用說明、函式引數等等。如果在VS下用jQuery開發Web程式，則vsdoc.js檔案會大大的提高開發效率。

jQuery的基本語法如何解釋？

jQuery的語法結構可以分為四部分：

1、預設情況下，所有Jquery的命令開始以一個"$"符號。
2、其次是HTML元素的選擇。例如下面是我們通過ID"txt1"選擇一個HTML文字框。
3、接著由點（.）分隔。這個操作者將分離的元素和該元素的動作(函式)。
4、最後什麼樣的函式(動作)。

在jQuery中，"$"符號代表什麼？

在jQuery中，"$"符號是一個jQuery的別名，預設的jQuery類庫以$開頭。

為何要使用jQuery.noConflict（）？

有很多類似jQuery一樣的類庫，如MooTools, Backbone, Sammy, Cappuccino, Knockout 。這些類庫中，有的也使用了$符號，如果同時使用，則會導致命名衝突。

為了解決這個衝突，需要用到jQuery.noConflict()，這樣就不依賴$這個預設符號了。例如：

jQuery.noConflict();  
(function($){

})(jQuery);

同一個頁面中，能否載入多個個document.ready事件？

可以。

web 前端面試題 總結