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 和 IE7、IE6 分離開來，這樣 IE8 已經獨立識別。
.bb{ background-color:#f1ee18; /*所有識別*/
.background-color:#00deff\9; /*IE6、7、8 識別*/
+background-color:#a200ff;/*IE6、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. 解釋下浮動和它的工作原理？清除浮動的技巧？
參考：浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。
(2)、使用overflow。
給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
(3)、使用after偽對象清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素；
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 預處理器嗎？喜歡那個？
參考：1、什么是CSS預處理器
CSS預處理器定義了一種新的語言，基本的思想是用一種專門的編程語言，開發者只需要使用這種語言進行編碼工作，減少枯燥無味的CSS代碼的編寫過程的同時，它能讓你的CSS具備更加簡潔、適應性更強、可讀性更加、層級關系更加明顯、更易於代碼的維護等諸多好處。
CSS預處理器種類繁多，本次就以Sass、Less、Stylus進行比較。
2、語法
在使用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> 下划線
<sup></sup> 上標
<sub></sub> 下標
31.寫出一個文本輸入框，屬性為只讀，最大輸入字符為 20 個 ？
參考：<input name="textfield" type="text" maxlength="20" readonly="" value="" />