前端是網頁設計過程中一個重要的組成部分，那麼在面試網頁設計師的時候，往往會遇到前端試題操作，以下是小編為大家搜尋整理的網頁設計前端面試題集合，希望能給大家帶來幫助!更多精彩內容請及時關注我們應屆畢業生考試網!
HTML+CSS
1.對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性;
l和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
ype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於宣告文件使用那種規範(html/Xhtml)一般為 嚴格過度 基於框架的html文件加入XMl宣告可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 匯入
區別 ：同時載入
前者無相容性，後者CSS2.1以下瀏覽器不支援
Link 支援使用javascript改變樣式，後者不可
選擇符有哪些?哪些屬性可以繼承?優先順序演算法
如何計算?
內聯和important哪個優先順序高?
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先順序高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內
核分別是什麼?
Ie(Ie核心) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3畫素問題 使用float引起的 使用dislpay:inline -3px
3.超連結hover 點選後失效 使用正確的書寫順序 link visited hover active
z-index問題 給父級新增position:relative
5.Png 透明 使用js程式碼 改
-height 最小高度 !Important 解決’
ct 在ie6下遮蓋 使用iframe巢狀
8.為什麼沒有辦法定義1px左右的寬度容器(IE6預設的行
高造成的，使用over:hidden,zoom:0.08 line-height:1px)
11.標籤上title與alt屬性的區別是什麼?
Alt 當圖片不顯示是 用文字代表。
Title 為該屬性提供資訊
12.描述css reset的作用和用途。
Reset重置瀏覽器的css預設屬性 瀏覽器的品種不同，
樣式不同，然後重置，讓他們統一
13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，
減輕伺服器對圖片的請求數量
14.瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型 渲染模式的不同
使用 atMode
可顯示為什麼模式
15.你如何對網站的檔案和資源進行優化?期待的解決方案包括：
檔案合併
檔案最小化/檔案壓縮
使用CDN託管
快取的使用
16.什麼是語義化的HTML?
直觀的認識標籤 對於搜尋引擎的抓取有好處
17.清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both(理論上能清楚
任何標籤，，，增加無意義的標籤)
2.使用overflow:auto(空標籤元素清除浮動而不得
不增加無意程式碼的弊端,,使用zoom:1用於相容IE)
3.是用afert偽元素清除浮動(用於非IE瀏覽器)
Javascript
script的typeof返回哪些資料型別
Object number function boolean underfind
2.例舉3種強制型別轉換和2種隱式型別轉換?
強制(parseInt,parseFloat,number)
隱式(== – ===)
t() join() 的區別
前者是切割成陣列的形式，後者是將陣列轉換成字串
4.陣列方法pop() push() unshift() shift()
Push()尾部新增 pop()尾部刪除
Unshift()頭部新增 shift()頭部刪除
5.事件繫結和普通事件有什麼區別
和DOM事件流的區別
1.執行順序不一樣、
2.引數不一樣
3.事件加不加on
指向問題
和標準下有哪些相容性的寫法
Var ev = ev || t
ntWidth || ntWidth
Var target = lement||et
請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
和apply的區別
(this,obj1,obj2,obj3)
y(this,arguments)
請求時，如何解釋json資料
使用eval parse 鑑於安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫一個獲取非行間樣式的函式
?| 1234567891011 | function getStyle(obj, attr, value) {if (!value) {if (entStyle) {return entStyle(attr)} else {omputedStyle(attr, false)}} else {e[attr] = value}} |
13.事件委託是什麼
讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行!
例子可見此連結
14.閉包是什麼，有什麼特性，對頁面有什麼影響
閉包就是能夠讀取其他函式內部變數的函式。
1、將變數 i 儲存給在每個段落物件(p)上
1. function init1() {
2. var pAry = lementsByTagName("p");
3. for( var i=0; i
4. pAry[i].i = i;
5. pAry[i]ick = function() {
6. alert(this.i);
7. }
8. }
9. }
2、將變數 i 儲存在匿名函式自身
1. function init2() {
2. var pAry = lementsByTagName("p");
3. for( var i=0; i
4. (pAry[i]ick = function() {
5. alert(ee.i);
6. }).i = i;
7. }
8. }
3、加一層閉包，i 以函式引數形式傳遞給內層函式
1. function init3() {
2. var pAry = lementsByTagName("p");
3. for( var i=0; i
4. (function(arg){
5. pAry[i]ick = function() {
6. alert(arg);
7. };
8. })(i);//呼叫時引數
9. }
10.}
4、加一層閉包，i 以區域性變數形式傳遞給內層函式
1. function init4() {
2. var pAry = lementsByTagName("p");
3. for( var i=0; i
4. (function () {
5. var temp = i;//呼叫時區域性變數
6. pAry[i]ick = function() {
7. alert(temp);
8. }
9. })();
10. }
11.}
5、加一層閉包，返回一個函式作為響應事件(注意與3的細微區別)
1. function init5() {
2. var pAry = lementsByTagName("p");
3. for( var i=0; i < th; i++ ) {
4. pAry[i]ick = function(arg) {
5. return function() {//返回一個函式
6. alert(arg);
7. }
8. }(i);
9. }
10.}
6、用Function實現，實際上每產生一個函式例項就會產生一個閉包
1. function init6() {
2. var pAry = lementsByTagName("p");
3. for( var i=0; i
4. pAry[i]ick = new Function("alert(" + i + ");");//new一次就產生一個函式例項
5. }
6. }
7、用Function實現，注意與6的區別
1. function init7() {
2. var pAry = lementsByTagName("p");
3. for( var i=0; i
4. pAry[i]ick = Function('alert('+i+')');
5. }
6. }
15.如何阻止事件冒泡和預設事件
canceBubble return false
16.新增 刪除 替換 插入到某個接點的方法
ndChidl()
rsetBefore
aceChild
veChild
17.解釋jsonp的原理，以及為什麼不是真正的ajax
動態建立script標籤，回撥函式
Ajax是頁面無重新整理請求資料操作
script的本地物件，內建物件和宿主物件
本地物件為array obj regexp等可以new例項化
內建物件為gload Math 等不可以例項化的
宿主為瀏覽器自帶的document,window 等
ment load 和document ready的區別
ad 是在結構和樣式載入完才執行js
y原生種沒有這個方法，jquery中有
$()y(function)
20.”==”和“===”的不同
前者會自動轉換型別
後者不會
script的同源策略
一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，
這裡的同一來源指的是主機名、協議和埠號的組合
22.編寫一個數組去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i < th;i++)
{
if(!result[arr])
{
(arr)
result[arr]=1
}
}
return newArr
}
23.媒體選擇器
@media (min-width: 992px) and (max-width: 1199px)
@media screen and (min-width: 768px)
HTML&CSS
1. 常用那幾種瀏覽器測試?有哪些核心(Layout Engine)?
(Q1)瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(Q2)核心：Trident，Gecko，Presto，Webkit。
2. 說下行內元素和塊級元素的區別?行內塊元素的相容性使用?(IE8 以下)
(Q1)行內元素：會在水平方向排列，不能包含塊級元素，設定width無效，
height無效(可以設定line-height)，margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接著一個斷行。
(Q2)相容性：display:inline-block;*display:inline;*zoom:1;
3.清除浮動有哪些方式?比較好的方式是哪一種?
(Q1)
(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。
(Q2)比較好的是第3種方式，好多網站都這麼用。
-sizing常用的屬性有哪些?分別有什麼作用?
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。
在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的
寬度和高度內進行繪製。通過從已設定的寬度和高度分別減
去邊框和內邊距才能得到內容的寬度和高度。
ype作用?標準模式與相容模式各有什麼區別?
(Q1)>!DOCTYPE<告知瀏覽器的解析器用什麼文件
標準解析這個文件。DOCTYPE不存在或格式不正確會導致文
檔以相容模式呈現。
(Q2)標準模式的排版和JS運作模式都是以該瀏覽器支援的最
高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式
顯示,模擬老式瀏覽器的行為以防止站點無法工作。
5 為什麼只需要寫 >!DOCTYPE HTML
HTML5不基於 SGML，因此不需要對DTD進行引用，但是
需要doctype來規範瀏覽器的行為(讓瀏覽器按照它們
應該的方式來執行)。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能
告知瀏覽器文件所使用的文件型別。
7.頁面匯入樣式時，使用link和@import有什麼區別?
(1)link屬於XHTML標籤，除了載入CSS外，還能用
於定義RSS, 定義rel連線屬性等作用;而@import是CSS提
供的，只能用於載入CSS;
(2)頁面被載入的時，link會同時被載入，而@import引用
的CSS會等到頁面被載入完再載入;
(3)import是CSS2.1 提出的，只在IE5以上才能被識別，
而link是XHTML標籤，無相容問題;
8.介紹一下你對瀏覽器核心的理解?
主要分成兩部分：渲染引擎(layout engineer或
Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容(HTML、XML、影象等等)、
整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，
然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於
網頁的語法解釋會有不同，所以渲染的效果也不相同。
所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、
顯示網路內容的應用程式都需要核心。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎
越來越獨立，核心就傾向於只指渲染引擎。
5有哪些新特性?如何處理HTML5新標籤的瀏覽器兼
容問題?如何區分 HTML 和 HTML5?
(Q1)
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
(4)sessionStorage 的資料在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制元件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6支援通過teElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
當然也可以直接使用成熟的框架、比如html5shim;
>!--[if lt IE 9]<
>script< src="">/script<
>![endif]--<
10.簡述一下你對HTML語義化的理解?
用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
即使在沒有樣式CSS情況下也以一種文件格式顯示，並且是容易閱讀的;
搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的.權重，利於SEO;
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
JavaScript
1.介紹js的基本資料型別
Undefined、Null、Boolean、Number、String
有哪些內建物件?
資料封裝類物件：Object、Array、Boolean、Number 和 String
其他物件：Function、Arguments、Math、Date、RegExp、Error
物件的理解
this總是指向函式的直接呼叫者(而非間接呼叫者);
如果有new關鍵字，this指向new出來的那個物件;
在事件中，this指向觸發這個事件的物件，特殊的是，IE中
的attachEvent中的this總是指向全域性物件Window;
是做什麼的?
它的功能是把對應的字串解析成JS程式碼並執行;
應該避免使用eval，不安全，非常耗效能(2次，一次解析成js語句，一次執行)。
由JSON字串轉換為JSON物件的時候可以用eval，var obj =eval('('+ str +')');
怎樣新增、移除、移動、複製、建立和查詢節點
// 建立新節點
createDocumentFragment() //建立一個DOM片段
createElement() //建立一個具體的元素
createTextNode() //建立一個文字節點
// 新增、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
// 查詢
getElementsByTagName() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值
(IE容錯能力較強，會得到一個數組，其中包括id等於name值的)
getElementById() //通過元素Id，唯一性
和undefined的區別?
null是一個表示"無"的物件，轉為數值時為0;undefined是一
個表示"無"的原始值，轉為數值時為NaN。
undefined：
(1)變數被聲明瞭，但沒有賦值時，就等於undefined。
(2) 呼叫函式時，應該提供的引數沒有提供，該引數等於undefined。
(3)物件沒有賦值的屬性，該屬性的值為undefined。
(4)函式沒有返回值時，預設返回undefined。
null：
(1) 作為函式的引數，表示該函式的引數不是物件。
(2) 作為物件原型鏈的終點。
操作符具體幹了什麼呢?
(1)建立一個空物件，並且 this 變數引用該物件，
同時還繼承了該函式的原型。
(2)屬性和方法被加入到 this 引用的物件中。
(3)新建立的物件由 this 所引用，並且最後隱式的返回 this 。
的瞭解?
JSON(JavaScript Object Notation) 是一種輕
量級的資料交換格式。它是基於JavaScript的一個子集。
資料格式簡單, 易於讀寫, 佔用頻寬小。
格式：採用鍵值對，例如：{'age':'12', 'name':'back'}
() 和 apply() 的區別和作用?
apply()函式有兩個引數：第一個引數是上下文，第二個
引數是引數組成的陣列。如果上下文是null，則使用全域性物件代替。
如：y(this,[1,2,3]);
call()的第一個引數是上下文，後續是例項傳入的引數序列。
如：(this,1,2,3);
10.如何獲取UA?
function whatBrowser() {
e=ame;
e=ersion;
e=odeName;
e=Agent;
}
其他
狀態碼知道哪些?
100 Continue 繼續，一般在傳送post請求時，已傳送了
http header之後服務端將返回此資訊，表示確認，之後傳送具體引數資訊
200 OK 正常返回資訊
201 Created 請求成功並且伺服器建立了新的資源
202 Accepted 伺服器已接受請求，但尚未處理
301 Moved Permanently 請求的網頁已永久移動到新位置。
302 Found 臨時性重定向。
303 See Other 臨時性重定向，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求後，請求的網頁未修改過。
400 Bad Request 伺服器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized 請求未授權。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見的伺服器端錯誤。
503 Service Unavailable 伺服器端暫時無法處理請求(可能是過載或維護)。
2.你有哪些效能優化的方法?
(1) 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大
小控制合適;網頁Gzip，CDN託管，data快取 ，圖片伺服器。
(2) 前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，
前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
(3) 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。
(4) 當需要設定的樣式很多時設定className而不是直接操作style。
(5) 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。
(6) 避免使用CSS Expression(css表示式)又稱Dynamic properties(動態屬性)。
(7) 圖片預載入，將樣式表放在頂部，將指令碼放在底部 加上時間戳。
3.什麼叫優雅降級和漸進增強?
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使
用的是老式瀏覽器，則程式碼會檢查以確認它們是否能正常工作。
由於IE獨特的盒模型佈局問題，針對不同版本的IE的hack實踐
過優雅降級了,為那些無法支援功能的瀏覽器增加候選方案，
使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.
漸進增強：從被所有瀏覽器支援的基本功能開始，逐步地新增那些
只有新式瀏覽器才支援的功能,向頁面增加無害於基礎瀏覽器的額
外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。
4.哪些常見操作會造成記憶體洩漏?
記憶體洩漏指任何物件在您不再擁有或需要它之後仍然存在。
垃圾回收器定期掃描物件，並計算引用了每個物件的其他物件的數量。
如果一個物件的引用數量為 0(沒有其他物件引用過該物件)，
或對該物件的惟一引用是迴圈的，那麼該物件的記憶體即可回收。
setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體洩漏。
閉包、控制檯日誌、迴圈(在兩個物件彼此引用且彼此保留時，就會產生一個迴圈)
5.執行緒與程序的區別
一個程式至少有一個程序,一個程序至少有一個執行緒.
執行緒的劃分尺度小於程序，使得多執行緒程式的併發性高。
另外，程序在執行過程中擁有獨立的記憶體單元，而多個執行緒共享記憶體，
從而極大地提高了程式的執行效率。
執行緒在執行過程中與程序還是有區別的。每個獨立的執行緒有一個程
序執行的入口、順序執行序列和程式的出口。但是執行緒不能夠獨立
執行，必須依存在應用程式中，由應用程式提供多個執行緒執行控制。
從邏輯角度來看，多執行緒的意義在於一個應用程式中，有多個執行
部分可以同時執行。但作業系統並沒有將多個執行緒看做多個獨立的
應用，來實現程序的排程和管理以及資源分配。這就是程序和執行緒
的重要區別。
前端開發工程師面試題 Javascript
1. 要動態改變層中內容可以使用的方法有(AB )
a)innerHTML
b)innerText
c)通過設定層的隱藏和顯示來實現
d)通過設定層的樣式屬性的display屬性
2. 當按鍵盤A時，使用onKeyDown事件列印ode的結果是(A )
a)65
b)13
c)97
d)37
3. 在javascript裡，下列選項中不屬於陣列方法的是(B);
a)sort()
b)length()
c)concat()
d)reverse()
4. 下列哪一個選項可以用來檢索被選定的選項的索引號?(B)
a)disabled
b)selectedIndex
c)option
d)multiple
5. 希望圖片具有”提交”按鈕同樣的功能,該如何編寫表單提交?(A )
a)在圖片的onClick事件中手動提交
b)在圖片上新增onSubmit事件
c)在圖片的onSubmit事件中手動提交
d)在表單中自動提交
6. 使div層和文字框處在同一行的程式碼正確的是(D );
a)
b)
c)
d)
7. 下列選項中,描述正確的是(選擇兩項) 。( AD )
a)(new Option(‘a’,'A’))可以動態新增一個下拉列表選項
b)(new Option(‘a’,'A’))可以動態新增一個下拉列表選項
c)new Option(‘a’,'A’)中’a'表示列表選項的值,’A'用於在頁面中顯示
d)new Option(‘a’,'A’)中’A'表示列表選項的值,’a'用於在頁面中顯示
8. 、 var emp = new Array(3);
for(var i in emp)
以下答案中能與for迴圈程式碼互換的是: (選擇一項)。(D )
A for(var i =0; i
B for(var i =0; i
C for(var i =0; i
D for(var i =0; i
9. 製作級聯選單功能時呼叫的是下拉列表框的(A )事件。
a)onChange
b)onFocus
c)selected
d)onClick
10. 下列宣告陣列的語句中，錯誤的選項是( C )。
a)Var arry= new Array()
b)Var arry=new Array(3)
c)Var arry[]=new Array(3)(4)
d)Var arry=new Array(‘3’,’4’)
11. 下列屬性哪一個能夠實現層的隱藏?(C )
a)display:fals
b)display:hidden
c)display:none
d)display:” ”
12. 下列哪一個選項不屬於document物件的方法?(D )
a)focus()
b)getElementById()
c)getElementsByName()
d)bgColor()
13. 下列哪項是按下鍵盤事件(AB )
a)onKeyDown
b)onKeyPress
c)keyCode
d)onMouseOver
14. javascript進行表單驗證的目的是(B )
a)把使用者的正確資訊提交給伺服器
b)檢查提交的資料必須符合實際
c)使得頁面變得美觀、大方
d)減輕伺服器端的壓力
15. 、 display屬性值的常用取值不包括(C )
a)inline
b)block
c)hidden
d)none
16. 以下有關pixelTop屬性與top屬性的說法正確的是。(D )
a)都是Location物件的屬性
b)使用時返回值都是字串
c)都是返回以畫素為單位的數值
d)以上都不對
17. 使用open方法開啟具有瀏覽器工具條,位址列,選單欄的視窗，下列選項正確的是__D__
a)open("","HI","toolbas=1,scrollbars=1,status=1");
b)open("HI","scrollbars=1,location=1,status=1");
c)open("","status=yes,menubar=1,location=1");
d)open("","HI","toolbas=yes,menubar=1,location=1");
18. 下面關閉名為mydiv的層的程式碼正確的是(C )
a)lementByIdx_x_x_x(mydiv)lay="none";
b)lementByIdx_x_x_x("mydiv")lay=none;
c)lementByIdx_x_x_x("mydiv")lay="none";
d)lementByIdx_x_x_x("mydiv")lay=="none";
19. 為什麼要使用Div+CSS佈局
形式與內容分離
大大減少頁面程式碼，提高頁面瀏覽速度
結構清晰，有利於SEO
縮短改版時間， 佈局更方便
一次設計，多次使用
20. Block元素的特點是什麼?哪些元素預設為Block元素
總是在新行上開始;
高度，行高以及頂和底邊距都可控制;
寬度預設是它的容器的100%，除非設定一個寬度
是塊元素的有：,,
,
, 和21. 、 inline元素的特點是什麼?哪些元素屬於inline元素?
和其他元素都在一行上;
高，行高及頂和底邊距不可改變;
寬度就是它的文字或圖片的寬度，不可改變。
是inline元素的有：, , ,
, ,
和。
22. 、 javascript中表達式parseInt(“X8X8”)+paseFloat(‘8’)的結果是什麼?( C)
a)8+8
b)88
c)16
d)“8”+’8
23. String物件的方法不包括(C )
a)charAt();
b)substring()
c)length
d)toUpperCase()
24. 關於setTimeout(“check”,10)中說法正確的是( D)
a)程式迴圈執行10次
b)Check函式每10秒執行一次
c)10做為引數傳給函式check
d)Check函式每10毫秒執行一次
25. 以下哪個單詞不屬於javascript關鍵字：(C)
a)with
b)parent
c)class
d)void
前言
本文總結了一些優質的前端面試題(多數源於網路)，初學者閱後也要用心鑽研其中的原理，重要知識需要系統學習，透徹學習，形成自己的知識鏈。萬不可投機取巧，只求面試過關是錯誤的!
面試有幾點需注意：
面試題目： 根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑。
題目型別： 技術視野、專案細節、理論知識題，演算法題，開放性題，案例題。
進行追問： 可以確保問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的區分度和深度，知道你的實際能力。因為這種關聯知識是長時期的學習，絕對不是臨時記得住的。
回答問題再棒，面試官(可能是你的直接領導面試)，會考慮我要不要這個人做我的同事?所以態度很重要。(感覺更像是相親)
資深的工程師能把 absolute 和 relative 弄混，這樣的人不要也罷，因為團隊需要的你這個人具有可以依靠的才能(靠譜)。
前端開發面試知識點大綱：
HTML&CSS：
對Web標準的理解、瀏覽器核心差異、相容性、hack、CSS基本功：佈局、盒子模型、選擇器優先順序及使用、HTML5、CSS3、移動端適應
JavaScript：
資料型別、面向物件、繼承、閉包、外掛、作用域、跨域、原型鏈、模組化、自定義事件、記憶體洩漏、事件機制、非同步裝載回撥、模板引擎、Nodejs、JSON、ajax等。
其他：
HTTP、安全、正則、優化、重構、響應式、移動端、團隊協作、可維護、SEO、UED、架構、職業生涯
作為一名前端工程師，無論工作年頭長短都應該必須掌握的知識點：
1、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
2、DOM操作 ——如何新增、移除、移動、複製、建立和查詢節點等。
3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。
4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
6、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8以下版本的瀏覽器中的盒模型
7、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
9、HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
10、JSON —— 作用、用途、設計結構。
