1.你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么?
IE: trident內(nèi)核
Firefox：gecko內(nèi)核
Safari:webkit內(nèi)核
Opera:以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
Chrome:Blink(基于webkit峭竣，Google與Opera Software共同開發(fā))
2.doctype作用？嚴格模式和混雜模式如何區(qū)分情龄，他們有何意義？
<!DOCTYPE> 聲明位于文檔中的最前面的位置捍壤，處于 <html> 標簽之前骤视。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
嚴格模式：又稱標準模式鹃觉，是指瀏覽器按照 W3C 標準解析代碼专酗。
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼盗扇。
如何區(qū)分：瀏覽器解析時到底使用嚴格模式還是混雜模式祷肯，與網(wǎng)頁中的 DTD 直接相關(guān)沉填。
1、如果文檔包含嚴格的 DOCTYPE 佑笋，那么它一般以嚴格模式呈現(xiàn)拜轨。
2、包含過渡 DTD 和 URI 的 DOCTYPE 允青，也以嚴格模式呈現(xiàn)，但有過渡 DTD 而沒有 URI （統(tǒng)一資源標識符卵沉，就是聲明最后的地址）會導(dǎo)致頁面以混雜模式呈現(xiàn)颠锉。
3琼掠、DOCTYPE 不存在或形式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)瓷蛙。
4艰猬、HTML5 沒有 DTD 冠桃，因此也就沒有嚴格模式與混雜模式的區(qū)別食听，HTML5 有相對寬松的語法，實現(xiàn)時迹蛤，已經(jīng)盡可能大的實現(xiàn)了向后兼容笤受。（ HTML5 沒有嚴格和混雜之分）
3.img的alt與title有何異同
alt:為不能顯示圖像時顯示出來的提示文本敌蜂。title:鼠標移入時顯示的提示文本
4.描述一下漸進增強和優(yōu)雅降級之間的不同嗎
漸進增強：針對低版本瀏覽器進行構(gòu)建頁面章喉，保證最基本的功能身坐，然后再針對高級瀏覽器進行效果部蛇、交互等改進和追加功能達到更好的用戶體驗咐蝇。
優(yōu)雅降級：一開始就構(gòu)建完整的功能有序，然后再針對低版本瀏覽器進行兼容警绩。
區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始肩祥，并試圖減少用戶體驗的供給混狠，而漸進增強則是從一個非常基礎(chǔ)的俯逾，能夠起作用的版本開始桌肴，并不斷擴充，以適應(yīng)未來環(huán)境的需要琉历。
5.簡述一下src與href的區(qū)別
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯(lián)系旗笔。
src是source的縮寫，指向外部資源的位置蝇恶，指向的內(nèi)容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)撮弧，例如js腳本潘懊，img圖片和frame等元素姚糊。當瀏覽器解析到該元素時授舟，會暫停其他資源的下載和處理，直到將該資源加載肠槽、編譯、執(zhí)行完畢，圖片和框架等元素也如此炊汤，類似于將所指向資源嵌入當前標簽內(nèi)姑曙。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫迈倍，指向網(wǎng)絡(luò)資源所在位置伤靠，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
<link href="common.css" rel="stylesheet"/>那么瀏覽器會識別該文檔為css文件啼染，就會并行下載資源并且不會停止對當前文檔的處理宴合。這也是為什么建議使用link方式來加載css，而不是使用@import方式迹鹅。
6.知道的網(wǎng)頁制作會用到的圖片格式有哪些卦洽？
png-8，png-24斜棚，jpeg阀蒂，gif，svg弟蚀。
但是上面的那些都不是面試官想要的最后答案蚤霞。面試官希望聽到是Webp,Apng。（是否有關(guān)注新技術(shù)义钉，新鮮事物）
科普一下Webp：WebP格式昧绣，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3捶闸，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間滞乙。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式奏纪。在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%斩启。
Apng：全稱是“Animated Portable Network Graphics”, 是PNG的位圖動畫擴展序调，可以實現(xiàn)png格式的動態(tài)圖片效果。04年誕生兔簇，但一直得不到各大瀏覽器廠商的支持发绢，直到日前得到 iOS safari 8的支持，有望代替GIF成為下一代動態(tài)圖標準垄琐。
7.圖片格式j(luò)pg边酒，gif，png-8狸窘，png-24的區(qū)別墩朦，及其各自的使用場景
Gif格式特點:
- 透明性,Gif是一種布爾透明類型，既它可以是全透明翻擒，也可以是全不透明氓涣，但是它并沒有半透明（alpha透明）。
- 動畫,Gif這種格式支持動畫陋气。
- 無損耗性,Gif是一種無損耗的圖像格式劳吠，這也意味著你可以對gif圖片做任何操作也不會使得圖像質(zhì)量產(chǎn)生損耗。
- 水平掃描,Gif是使用了一種叫作LZW的算法進行壓縮的巩趁，當壓縮gif的過程中痒玩，像素是由上到下水平壓縮的，這也意味著同等條件下议慰，橫向的gif圖片比豎向的gif圖片更加小蠢古。例如50010的圖片比10500的圖片更加小
- 間隔漸進顯示,Gif支持可選擇性的間隔漸進顯示
由以上特點看出只有256種顏色的gif圖片不適合照片，但它適合對顏色要求不高的圖形（比如說圖標别凹，圖表等）便瑟，它并不是最優(yōu)的選擇，我們會在后面中看到png是最優(yōu)的選擇番川。
Jpeg（jpg）格式特點:
- 透明性,它并不支持透明到涂。
- 動畫,它也不支持動畫。
- 損耗性,除了一些比如說旋轉(zhuǎn)（僅僅是90颁督、180践啄、270度旋轉(zhuǎn)），裁切沉御，從標準類型到先進類型屿讽，編輯圖片的原數(shù)據(jù)之外，所有其它操作對jpeg圖像的處理都會使得它的質(zhì)量損失。所以我們在編輯過程一般用png作為過渡格式伐谈。
- 隔行漸進顯示,它支持隔行漸進顯示（但是ie瀏覽器并不支持這個屬性烂完，但是ie會在整個圖像信息完全到達的時候顯示）。
由上可以看出Jpeg是最適web上面的攝影圖片和數(shù)字照相機中诵棵。
Png格式特點:
- 類型,Png這種圖片格式包括了許多子類抠蚣，但是在實踐中大致可以分為256色的png和全色的png，你完成可以用256色的png代替gif履澳，用全色的png代替jpeg
- 透明性,Png是完全支持alpha透明的（透明嘶窄，半透明，不透明）距贷，盡管有兩個怪異的現(xiàn)象在ie6（下面詳細討論）
- 動畫,它不支持動畫
PNG圖片格式現(xiàn)在包含三種類型：
- PNG8256色PNG的別名
- PNG24全色PNG的別名
- PNG32全色PNG的別名
基本上PNG32就是PNG24柄冲，但是附帶了全alpha通道。就是說每個像素上不僅存儲了24位真色彩信息還存儲了8位的alpha通道信息忠蝗，就如同GIF能存儲透明和不透明信息一樣现横。當我們把圖片放到不太搭配的背景上的時候，透明PNG圖片的邊緣會顯示得更加平滑阁最。
當然戒祠，我也知道你的想法，“但是Photoshop也能生成帶透明通道的PNG圖片闽撤！”我也知道得哆，它只是表面上這么說是PNG24脯颜，讓我也產(chǎn)生困惑了哟旗。
作為一個傷感的Fireworks倡導(dǎo)者，我只使用PNG32支持附帶alpha通道的真色彩圖片栋操。不管怎樣闸餐，如果你習慣使用Photoshop，你就應(yīng)該知道矾芙，Photoshop在“存儲為WEB格式”中只提供PNG8和PNG24兩種PNG格式舍沙。
我敢肯定你經(jīng)常會勾選“支持透明”選項，以獲得帶有透明度的PNG圖片剔宪，但是這樣你就獲取了一張PNG32圖片拂铡。——Photoshop只是覺得把PNG32這個名稱給隱藏掉了葱绒。感帅。。地淀。
對png8的誤解
Png8的在ie中的怪異表現(xiàn)：
半透明的png8在ie6以下的瀏覽器顯示為全透明失球。
Alpha透明的全色PNG（png32）在ie6中會出現(xiàn)背景顏色（通常是灰色）。
由上面可以總結(jié)：
“锘佟（a）全透明的png8可以在任一瀏覽器正常顯示（就像gif一樣）实苞。半透明的png8在除了ie6及其以下的瀏覽器下錯誤的顯示成全透明豺撑，其它瀏覽器都能正常顯示半透明。這個bug并不需要特殊對待黔牵，因為在不支持半透明的瀏覽器下只是顯示為全透明聪轿，對用戶體驗影響不大，它反而是透明gif的加強版荧止。
∫俚纭（b）第二個bug沒有什么好的方法解決，只能通過影響性能的方法AlphaImageLoader與需要加特殊標簽（VML）跃巡。
因此得出結(jié)論就是：請使用PNG8危号。
Png8的軟件問題：
Photoshop只能導(dǎo)出布爾透明的PNG8。
8.一個頁面上有大量的圖片（大型電商網(wǎng)站）素邪，加載很慢外莲，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗
圖片懶加載兔朦，在頁面上的未可視區(qū)域可以添加一個滾動條事件偷线，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者沽甥，優(yōu)先加載声邦。
如果為幻燈片、相冊等摆舟，可以使用圖片預(yù)加載技術(shù)亥曹，將當前展示圖片的前一張和后一張優(yōu)先下載。
如果圖片為css圖片恨诱，可以使用CSSsprite媳瞪，SVGsprite，Iconfont照宝、Base64等技術(shù)蛇受。
如果圖片過大，可以使用特殊編碼的圖片厕鹃，加載時會先加載一張壓縮的特別厲害的縮略圖兢仰，以提高用戶體驗。
如果圖片展示區(qū)域小于圖片的真實大小剂碴，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進行圖片壓縮把将，圖片壓縮后大小與展示一致。
9.你如何理解HTML結(jié)構(gòu)的語義化
搜索引擎的爬蟲也依賴于標記來確定上下文和各個關(guān)鍵字的權(quán)重汗茄，過去你可能還沒有考慮搜索引擎的爬蟲也是網(wǎng)站的“訪客”,但現(xiàn)在它們他們實際上是極其寶貴的用戶.沒有他們的話,搜索引擎將無法索引你的網(wǎng)站,然后一般用戶將很難過來訪問.
你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用于表現(xiàn)的標記,而只注重語義標記.
瀏覽器都有有默認樣式秸弛，默認樣式的目的也是為了更好的表達html的語義，可以說瀏覽器的默認樣式和語義化的HTML結(jié)構(gòu)是不可分割的。
屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標記來“讀”你的網(wǎng)頁.
例如,如果你使用的含語義的標記,屏幕閱讀器就會“逐個拼出”你的單詞,而不是試著去對它完整發(fā)音.
PDA递览、手機等設(shè)備可能無法像普通電腦的瀏覽器一樣來渲染網(wǎng)頁（通常是因為這些設(shè)備對CSS的支持較弱）叼屠，使用語義標記可以確保這些設(shè)備以一種有意義的方式來渲染網(wǎng)頁.理想情況下,觀看設(shè)備的任務(wù)是符合設(shè)備本身的條件來渲染網(wǎng)頁.
10.談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么
了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁:你需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區(qū)別绞铃，搜索機器人（SE robot 或叫 web crawler）如何進行工作镜雨，搜索引擎如何對搜索結(jié)果進行排序等等。
Meta標簽優(yōu)化:主要包括主題（Title)儿捧，網(wǎng)站描述(Description)荚坞，和關(guān)鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者）菲盾，Category（目錄）颓影，Language（編碼語種）等。
如何選取關(guān)鍵詞并在網(wǎng)頁中放置關(guān)鍵詞:搜索就得用關(guān)鍵詞懒鉴。關(guān)鍵詞分析和選擇是SEO最重要的工作之一诡挂。首先要給網(wǎng)站確定主關(guān)鍵詞（一般在5個上下），然后針對這些關(guān)鍵詞進行優(yōu)化临谱，包括關(guān)鍵詞密度（Density）璃俗，相關(guān)度（Relavancy），突出性（Prominency）等等
11.iframe有哪些缺點悉默？
iframe是一種框架城豁，也是一種很常見的網(wǎng)頁嵌入方式
iframe****的優(yōu)點：
1.iframe能夠原封不動的把嵌入的網(wǎng)頁展現(xiàn)出來。
2.如果有多個網(wǎng)頁引用iframe抄课，那么你只需要修改iframe的內(nèi)容唱星，就可以實現(xiàn)調(diào)用的每一個頁面內(nèi)容的更改，方便快捷剖膳。
3.網(wǎng)頁如果為了統(tǒng)一風格魏颓，頭部和版本都是一樣的岭辣，就可以寫成一個頁面吱晒，用iframe來嵌套，可以增加代碼的可重用沦童。
4.如果遇到加載緩慢的第三方內(nèi)容如圖標和廣告仑濒，這些問題可以由iframe來解決。
iframe****的缺點：
1.會產(chǎn)生很多頁面偷遗，不容易管理墩瞳。
2.iframe框架結(jié)構(gòu)有時會讓人感到迷惑，如果框架個數(shù)多的話氏豌，可能會出現(xiàn)上下喉酌、左右滾動條，會分散訪問者的注意力，用戶體驗度差泪电。
3.代碼復(fù)雜般妙，無法被一些搜索引擎索引到，這一點很關(guān)鍵相速，現(xiàn)在的搜索引擎爬蟲還不能很好的處理iframe中的內(nèi)容碟渺，所以使用iframe會不利于搜索引擎優(yōu)化。
4.很多的移動設(shè)備（PDA 手機）無法完全顯示框架突诬，設(shè)備兼容性差苫拍。
5.iframe框架頁面會增加服務(wù)器的http請求，對于大型網(wǎng)站是不可取的旺隙。
現(xiàn)在基本上都是用Ajax來代替iframe绒极，所以iframe已經(jīng)漸漸的退出了前端開發(fā)。
12.HTML5的form如何關(guān)閉自動完成功能
HTML的輸入框可以擁有自動完成的功能蔬捷，當你往輸入框輸入內(nèi)容的時候集峦，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內(nèi)容并列在輸入框下面，這樣就不用全部輸入進去了抠刺，直接選擇列表中的項目就可以了塔淤。但有時候我們希望關(guān)閉輸入框的自動完成功能，例如當用戶輸入內(nèi)容的時候速妖，我們希望使用AJAX技術(shù)從數(shù)據(jù)庫搜索并列舉而不是在用戶的歷史記錄中搜索高蜂。
關(guān)閉輸入框的自動完成功能有3種方法：
1、在IE的Internet選項菜單里的內(nèi)容--自動完成里面設(shè)置
2罕容、設(shè)置form的autocomplete為"on"或者"off"來開啟或者關(guān)閉自動完成功能
3备恤、設(shè)置輸入框的autocomplete為"on"或者"off"來開啟或者關(guān)閉該輸入框的自動完成功能
13.HTML5 為什么只需要寫 <!DOCTYPE HTML>？
（1）HTML5不基于SGML锦秒，因此不需要對DTD進行引用露泊，但是需要DOCTYPE來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）；
（2）HTML4.01基于SGML旅择，所以需要對DTD進行引用惭笑，才能讓瀏覽器知道該文檔所使用的文檔類型。
14.HTML5的離線存儲怎么使用生真？能否解釋一下工作原理
在用戶沒有連接英特網(wǎng)時沉噩，可以正常訪問站點和應(yīng)用；在用戶連接英特網(wǎng)時柱蟀，更新用戶機器上的緩存文件川蒙。
`原理`：HTML5的離線存儲是基于一個新建的 `.appcache` 文件的緩存機制（并非存儲技術(shù)），通過這個文件上的解析清單離線存儲資源长已，這些資源就會像cookie一樣被存儲下來畜眨。之后當網(wǎng)絡(luò)處于離線狀態(tài)下時昼牛，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
使用方法：
(1) 在頁面頭部像下面一樣加入一個 manifest 的屬性康聂；
(2) 在 cache.manifest 文件里編寫離線存儲資源匾嘱；
CACHE MANIFEST
#v0.11
CACHE：
js/app.js
css/style.css
NETWORK:
resource/logo.png
FALLBACK：
/ /offline.html
(3) 在離線狀態(tài)時，操作 window.applicationCache 進行需求實現(xiàn)早抠；
15.瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢霎烙？
在線情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性蕊连，它會請求manifest文件悬垃，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲甘苍。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了尝蠕，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件载庭，如果文件沒有發(fā)生改變看彼，就不做任何操作，如果文件改變了囚聚，那么就會重新下載文件中的資源并進行離線存儲靖榕。
離線情況下，瀏覽器就直接使用離線存儲的資源顽铸。
16.Label的作用是什么茁计？如何使用？
label標簽來定義表單控制間的關(guān)系谓松，當用戶選擇該標簽時星压，瀏覽器會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name" />
<label>Date:<input type="text" name="B" /></label>
17.如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域鬼譬？
(1) map + area 或者 svg
(2) border-radius
(3) 純js實現(xiàn)娜膘，需要求一個點在不在圓上的簡單算法、獲取鼠標坐標等等
18.網(wǎng)頁驗證碼是干什么用的优质？是為了解決什么安全問題
可以防止：惡意破解密碼竣贪、刷票、論壇灌水盆赤，有效防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試贾富，實際上用驗證碼是現(xiàn)在很多網(wǎng)站通行的方式歉眷，我們利用比較簡易的方式實現(xiàn)了這個功能牺六。這個問題可以由計算機生成并評判，但是必須只有人類才能解答汗捡。由于計算機無法解答CAPTCHA的問題淑际，所以回答出問題的用戶就可以被認為是人類畏纲。
19.請描述 <script>、<script async>和<script defer>的區(qū)別
<script> - HTML 解析中斷春缕，腳本被提取并立即執(zhí)行盗胀。執(zhí)行結(jié)束后，HTML 解析繼續(xù)锄贼。
<script async> - 腳本的提取票灰、執(zhí)行的過程與 HTML 解析過程并行，腳本執(zhí)行完畢可能在 HTML 解析完畢之前宅荤。當腳本與頁面上其他腳本獨立時屑迂，可以使用async，比如用作頁面統(tǒng)計分析冯键。
<script defer> - 腳本僅提取過程與 HTML 解析過程并行惹盼，腳本的執(zhí)行將在 HTML 解析完畢后進行。如果有多個含defer的腳本惫确，腳本的執(zhí)行順序?qū)凑赵?document 中出現(xiàn)的位置手报，從上到下順序執(zhí)行。
20.如何提供包含多種語言內(nèi)容的頁面
當客戶端向服務(wù)器發(fā)送 HTTP 請求時改化，通常會發(fā)送有關(guān)語言首選項的信息掩蛤，比如使用Accept-Language請求頭。如果替換語言存在陈肛，服務(wù)器可以利用該信息返回與之相匹配的 HTML 文檔盏档。返回的 HTML 文檔還應(yīng)在標簽中聲明lang屬性，比如...
在后臺中燥爷，HTML 將包含i18n占位符和待以替換的內(nèi)容蜈亩，這些按照不同語言，以 YML 或 JSON 格式存儲前翎。然后稚配，服務(wù)器將動態(tài)生成指定語言內(nèi)容的 HTML 頁面。整個過程通常需要借助后臺框架實現(xiàn)港华。
