吐血總結了下web前端面試題，分享給大家，以后還會持續(xù)更新，有些題目有多種答案，本文只給出其中一種，哪里有問題的歡迎指出。
Html&CSS
1、談談你對web標準的理解
web標準的理解
2、列舉html中至少三個實體
&、 、、?、?
詳細請看實體符號參考手冊
實體符號參考手冊
3、與有何區(qū)別？
：代表單元格邊框到內容之間的距離（留白）
：屬性用來指定表格各單元格之間的空隙。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點數(shù)。
4、CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有哪些？
1.id選擇器（ # myid）
2.類選擇器（.）
3.標簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器(*)
8.屬性選擇器（a[rel = ""]）
9.偽類選擇器（a: hover, li: nth - child）
**可繼承的樣式： **
font-size font- color, UL LI DL DD DT;
不可繼承的樣式：
width
優(yōu)先級
優(yōu)先級就近原則，同權重情況下樣式定義最近者為準，載入樣式以最后載入的定位為準;
優(yōu)先級為:
! > id > class > tag
比 內聯(lián)優(yōu)先級高
CSS3新增偽類舉例
p:first-of-type 選擇屬于其父元素的首個
元素的每個
元素。
p:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。
p:only-of-type 選擇屬于其父元素唯一的
元素的每個
元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個
元素。
: : 控制表單控件的禁用狀態(tài)。
: 單選框或復選框被選中。
5、與有何異同？
可以有很多值，只有兩個常用值：、。
當為none、為時都會隱藏元素。但會隱藏掉元素空間，會保留元素空間。
6、怎么在網(wǎng)頁中實現(xiàn)絕對定位？
絕對定位與相對定位
7、table-、-有何用途？
①table-：設置表格是否自動調整寬高
②-：表格與單元格及單元格間的邊框是否融合在一起。
8、簡述盒模型
簡述盒模型
9、鏈接標記屬性的_top、、、main、left、top各有何用處?
鏈接標記與Dom，Bom
10、你對瀏覽器兼容怎么看？通常你都做哪些處理？
瀏覽器的兼容性
11、get和post的區(qū)別？
GET：一般用于信息獲取，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制，一般在2000個字符
POST：一般用于修改服務器上的資源，對所發(fā)送的信息沒有限制。
GET方式需要使用.來取得變量的值，而POST方式通過.Form來獲取變量的值，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：
①無法使用緩存文件（更新服務器上的文件或數(shù)據(jù)庫）向服務器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）。
②發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠。
12、xhtml和html有什么區(qū)別
①HTML是一種基本的WEB網(wǎng)頁設計語言,XHTML是一個基于XML的置標語言
②最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
13、行內元素有哪些?塊級元素有哪些?空(void)元素有那些？
行內元素和塊級元素的區(qū)別是什么？行內塊元素的兼容性使用？（IE8 以下）
塊級元素：div p h1 h2 h3 h4 form ul ol dl dt dd
行內元素:a b br i span input image （強調的語氣）
常見空元素：
//
///
不常見空元素：
//////
///
行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，無效(可以設置line-)，上下無效，上下無效。
塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結束接著一個斷行。
兼容性：
:-block;*:;*zoom:1;
14、CSS引入的方式有哪些? link和@的區(qū)別是?
CSS引入的方式包括內聯(lián) 內嵌 外鏈 導入
link和@的區(qū)別是 ：
①link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@是CSS提供的，只能用于加載CSS；
②頁面被加載的時，link會同時被加載，而@引用的CSS會等到頁面被加載完再加載；
③是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題；
④后者優(yōu)先級更高
15、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?介紹一下你對瀏覽器內核的理解
Ie(Ie內核) 火狐（Gecko） 谷歌（） opera(blink)
對內核的理解：
主要分成兩部分：渲染引擎( 或 )和JS引擎。
①渲染引擎：負責取得網(wǎng)頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡內容的應用程序都需要內核。
②JS引擎：解析和執(zhí)行來實現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。
16、解釋css ，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數(shù)量。
適用于以下情況：
①靜態(tài)圖片，不隨用戶信息的變化而變化
②小圖片，圖片容量比較小
③加載量比較大
17、清除浮動的幾種方式，各自的優(yōu)缺點
（1）父級div定義。
（2）結尾處加空div標簽clear:both。
（3）父級div定義偽類:after和zoom。
（4）父級div定義:。
（5）父級div定義:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義:table。
（8）結尾處加br標簽clear:both。
比較好的是第3種方式，好多網(wǎng)站都這么用。
18、作用？標準模式與兼容模式各有什么區(qū)別?
①告知瀏覽器的解析器用什么文檔標準解析這個文檔。不存在或格式不正確會導致文檔以兼容模式呈現(xiàn)。
②標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
注意點：
HTML5 只需要寫不需要對DTD進行引用，因為HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。
而HTML4.01基于SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。
19、有哪些缺點？
①會阻塞主頁面的事件，搜索引擎的檢索程序無法解讀這種頁面，不利于SEO；
②和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用之前需要考慮這兩個缺點。如果需要使用，最好是通過動態(tài)給添加src屬性值，這樣可以繞開以上兩個問題。
20、如何實現(xiàn)瀏覽器內多個標簽頁之間的通信?
①通過、來實現(xiàn)；
②也可以調用、等本地存儲方式。
另一個瀏覽上下文（另一個標簽頁）里被添加、修改或刪除時，它都會觸發(fā)一個事件，我們通過監(jiān)聽事件，控制它的值來進行頁面信息通信。
注意： 在無痕模式下設置值時會拋出 的異常。
21、如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？
①map+area或者svg
②-
③純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等
22、CSS3有哪些新特性？
① CSS3實現(xiàn)圓角（-:8px），陰影（box-:10px）；
② 對文字加特效（text-、），線性漸變（），旋轉（）；
③ :(9deg) scale(0.85,0.90) (0px,-30px) skew(-9deg,0deg);
//旋轉,縮放,定位,傾斜
④ 增加了更多的CSS選擇器 多背景 rgba
CSS3新增屬性
Html5
1、Html5與html4相比，各有何優(yōu)缺點？ 怎樣處理html5新標簽的兼容性問題？
html5余html4的異同請看以下的鏈接
html5與html4的異同
兼容性問題
IE8/IE7/IE6支持通過.方法產(chǎn)生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如。
1、JS如何使頁面跳轉?怎么引入一個外部JS文件?
①直接在head標簽內寫入js代碼，如下
②引入寫好的js文件，使用語句
也是直接放入到head標簽里頭，也有的是放在前面。
2、輸入框的驗證用什么事件?
(fn)
3、與null有何異同？
null是一個表示"無"的對象，轉為數(shù)值時為0；是一個表示"無"的原始值，轉為數(shù)值時為NaN。
：
（1）變量被聲明了，但沒有賦值時，就等于。
（2) 調用函數(shù)時，應該提供的參數(shù)沒有提供，該參數(shù)等于。
（3）對象沒有賦值的屬性，該屬性的值為。
（4）函數(shù)沒有返回值時，默認返回。
null：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。
（2） 作為對象原型鏈的終點。
它們都表示空，轉換為后都為false，但是null代表一個對象變量已經(jīng)被初始化，但未裝入對象；表示未初始化變量
4、===與==有何異同？
相同點：都是判定兩個值是否相等
不同點：==不會判斷類型，而===會判斷類型
5、如何判斷一個變量的值是否為數(shù)字？以及有哪些手段判斷變量值的數(shù)據(jù)類型？
全局函數(shù)isNaN可以判斷一個變量的值是否為數(shù)字。
可以使用運算符type、判斷變量值的數(shù)據(jù)類型。
6、什么是Bom什么是Dom?你如何理解Dom?
鏈接標記與Dom，Bom
7、Array的join、push、、slice各有何用途，與slice有何異同？
join：使用指定間隔符連接所有元素為字符串
push：在尾部添加元素并維護array實例的
與slice都是截取一部分元素。不同的在于：slice返回截取后的新實例瀏覽器兼容性問題面試，在原array實例上操作，更詳細的請見下文鏈接。
JS中數(shù)組對象詳解
8、如何阻止表單提交？
在事件中返回false
9、如何動態(tài)操作表格？
可以像普通dom一樣操作，但是因為表格的dom比較復雜，所以我通常是使用table的、及tr對象的、操作。
10、.match與.exec有何區(qū)別？
match只會返回沒有分組的全部匹配結果或者有分組的第一次匹配結果；
而exec可以利用循環(huán)返回全部匹配結果。
11、為驗證手機號寫一個正則。
(){if($("#").val()==""){alert("手機號碼不能為空！");//$("#").html("手機號碼不能為空！");$("#").focus();;}if(!$("#").val().match(/^(?:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/)){alert("手機號碼格式不正確！");//$("#").html("手機號碼格式不正確！請重新輸入！");$("#").focus();;};}
12、正則的i標記與g標記各有何用途？
i：不區(qū)分大小寫；
g：全局匹配。
13、為添加trim()方法。
..trim=(){.(/^ +| +$/g,"");}
14、簡述。在JS中如何操作?
簡述，在JS中如何操作
15、談談數(shù)組排序方法sort()的使用，重點介紹sort()參數(shù)的使用及其內部機制。
JS數(shù)組排序方法sort()的使用
16、談談 之間的區(qū)別。
①是w3c的html dom定義的方法，而后兩者是IE獨有的方法；
②代表一個元素節(jié)點內由所有子節(jié)點，不包括當前節(jié)點組成的html代碼；
③代表一個元素節(jié)點內由所有子節(jié)點和當前節(jié)點組成的html代碼；
④代表一個元素節(jié)點內由所有子文本節(jié)點內容組成的文本；
17、在中定時調用函數(shù) foo() 如何寫？
(foo,1000//這里設置延時數(shù));
18、與有何區(qū)別?
①和的語法相同。它們都有兩個參數(shù)，一個是將要執(zhí)行的代碼字符串，還有一個是以毫秒為單位的時間間隔，當過了那個時間段之后就將執(zhí)行那段代碼。
②不過這兩個函數(shù)還是有區(qū)別的，在執(zhí)行完一次代碼之后，經(jīng)過了那個固定的時間間隔，它還會自動重復執(zhí)行代碼，而只執(zhí)行一次那段代碼。
19、你在js中用過array嗎？如果用過，array中添加數(shù)據(jù)用什么方法？
在尾部添加使用push();
在頭部添加使用();
在任意位置添加使用(),但要注意把它的刪除個數(shù)設置為0;
array詳細介紹請看下文鏈接
JS中數(shù)組對象詳解
20、簡述的優(yōu)缺點。
優(yōu)點：簡單易用，與Java有類似的語法，可以使用任何文本編輯工具編寫，只需要瀏覽器就可執(zhí)行程序，并且事先不用編譯，逐行執(zhí)行，無需進行嚴格的變量聲明，而且內置大量現(xiàn)成對象，編寫少量程序可以完成目標；
缺點：不適合開發(fā)大型應用程序；
21、有哪些內置對象?
只有Math和（在瀏覽器環(huán)境中，就是）
22、列舉的本地對象。
、、Array、、、、Date、、Error、、、、、、
23、的返回哪些數(shù)據(jù)類型
24、例舉3種強制類型轉換和2種隱式類型轉換?
強制（,,）
隱式（== – ===）
25、IE和DOM事件流的區(qū)別
①執(zhí)行順序不一樣、
②參數(shù)不一樣
③事件加不加on
④this指向問題
26、事件綁定和普通事件有什么區(qū)別
①事件綁定就是針對dom元素的事件，綁定在dom元素上
②普通事件即為非針對dom元素的事件
27、事件委托是什么
利用事件冒泡的原理，讓自己的所觸發(fā)的事件，由他的父元素代替執(zhí)行！
通俗的講，事件就是，，，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
例子請看以下鏈接
JS中的事件委托
28、閉包是什么，有什么特性，對頁面有什么影響
什么是閉包
“官方”的解釋：所謂“閉包”，指的是一個擁有許多變量和綁定了這些變量的環(huán)境的表達式（通常是一個函數(shù)），因而這些變量也是該表達式的一部分。
在 Scala、、 Lisp、、、、Ruby、 、Go、Lua、 c、swift 以及Java（Java8及以上）等語言中都能找到對閉包不同程度的支持。
通俗的講就是函數(shù)a的內部函數(shù)b，被函數(shù)a外部的一個變量引用的時候，就創(chuàng)建了一個閉包。
閉包的特性：
①.封閉性：外界無法訪問閉包內部的數(shù)據(jù)，如果在閉包內聲明變量，外界是無法訪問的，除非閉包主動向外界提供訪問接口；
②.持久性：一般的函數(shù)，調用完畢之后，系統(tǒng)自動注銷函數(shù)，而對于閉包來說，在外部函數(shù)被調用之后，閉包結構依然保存在；
對頁面的影響
使用閉包會占有內存資源，過多的使用閉包會導致內存溢出等。
詳細請看以下推薦鏈接
深入理解的閉包特性 如何給循環(huán)中的對象添加事件
29、的本地對象，內置對象和宿主對象
①本地對象為array obj 等可以new實例化
②內置對象為gload Math 等不可以實例化的
③宿主為瀏覽器自帶的, 等
30、編寫一個數(shù)組去重的方法
思路：
1.創(chuàng)建一個新的數(shù)組存放結果
2.創(chuàng)建一個空對象
3.for循環(huán)時，每次取出一個元素與對象進行對比，如果這個元素不重復，則把它存放到結果數(shù)組中，同時把這個元素的內容作為對象的一個屬性，并賦值為1，存入到第2步建立的對象中。
說明：至于如何對比，就是每次從原數(shù)組中取出一個元素，然后到對象中去訪問這個屬性，如果能訪問到值，則說明重復。
代碼如下：
Array..=(){=[];={};for(vari=0;i31、this對象的理解
①this總是指向函數(shù)的直接調用者（而非間接調用者）；
②如果有new關鍵字，this指向new出來的那個對象；
③在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的中的this總是指向全局對象；
32、eval是做什么的？
①它的功能是把對應的字符串解析成JS代碼并運行；
②應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。
③由JSON字符串轉換為JSON對象的時候可以用eval，var obj =eval('('+ str +')');
33、new操作符具體干了什么呢?
①創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。
②屬性和方法被加入到 this 引用的對象中。
③新創(chuàng)建的對象由 this 所引用瀏覽器兼容性問題面試，并且最后隱式的返回 this 。
34、call() 和 apply() 的區(qū)別和作用？
①apply()函數(shù)有兩個參數(shù)：第一個參數(shù)是上下文，第二個參數(shù)是參數(shù)組成的數(shù)組。如果上下文是null，則使用全局對象代替。
如：.apply(this,[1,2,3])；
②call()的第一個參數(shù)是上下文，后續(xù)是實例傳入的參數(shù)序列。
如：.call(this,1,2,3)；
如何獲取UA
JS代碼
(){..Name.value=.;...value=.;..Code.value=.;..Agent.value=.;}
35、請解釋一下 的同源策略
概念:同源策略是客戶端腳本（尤其是）的重要的安全度量標準。它最早出自 .0，其目的是防止某個文檔或腳本從多個不同源裝載。
這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制？
我們舉例說明：比如一個黑客程序，他利用把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登錄時，他的頁面就可以通過讀取到你的表單中input中的內容，這樣用戶名，密碼就輕松到手了。
36、請描述一下 ， 和 的區(qū)別？
在瀏覽器和服務器間來回傳遞。 和不會
和的存儲空間更大；
和有更多豐富易用的接口；
和各自獨立的存儲空間；
Ajax
1、什么是Ajax？
Ajax（ + XML），即異步 + XML的縮寫，主要用來頁面異步刷新，也是構建RIA的一種基礎技術。
2、如何使用Ajax從服務器獲取數(shù)據(jù)？