一、HTML 和 CSS
- 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么?
IE: Trident 內核
Firefox：Gecko 內核
Safari : WebKit 內核
Opera : 以前是 Presto 內核百揭，Opera 現(xiàn)已改用 Google Chrome 的 Blink 內核
Chrome:Blink(基于 WebKit实抡，Google 與 Opera Software 共同開發(fā))
- 每個 HTML 文件里開頭都有個很重要的東西 DOCTYPE阁簸，知道這是干什么的嗎畔柔？
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于
<html>標簽之前捍掺。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范撼短。（重點：告訴瀏覽器按照何種規(guī)范解析頁面）。
- Quirks （怪癖）模式是什么挺勿？它和 Standards（標準）模式有什么區(qū)別曲横？
從 IE6 開始，引入了 Standards 模式不瓶，標準模式中禾嫉，瀏覽器嘗試給符合標準的文檔在規(guī)范上的正確處理達到在指定瀏覽器中的程度。
在 IE6 之前 CSS 還不夠成熟蚊丐，所以 IE5 等之前的瀏覽器對 CSS 的支持很差夭织， IE6 將對 CSS 提供更好的支持，然而這時的問題就來了吠撮，因為有很多頁面是基于舊的布局方式寫的，而如果 IE6 支持 CSS 則將令這些頁面顯示不正常讲竿，如何在即保證不破壞現(xiàn)有頁面泥兰，又提供新的渲染機制呢？
在寫程序時我們也會經(jīng)常遇到這樣的問題题禀，如何保證原來的接口不變鞋诗，又提供更強大的功能，尤其是新功能不兼容舊功能時迈嘹。遇到這種問題時的一個常見做法是增加參數(shù)和分支削彬，即當某個參數(shù)為真時，我們就使用新功能秀仲，而如果這個參數(shù)不為真時融痛，就使用舊功能，這樣就能不破壞原有的程序神僵，又提供新功能雁刷。IE6 也是類似這樣做的，它將 DTD（文檔類型定義）當成了這個“參數(shù)”保礼，因為以前的頁面大家都不會去寫 DTD沛励，所以 IE6 就假定 如果寫了 DTD责语，就意味著這個頁面將采用對 CSS 支持更好的布局，而如果沒有目派，則采用兼容之前的布局方式坤候。這就是 Quirks 模式（怪癖模式，詭異模式企蹭，怪異模式）白筹。
區(qū)別：
總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別练对。
盒模型：在 W3C 標準中遍蟋，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度螟凭，而在 Quirks 模式下虚青，IE 的寬度和高度還包含了padding 和 border。
設置行內元素的高寬：在 Standards 模式下螺男，給<span>等行內元素設置 wdith 和 height 都不會生效棒厘，而在 quirks 模式下，則會生效下隧。
設置百分比的高度：在 standards 模式下奢人，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的磁餐。
用 margin:0 auto 設置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平居中竹观，但在 quirks 模式下卻會失效。
（還有很多支救，答出什么不重要，關鍵是看他答出的這些是不是自己經(jīng)驗遇到的拷淘，還是說都是看文章看的各墨，甚至完全不知道。）
Paste_Image.png
- DIV + CSS 的布局較 table 布局有什么優(yōu)點启涯？
- 改版的時候更方便只要改 CSS 文件贬堵。
- 頁面加載速度更快、結構化清晰结洼、頁面顯示簡潔黎做。
- 表現(xiàn)與結構相分離。
- 易于優(yōu)化（SEO）搜索引擎更友好松忍，排名更容易靠前引几。
- img 的 alt 與 title 有何異同？ strong 與 em 的異同？
- alt（alt text）: 為不能顯示圖像伟桅、窗體或 applets 的用戶代理（UA）敞掘，alt 屬性用來指定替換文字。替換文字的語言由 lang 屬性指定楣铁。(在 IE 瀏覽器下會在沒有 title 時把 alt 當成 tool tip 顯示)
- title（tool tip）: 該屬性為設置該屬性的元素提供建議性的信息玖雁。
- strong : 粗體強調標簽，強調盖腕，表示內容的重要性赫冬。
- em : 斜體強調標簽，更強烈強調溃列，表示內容的強調點劲厌。
- 你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎?
漸進增強 （progressive enhancement）：針對低版本瀏覽器進行構建頁面，保證最基本的功能听隐，然后再針對高級瀏覽器進行效果补鼻、交互等改進和追加功能達到更好的用戶體驗。
優(yōu)雅降級（graceful degradation）：一開始就構建完整的功能雅任，然后再針對低版本瀏覽器進行兼容风范。
區(qū)別：優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給沪么，而漸進增強則是從一個非撑鹦觯基礎的，能夠起作用的版本開始禽车，并不斷擴充寇漫，以適應未來環(huán)境的需要。降級（功能衰減）意味著往回看殉摔；而漸進增強則意味著朝前看州胳，同時保證其根基處于安全地帶。
“優(yōu)雅降級”觀點
“優(yōu)雅降級”觀點認為應該針對那些最高級钦勘、最完善的瀏覽器來設計網(wǎng)站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段亚亲，并把測試對象限定為主流瀏覽器（如 IE彻采、Mozilla 等）的前一個版本。
在這種設計范例下捌归，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗肛响。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點惜索，因此除了修復較大的錯誤之外特笋，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認為應關注于內容本身。
內容是我們建立網(wǎng)站的誘因猎物。有的網(wǎng)站展示它虎囚，有的則收集它蔫磨，有的尋求淘讥，有的操作，還有的網(wǎng)站甚至會包含以上的種種，但相同點是它們全都涉及到內容抵赢。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在洛退。
那么問題來了“旮現(xiàn)在產(chǎn)品經(jīng)理看到 IE6,7,8 網(wǎng)頁效果相對高版本現(xiàn)代瀏覽器少了很多圓角，陰影（CSS3）兵怯，要求兼容（使用圖片背景彩匕，放棄CSS3），你會如何說服他媒区？
- 為什么利用多個域名來存儲網(wǎng)站資源會更有效驼仪？
- CDN 緩存更方便
- 突破瀏覽器并發(fā)限制
- 節(jié)約 Cookie 帶寬
- 節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應速度
- 防止不必要的安全問題
- 請談一下你對網(wǎng)頁標準和標準制定機構重要性的理解袜漩。
網(wǎng)頁標準和標準制定機構都是為了能讓 Web 發(fā)展的更"健康"绪爸，開發(fā)者遵循統(tǒng)一的標準，降低開發(fā)難度宙攻，開發(fā)成本奠货，SEO 也會更好做，也不會因為濫用代碼導致各種 BUG座掘、安全問題递惋，最終提高網(wǎng)站易用性。
- 請描述一下 Cookies溢陪，sessionStorage 和 localStorage 的區(qū)別萍虽？
sessionStorage 用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀形真。因此 sessionStorage 不是一種持久化的本地存儲杉编，僅僅是會話級別的存儲。而 localStorage 用于持久化的本地存儲，除非主動刪除數(shù)據(jù)邓馒，否則數(shù)據(jù)是永遠不會過期的嘶朱。
Web Storage 和 Cookie 的區(qū)別
Web Storage 的概念和 Cookie 相似，區(qū)別是它是為了更大容量存儲設計的绒净。Cookie 的大小是受限的见咒，并且每次你請求一個新的頁面的時候Cookie 都會被發(fā)送過去，這樣無形中浪費了帶寬挂疆，另外 Cookie 還需要指定作用域改览，不可以跨域調用。
除此之外缤言，Web Storage 擁有 setItem,getItem,removeItem,clear 等方法宝当，不像 Cookie 需要前端開發(fā)者自己封裝 setCookie，getCookie胆萧。但是Cookie 也是不可以或缺的：Cookie 的作用是與服務器進行交互庆揩，作為HTTP 規(guī)范的一部分而存在 ，而 Web Storage 僅僅是為了在本地“存儲”數(shù)據(jù)而生跌穗。
- 簡述一下 src 與 href 的區(qū)別订晌。
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯(lián)系蚌吸。
src是sourcem 的縮寫锈拨，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置羹唠；在請求 src 資源時會將其指向的資源下載并應用到文檔內奕枢，例如 js 腳本，img 圖片和 frame 等元素佩微。
<script src =”js.js”></script>
當瀏覽器解析到該元素時缝彬，會暫停其他資源的下載和處理，直到將該資源加載哺眯、編譯谷浅、執(zhí)行完畢，圖片和框架等元素也如此奶卓，類似于將所指向資源嵌入當前標簽內一疯。這也是為什么將 js 腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫寝杖，指向網(wǎng)絡資源所在位置违施，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接互纯，如果我們在文檔中添加
<link href=”common.css” rel=”stylesheet”/>
那么瀏覽器會識別該文檔為 css 文件瑟幕，就會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用 link 方式來加載 css，而不是使用 @import 方式只盹。
- 知道的網(wǎng)頁制作會用到的圖片格式有哪些辣往？
png-8，png-24殖卑，jpeg站削，gif，svg孵稽。
但是上面的那些都不是面試官想要的最后答案许起。面試官希望聽到是Webp。（是否有關注新技術菩鲜，新鮮事物）
科普一下 Webp：WebP 格式园细，谷歌（Google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有 JPEG 的 2/3接校，并能節(jié)省大量的服務器帶寬資源和數(shù)據(jù)空間猛频。Facebook Ebay 等知名網(wǎng)站已經(jīng)開始測試并使用 WebP 格式。
在質量相同的情況下蛛勉，WebP 格式圖像的體積要比 JPEG 格式圖像小40%鹿寻。
- 知道什么是微格式嗎？談談理解诽凌。在前端構建中應該考慮微格式嗎毡熏？
微格式（Microformats）是一種讓機器可讀的語義化 XHTML 詞匯的集合，是結構化數(shù)據(jù)的開放標準皿淋。是為特殊應用而制定的特殊格式招刹。
優(yōu)點：將智能數(shù)據(jù)添加到網(wǎng)頁上，讓網(wǎng)站內容在搜索引擎結果界面可以顯示額外的提示窝趣。（應用范例：豆瓣疯暑，有興趣自行 google）
- 在 css/js 代碼上線之后開發(fā)人員經(jīng)常會優(yōu)化性能，從用戶刷新網(wǎng)頁開始哑舒，一次 js 請求一般情況下有哪些地方會有緩存處理妇拯？
DNS（域名服務器）緩存，CDN 緩存洗鸵，瀏覽器緩存越锈，服務器緩存。
- 一個頁面上有大量的圖片（大型電商網(wǎng)站）膘滨，加載很慢甘凭，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗火邓。
圖片懶加載丹弱，在頁面上的未可視區(qū)域可以添加一個滾動條事件德撬，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者躲胳，優(yōu)先加載蜓洪。
如果為幻燈片、相冊等坯苹，可以使用圖片預加載技術隆檀，將當前展示圖片的前一張和后一張優(yōu)先下載。
如果圖片為 css 圖片粹湃，可以使用 CSSsprite恐仑，SVGsprite，Iconfont为鳄、Base64 等技術菊霜。
如果圖片過大，可以使用特殊編碼的圖片济赎，加載時會先加載一張壓縮的特別厲害的縮略圖鉴逞，以提高用戶體驗。
如果圖片展示區(qū)域小于圖片的真實大小司训，則因在服務器端根據(jù)業(yè)務需要先行進行圖片壓縮构捡，圖片壓縮后大小與展示一致。
- 你如何理解 HTML 結構的語義化壳猜？
- 去掉或樣式丟失的時候能讓頁面呈現(xiàn)清晰的結構勾徽，這雖然不是語義化 HTML 結構的優(yōu)點，但是瀏覽器都有有默認樣式统扳，默認樣式的目的也是為了更好的表達 HTML 的語義喘帚，可以說瀏覽器的默認樣式和語義化的 HTML 結構是不可分割的。
- 屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標記來“讀”你的網(wǎng)頁咒钟。例如吹由，如果你使用的含語義的標記，屏幕閱讀器就會“逐個拼出”你的單詞朱嘴，而不是試著去對它完整發(fā)音倾鲫。
- iPad、手機等設備可能無法像普通電腦的瀏覽器一樣來渲染網(wǎng)頁（通常是因為這些設備對 CSS 的支持較弱）萍嬉，使用語義標記可以確保這些設備以一種有意義的方式來渲染網(wǎng)頁乌昔。理想情況下，觀看設備的任務是符合設備本身的條件來渲染網(wǎng)頁壤追。語義標記為設備提供了所需的相關信息,就省去了你自己去考慮所有可能的顯示情況（包括現(xiàn)有的或者將來新的設備）磕道。例如，一部手機可以選擇使一段標記了標題的文字以粗體顯示行冰。而掌上電腦可能會以比較大的字體來顯示溺蕉。無論哪種方式一旦你對文本標記為標題贯卦，您就可以確信讀取設備將根據(jù)其自身的條件來合適地顯示頁面。
- 搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重焙贷。
- 除了提升易用性外,語義標記有利于正確使用 CSS 和 JavaScript，因為其本身提供了許多“鉤鉤”來應用頁面的樣式與行為贿堰。
- W3C 給我們定了一個很好的標準辙芍，在團隊中大家都遵循這個標準，可以減少很多差異化的東西羹与，方便開發(fā)和維護故硅，提高開發(fā)效率，甚至實現(xiàn)模塊化開發(fā)纵搁。
- 談談以前端角度出發(fā)做好 SEO 需要考慮什么吃衅？
- 了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁：需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區(qū)別腾誉，搜索機器人（SE robot 或叫 web Spider）如何進行工作徘层，搜索引擎如何對搜索結果進行排序等等。
- Meta 標簽優(yōu)化：主要包括主題（Title)利职，網(wǎng)站描述(Description)趣效，和關鍵詞（Keywords）。還有一些其它的隱藏文字比如 Author（作者）猪贪，Category（目錄）跷敬，Language（編碼語種）等。
- 如何選取關鍵詞并在網(wǎng)頁中放置關鍵詞：搜索就得用關鍵詞热押。關鍵詞分析和選擇是 SEO 最重要的工作之一西傀。首先要給網(wǎng)站確定主關鍵詞（一般在5個上下），然后針對這些關鍵詞進行優(yōu)化桶癣，包括關鍵詞密度（Density）拥褂，相關度（Relavancy），突出性（Prominency）等等牙寞。
- 了解主要的搜索引擎：雖然搜索引擎有很多肿仑，但是對網(wǎng)站流量起決定作用的就那么幾個。比如英文的主要有 Google碎税，Yahoo尤慰，Bing 等；中文的有百度雷蹂，搜狗伟端，有道等。不同的搜索引擎對頁面的抓取和索引匪煌、排序的規(guī)則都不一樣责蝠。還要了解各搜索門戶和搜索引擎之間的關系党巾，比如 AOL 網(wǎng)頁搜索用的是 Google 的搜索技術，MSN 用的是 Bing 的技術霜医。主要的互聯(lián)網(wǎng)目錄 Open Directory 自身不是搜索引擎齿拂，而是一個大型的網(wǎng)站目錄，他和搜索引擎的主要區(qū)別是網(wǎng)站內容的收集方式不同肴敛。目錄是人工編輯的署海，主要收錄網(wǎng)站主頁；搜索引擎是自動收集的医男，除了主頁外還抓取大量的內容頁面砸狞。
- 按點擊付費的搜索引擎：搜索引擎也需要生存，隨著互聯(lián)網(wǎng)商務的越來越成熟镀梭，收費的搜索引擎也開始大行其道刀森。最典型的有 Overture 和百度，當然也包括 Google 的廣告項目 Google Adwords报账。越來越多的人通過搜索引擎的點擊廣告來定位商業(yè)網(wǎng)站研底，這里面也大有優(yōu)化和排名的學問，你得學會用最少的廣告投入獲得最多的點擊透罢。
- 搜索引擎登錄：網(wǎng)站做完了以后飘哨，別躺在那里等著客人從天而降。要讓別人找到你琐凭，最簡單的辦法就是將網(wǎng)站提交（submit）到搜索引擎芽隆。如果你的是商業(yè)網(wǎng)站，主要的搜索引擎和目錄都會要求你付費來獲得收錄（比如 Yahoo 要 299 美元）统屈，但是好消息是（至少到目前為止）最大的搜索引擎 Google 目前還是免費胚吁，而且它主宰著 60％ 以上的搜索市場。
- 鏈接交換和鏈接廣泛度（Link Popularity）：網(wǎng)頁內容都是以超文本（Hypertext）的方式來互相鏈接的愁憔，網(wǎng)站之間也是如此腕扶。除了搜索引擎以外，人們也每天通過不同網(wǎng)站之間的鏈接來 Surfing（“沖浪”）吨掌。其它網(wǎng)站到你的網(wǎng)站的鏈接越多半抱，你也就會獲得更多的訪問量。更重要的是膜宋，你的網(wǎng)站的外部鏈接數(shù)越多窿侈，會被搜索引擎認為它的重要性越大，從而給你更高的排名秋茫。
- 合理的標簽使用史简。
- 有哪項方式可以對一個 DOM 設置它的 CSS 樣式？
- 外部樣式表肛著，引入一個外部 CSS 文件圆兵。
- 內部樣式表跺讯，將 CSS 代碼放在 <head> 標簽內部。
- 內聯(lián)樣式殉农，將 CSS 樣式直接定義在 HTML 元素內部刀脏。
- CSS 都有哪些選擇器？
派生選擇器（用HTML標簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明超凳，屬于CSS2愈污，IE6不支持，不常用聪建，不知道就算了）
除了前3種基本選擇器，還有一些擴展選擇器茫陆，包括
后代選擇器（利用空格間隔金麸，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
那么問題來了簿盅，CSS選擇器的優(yōu)先級是怎么樣定義的挥下？
基本原則：
一般而言，選擇器越特殊桨醋，它的優(yōu)先級越高棚瘟。也就是選擇器指向的越準確，它的優(yōu)先級就越高喜最。
復雜的計算方法：
用 1 表示派生選擇器的優(yōu)先級
用 10 表示類選擇器的優(yōu)先級
用 100 標示ID選擇器的優(yōu)先級
div.test1 .span var 優(yōu)先級 1+10 +10 +1
span#xxx .songs li 優(yōu)先級1+100 + 10 + 1
xxx li 優(yōu)先級 100 +1
- CSS 中可以通過哪些屬性定義偎蘸，使得一個 DOM 元素不顯示在瀏覽器可視范圍內？
最基本的：設置 display 屬性為 none瞬内，或者設置 visibility 屬性為 hidden迷雪。
技巧性：設置寬高為 0，設置透明度為 0虫蝶，設置 z-index 位置在 -1000em章咧。
- 超鏈接訪問過后 hover 樣式就不出現(xiàn)的問題是什么？如何解決能真？
被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了,解決方法是改變CSS 屬性的排列順序: L-V-H-A（link,visited,hover,active）赁严。
