web前端面試題總結（html、css）

1.對 WEB 標準以及 W3C 的理解與認識？ 

　　參考： 標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外 鏈 css 和 js 腳本、 結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更 普遍的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不須要變更頁面內容、提 供打印版本而不須要複製內容、提升網站易用性。 

2.xhtml 和 html 有什麼區別？

　　參考： HTML 是一種基本的 WEB 網頁設計語言，XHTML 是一個基於 XML 的置標語言。 最主要的不一樣： XHTML 元素必須被正確地嵌套。 XHTML 元素必須被關閉。 標籤名必須用小寫字母。 XHTML 文檔必須擁有根元素。

3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 

　　參考： 用於聲明文檔使用那種規範（html/Xhtml）通常爲 嚴格 過分 基於框架的 html 文檔。 加入 XMl 聲明可觸發，解析方式更改成 IE5.5 擁有 IE5.5 的 bug。 

4.描述 css reset 的做用和用途。？

　　參考： Reset 重置瀏覽器的 css 默認屬性 瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統 一。 

5.解釋 css sprites，如何使用。？

　　參考： Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量。 

6.你如何對網站的文件和資源進行優化?

　　參考：解決方案包括：文件合併、文件最小化/文件壓縮、使用 CDN 託管、緩存的使用

7.清除浮動的幾種方式，各自的優缺點？

　　參考：1.使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，，，增長無心義的標籤） 。 2.使用 overflow:auto（空標籤元素清除浮動而不得不增長無心代碼的弊端,,使用 zoom:1 用於兼容 IE）。 3.是用 afert 僞元素清除浮動(用於非 IE 瀏覽器)。 

8.前端頁面由哪三層構成，分別是什麼?做用是什麼? 

　　參考： 網頁分紅三個層次，即：結構層、表示層、行爲層。

　　　　　網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責建立。標籤， 也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含 任何關於如何顯示有關內容的信息。例如， P 標籤表達了這樣一種語義：「這是一個文本段」。

　　　　 網頁的表示層（presentation layer） 由 CSS 負責建立。 CSS 對「如何顯示有關內容」 的問題作出了回答。

　　　　網頁的行爲層（behavior layer）負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM 主宰的領域。

9.瀏覽器的內核分別是什麼? 

　　參考：  IE 瀏覽器的內核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、Opera 內核原爲 Presto，現爲 Blink。 

10.常見兼容性問題？　

　　參考： * png24 位的圖片在 iE6 瀏覽器上出現背景，解決方案是作成 PNG8. * 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;} 來統一。
　　　　　* IE6 雙邊距 bug:塊屬性標籤 float 後，又有橫行的 margin 狀況下，在 ie6 顯示 margin 比設置的大。 浮動 ie 產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 這種狀況之下 IE 會產生 20px 的距離，解決方案是在 float 的標籤樣式控制中加入 —— _display:inline;將其轉化爲行內屬性。(_這個符號只有 ie6 會識別) 漸進識別的方式，從整體中逐漸排除局部。

　　　　　　首先，巧妙的使用「\9」這一標記，將 IE 遊覽器從全部狀況中分離出來。 接着，再次使用「+」將 IE8 和 IE七、IE6 分離開來，這樣 IE8 已經獨立識別。

　　　　　　.bb{ background-color:#f1ee18;       /*全部識別*/

　　　　　  　　 .background-color:#00deff\9;     /*IE六、七、8 識別*/

　　　　　　　   +background-color:#a200ff;/*IE六、7 識別*/

　　　　　　　　 _background-color:#1e0bd1;/*IE6 識別*/

　　　　　　 }

　　　　* IE 下,可使用獲取常規屬性的方法來獲取自定義屬性, 也可使用 getAttribute()獲取自定義屬性; Firefox 下,只能使用 getAttribute()獲取自定義屬性. 解決方法:統一經過 getAttribute()獲取自定義屬性.

　　　　* IE 下,even 對象有 x,y 屬性,可是沒有 pageX,pageY 屬性; Firefox 下,event 對象有 pageX,pageY 屬性,可是沒有 x,y 屬性. * 解決方法：（條件註釋）缺點是在 IE 瀏覽器下可能會增長額外的 HTTP 請求數。

　　　　 * Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

　　　　　超連接訪問事後 hover 樣式就不出現了 被點擊訪問過的超連接樣式不在具備 hover 和 active 瞭解決方法是改變 CSS 屬性的排列順序:

　　　　　　　　 L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

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

　　參考： * HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能 的增長。

　　　　　* 繪畫 canvas

　　　　　用於媒介回放的 video 和 audio 元素

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

　　　　　sessionStorage 的數據在瀏覽器關閉後自動刪除 語意化更好的內容元素，好比 article、footer、header、nav、section 表單控件，calendar、date、time、email、url、search
　　　　   新的技術 webworker, websockt, Geolocation

　　　　　　* 移除的元素 純表現的元素：basefont，big，center，font, s，strike，tt，u；

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

　　　　   支持 HTML5 新標籤：

　　　　　　* IE8/IE7/IE6 支持經過 document.createElement 方法產生的標籤， 能夠利用這一特性讓這些瀏覽器支持 HTML5 新標籤，

　　　　   瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

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

　　　　   如何區分： DOCTYPE 聲明\新增的結構元素\功能元素

12. 解釋下浮動和它的工做原理？清除浮動的技巧？

　　參考：浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

　　　　　　(1)、使用空標籤清除浮動。
　　　　　　　　這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
　　　　　　(2)、使用overflow。
　　　　　　　　給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
　　　　　　(3)、使用after僞對象清除浮動。
　　　　　　　　該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

13.用過媒體查詢，針對移動端的佈局嗎？ 

　　參考：媒體查詢語法：

　　　　　　1.內聯寫法：and以後必須有空格
　　　　　　@media screen and (

　　　　　　　　min-width:960px //判斷瀏覽器大小條件)

　　　　　　　　{body{background：red} //常規的樣式
　　　　　　}

　　　　　　2.外聯寫法：當知足屏幕知足條件的時候鏈接href後的css文件
　　　　　　　　<link='stylesheet' media='screen and (min-width:960)' href='xx.css'/>
　　　　　　　　<link='stylesheet' media='screen and (min-width:960) and (max-width:1960)' href='xx.css'/>

　　　　　　媒體查詢根據不一樣屏幕顯示不一樣界面有兩種方式：
　　　　　　　　1.在不一樣的媒體查詢斷定的大括號後寫不一樣的樣式
　　　　　　　　2.寫兩個相同的HTML內部的內容，經過媒體查詢判斷界面後，顯示一個，隱藏另外一個

14.使用 CSS 預處理器嗎？喜歡那個？ 

　　參考：一、什麼是CSS預處理器

　　　　CSS預處理器定義了一種新的語言，基本的思想是用一種專門的編程語言，開發者只須要使用這種語言進行編碼工做，減小枯燥無味的CSS代碼的編寫過程的同時，它能讓你的CSS具有更加簡潔、適應性更強、可讀性更加、層級關係更加明顯、更易於代碼的維護等諸多好處。

　　　　CSS預處理器種類繁多，本次就以Sass、Less、Stylus進行比較。

　　　　二、語法

　　　　　　在使用CSS預處理器以前最重要的是瞭解語法，我只寫過sass，就從網上找了下另外兩種語法的格式，與你們對比分享。

　　　　　　首先Sass和Less都是用的是標準的CSS語法，所以你能夠很方便的把已完成的CSS代碼轉爲預處理器識別的代碼，Sass默認使用 .sass擴展名，而Less默認使用.Less擴展名。

15.div+css 的佈局較 table 佈局有什麼優勢？ 

 　　參考：   •改版的時候更方便 只要改 css 文件。

　　　　　　•頁面加載速度更快、結構化清晰、頁面顯示簡潔。

　　　　　　•表現與結構相分離。

　　　　　　•易於優化（seo）搜索引擎更友好，排名更容易靠前。

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

　　參考：    •CDN 緩存更方便

　　　　　　•突破瀏覽器併發限制

　　　　　　•節約 cookie 帶寬

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

　　　　　　•防止沒必要要的安全問題 

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

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

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

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

　　參考： png-8，png-24，jpeg，gif，svg。

　　　　　可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是 Webp。（是否有關 注新技術，新鮮事物） 科普一下 Webp：WebP 格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片 格式。

　　　　　圖片壓縮體積大約只有 JPEG 的 2/3，並能節省大量的服務器帶寬資源和數據空間。 Facebook Ebay 等知名網站已經開始測試並使用 WebP 格式。 在質量相同的狀況下，WebP 格式圖像的體積要比 JPEG 格式圖像小 40% 

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

　　參考： dns 緩存，cdn 緩存，瀏覽器緩存，服務器緩存。 

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

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

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

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

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

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

22.談談之前端角度出發作好 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（「衝浪」）。其它網站到你的網 站的連接越多，你也就會得到更多的訪問量。更重要的是，你的網站的外部連接數越多，會 被搜索引擎認爲它的重要性越大，從而給你更高的排名。

　　　　•合理的標籤使用

23.有哪項方式能夠對一個 DOM 設置它的 CSS 樣式？

　　參考：    •外部樣式表，引入一個外部 css 文件

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

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

 24.什麼是 Css Hack？ie6,7,8 的 hack 分別是什麼？ 

參考：#test {

　　　　　　width:300px;

　　　　　　height:300px;

　　　　　　background-color:blue; /*firefox*/

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

　　　　　　background-color:yellow; /*ie8*/

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

　　　　　　_background-color:orange; /*ie6*/

　　　　　}

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

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

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

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

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

　　　　　摺疊結果遵循下列計算規則：
　　　　　　1.兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

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

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

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

　　參考： rgba()和 opacity 都能實現透明效果，但最大的不一樣是 opacity 做用於元素，以及元素內 的全部內容的透明度， 而 rgba()只做用於元素的顏色或其背景色。（設置 rgba 透明的元素的子元素不會繼承透 明效果）！

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

　　參考： 垂直方向：line-height

　　　　　 水平方向：letter-spacing

     　　 　  考官會繼續追問，關於 letter-spacing 的妙用知道有哪些麼？

　　　　　　答案:能夠用於消除 inline-block 元素間的換行符空格間隙問題。 

28.px 和 em 的區別?

　　參考：    px 和 em 都是長度單位，區別是，px 的值是固定的，指定是多少就是多少，計算比較 容易。

　　　　　　em 得值不是固定的，而且 em 會繼承父級元素的字體大小。

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

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

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

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

　　　　　　爲何要使用它們？

　　　　　　　　•結構清晰，便於擴展。

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

　　　　　　　　•能夠輕鬆實現多重繼承。

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

30.分別寫出如下幾個 HTML 標籤：文字加粗、下標、居中、字體 ？

　　參考：　<em></em>         <i></i>   斜體

　　　　　　<strong></strong>  <b></b>  加粗，h1~h6也是文字加粗顯示

　　　　　　<del></del>   <s></s>  刪除線

　　　　　　<u></u>  下劃線

　　　　　　 上標

　　　　　　 下標

31.寫出一個文本輸入框，屬性爲只讀，最大輸入字符爲 20 個 ？

　　參考：<input name="textfield" type="text" maxlength="20" readonly="" value="" />