隨著移動(dòng)互聯(lián)網(wǎng)的興起嘁字，HTML5 技術(shù)發(fā)進(jìn)一步發(fā)展， 擁有全棧能力的高級(jí)前端工程師杉畜，迅速成為每個(gè) IT 企業(yè)不可或缺的崗位纪蜒。 作為新興的專業(yè)，正在展示他蓬勃發(fā)展的前景此叠，一騎絕塵纯续，成為市場(chǎng)的寵兒，成為企業(yè)爭(zhēng)搶的香餑餑灭袁，隨著HTML5 等 web 前端技術(shù)興起猬错，前端開發(fā)大潮已經(jīng)襲來(lái)！
一简卧、HTML 和 CSS
1兔魂、你做的頁(yè)面在哪些流覽器測(cè)試過(guò)？這些瀏覽器的內(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、每個(gè) HTML 文件里開頭都有個(gè)很重要的東西铜涉，Doctype智玻，知道這是干什么的嗎？
<!DOCTYPE> 聲明位于文檔中的最前面的位置芙代，處于 <html> 標(biāo)簽之前吊奢。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。（重點(diǎn)：告訴瀏覽器按照何種規(guī)范解析頁(yè)面）
3纹烹、Quirks 模式是什么页滚？它和 Standards 模式有什么區(qū)別
從 IE6 開始召边，引入了 Standards 模式，標(biāo)準(zhǔn)模式中裹驰，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度隧熙。
在 IE6 之前 CSS 還不夠成熟，所以 IE5 等之前的瀏覽器對(duì) CSS 的支持很差幻林， IE6 將對(duì) CSS提供更好的支持贞盯，然而這時(shí)的問(wèn)題就來(lái)了，因?yàn)橛泻芏囗?yè)面是基于舊的布局方式寫的沪饺，而如果 IE6 支持 CSS 則將令這些頁(yè)面顯示不正常躏敢，如何在即保證不破壞現(xiàn)有頁(yè)面，又提供新的
渲染機(jī)制呢整葡？
在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問(wèn)題件余，如何保證原來(lái)的接口不變，又提供更強(qiáng)大的功能遭居，尤其是新功能不兼容舊功能時(shí)蛾扇。遇到這種問(wèn)題時(shí)的一個(gè)常見做法是增加參數(shù)和分支，即當(dāng)某個(gè)參數(shù)為真時(shí)魏滚，我們就使用新功能，而如果這個(gè)參數(shù) 不為真時(shí)坟漱，就使用舊功能鼠次，這樣就能不破壞原有的程序，又提供新功能芋齿。IE6 也是類似這樣做的腥寇，它將 DTD 當(dāng)成了這個(gè)“參數(shù)”，因?yàn)橐郧暗捻?yè)面大家都不會(huì)去寫 DTD觅捆，所以 IE6 就假定 如果寫了 DTD赦役，就意味著這個(gè)頁(yè)面將采用對(duì) CSS 支持更好的布局，而如果沒有栅炒，則采用兼容之前的布局方式掂摔。這就是 Quirks模式（怪癖模式，詭異模式赢赊，怪異模式）乙漓。
總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別释移。
盒模型：在 W3C 標(biāo)準(zhǔn)中叭披，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度玩讳，而在 Quirks 模式下涩蜘，IE 的寬度和高度還包含了 padding 和 border嚼贡。
設(shè)置行內(nèi)元素的高寬：在 Standards 模式下，給<span>等行內(nèi)元素設(shè)置 wdith 和 height 都不會(huì)生效同诫，而在 quirks 模式下粤策，則會(huì)生效。
設(shè)置百分比的高度：在 standards 模式下剩辟，一個(gè)元素的高度是由其包含的內(nèi)容來(lái)決定的掐场，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無(wú)效的用
margin:0 auto 設(shè)置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平居中贩猎，但在 quirks 模式下卻會(huì)失效熊户。（還有很多，答出什么不重要吭服，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的嚷堡，還是說(shuō)都是看文章看的，甚至完全不知道艇棕。）
4蝌戒、div+css 的布局較 table 布局有什么優(yōu)點(diǎn)？
改版的時(shí)候更方便 只要改 css 文件沼琉。
頁(yè)面加載速度更快北苟、結(jié)構(gòu)化清晰、頁(yè)面顯示簡(jiǎn)潔打瘪。
表現(xiàn)與結(jié)構(gòu)相分離友鼻。
易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前闺骚。
5彩扔、 img 的 alt 與 title 有何異同？ strong 與 em 的異同僻爽？
a:alt(alt text):為不能顯示圖像虫碉、窗體或 applets 的用戶代理（UA），alt 屬性用來(lái)指定替換文字胸梆。替換文字的語(yǔ)言由 lang 屬性指定敦捧。(在 IE 瀏覽器下會(huì)在沒有 title 時(shí)把 alt
當(dāng)成 tool tip 顯示)
title(tool tip):該屬性為設(shè)置該屬性的元素提供建議性的信息。
strong:粗體強(qiáng)調(diào)標(biāo)簽碰镜，強(qiáng)調(diào)绞惦，表示內(nèi)容的重要性
em:斜體強(qiáng)調(diào)標(biāo)簽，更強(qiáng)烈強(qiáng)調(diào)洋措，表示內(nèi)容的強(qiáng)調(diào)點(diǎn)
6济蝉、你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?
漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果王滤、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)贺嫂。優(yōu)雅降級(jí) graceful degradation：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器
進(jìn)行兼容雁乡。
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始第喳，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非初馍裕基礎(chǔ)的曲饱，能夠起作用的版本開始，并不斷擴(kuò)充珠月，以適應(yīng)未來(lái)環(huán)境的需要扩淀。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看啤挎，同時(shí)保證其根基處于安全地帶驻谆。
file:///C:\Users\ADMINI1\AppData\Local\Temp\ksohtml\wps979F.tmp.pngfile:///C:\Users\ADMINI1\AppData\Local\Temp\ksohtml\wps97B0.tmp.pngfile:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps97B1.tmp.png
“優(yōu)雅降級(jí)”觀點(diǎn)
“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站庆聘。而將那些被認(rèn)為“過(guò)時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開發(fā)周期的最后階段胜臊，并把測(cè)試對(duì)象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個(gè)版本伙判。
在這種設(shè)計(jì)范例下象对，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無(wú)妨 (poor, but passable)” 的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來(lái)適應(yīng)某個(gè)特定的瀏覽器宴抚。但由于它們并非我們所關(guān)注的焦點(diǎn)织盼，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略酱塔。
“漸進(jìn)增強(qiáng)”觀點(diǎn)
“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。
內(nèi)容是我們建立網(wǎng)站的誘因危虱。有的網(wǎng)站展示它羊娃，有的則收集它，有的尋求埃跷，有的操作蕊玷，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容弥雹。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例垃帅。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
那么問(wèn)題來(lái)了〖粑穑現(xiàn)在產(chǎn)品經(jīng)理看到 IE6,7,8 網(wǎng)頁(yè)效果相對(duì)高版本現(xiàn)代瀏覽器少了很多圓角贸诚，
陰影（CSS3），要求兼容（使用圖片背景，放棄 CSS3）酱固，你會(huì)如何說(shuō)服他械念？
7、為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效运悲？
CDN 緩存更方便
突破瀏覽器并發(fā)限制
節(jié)約 cookie 帶寬
節(jié)約主域名的連接數(shù)龄减，優(yōu)化頁(yè)面響應(yīng)速度
防止不必要的安全問(wèn)題
8、請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解班眯。
網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓 web 發(fā)展的更‘健康’希停，開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)，降低開發(fā)難度署隘，開發(fā)成本宠能，SEO 也會(huì)更好做，也不會(huì)因?yàn)闉E用代碼導(dǎo)致各種 BUG定踱、安全問(wèn)題棍潘，最終提高網(wǎng)站易用性。
9崖媚、請(qǐng)描述一下 cookies亦歉，sessionStorage 和 localStorage 的區(qū)別？
sessionStorage 用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)畅哑，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀肴楷。因此 sessionStorage 不是一種持久
file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml\wps97C4.tmp.png的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)荠呐。而 localStorage 用于持久化的本地存儲(chǔ)赛蔫，除非主
動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的泥张。
web storage 和 cookie 的區(qū)別
Web Storage 的概念和 cookie 相似呵恢，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie 的大小是受限的媚创，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候 Cookie 都會(huì)被發(fā)送過(guò)去渗钉，這樣無(wú)形中浪費(fèi)
了帶寬，另外 cookie 還需要指定作用域钞钙，不可以跨域調(diào)用鳄橘。
除此之外，Web Storage 擁有 setItem,getItem,removeItem,clear 等方法芒炼，不像 cookie需要前端開發(fā)者自己封裝 setCookie瘫怜，getCookie。但是 Cookie 也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互本刽，作為 HTTP 規(guī)范的一部分而存在 鲸湃，而 Web Storage 僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生赠涮。
10、簡(jiǎn)述一下 src 與 href 的區(qū)別唤锉。
src 用于替換當(dāng)前元素世囊，href 用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src 是 source 的縮寫窿祥，指向外部資源的位置株憾，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求 src 資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)晒衩，例如 js 腳本嗤瞎，img 圖片和 frame 等元素。
<script src =”js.js”></script>
當(dāng)瀏覽器解析到該元素時(shí)听系，會(huì)暫停其他資源的下載和處理贝奇，直到將該資源加載、編譯靠胜、執(zhí)行完畢掉瞳，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)浪漠。這也是為什么將js 腳本放在底部而不是頭部陕习。
href 是 Hypertext Reference 的縮寫，指向網(wǎng)絡(luò)資源所在位置址愿，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接该镣，如果我們?cè)谖臋n中添加
<link href=”common.css” rel=”stylesheet”/>
那么瀏覽器會(huì)識(shí)別該文檔為 css 文件，就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理响谓。
這也是為什么建議使用 link 方式來(lái)加載 css损合，而不是使用@import 方式。
