你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?
IE: trident核心
Firefox：gecko核心
Safari:webkit核心
Opera:以前是presto核心，Opera現已改用Google Chrome的Blink核心
Chrome:Blink(基於webkit，Google與Opera Software共同開發)
每個HTML檔案裡開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
宣告位於文件中的最前面的位置，處於 標籤之前。此標籤可告知瀏覽器文件使用哪種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）Quirks模式是什麼？它和Standards模式有什麼區別
從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文件在規範上的正確處理達到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支援很差， IE6將對CSS提供更好的支援，然而這時的問題就來了，因為有很多頁面是基於舊的佈局方式寫的，而如果IE6 支援CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？
在寫程式時我們也會經常遇到這樣的問題，如何保證原來的介面不變，又提供更強大的功能，尤其是新功能不相容舊功能時。遇到這種問題時的一個常見做法是增加引數和分支，即當某個引數為真時，我們就使用新功能，而如果這個引數 不為真時，就使用舊功能，這樣就能不破壞原有的程式，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“引數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將採用對CSS支援更好的佈局，而如果沒有，則採用相容之前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：
總體會有佈局、樣式解析和指令碼執行三個方面的區別。
盒模型：在W3C標準中，如果設定一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
設定行內元素的高寬：在Standards模式下，給等行內元素設定wdith和height都不會生效，而在quirks模式下，則會生效。
設定百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設定百分比的高度，子元素設定一個百分比的高度是無效的用margin:0 auto設定水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多，答出什麼不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）
div+css的佈局較table佈局有什麼優點？
改版的時候更方便 只要改css檔案。
頁面載入速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化（seo）搜尋引擎更友好，排名更容易靠前。
img的alt與title有何異同？ strong與em的異同？
a:alt(alt text):為不能顯示影像、窗體或applets的使用者代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)
title(tool tip):該屬性為設定該屬性的元素提供建議性的資訊。
strong:粗體強調標籤，強調，表示內容的重要性
em:斜體強調標籤，更強烈強調，表示內容的強調點
語義化的理解？
- 用正確的標籤做正確的事情！
- html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
- 在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的。
- 搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
- 使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
垂直水平居中的方法有幾種？
- 絕對定位，left0，top 0 bottom0 marg auto
- 絕對定位 left50%，top50%；給負margin
- 絕對定位 left50%，top50%；給transform：translate（-50%。-50%）
- 父：display：table-cell，text-aline：center，vetiral-align：middle
子：display：inline-block - display：flex；justify-content：center；align-item：center
你有哪些效能優化的方法？
（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(動態屬性)。
（7） 圖片預載入，將樣式表放在頂部，將指令碼放在底部，加上時間戳……
為什麼利用多個域名來儲存網站資源會更有效？
- CDN快取更方便
- 突破瀏覽器併發限制
- 節約cookie頻寬
- 節約主域名的連線數，優化頁面響應速度
- 防止不必要的安全問題
什麼叫優雅降級和漸進增強？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是老式瀏覽器，則程式碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.
漸進增強：從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新式瀏覽器才支援的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。
懶載入的實現原理
意義：懶載入的主要目的是作為伺服器前端的優化，減少請求數或延遲請求數
實現原理：先載入一部分資料，當觸發某個條件的時候利用非同步載入剩餘的資料，新的到的資料不會影響原有資料的顯示，同時最大程度的減少了伺服器端的資源耗用。
實現方式：
- 第一種是純粹的延遲載入，使用setTimeout或setInterval進行載入延遲
- 第二種是條件載入，符合某些條件，或觸發了某些事件才開始非同步載入
- 第三種是可視區載入，即僅載入使用者可以看到的區域，這個主要由監控滾動條來實現，一般會在使用者看到某圖片前一定距離便開始載入，這樣能保證使用者拉下時剛好能看到圖片。
請談一下你對網頁標準和標準制定機構重要性的理解。
網頁標準和標準制定機構都是為了能讓web發展的更‘健康’，開發者遵循統一的標準，降低開發難度，開發成本，SEO也會更好做，也不會因為濫用程式碼導致各種BUG、安全問題，最終提高網站易用性。
請描述一下cookies，sessionStorage和localStorage的區別？
sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。而localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是為了更大容量儲存設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“儲存”資料而生。
簡述一下src與href的區別
src用於替換當前元素，href用於在當前文件和引用資源之間確立聯絡。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文件中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文件內，例如js指令碼，img圖片和frame等元素。
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是為什麼將js指令碼放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網路資源所在位置，建立和當前元素（錨點）或當前文件（連結）之間的連結。
如果我們在文件中新增
那麼瀏覽器會識別該文件為css檔案，就會並行下載資源並且不會停止對當前文件的處理。這也是為什麼建議使用link方式來載入css，而不是使用@import方式。
知道的網頁製作會用到的圖片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面試官想要的最後答案。面試官希望聽到是Webp。（是否有關注新技術，新鮮事物）
科普一下Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片載入速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的伺服器頻寬資源和資料空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。
在質量相同的情況下，WebP格式影像的體積要比JPEG格式影像小40%
知道什麼是微格式嗎？談談理解。在前端構建中應該考慮微格式嗎？
微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化資料的開放標準。是為特殊應用而制定的特殊格式。
優點：將智慧資料新增到網頁上，讓網站內容在搜尋引擎結果介面可以顯示額外的提示。（應用範例：豆瓣，有興趣自行google）
CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？
最基本的：
設定display屬性為none，或者設定visibility屬性為hidden
技巧性：
設定寬高為0，設定透明度為0，設定z-index位置在-1000
超連結訪問過後hover樣式就不出現的問題是什麼？如何解決？
被點選訪問過的超連結樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）
行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設定嗎？
塊級元素(block)特性：
總是獨佔一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設定的），就是裡面文字或圖片的大小。
那麼問題來了，瀏覽器還有預設的天生inline-block元素（擁有內在尺寸，可設定高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
什麼是外邊距重疊？重疊的結果是什麼？
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。
摺疊結果遵循下列計算規則：
- 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
- 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
- 兩個外邊距一正一負時，摺疊結果是兩者的相加的和。
rgba()和opacity的透明效果有什麼不同？
rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，
而rgba()只作用於元素的顏色或其背景色。（設定rgba透明的元素的子元素不會繼承透明效果！）
px和em的區別？
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字型大小。
瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
Sass、LESS是什麼？大家為什麼要使用他們？
他們是CSS前處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變數，繼承，運算， 函式. LESS 既可以在客戶端上執行 (支援IE 6+, Webkit, Firefox)，也可一在服務端執行 (藉助 Node.js)。
為什麼要使用它們？
結構清晰，便於擴充套件。
可以方便地遮蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重複處理，減少無意義的機械勞動。
可以輕鬆實現多重繼承。
完全相容 CSS 程式碼，可以方便地應用到老專案中。LESS 只是在 CSS 語法上做了擴充套件，所以老的 CSS 程式碼也可以與 LESS 程式碼一同編譯。
display:none與visibility:hidden的區別是什麼？
display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素並且擠佔該元素原來的空間。
即是，使用CSS display:none屬性後，HTML元素（物件）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性後，HTML元素（物件）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。
CSS中link和@import的區別是？
Link屬於html標籤，而@import是CSS中提供的
在頁面載入的時候，link會同時被載入，而@import引用的CSS會在頁面載入完成後才會載入引用的CSS
@import只有在ie5以上才可以被識別，而link是html標籤，不存在瀏覽器相容性問題
Link引入樣式的權重大於@import的引用（@import是將引用的樣式匯入到當前的頁面中）
為什麼要初始化樣式？
由於瀏覽器相容的問題，不同的瀏覽器對標籤的預設樣式值不同，若不初始化會造成不同瀏覽器之間的顯示差異
但是初始化CSS會對搜尋引擎優化造成小影響
BFC是什麼?
BFC（塊級格式化上下文），一個建立了新的BFC的盒子是獨立佈局的，盒子內元素的佈局不會影響盒子外面的元素。在同一個BFC中的兩個相鄰的盒子在垂直方向發生margin重疊的問題
BFC是指瀏覽器中建立了一個獨立的渲染區域，該區域內所有元素的佈局不會影響到區域外元素的佈局，這個渲染區域只對塊級元素起作用
HTML與XHTML——二者有什麼區別？
- 所有的標記都必須要有一個相應的結束標記
- 所有標籤的元素和屬性的名字都必須使用小寫
- 所有的 XML 標記都必須合理巢狀
- 所有的屬性必須用引號 "" 括起來
- 把所有 < 和 & 特殊符號用編碼表示
- 給所有屬性賦一個值
- 不要在註釋內容中使用 "--"
- 圖片必須有說明文字
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圖片
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 > id > class > tag
important 比 內聯優先順序高
CSS3新增偽類舉例：
- dom:first-of-type 選擇屬於其父元素的首個
元素的每個 元素。 - dom:last-of-type 選擇屬於其父元素的最後
元素的每個 元素。 - dom:only-of-type 選擇屬於其父元素唯一的
元素的每個 元素。 - dom:only-child 選擇屬於其父元素的唯一子元素的每個
元素。 - dom:nth-child(2) 選擇屬於其父元素的第二個子元素的每個
元素。 - :enabled、:disabled 控制表單控制元件的禁用狀態。
- :checked，單選框或核取方塊被選中。