HTML+CSS+JS（面試題）

時間 2019-11-18

標籤 html+css+js html css 面試欄目 HTML 简体版

原文原文鏈接

一、你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?

IE: trident內核javascript

Firefox：gecko內核php

Safari:webkit內核css

Opera:之前是presto內核，Opera現已改用Google Chrome的Blink內核html

Chrome:Blink(基於webkit，Google與Opera Software共同開發)前端

二、你能描述一下漸進加強和優雅降級之間的不一樣嗎?

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。html5

優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。java

三、請描述一下cookies，sessionStorage和localStorage的區別？jquery

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。css3

web storage和cookie的區別git

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生。

四、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。

若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。

若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

五、什麼是Css Hack？ie6,7,8的hack分別是什麼？

針對不一樣的瀏覽器寫不一樣的CSS code的過程，就是CSS hack。

#test{

width:300px;

height:300px;

/*firefox*/

background-color:red\9; /*all ie*/

/*ie8*/

+background-color:pink; /*ie7*/

_ /*ie6*/ }

:root #test { background-color:purple\9; } /*ie9*/

@media all and (min-width:0px){ #test {} } /*opera*/

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/

六、Sass、LESS是什麼？你們爲何要使用他們？

他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算，函數. LESS 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (藉助 Node.js)。

爲何要使用它們？

結構清晰，便於擴展。

能夠方便地屏蔽瀏覽器私有語法差別。這個不用多說，封裝對瀏覽器語法差別的重複處理，減小無心義的機械勞動。

能夠輕鬆實現多重繼承。

徹底兼容 CSS 代碼，能夠方便地應用到老項目中。LESS 只是在 CSS 語法上作了擴展，因此老的 CSS 代碼也能夠與 LESS 代碼一同編譯。

七、html常見兼容性問題？

1.雙邊距BUG float引發的使用display

2.3像素問題使用float引發的使用dislpay:inline -3px

3.超連接hover 點擊後失效使用正確的書寫順序 link visited hover active

4.Ie z-index問題給父級添加position:relative

5.Png 透明使用js代碼改

6.Min-height 最小高度！Important 解決’

7.select 在ie6下遮蓋使用iframe嵌套

8.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）

9.IE5-8不支持opacity，解決辦法：

.opacity {

opacity: 0.4

filter: alpha(opacity=60); /* for IE5-7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

}

IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片

八、描述一個」reset」的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不一樣之處？

由於瀏覽器的品種不少，每一個瀏覽器的默認樣式也是不一樣的，好比<button>標籤，在IE瀏覽器、Firefox瀏覽器以及Safari瀏覽器中的樣式都是不一樣的，因此，經過重置button標籤的CSS屬性，而後再將它統必定義，就能夠產生相同的顯示效果。

你可能會用Normalize來代替你的重置樣式文件。它沒有重置全部的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其餘的東西（如粗體的標題）。

九、一邊寬度固定，另外一邊自適應？

1）第一種：float 單一層浮動法

例如：左側固定成100px; 則核心代碼左側：width:100px;float:left;

右側 width:auto;margin-left:100px;

2）第二種：定位，在固定元素上加入絕對定位，自適應元素設置成margin-left:固定元素的寬度

3）經過BFC規則實現

例如：.left{float:left;width:200px;height:200px;}

.right{width:100%;overflow:hidden;height:200px}

十、什麼是聖盃佈局？

左右兩邊的內容保持不變，中間的內容能夠根據屏幕的大小的改變而改變。

1 .content {

2 padding: 0 200px;

3 height: 200px;

4 min-width: 200px;

5 }

.left {

6 width: 200px;

7 height: 200px;

8 background: red;

9 float: left;

10 margin-left: -200px;

11 }

12 .right {

13 width: 200px;

14 height: 200px;

15 background: yellow;

16 float: right;

17 margin-right: -200px;

18 }

19 .center {

20 width: 100%;

21 min-width: 200px;

22 height: 200px;

23 background: green;

24 float: left;

25 }

26 </style>

27 </head>

28 <body>

29 <div class="content">

30 <div class="left"></div>

31 <div class="center"></div>

32 <div class="right"></div>

33 </div>

十一、div中子元素居中的三種方式？

首先div設置爲相對定位relative,子元素設置爲絕對定位absolute

第一種#div.img{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}

第二種

#div.img{position:absoulute;left:50%;top:50%;margin-left:img的1/2width；margin-top:-img的1/2height;}

HTML5+CSS3

一、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？

新特性：

1. 拖拽釋放(Drag and drop) API

2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

3. 音頻、視頻API(audio,video)

4. 畫布(Canvas) API

5. 地理(Geolocation) API

6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

7. sessionStorage 的數據在瀏覽器關閉後自動刪除

8. 表單控件，calendar、date、time、email、url、search

9. 新的技術webworker, websocket, Geolocation

移除的元素：

1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；

2. 對可用性產生負面影響的元素：frame，frameset，noframes；

HTML5兼容性解決方案

1. IE8/IE7/IE6支持經過 document.createElement 方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式（固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

<!--[if lt IE 9]>

<![endif]-->

2你如何對網站的文件和資源進行優化？

文件合併

文件最小化/文件壓縮

使用CDN託管

緩存的使用

3 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，單選框或複選框被選中。

4 H5+CSS3兼容性解決的方案

1 htmlshiv.js框架 HTML5shiv經過JavaScript 來建立HTML5元素(如 main, header, footer等)

<!--[if lt IE 9]>

<![endif]-->

2 selectivizr.js

selectivizr是一個JavaScript工具，使IE瀏覽器也能夠支持CSS3僞類以及屬性選擇器

使用很簡單，只要把js include到頁面上，而後你就能夠

<!- -[if (gte IE 6)&(lte IE 8)]>

<![endif]- ->

3 條件註釋

5 CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增長了更多的CSS選擇器多背景 rgba

5. 在CSS3中惟一引入的僞元素是 ::selection.

6. 媒體查詢，多欄佈局

7. border-image

JS+JQuery部份內容

1 數組和字符串中經常使用的方法

1）數組中經常使用的方法

Push()向數組的末尾增長一項 unshift()向數組開頭增長一項

pop()刪除數組的末尾項 shift()刪除數組開頭項

Splice() 刪除數組中的任意項 concat拼接

Join() 把數組中的每一項按照指定的分隔符拼接成字符串

reverse:倒序數組返回值倒序數組原有數組改變
sort:根據匿名函數進行冒泡排序 b-a倒序 a-b升序

兼容性很差：
indexOf:返回獲取項在數組中的索引
lastIndexOf:返回獲取項在數組中出現的最後一次索引
forEach: 循環遍歷數組參數是一個匿名函數默認返回爲undefined
map：循環遍歷數組參數是一個匿名函數

2）字符串中經常使用的方法

substring方法返回位於String對象中指定位置的子字符串。

substr方法返回一個從指定位置開始的指定長度的子字符串。

slice方法返回字符串的片斷。

split將一個字符串分割爲子字符串，而後將結果做爲字符串數組返回。

2 js兼容性問題

1 獲取,設置標籤的內容 iE和chrome瀏覽器支持innerText 火狐瀏覽器支持 textContent

2獲取指定元素的第一個元素和最後一個元素 element.firstElementChild

IE679只能獲取firstChild獲取第一個字節點，而後經過判斷的節點的類型區的第一個子元素

3event.x 與 event.y，在IE中，event 對象有x,y屬性，現代瀏覽器中中，與 event.x 等效的是 event.pageX ，但event.pageX IE中沒有

4問題說明：IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用 getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性。

解決方法：統一經過 getAttribute() 獲取自定義屬性。

3說說你對閉包的理解

能夠把閉包簡單理解成「定義在一個函數內部的函數」

閉包有三個特性：

1.函數嵌套函數

2.函數內部能夠引用外部的參數和變量

3.參數和變量不會被垃圾回收機制回收

因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題

四、javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享

用構造函數和原型鏈的混合模式去實現繼承，避免對象共享能夠參考經典的extend()函數，不少前端框架都有封裝的，就是用一個空函數當作中間變量

五、JavaScript原型，原型鏈 ? 有什麼特色？

原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。*

原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。

6請說出三種減小頁面加載時間的方法。

1.優化圖片

2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）

3.優化CSS（壓縮合並css，如margin-top,margin-left...)

4.網址後加斜槓（如www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄。）

5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。

當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）

6.減小http請求（合併文件，合併圖片）

7.你有哪些性能優化的方法？

（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(動態屬性)。

圖片預加載，將樣式表放在頂部，將腳本放在底部 ?加上時間戳。

八、平時如何管理你的項目？

1)先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；

2) 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）

3)標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）

4)頁面進行標註（例如頁面模塊開始和結束）

5)CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

6)JS 分文件夾存放命名以該JS功能爲準的英文翻譯。

九、call和apply的區別

call和apply相同點：改變函數中this的指向

不一樣點：函數參數的傳遞形式

call將函數參數依次傳入

apply將函數參數用一個數組的形式傳入

十、原生JS的window.onload與Jquery 的$(document).ready(function() {})，$(function() {})有什麼不一樣？

1)執行時間

window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。 $(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

2)編寫個數不一樣

window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個 $(document).ready()能夠同時編寫多個，而且均可以獲得執行

3)簡化寫法 window.onload沒有簡化寫法 $(document).ready(function(){})能夠簡寫成$(function(){})；

十一、split(),join()的區別？

split() 方法經過把字符串分割成子字符串來把一個 String 對象分割成一個字符串數組。

join() 方法將數組中的全部元素鏈接成一個字符串。

十二、談一下Jquery中的bind(),live(),delegate(),on()的區別？

bind：綁定事件，對新添加的事件不起做用，方法用於將一個處理程序附加到每一個匹配元素的事件上並返回jQuery對象。

live：方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含現有的或未來添加的）的指定事件上並返回jQuery對象。

delegate：方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部元素（現有的或未來的）的一個或多個事件上。

On:支持直接在目標元素上綁定事件，也支持在目標元素的祖輩元素上委託綁定。在事件委託綁定模式下，即便是執行on()函數以後新添加的元素，只要它符合條件，綁定的事件處理函數也對其有效。

Ajax的面試題

一、解釋jsonp的原理

動態建立script標籤，回調函數

二、請儘量詳盡的解釋ajax的工做原理

思路：先解釋異步，再解釋ajax如何使用

Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。要清楚這個過程和原理，咱們必須對 XMLHttpRequest有所瞭解。

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript能夠及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

三、Ajax的最大的特色是什麼。

Ajax能夠實現動態不刷新（局部刷新）

readyState屬性狀態有5個可取值： 0=未初始化，1=啓動 2=發送，3=接收，4=完成

四、ajax的缺點

1） ajax不支持瀏覽器back按鈕。

2)安全問題 AJAX暴露了與服務器交互的細節。

3)對搜索引擎的支持比較弱。

4)破壞了程序的異常機制。

5)不容易調試。

五、get和post的區別？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符;

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。

也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。

6、如何解決跨域問題?

理解跨域的概念：協議、域名、端口都相同才同域，不然都是跨域

1.Get方式請求的跨域能夠經過jsonp來解決。

http://www.tuicool.com/articles/QBbuiaR

2.Post方式的請求 cors解決跨域

Cors解釋

http://www.cnblogs.com/Darren_code/p/cors.html

JSONP實現跨域

經常使用的jquery實現跨域調用

$.ajax({

url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",

dataType: "jsonp",

jsonp: "callback",

context: document.body,

success: function(data) {

console.log(data);

}

});

這個調用實際上的實現原理是

在網頁中構造一個script標籤，將src設置爲對應的url，並增長上相應的callback參數，形如以下格式：

請求的服務端代碼以下：

$data = json_encode(array("id" => "1", "name" => "tom"));

$callback = $_GET["callback"];

echo $callback . "(" . $data . ")";

實際上最後返回的內容就是一段js代碼：

jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"})

當瀏覽器獲取到該段js代碼後就會執行這個函數，從而實現回調ajax請求時設置的success方法。

jsonp實現的缺點

瞭解了原理後，就知道jsonp實現的跨域方式不支持post請求，只能支持get請求。可是若是須要支持post請求該怎麼辦呢？下面談下服務器端設置的方式。

服務端設置支持跨域

主要是Access-Control-Allow-Origin頭參數，該參數用來指定容許哪一個來源的域請求。服務端代碼以下：

// 表示支持全部來源的域進行請求

// 實際在操做過程當中能夠設置爲指定域

header('Access-Control-Allow-Origin:*');

$data = json_encode(array("id" => "1", "name" => "tom"));

echo $data;

對應的js代碼：

$.ajax({

type: "POST",

url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/header.php",

dataType: "json",

success: function(data) {

console.log(data);

}

});

能夠支持post請求

移動web開發

一、px，em，rem的區別？

1）px像素（Pixel）。絕對單位。像素px是相對於顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，若是px要換算成物理長度，須要指定精度DPI。

2）em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，所以並非一個固定的值。

3）rem是CSS3新增的一個相對單位（rootem，根em），使用rem爲元素設定字體大小時，仍然是相對大小，

但相對的只是HTML根元素。

二、jQuery和Zepto的區別？各自的使用場景？Zepto比jQuery輕量的緣由？

jQuery主要用於PC端開發，Zepto比jQuery更加小巧，主要用於移動端，Zepto是不兼容低版本的瀏覽器

緣由：

1）Zepto輕量的緣由是沒有像jQuery同樣處理移動端的兼容性問題，

2）Zepto的模塊是放到不一樣的模塊中，根據業務須要引入模塊，減小代碼量，提升網頁的加載速度

三、bootstrap框架中的柵格系統的本質是什麼？以及bootstrap框架的優缺點？

bootstrap的柵格系統的本質是經過css3的媒體查詢實現的

優勢:bootstrap框架便於快速佈局，並且添加了更加靈活的柵格系統，增長了響應式

計，來適配不一樣的設備

缺點:對ie678的兼容性可能不太好，並且bootstrap是依賴於jQuery，代碼的體積大，會影響網頁的加載速度，不適合移動端。

四、如何解決移動端的click事件的延遲響應？

移動端click屏幕產生200-300 ms的延遲響應，每每會形成按鈕點擊延遲甚至是點擊失效。

解決方案

1) github上有一個叫作fastclick的庫，它也能規避移動設備上click事件的延遲響應，https://github.com/ftlabs/fastclick

2)zepto的touch模塊，tap事件也是爲了解決在click的延遲問題

五、什麼是mvc開發模式?

Mvc是一中組織代碼結構的方式，便於代碼的管理和維護。

相關標籤/搜索

每日一句

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

HTML+CSS+JS（面試題）

一、 你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?

二、你能描述一下漸進加強和優雅降級之間的不一樣嗎?

6、如何解決跨域問題?

一、你作的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?