2018年web最新面試知識點總結

00、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？ 

　　 行內元素：a  b  span  img  input  select  strong

　　塊級元素：div  ul  ol  li  dl  dt  dd  h1  h2  h3  h4  p  等

　　空元素：1.<link rel="stylesheet" type="text/css" href="">

··　　　　　二、<img src="">

　　　　　　<meta>、<br>、<hr>

一、css3有哪些新特性？

　　　 CSS3 實現圓角（border-radius:8px;），陰影（box-shadow:10px）,對文字加特效（text-shadow）,線性漸變（gradient），旋轉（transform） transform:rotate(9deg) 　　scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉，縮放，定位，傾斜增長了更多的 css 選擇器 
　　多背景rgba
二、簡述一下src與href的區別
　　href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。
  src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。  　　當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
三、瀏覽器的內核分別是什麼?

　　 IE: trident內核 Firefox：gecko內核 Safari：webkit內核 Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核 Chrome：Blink(基於webkit，Google與Opera Software共同開發)

四、支持HTML5新標籤

　　 1）IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式；

　　 2）固然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

　　 <!--[if lt IE 9]>    <![endif]-->
五、如何區分 HTML 和 HTML5？

　　1）、在文檔類型聲明上不一樣： HTML是很長的一段代碼，很難記住，而HTML5卻只有簡簡單單的聲明，方便記憶。

　　 2）、在結構語義上不一樣： HTML：沒有體現結構語義化的標籤，一般都是這樣來命名的<div id="header"></div>
六、頁面導入樣式時，使用link和@import有什麼區別？

　　1）link屬於XHTML標籤，而@import是css提供的；

　　 2）頁面被加載時，link會同時被加載，而@import引用的css會等到頁面被加載完再加載；

　　 3）@import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題；

　　 4）link方式的樣式的權重高於@import的權重。

七、h5中Web存儲

特性

設置、讀取方便

容量較大，sessionStorage約5M、localStorage約20M

只能存儲字符串，能夠將對象JSON.stringify() 編碼後存儲

window.sessionStorage

生命週期爲關閉瀏覽器窗口

在同一個窗口下數據能夠共享

window.localStorage

永久生效，除非手動刪除

能夠多窗口共享

方法

setItem(key, value) 設置存儲內容

getItem(key) 讀取存儲內容

removeItem(key) 刪除鍵值爲key的存儲內容

clear() 清空全部存儲內容

key(n) 以索引值來獲取存儲內容

8. 如何用原生js給一個按鈕綁定兩個onclick事件？

　　 Var  btn=document.getElementById(‘btn’); //事件監聽 綁定多個事件

　　 var btn4 = document.getElementById("btn4");

　　btn4.addEventListener("click",hello1);

　　btn4.addEventListener("click",hello2);
9.請描述一下 cookies sessionStorage和localstorage區別

　　相同點：都存儲在客戶端

　　不一樣點：1.存儲大小 · cookie數據大小不能超過4k。

　　　　 · sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

　　　　 2.有效時間 · localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

　　　　 · sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。 · cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

　　　　 3. 數據與服務器之間的交互方式 · cookie的數據會自動的傳遞到服務器，服務器端也能夠寫cookie到客戶端

　　　　　　· sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

10.編寫一個方法去掉數組裏面 重複的內容

　　  var arr=[1,2,3,4,5,1,2,3] 一個數組去重的簡單實現  

　　 var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d']; //定義一個新的數組

　　var s = []; //遍歷數組

　　 for(var i = 0;i<arr.length;i++){

　　　　    if(s.indexOf(arr[i]) == -1){

　　　　　　  //判斷在s數組中是否存在，不存在則push到s數組中         

　　　　　　　　s.push(arr[i]);    

　　　　 }

　　 }

　　 console.log(s);

十一、xml和json的區別，

　　 1）、JSON相對於XML來說，數據的體積小，傳遞的速度更快些 ·

　　 2）、JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互 

　　 3）、XML對數據描述性比較好； ·  JSON的速度要遠遠快於XML
12.box-sizing經常使用的屬性有哪些？分別有什麼做用？

　　屬性值 · box-sizing：content-box

　　　　　　· box-sizing：border-box

　　　　　　· box-sizing：inherit   content-box ·

　　　　　　 這是box-sizing的默認屬性值 · 是CSS2.1中規定的寬度高度的顯示行爲 · 在CSS中定義的寬度和高度就對應到元素的內容框 · 在CSS中定義的寬度和高度以外繪製元素的內邊距和邊框   border-box · 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒 · 即爲元素在設置內邊距和邊框是在已經設定好的寬度和高度以內進行繪製 · CSS中設定的寬度和高度減去邊框和內間距才能獲得元素內容所佔的實際寬度和高度 (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。 border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。

1三、undefined與null的區別：

　　null： Null類型，表明「空值」，表明一個空對象指針，使用typeof運算獲得 「object」，因此你能夠認爲它是一個特殊的對象值。

　　 undefined： Undefined類型，當一個聲明瞭一個變量未初始化時，獲得的就是undefined 

1四、http 和 https 有何區別？如何靈活使用？ 

  　　http是HTTP協議運行在TCP之上。全部傳輸的內容都是明文，客戶端和服務器端都沒法驗證對方的身份。

　　 https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。全部傳輸的內容都通過加密，加密採用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端能夠驗證服務器端的身份，若是配置了客戶端驗證，服務器方也能夠驗證客戶端的身份。

1五、常見的HTTP狀態碼

 

1XX 類別：informational 信息性狀態碼

　　 緣由短語：接收的請求正在處理

2XX 類別：success 成功狀態碼

　　 緣由短語：請求正常處理完畢

3XX 類別：redirection 重定向狀態碼

　　緣由短語：須要進行附加操做以完成請求

4XX 類別：client error 客戶端錯誤狀態碼

　　緣由短語：服務器沒法處理請求

5XX 類別：server error 服務器錯誤狀態碼

　　緣由短語：服務器處理請求出錯 

 

　　 2開頭 （請求成功）表示成功處理了請求的狀態代碼。

　　 200   （成功）  服務器已成功處理了請求。 一般，這表示服務器提供了請求的網頁。 

　　201   （已建立）  請求成功而且服務器建立了新的資源。 

　　 202   （已接受）  服務器已接受請求，但還沒有處理。 

　　203   （非受權信息）  服務器已成功處理了請求，但返回的信息可能來自另外一來源。 

　　204   （無內容）  服務器成功處理了請求，但沒有返回任何內容。 

　　205   （重置內容） 服務器成功處理了請求，但沒有返回任何內容。

　　206   （部份內容）  服務器成功處理了部分 GET 請求。

　　3開頭 （請求被重定向）表示要完成請求，須要進一步操做。 一般，這些狀態代碼用來重定向。

　　 300   （多種選擇）  針對請求，服務器可執行多種操做。 服務器可根據請求者 (user agent) 選擇一項操做，或提供操做列表供請求者選擇。 

　　301   （永久移動）  請求的網頁已永久移動到新位置。 服務器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。

　　302   （臨時移動）  服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。

　　 303   （查看其餘位置） 請求者應當對不一樣的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。

　　304   （未修改） 自從上次請求後，請求的網頁未修改過。 服務器返回此響應時，不會返回網頁內容。 

　　 305   （使用代理） 請求者只能使用代理訪問請求的網頁。 若是服務器返回此響應，還表示請求者應使用代理。 

　　307   （臨時重定向）  服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。

　　4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。

　　400   （錯誤請求） 服務器不理解請求的語法。 

　　401   （未受權） 請求要求身份驗證。 對於須要登陸的網頁，服務器可能返回此響應。 

　　403   （禁止） 服務器拒絕請求。

　　404   （未找到） 服務器找不到請求的網頁。

　　 405   （方法禁用） 禁用請求中指定的方法。 

　　406   （不接受） 沒法使用請求的內容特性響應請求的網頁。 

　　407   （須要代理受權） 此狀態代碼與 401（未受權）相似，但指定請求者應當受權使用代理。

　　 408   （請求超時）  服務器等候請求時發生超時。 

　　409   （衝突）  服務器在完成請求時發生衝突。 服務器必須在響應中包含有關衝突的信息。 

　　410   （已刪除）  若是請求的資源已永久刪除，服務器就會返回此響應。 

　　411   （須要有效長度） 服務器不接受不含有效內容長度標頭字段的請求。 

　　412   （未知足前提條件） 服務器未知足請求者在請求中設置的其中一個前提條件。 

　　 413   （請求實體過大） 服務器沒法處理請求，由於請求實體過大，超出服務器的處理能力。 

　　 414   （請求的 URI 過長） 請求的 URI（一般爲網址）過長，服務器沒法處理。 

　　415   （不支持的媒體類型） 請求的格式不受請求頁面的支持。 

　　416   （請求範圍不符合要求） 若是頁面沒法提供請求的範圍，則服務器會返回此狀態代碼。 

　　417   （未知足指望值） 服務器未知足"指望"請求標頭字段的要求。

　　5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤多是服務器自己

1六、如何理解閉包？

一、定義和用法：當一個函數的返回值是另一個函數，而返回的那個函數若是調用了其父函數內部的其它變量，若是返回的這個函數在外部被執行，就產生了閉包。

二、表現形式：使函數外部可以調用函數內部定義的變量。

三、實例以下： (1)、根據做用域鏈的規則，底層做用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這裏明顯count 是函數內部的flag2 的那個count 。

　　 var count=10;   //全局做用域 標記爲flag1

　　function add(){     

　　　　var count=0;    //函數全局做用域 標記爲flag2     

　　　　return function(){       

　　　　　　 count+=1;   //函數的內部做用域       

　　　　　　alert(count);   

　　　　 }

　　 }

　　var s = add() s();//輸出1

　　s();//輸出2

四、變量的做用域 要理解閉包，首先必須理解Javascript特殊的變量做用域。

　　 變量的做用域分類：全局變量和局部變量。

　　特色： 一、函數內部能夠讀取函數外部的全局變量；在函數外部沒法讀取函數內的局部變量。

　　　　　 二、函數內部聲明變量的時候，必定要使用var命令。若是不用的話，你實際上聲明瞭一個全局變量！ 

五、使用閉包的注意點

　　1）濫用閉包，會形成內存泄漏：因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

　　 2）會改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值

1七、h5新特性

HTML5新特性 —— 新特性
(1)新的語義標籤和屬性 (2)表單新特性 (3)視頻和音頻 (4)Canvas繪圖 (5)SVG繪圖 (6)地理定位 (7)拖放API

1八、$(document).ready()方法和window.onload有什麼區別？ 

　　(1)、window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。 

　   (2)、$(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數

1九、 jquery中$.get()提交和$.post()提交有區別嗎？

　　相同點：都是異步請求的方式來獲取服務端的數據；

　　異同點：

　　　　 一、請求方式不一樣：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。

　　　　二、參數傳遞方式不一樣：get請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。

　　　　三、數據傳輸大小不一樣：get方式傳輸的數據大小不能超過2KB 而POST要大的多

　　　　四、安全問題： GET 方式請求的數據會被瀏覽器緩存起來，所以有安全問題。