前端面試題

時間 2019-11-11

標籤端面試題简体版

原文原文鏈接

本身整理了一些關於前端這個行業面試題，有什麼不足各位大佬多多指教.javascript

HTML&CSS

1.經常使用那幾種瀏覽器測試？有哪些內核(Layout Engine)?php

　　 IE: trident內核css

　　Firefox: gecko內核html

　　Safari: webkit 內核前端

　　Opera: 之前是presto內核,Opera如今改用 Google Chrome的Blink內核html5

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

2.每一個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎Doctype的做用？嚴格模式與混雜模式的區別？web

　　<!DOCTYPE> 用於告知瀏覽器以何種模式來渲染文檔.面試

　　嚴格模式下：頁面排版及JS解析是以該瀏覽器支持的最高標準來執行　ajax

　　混雜模式：不嚴格按照標準執行，主要用來兼容舊的瀏覽器，向後兼容

　　DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

　　<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。

　　此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）

　　拓展

　　HTML：HyperText Markup Language，超文本標記語言

　　XHTML：Extensible HyperText Markup Language，可擴展超文本標記語言，是一種置標語言，表現方式與超文本標記語言（HTML）相似，不過語法上更加嚴格。

　　與HTML對比

　　　　1.全部的標記都必需要有一個相應的結束標記

　　　　2.全部標籤的元素和屬性的名字都必須使用小寫

　　　　3.全部的XML標記都必須合理嵌套

　　　　4.全部的屬性必須用引號""括起來

　　　　5.把全部<和&特殊符號用編碼表示

　　　　6.給全部屬性賦一個值

　　　　7.不要在註釋內容中使「--」　　

　　　　8. 圖片必須有說明文字

　　如何將 HTML 轉換爲 XHTML：

添加一個 XHTML <!DOCTYPE> 到網頁中。
添加 xmlns 屬性到每一個頁面的 html 元素中。
修改全部的元素爲小寫。
關閉全部的空元素。
修改全部的屬性名稱爲小寫。
全部屬性值添加引號

3.Quirks模式是什麼？它和Standards模式有什麼區別　

　　從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。

　　在IE6以前CSS還不夠成熟，因此IE5等以前的瀏覽器對CSS的支持不好，IE6將對CSS提供更好的支持，然而這時的問題就來了，由於有不少頁面是基於舊的佈局方式寫的，而若是IE6支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？

　　在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤爲是新功能不兼容舊功能時。遇到這種問題時的一個常見作法是增長參數和分支，即當某個參數爲真時，咱們就使用新功能，而若是這個參數不爲真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是相似這樣作的，它將DTD當成了這個「參數」，由於之前的頁面你們都不會去寫DTD，因此IE6就假定若是寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

　　DTD：文檔類型定義(Document Type Definition)是一套爲了進行程序間的數據交換而創建的關於標記符的語法規則。

　　區別：

　　整體會有佈局、樣式解析和腳本執行三個方面的區別。

盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

　　 2. 設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

　　 3. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

　　 4. margin:0 auto設置水平居中：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效。

　　（還有不少，答出什麼不重要，關鍵是看他答出的這些是否是本身經驗遇到的，仍是說都是看文章看的，甚至徹底不知道。）

4. div+css 的佈局比 table 佈局有什麼優勢?

　　1.結構與樣式分離,結構化清晰,頁面顯示簡潔.

　　2.頁面加載的速度更快.

　　3.便於後期的維護.(改版的時候更方便只要改css樣式便可)

　　4.易於優化(SEO) 搜索引擎更友好,排名更容易靠前.

5.行內元素和塊級元素的區別？行內塊元素的兼容性使用？（IE8 如下）

　　1.行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效。

　　2.塊級元素：各佔據一行，垂直方向排列。重新行開始結束接着一個斷行。

　　兼容性：display:inline-block; display:inline; zoom:1;

6.img的alt與title有何異同？ strong與em的異同？　

　　a:alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文　字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成 tool tip顯示)

　　title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息。

　　strong:粗體強調標籤，強調，表示內容的重要性

　　em:斜體強調標籤，更強烈強調，表示內容的強調點

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

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

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

　　區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

　　「優雅降級」觀點

　　「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。

　　在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。

　　「漸進加強」觀點

　　「漸進加強」觀點則認爲應關注於內容自己。

　　內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。

那麼問題來了。如今產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了不少圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

8.爲何利用多個域名來存儲網站資源會更有效？

　　CDN 緩存更方便

　　突破瀏覽器併發限制

　　節約cookie 帶寬

　　節約主域名的鏈接數,優化頁面響應速度

　　防止沒必要要的安全問題

9.請談一下你對網頁標準和標準制定機構重要性的理解。

　　網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，下降開發難度，開發成本，SEO也會更好作，也不會由於濫用代碼致使各類BUG、安全問題，最終提升網站易用性。

10.請描述一下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僅僅是爲了在本地「存儲」數據而生。

　　存儲大小：
　　cookie數據大小不能超過4k。
　　sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

　　有效時間:

　　localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
　　sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
　　cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

11.簡述一下src與href的區別。

　　src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。

　　src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

　　當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

　　href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加

　　那麼瀏覽器會識別該文檔爲css文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css，而不是使用@import方式。

12.網頁製做會用到的圖片格式有哪些？　　

　　png-8，png-24，jpeg，gif，svg, Webp

13.在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？　

　　dns緩存，cdn緩存，瀏覽器緩存，服務器緩存

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

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

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

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

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

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

15.你如何理解HTML結構的語義化？　

　　1. 當頁面樣式加載失敗的時候可以讓頁面呈現出清晰的結構

　　2. 有利於seo優化，利於被搜索引擎收錄（更便於搜索引擎的爬蟲程序來識別）

　　3. 便於項目的開發及維護，使html代碼更具備可讀性，便於其餘設備解析。

　　去掉或樣式丟失的時候能讓頁面呈現清晰的結構：

　　html自己是沒有表現的，咱們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認爲這是html的表現，這些其實html默認的css樣式在起做用，因此去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優勢，可是瀏覽器都有有默認樣式，默認樣式的目的也是爲了更好的表達html的語義，能夠說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。

　　屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來「讀」你的網頁.

　　例如,若是你使用的含語義的標記,屏幕閱讀器就會「逐個拼出」你的單詞,而不是試着去對它完整發音.

　　PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對CSS的支持較弱）

　　使用語義標記能夠確保這些設備以一種有意義的方式來渲染網頁.理想狀況下,觀看設備的任務是符合設備自己的條件來渲染網頁.

　　語義標記爲設備提供了所需的相關信息,就省去了你本身去考慮全部可能的顯示狀況（包括現有的或者未來新的設備）.例如,一部手機能夠選擇使一段標記了標題的文字以粗體顯示.而掌上電腦可能會以比較大的字體來顯示.不管哪一種方式一旦你對文本標記爲標題,您就能夠確信讀取設備將根據其自身的條件來合適地顯示頁面.

　　搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重

　　過去你可能尚未考慮搜索引擎的爬蟲也是網站的「訪客」,但如今它們他們其實是極其寶貴的用戶.沒有他們的話,搜索引擎將沒法索引你的網站,而後通常用戶將很難過來訪問.

　　你的頁面是否對爬蟲容易理解很是重要,由於爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.

　　所以,若是頁面文件的標題被標記,而不是,那麼這個頁面在搜索結果的位置可能會比較靠後.除了提高易用性外,語義標記有利於正確使用CSS和JavaScript,由於其自己提供了許多「鉤鉤」來應用頁面的樣式與行爲.

　　SEO主要仍是靠你網站的內容和外部連接的。

　　便於團隊開發和維護

　　W3C給咱們定了一個很好的標準，在團隊中你們都遵循這個標準，能夠減小不少差別化的東西，方便開發和維護，提升開發效率，甚至實現模塊化開發。

16.談談之前端角度出發作好SEO須要考慮什麼？

　　瞭解搜索引擎如何抓取網頁和如何索引網頁

　　你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人（SE robot 或叫 web crawler）如何進行工做，搜索引擎如何對搜索結果進行排序等等。

　　Meta標籤優化

　　主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字好比Author（做者），Category（目錄），Language（編碼語種）等。

　　如何選取關鍵詞並在網頁中放置關鍵詞

　　搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞（通常在5個上下），而後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

　　瞭解主要的搜索引擎

　　雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索門戶和搜索引擎之間的關係，好比AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。

　　主要的互聯網目錄

　　Open Directory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方式不一樣。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。

　　按點擊付費的搜索引擎

　　搜索引擎也須要生存，隨着互聯網商務的愈來愈成熟，收費的搜索引擎也開始大行其道。最典型的有Overture和百度，固然也包括Google的廣告項目Google Adwords。愈來愈多的人經過搜索引擎的點擊廣告來定位商業網站，這裏面也大有優化和排名的學問，你得學會用最少的廣告投入得到最多的點擊。

　　搜索引擎登陸

　　網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）到搜索引擎。若是你的是商業網站，主要的搜索引擎和目錄都會要求你付費來得到收錄（好比Yahoo要299美圓），可是好消息是（至少到目前爲止）最大的搜索引擎Google目前仍是免費，並且它主宰着60％以上的搜索市場。

　　連接交換和連接普遍度（Link Popularity）

　　網頁內容都是以超文本（Hypertext）的方式來互相連接的，網站之間也是如此。除了搜索引擎之外，人們也天天經過不一樣網站之間的連接來Surfing（「衝浪」）。其它網站到你的網站的連接越多，你也就會得到更多的訪問量。更重要的是，你的網站的外部連接數越多，會被搜索引擎認爲它的重要性越大，從而給你更高的排名。

　　合理的標籤使用

1七、有哪項方式能夠對一個DOM設置它的CSS樣式？

　　外部樣式表，引入一個外部css文件

　　內部樣式表，將css代碼放在 <head> 標籤內部

　　內聯樣式，將css樣式直接定義在 HTML 元素內部

1八、CSS都有哪些選擇器？

　　派生選擇器（用HTML標籤申明）

　　id選擇器（用DOM的ID申明）

　　類選擇器（用一個樣式類名申明）

　　屬性選擇器（用DOM的屬性申明，屬於CSS2，IE6不支持，不經常使用，不知道就算了）

　　除了前3種基本選擇器，還有一些擴展選擇器，包括

　　後代選擇器（利用空格間隔，好比div .a{ }）

　　羣組選擇器（利用逗號間隔，好比p,div,#a{ }）

　　那麼問題來了，CSS選擇器的優先級是怎麼樣定義的？

　　基本原則：

　　通常而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。

　　複雜的計算方法：

　　　　用1表示派生選擇器的優先級

　　　　用10表示類選擇器的優先級

　　　　用100標示ID選擇器的優先級

　　　　　　div.test1 .span var 優先級 1+10 +10 +1

　　　　　　span#xxx .songs li 優先級1+100 + 10 + 1

　　　　　　#xxx li 優先級 100 +1

1九、CSS中能夠經過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視範圍內？

　　最基本的：設置display屬性爲none，或者設置visibility屬性爲hidden

　　技巧性：設置寬高爲0，設置透明度爲0，設置z-index位置在-1000

20、超連接訪問事後hover樣式就不出現的問題是什麼？如何解決？

　　被點擊訪問過的超連接樣式不在具備hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）

21.什麼是外邊距重疊？重疊的結果是什麼？　　

　　外邊距重疊就是margin-collapse。

　　在CSS當中，相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，而且於是所結合成的外邊距稱爲摺疊外邊距。　　

　　摺疊結果遵循下列計算規則：

　　　　兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

　　　　兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

　　　　兩個外邊距一正一負時，摺疊結果是二者的相加的和。

22.rgba()和opacity的透明效果有什麼不一樣？

　　rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，

而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）

23.css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？　

　　垂直方向：line-height

　　水平方向：letter-spacing 能夠用於消除inline-block元素間的換行符空格間隙問題。

24.px和em的區別。

　　px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

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

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

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

　　爲何要使用它們？

　　　　結構清晰，便於擴展。

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

　　　　能夠輕鬆實現多重繼承。

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

26.display:none與visibility:hidden的區別是什麼？

　　display : 隱藏對應的元素但不擠佔該元素原來的空間。

　　visibility: 隱藏對應的元素而且擠佔該元素原來的空間。

　　便是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各類屬性值都將「丟失」;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（徹底透明），而它所佔據的空間位置仍然存在。

27.CSS中link和@import的區別是：

　　Link屬於html標籤，而@import是CSS中提供的

　　在頁面加載的時候，link會同時被加載，而@import引用的CSS會在頁面加載完成後纔會加載引用的CSS

　　@import只有在ie5以上才能夠被識別，而link是html標籤，不存在瀏覽器兼容性問題

　　Link引入樣式的權重大於@import的引用（@import是將引用的樣式導入到當前的頁面中）

28.簡介盒子模型：　

　　CSS的盒子模型有兩種：IE盒子模型、標準的W3C盒子模型模型

　　盒模型：內容、內邊距、外邊距（通常不計入盒子實際寬度）、邊框

29.爲何要初始化樣式？

　　因爲瀏覽器兼容的問題，不一樣的瀏覽器對標籤的默認樣式值不一樣，若不初始化會形成不一樣瀏覽器之間的顯示差別

初始化CSS會對搜索引擎優化形成小影響

30.BFC是什麼?

　　BFC（塊級格式化上下文），一個建立了新的BFC的盒子是獨立佈局的，盒子內元素的佈局不會影響盒子外面的元素。在同一個BFC中的兩個相鄰的盒子在垂直方向發生margin重疊的問題

　　BFC是指瀏覽器中建立了一個獨立的渲染區域，該區域內全部元素的佈局不會影響到區域外元素的佈局，這個渲染區域只對塊級元素起做用

31.IE的雙邊距BUG：塊級元素float後設置橫向margin，ie6顯示的margin比設置的較大。

　加入_display：inline

32.html常見兼容性問題？

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

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

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

　　4. 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*/

　　}

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

33.行內元素有哪些?塊級元素有哪些?CSS的盒模型?　　

　　塊級元素：div p h1 h2 h3 h4 form ul
　　行內元素: a b br i span input select
　　Css盒模型:內容，border ,margin，padding

34.清除浮動有哪些方式？比較好的方式是哪種？
　　（1）父級div定義height。
　　（2）結尾處加空div標籤clear:both。
　　（3）父級div定義僞類:after和zoom。
　　（4）父級div定義overflow:hidden。
　　（5）父級div定義overflow:auto。
　　（6）父級div也浮動，須要定義寬度。
　　（7）父級div定義display:table。
　　（8）結尾處加br標籤clear:both。

　　比較好的是第3種方式，好多網站都這麼用。

35.box-sizing經常使用的屬性有哪些？分別有什麼做用？
　　 box-sizing: content-box|border-box|inherit;
　　content-box:寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。
　　border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。

36.HTML5 爲何只須要寫 <!DOCTYPE HTML>？
　　HTML5不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）。
　　而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

37.html5有哪些新特性？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

　　HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
　　　　(1)繪畫 canvas;
　　　　(2)用於媒介回放的 video 和 audio 元素;
　　　　(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
　　　　(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
　　　　(5)語意化更好的內容元素，好比 article、footer、header、nav、section;
　　　　(6)表單控件，calendar、date、time、email、url、search;
　　　　(7)新的技術webworker, websocket, Geolocation;

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

38.簡述一下你對HTML語義化的理解？
　　用正確的標籤作正確的事情。
　　html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
　　即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
　　搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
　　使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

39.iframe有那些缺點？
　　iframe會阻塞主頁面的Onload事件；
　　搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
　　iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
　　使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。
40.如何實現瀏覽器內多個標籤頁之間的通訊?
　　WebSocket、SharedWorker
　　也能夠調用localstorge、cookies等本地存儲方式。
　　localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進行頁面信息通訊。
　　注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。
41.如何在頁面上實現一個圓形的可點擊區域？
　　（1）map+area或者svg
　　（2）border-radius
　　（3）純js實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等
42.CSS優先級算法如何計算？
　　優先級就近原則，同權重狀況下樣式定義最近者爲準;
　　載入樣式以最後載入的定位爲準;
　　優先級爲:
　　!important >  id > class > tag
　　important比內聯優先級高(style)
43.爲何要使用CSS sprites
　　CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background-position」的組合進行背景定位，這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是若是請求太多會給服務器增長很大的壓力。
44.display:none和visibility:hidden的區別？
　　display:none  隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當他歷來不存在。
　　visibility:hidden  隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。
45.position的absolute與fixed區別
　　absolute浮動定位是相對於父級中設置position爲relative或者absolute最近的父級元素
　　fixed浮動定位是相對於瀏覽器視窗的
46.IE 8如下版本的瀏覽器中的盒模型有什麼不一樣？
　　IE8如下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框

4七、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新增僞類舉例：

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

48.如何居中div 如何居中一個浮動元素?　

　　給div設置一個寬度，而後添加margin:0 auto屬性

　　div{

　　width:200px;

　　margin:0 auto;

　　}

　　居中一個浮動元素

　　肯定容器的寬高寬500 高 300 的層

　　設置層的外邊距

　　.div {

　　 Width:500px ; height:300px;//高度能夠不設

　　Margin: -150px 0 0 -250px;

　　 position:relative;相對定位

　　 //方便看效果

　　left:50%;

　　　　top:50%;

　　}

49.哪些css屬性能夠繼承？

　　可繼承： font-size font-family color, ul li dl dd dt;

　不可繼承：border padding margin width height ;

JavaScript

1.介紹js的基本數據類型
　　Undefined、Null、Boolean、Number、String
2.js有哪些內置對象？
　　數據封裝類對象：Object、Array、Boolean、Number 和 String
　　其餘對象：Function、Arguments、Math、Date、RegExp、Error
3.this對象的理解
　　this老是指向函數的直接調用者（而非間接調用者）；
　　若是有new關鍵字，this指向new出來的那個對象；
　　在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this老是指向全局對象Window；
4.eval是作什麼的？
　　它的功能是把對應的字符串解析成JS代碼並運行；
　　應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。
　　由JSON字符串轉換爲JSON對象的時候能夠用eval，var obj =eval('('+ str +')');
5.DOM怎樣添加、移除、移動、複製、建立和查找節點

// 建立新節點
createDocumentFragment()    //建立一個DOM片斷
createElement()   //建立一個具體的元素
createTextNode()   //建立一個文本節點
// 添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
// 查找
getElementsByTagName()    //經過標籤名稱
getElementsByName()    //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
getElementById()    //經過元素Id，惟一性

6.null和undefined的區別？
　　null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。
　　undefined：
　　　　（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
　　　　（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
　　　　（3）對象沒有賦值的屬性，該屬性的值爲undefined。
　　　　（4）函數沒有返回值時，默認返回undefined。
　　null：
　　　　（1）做爲函數的參數，表示該函數的參數不是對象。
　　　　（2）做爲對象原型鏈的終點。
7.new操做符具體幹了什麼呢?
　　（1）建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
　　（2）屬性和方法被加入到 this 引用的對象中。
　　（3）新建立的對象由 this 所引用，而且最後隱式的返回 this 。
8.JSON 的瞭解？
　　JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小。
　　格式：採用鍵值對，例如：{'age':'12', 'name':'back'}
9.call() 和 apply() 的區別和做用？

　　call()和apply()相同點：

　　都是爲了用一個本不屬於一個對象的方法，讓這個對象去執行

　　apply()函數有兩個參數：第一個參數是上下文，第二個參數是參數組成的數組。若是上下文是null，則使用全局對象代替。
　　　　如：function.apply(this,[1,2,3]);
　　call()的第一個參數是上下文，後續是實例傳入的參數序列。
　　　　如：function.call(this,1,2,3);　

10.如何獲取UA？

    function whatBrowser() {  
        document.Browser.Name.value=navigator.appName;  
        document.Browser.Version.value=navigator.appVersion;  
        document.Browser.Code.value=navigator.appCodeName;  
        document.Browser.Agent.value=navigator.userAgent;  
    }

11.JS數組去重(三種方法)　

Array.prototype.unique1 = function () {
  var n = []; //一個新的臨時數組
  for (var i = 0; i < this.length; i++) //遍歷當前數組
  {
    //若是當前數組的第i已經保存進了臨時數組，那麼跳過，
    //不然把當前項push到臨時數組裏面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
}

Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n爲hash表，r爲臨時數組
    for(var i = 0; i < this.length; i++) //遍歷當前數組
    {
        if (!n[this[i]]) //若是hash表中沒有當前項
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把當前數組的當前項push到臨時數組裏面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //結果數組
    for(var i = 1; i < this.length; i++) //從第二項開始遍歷
    {
        //若是當前數組的第i項在當前數組中第一次出現的位置不是i，
        //那麼表示第i項是重複的，忽略掉。不然存入結果數組
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

12.js操做獲取和設置cookie　

//建立cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//獲取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;
}

//刪除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}

13.ajax 有那些優缺點?如何解決跨域問題?
　　優勢：
　　　　（1）經過異步模式，提高了用戶體驗.
　　　　（2）優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用.
　　　　（3）Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。
　　　　（4）Ajax能夠實現動態不刷新（局部刷新）
　　缺點：
　　　　（1）安全問題 AJAX暴露了與服務器交互的細節。
　　　　（2）對搜索引擎的支持比較弱。
　　　　（3）不容易調試。
　　jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面。
14.JavaScript原型，原型鏈 ? 有什麼特色？
　　（1）原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。
　　（2）原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。
15.GET和POST的區別，什麼時候使用POST？
　　GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符
　　POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。
　　GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，
　　也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。
　　然而，在如下狀況中，請使用 POST 請求：
　　　　沒法使用緩存文件（更新服務器上的文件或數據庫）
　　　　向服務器發送大量數據（POST 沒有數據量限制）
　　　　發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
16.請解釋一下 JavaScript 的同源策略
　　概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。
　　這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。
　　指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
　　爲何要有同源限制？
　　　　咱們舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。
17.Flash、Ajax各自的優缺點，在使用中如何取捨？
　　Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。
　　Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。
　　共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操做DOM
18.什麼是閉包？
　　閉包，官方對閉包的解釋是：一個擁有許多變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。

　　閉包的特色：
　　　　（1）做爲一個函數變量的一個引用，當函數返回時，其處於激活狀態。
　　　　（2）一個閉包就是當一個函數返回時，一個沒有釋放資源的棧區。
　　簡單的說，Javascript容許使用內部函數---即函數定義和函數表達式位於另外一個函數的函數體內。並且，這些內部函數能夠訪問它們所在的外部函數中聲明的全部局部變量、參數和聲明的其餘內部函數。當其中一個這樣的內部函數在包含它們的外部函數以外被調用時，就會造成閉包。
19.javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享
　　用構造函數和原型鏈的混合模式去實現繼承，避免對象共享能夠參考經典的extend()函數，不少前端框架都有封裝的，就是用一個空函數當作中間變量
20.ajax過程
　　(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.
　　(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
　　(3)設置響應HTTP請求狀態變化的函數.
　　(4)發送HTTP請求.
　　(5)獲取異步調用返回的數據.
　　(6)使用JavaScript和DOM實現局部刷新.