前端筆試題總結
前端開發面試知識點大綱：javascript
HTML&CSS：
對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML五、CSS三、移動端適應
JavaScript：
數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。
其餘：
HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯
做爲一名前端工程師，不管工做年頭長短都應該必須掌握的知識點：css
一、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
二、DOM操做 ——如何添加、移除、移動、複製、建立和查找節點等。
三、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。
四、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
五、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
六、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型
七、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
八、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
九、HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。
十、JSON —— 做用、用途、設計結構。
HTMLhtml
一.Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?前端
（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，
用什麼文檔類型 規範來解析這個文檔。
（2）、嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。
（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。
二.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？java
行內：a b(粗體，不推薦) span img i(斜體) em(強調) strong(粗體強調) input select textarea br 塊級：div p ul(無序列表) ol(有序列表) li dl(定義列表) dt dd h1~h6 hr(水平分割線) table 注：button是可變元素(即根據上下文語境決定是塊狀元素仍是內聯元素) 空元素：<img> <br> <hr> <link> <meta> <input> <area> <embed> 空元素，即沒有內容的元素，通常是單標籤
三.link和@import的區別是？jquery
（1）link屬於XHTML標籤，而@import是CSS提供的; （2）import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題; （3）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; （4）link方式的樣式的權重 高於@import的權重. 好比須要引入多個css時，能夠先用link引入其中一個css，而後在這個css裏面用@import引入其餘幾個css，便於管理
四.瀏覽器的內核分別是什麼?面試
IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；
五.form中的input能夠設置爲readonly和disable，請問2者有什麼區別？ajax
二者都不可編輯算法
readonly:能夠選擇，能夠複製，值能夠傳到後臺json
disable:不能選擇不能複製，值不能傳到後臺
六.超連接的屬性target的可選值：_blank,_parent, _self, _top和框架名稱有什麼區別？
_blank 在新窗口打開連接
_top 在頂層WINDOW對象中打開,通常用於多層框架嵌套的狀況
_parent 在父窗口打開,通常用於框架內的窗口改變父窗口頁面
_self 默認,即在當前窗口(或當前框架)打開
七.
.innerHTML，innerText，outerHTML，innerText的區別？
CSS
一.介紹一下CSS的盒子模型？
（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading; （2）盒模型四個屬性： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
二.CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a: hover, li: nth - child）
可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式：border padding margin width height ;
優先級就近原則，同權重狀況下樣式定義最近者爲準;
important 比 內聯優先級高
載入樣式以最後載入的定位爲準;
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> 元素。 :enabled :disabled 控制表單控件的禁用狀態。 :checked 單選框或複選框被選中。
三.如何居中一個浮動的元素
相對定位，top和left各50%，上邊距爲自身高度一半的負值，左邊距爲自身寬度一半的負值
JS
一. js延遲加載的方式有哪些？
defer和async、動態建立DOM方式（用得最多）、按需異步載入js
二.[typeof null;null instanceof Object]運行結果是？
typeof和instanceof均可以用來判斷js變量類型 區別是typeof用來返回一個基本數據類型，而instanceof用來驗證一個對象是否屬於某個類 對象(obj)、數組、json、null都屬於object，null是js中用來表示空引用的一個特殊值，但本質上null值不是以Object爲原型建立出來的，null instanceof 任何類型 都是false 因此結果是["object",false]
三.
(function(){
return typeof arguments;
})();
A."object" B."array" C."arguments" D."undefined"
typeof：返回變量類型 字符串、number、布爾值、object、undefined、function
arguments：實參的集合，是一個類數組，他有數組的長度，能夠循環，可是他沒有數組的方法，如sort()等
答案：A
四.
var f=function g(){return 23;};
typeof g();
A."number" B."undefined" C."function" D."Error"
function g(){return 23;};
typeof g;
輸出就是function
function g(){return 23;};
typeof g();
輸出就是number
var f=function g(){return 23;};
typeof f;
輸出就是function
var f=function g(){return 23;}
這是一個命名函數表達式，命名函數表達式的函數名只有在函數做用域內有效，規範規定了標識符不能在外圍的做用域內有效
var f=function g(){return typeof g}
f();
輸出是function
因此在外部引用會報錯，g is not defined(注：在ie下會返回number)
若改成typeof g;則顯示undefined
五.
(function(x){
delete x;
return x;
})(1);
A.1 B.null C.undefined D.Error
delete只能刪除對象的屬性，不能刪除變量或參數 結果：1 注：對象預約義的屬性、經過prototype指定的屬性也是不能delete的
六.
var y=1,x=y=typeof x;
x;
A.1 B."number" C.undefined D."undefined"
typeof返回都是字符串類型，有引號 因此c不對 答案：d
七.
(function f(f){
return typeof f();
})(function(){return 1;});
A."number" B."undefined" C."function" D.error
參數f實際是傳了一個函數進去，return typeof f();等於執行函數返回類型 即便參數名稱f和函數名衝突，可是參數的優先級更高 答案：a
八.
var f=(function f(){return "1";},function g(){return 2;})();
type f;
A."string" B."number" C."function" D."undefined"
涉及到分組選擇符，如 var a=(1,2,3) alert(a); 彈出的是3 因此分組選擇符，執行的是最後一位 答案：b
九.
var x=1;
if(function f(){}){
x+=typeof f;
}
x;
A.1 B."1function" C."1undefined" D.NaN
函數聲明不能寫到運算符的運算過程當中(好比if、for語句的括號中)，寫進去後這個名字就找不到了 可是雖然不容許這樣寫，可是if中返回爲真，只有false、空對象、NaN、空的字符串和0會返回假 答案：c，ie下答案是b
十.
var x=[typeof x,typeof y][1];
typeof typeof x;
A."number" B."string" C."undefined" D."object"
不管x值是什麼，typeof x返回的是一個字符串，那麼typeof 字符串，依然是string var x=[typeof x,typeof y]; ==>執行結果是[undefined,undefined] var x=[typeof x,typeof y][1] ==>沒有這種定義方法，返回值是undefined 答案：b
十一.
(function(foo){
return typeof foo.bar;
})({foo:{bar:1}});
A."undefined" B."object" C."number" D.Error
foo這個形參指的是{foo:{bar:1}}這個集合
這個總體下只有一個屬性foo，沒有bar屬性
答案：a
若是改爲
(function(foo){
return typeof foo.foo;
})({ foo: { bar: 1 } });
則返回object
若是改爲
(function(foo){
return typeof foo.foo.bar;
})({ foo: { bar: 1 } });
則返回number
十二.
with(function(x,undefined){}) length;
A.1 B.2 C.undefined D.Error
with用的不多，使用with語句的js代碼很難優化，運算速度也很慢，它用於暫修改做用域鏈的或者一般用來縮短特定情形下必須寫的代碼量，並且在with語句中的函數定義和變量初始化可能會產生使人驚訝的、
相抵觸的行爲，所以咱們避免使用with語句
語法：
with(object){}，大括號裏可使用object屬性而不使用object.attr這種形式
這裏with接收了一個對象，這個對象是函數，函數有length屬性(省略了大括號)
看一個例子
function test(num1,num2,num3){
}
test.length;
返回的是3
因此length是函數的形參集合，而arguments是函數的實參集合
因此答案：b
十三.
100['toString']['length']
A.100 B.3 C.1 D.SyntaxError
一個常見的錯誤： 2.toString(); //報錯，SyntaxError 在js中讀到"2."這個點不知道該做爲小數點仍是"."操做符 而02.toString()、false.toString()、0x20.toString()都是能夠的 變通方法： 2..toString(); 2 .toString(); (2).toString(); 這裏['length']就是計算形參的個數 數字調用toString的時候，會有一個參數radix，其餘如function、array、string調用的話，結果會是0 答案：c
十四.
var a=10;
function aaa(){
alert(a);
}
function bbb(){
var a=20;
aaa();
}
bbb();
結果是？
執行到bbb裏面的aaa();時，並非函數aaa挪到這個位置，而是在外面調用他，他只能找到全局的a 注：函數調用就是回過頭去執行這個函數，不管位置在哪 因此答案：返回10
十五.
function s(){
var a=b=10;
}
s();
alert(a);
alert(b);
結果是？
a is not defined 10
但若是題目改爲
var a=b=10;
alert(a);
alert(b);
結果是：
10 10
有函數的時候至關於
function s(){
var a;
b=10;
}
故函數內定義的局部變量，外面找不到，可是外部定義的變量，函數內能夠找到
十六.
var a=10;
function aaa(){
alert(a);
var a=20;
}
aaa();
變量查找是就近原則去尋找(注:有var的),就近沒有找到再去找外層 因此返回undefined
十七.
var a=[1,2,3];
var b=a;
b.push(4);
alert(a);
返回[1,2,3,4] 對象之間存在引用關係 可是變量賦值不會有這種關係 如 var a=[1,2,3]; var b=a; b=[1,2,3,4]; alert(a); 返回的就是[1,2,3]
十八.在IE中要想得到當前窗口的位置可使用window對象的()方法
A.windowX B.screenX C.screenLeft D.windowLeft
window對象是js中最大的對象，他描述的是一個瀏覽器窗口,通常引用他的屬性和方法時,不須要用"window.xxx"這種形式，而是直接使用"xxx"，沒有windowX和windowLeft這種屬性 只有screenX和screenLeft ie、safari、opera支持screenLeft ff、safari支持screenX 因此答案：c
十九.下面對於JavaScript中的單選按扭（Radio）的說法正確的是（）
A.單選按鈕能夠經過單擊"選中"和"未選中"來進行切換
B.單選按鈕沒有checked屬性
C.單選按鈕支持onClick事件
D.單選按鈕的length屬性返回一個選項組中單選項的個數
A.只有複選框才能進行"選中"和"未選中"切換 B.全部類型的input標籤都有checked屬性 C.幾乎任何html元素都支持onclick事件 D.單選按鈕沒有length屬性
因此答案爲c
二十.
x=3;
y=2;
z=(x+2)/y;
alert(z);
A.2 B.2.5 C.32/2 D.16
js裏除法是有小數的 因此答案:B
二十一.
某頁面中有一個1行3列的表格，其中表格行<tr>的id爲row1，下列選項中能在表格中增長一列，而且這一列顯示在最後面的是（）。
A．document.getElementById("row1").Cells(3);
B．document.getElementById("row1"). insertCell (2);
C．document.getElementById("row1").insertCell(3);
D．document.getElementById("row1").insertCell(0);
新單元格插入位置是index以前，因此若是index等於行中單元格數，即插到最後 答案：C
二十二.
9．CSS樣式background-position:5px -10px表明的意義是（ ）。
A．背景圖片向左偏移5px，向下偏移10px
B．背景圖片向左偏移5px，向上偏移10px
C．背景圖片向右偏移5px，向下偏移10px
D．背景圖片向右偏移5px，向上偏移10px
左上角是(0,0)，右下角是(max,max) 因此答案：D
二十三.
判斷：在CSS中，border:1px 2px 3px 4px表示設置某個HTML元素的上邊框爲1px、右邊框爲2px、下邊框爲3px、左邊框爲4px。（ ）
沒有這種寫法，只有border-width:1px 2px 3px 4px; 因此是錯的
二十四.
判斷：在HTML中，<iframe>標籤的frameborder屬性用來設置內嵌框架的邊框寬度，屬性值設爲2表示邊框寬度爲2像素。（ ）
frameborder 屬性規定是否顯示框架周圍的邊框。 他只有兩個值：0(無邊框) 1(默認值，有邊框) 從實用性角度，通常設置0，然而後經過css來設置邊框 因此是錯的
二十五.
列舉瀏覽器對象模型BOM裏經常使用的至少4個對象，並列舉window對象的經常使用方法至少5個
對象：window,document,history,location,screen,navigator 方法：alert(),confirm(),prompt(),open(),close(),blur(),focus(),print()
二十六.
有語句「var x=0;while(____) x+=2;」，要使while循環體執行10次，空白處的循環斷定式應寫爲：
A．x<10 B. x<=10 C.x<20 D.x<=20
while和for同樣，都是先判斷後執行，do{}while纔是先執行後判斷
因此答案：C
二十七.
如下( )表達式產生一個0~7之間(含0,7)的隨機整數.
A.Math.floor(Math.random()*6)
B.Math.floor(Math.random()*7)
C.Math. floor(Math.random()*8)
D.Math.ceil(Math.random()*8)
Math.random()產生隨機數的範圍是>=0 , <1 因此*8的範圍就是0<=x<8 floor(地板) 向下取整 ceil 向上取整 答案：C
二十八.
在使用Javascript實現省市級聯菜單功能時，在添加城市列表前清空原來的下拉選項的代碼是（）
A.document.myform.selCity.options.clear()
B. document.myform.selCity.options.deleteAll()
C. document.myform.selCity.options.length=0
D. document.myform.selCity.options.size=0
options沒有size，select纔有size 答案：C
二十九.
HMTL表單的首要標記是<form>,<form>標記的參數method表示表單發送的方法，可能爲get或post，下列關於get和post的描述正確的是（）
A.post方法傳遞的數據對客戶端是不可見的
B.get請求信息以查詢字符串的形式發送，查詢字符串長度沒有大小限制
C.post方法對發送數據的數量限制在255個字符以內
D.get方法傳遞的數據對客戶端是不可見的
get是從服務器上獲取數據，post是向服務器傳送數據 出於安全性，最好用post 答案：D
三十.
改變下拉列表框的選項時能顯示當前選項的文本和值。
<form name="a">
<select name="a" size="1" onchange="_sel(this)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
</form>
function _sel(vt){
alert("顯示文本："+vt.options[vt.selectedIndex].text);
alert("值："+vt.value);
}
注：js中沒法直接用.text .html .innerHTML .innerText等獲取option的內容
jquery獲取value和內容的方法
.val();
.text();
三十一.
在HTML文檔對象模型中，history對象的（）用於加載歷史列表中的下一個URL頁面。
A．next() B.back() C.forward() D.go(-1)
history對象是window對象的一部分，包含用戶訪問過的url,有如下幾種方法 back() 加載前一個URL forward() 加載下一個URL go() 加載某個具體頁面 答案：C
三十二.
在HTML頁面中包含以下所示代碼，則編寫Javascript函數判斷是否按下鍵盤上的回車鍵正確的編碼是（）
<input name=」password」 type=」text」 onkeydown=」myKeyDown()」>
A. function myKeyDown(){
if (window.keyCode==13)
alert(「你按下了回車鍵」);
B. function myKeyDown(){
if (document.keyCode==13)
alert(「你按下了回車鍵」);
C. function myKeyDown(){
if (event.keyCode==13)
alert(「你按下了回車鍵」);
D. function myKeyDown(){
if (keyCode==13)
鍵盤事件調用，必須經過event.keyCode或者window.event.keyCode
三十三.
求y和z的值是多少？
<script type="text/javascript">
var x = 1;
var y = 0;
var z = 0;
function add(n){n=n+1;}
y = add(x);
function add(n){n=n+3;}
z = add(x);
</script>
由於沒有返回值，因此輸出都是undefined
若是給它返回值
var x = 1;
var y = 0;
var z = 0;
function add(n){n=n+1;return n;}
y = add(x);
function add(n){n=n+3; return n;}
z = add(x);
輸出結果：4 4(同名函數覆蓋)
三十四.
javascript怎樣選中一個checkbox，怎樣設置它無效?
document.getElementsByTagName("input")[0].checked=true;
document.getElementsByTagName("input")[0].disabled=true;
三十五.
程序中捕獲異常的方法
- 1. 前端筆試題總結
- 2. Web前端面試筆試題總結
- 3. 前端筆試題總結2
- 4. web前端常見筆試題總結
- 5. YY前端筆試總結
- 6. 【前端筆試題】彙總
- 7. 前端筆試題彙總
- 8. 前端面試題總結
- 9. 前端面試題（總結）
- 10. 前端面試題總結：
- 更多相關文章...
- • Lua 調試(Debug) - Lua 教程
- • Markdown 標題 - Markdown 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端筆試題總結
- 2. Web前端面試筆試題總結
- 3. 前端筆試題總結2
- 4. web前端常見筆試題總結
- 5. YY前端筆試總結
- 6. 【前端筆試題】彙總
- 7. 前端筆試題彙總
- 8. 前端面試題總結
- 9. 前端面試題（總結）
- 10. 前端面試題總結：