前端面試題重點整理彙總

時間 2019-12-14

標籤端面試題重點整理彙總简体版

原文原文鏈接

1.①講述一下Doctype的做用，②標準模式與兼容模式之間有什麼區別？javascript

①<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。css

②標準模式的排版和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。html

2.頁面導入樣式時，使用link和@import之間有什麼區別？html5

link標籤是標準的html標籤，import不是java

link能夠鏈接各類形式的文件，而import只能導入CSSweb

link使用的是鏈接的方式，至關於橋樑，邊加載邊鏈接json

  import使用的是導入方式，會在文檔加載時，將CSS文件導入到HTML中，它在HTML徹底加載完成後再倒入CSS文件。 

 
  <style type=」text/css」>

         @import url(「相對路徑」);

</style>

<link rel=」stylesheet」 type=」text/css」 href=」相對路徑」 /> 
 
3.介紹一下你對瀏覽器內核的理解？canvas
主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。瀏覽器
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。websocket
 JS引擎：解析和執行javascript來實現網頁的動態效果。最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。
4.常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF（火狐）,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。      [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]
5.①html5有哪些新特性、移除了那些元素？②如何處理HTML5新標籤的瀏覽器兼容問題？
 ①HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
      畫布 canvas;
      用於媒介回放的 video 和 audio 元素;
      本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
      sessionStorage 的數據在瀏覽器關閉後自動刪除;
      語意化更好的內容元素，好比 article、footer、header、nav、section;
      表單控件，calendar、date、time、email、url、search;
      新的技術webworker, websocket, Geolocation;
  移除的元素：
      純表現的元素：basefont，big，center，font, s，strike，tt，u;
      對可用性產生負面影響的元素：frame，frameset，noframes；
 ②支持HTML5新標籤：
     IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
     能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
     瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
固然也能夠直接使用成熟的框架：
 
    <!--[if lt IE 9]>
        <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  <![endif]--> 
 
6.簡述一下你對HTML語義化的理解？
用正確的標籤作正確的事情。
html語義化讓頁面的內容結構化(好比<section><article><header>這些標籤)，結構更清晰，便於對瀏覽器、搜索引擎解析;
即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
7.Label的做用是什麼？是怎麼用的？
label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。 
 
  <label for="Name">Number:</label>

<input type=「text「name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label> 
 
8.iframe有那些缺點？
①iframe會阻塞主頁面的Onload事件；
②搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
③iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
 因此如今不建議使用iframe 
 9.JQuery Ajax使用Post請求怎麼傳遞參數？寫出一個可通用的JQuery二次封裝函數？

 
  $.post("url",{"key":"data"},function(){},,function(){},"JSON");
function func(url,Object,str){
    var  geshi  = str?str:"json";
    $.post(url,object,function(data){
        return data;
    },function(){
        return error;
    }str);
}

var data = func(url,{},"json"); 
 
10.在不一樣分辨率不一樣設備訪問Web網站，如何適配？
　　① 媒體查詢 @media all and (max-width:970px)
　　② JS JQ 等實現響應式
　　③ BootStrap等第三方響應式框架。
11.JQuery綁定事件的方法及區別？
   JQ控件.onclick = function(){} 
   JQ控件.on("click",function(){}) // off解除
   祖先元素.on("click",dom,function);//事件委派
   JQ控件.bind("click",function(){});//1.7+淘汰
on: ① 能夠給同一控件綁定多個同類型事件
       ② 能夠經過off解除事件綁定
       ③ (委派)頁面新增同類型dom時也會綁定該事件
12. 寫出一段閉包代碼並解釋器做用？
 
 
   function func(){
        var num = 1;
        function func2(){
            alert(num);
        }
        return func2;
    }
    var f = func();
    f(); //調用func2()  !func()(); 
 
閉包：在函數內部套用函數，而且經過return將內部函數返回。  
做用：①訪問函數內部做用域。②確保函數內部變量不被釋放。

 
 13.解決子元素浮動，父容器高度塌陷的問題： 
 
① 在父容器上加上屬性：overfolw:hidden; 
 
② 子容器上:after{} 
 
③ 改成inline-block/使用彈性佈局 
 
④ 父容器：float

 
 14.給子容器加margin-top父容器一塊跟着下來的解決辦法 

 
 ① 給父容器加padding-top
② 給父容器加 border
③ 給父容器加上 overfolw:hidden; 

 
 15.各類縮寫形式❤ 
 
①Background 
 
  color  image  repeat  attachment  position 
 
②Font 
 
  style weight size/line-height family 
 
③List-style 
 
   type  position  image 
 
   square inside url("img/img.jpg");

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。