今天跟H5班的一個同學(xué)聊面試竹挡。
我已經(jīng)成功一半了镀娶。。揪罕。
怎么說梯码？
我這邊已經(jīng)認(rèn)可公司了，就等公司認(rèn)可我好啰。
哈轩娶，這種心態(tài)太好了。面試是一個很消耗元氣的事情坎怪，不管你本身的技能怎么樣罢坝，作為一個初出茅廬的學(xué)生，在找工作的過程中搅窿，都會遇到各種問（刁）題（難）嘁酿。
我們應(yīng)該用樂觀積極的態(tài)度、滿滿的正能量去面對所有的事情男应。調(diào)整心態(tài)闹司，全力以赴，屬于你的work.right就在不遠(yuǎn)處等著你沐飘。
下面是小鷗整理的HTML5面試常見問題和答案游桩，僅供參考牲迫，僅供參考，僅供參考借卧。這些問題并不能保證你一定能得到心儀的Offer盹憎，但是可以肯定的是，看過它铐刘，面試的時候你心里一定不會那么方陪每。
只許看，不許背?
心理第一镰吵，答案第二
開始吧
?
1談?wù)勀銓TML5的理解檩禾。
答案解析：
絕大多數(shù)人心中的HTML5僅僅是HTML的第5個版本，認(rèn)為H5只不過是增加了一些新標(biāo)簽疤祭，如<header>盼产、<section>、<canvas>或者增加了動畫勺馆、漸變之類的炫酷效果戏售。實際上這種理解是極其膚淺的，完全是外行人看熱鬧谓传！H5從廣義上說是前端開發(fā)中各種最新技術(shù)的總稱蜈项，包含了HTML5、CSS3续挟、JavaScript、ES6和各種開源框架等最新前端開發(fā)技術(shù)的總和侥衬。H5廣泛而深入地吸收了移動互聯(lián)網(wǎng)時代的技術(shù)精髓诗祸，再加上其自身跨平臺、免安裝轴总、更新快的技術(shù)優(yōu)勢直颅，自2014年底發(fā)布以來，已經(jīng)逐漸成為現(xiàn)代互聯(lián)網(wǎng)和移動互聯(lián)網(wǎng)開發(fā)的核心技術(shù)怀樟，逐漸發(fā)展成為各行各業(yè)進(jìn)入互聯(lián)網(wǎng)+的首選開發(fā)技術(shù)功偿。
2目前哪些瀏覽器支持HTML5？
答案解析：
幾乎所有的瀏覽器都支持HTML 5往堡，例如Safari械荷，Chrome，火狐虑灰，Opera吨瞎，IE等。
3HTML5中的DataList是什么穆咐？
答案解析：
HTML 5中的DataList控件元素有助于提供自動完成功能的文本框颤诀，如下圖所示字旭。
DataList控件功能的HTML代碼：
<input?list="Country">
<datalist?id="Country">
<option?value="India">
<option?value="Italy">
<option?value="Iran">
<option?value="Israel">
<option?value="Indonesia">
</datalist>
4SVG是什么？
答案解析：
SVG表示（scalable vector graphics）可縮放矢量圖形崖叫。這是一個基于文本的圖形語言遗淳，它可以繪制使用文本、線心傀、點等的圖形屈暗，因此可以輕巧又快速地渲染。
5能否使用HTML5舉個簡單的SVG例子剧包？
答案解析：
比方說恐锦，我們想要使用HTML 5 SVG顯示下面簡單的線條。
下面是HTML 5代碼疆液，你可以看到SVG標(biāo)簽封閉了多邊形標(biāo)簽用來顯示星星圖形一铅。
<svg?id="svgelem"?height="[object SVGAnimatedLength]"?xmlns="http://www.w3.org/2000/svg">
<line?style="stroke: rgb(255, 0, 0); stroke-width: 2px;"?y2="[object SVGAnimatedLength]"?x2="[object SVGAnimatedLength]"?y1="[object SVGAnimatedLength]"?x1="[object SVGAnimatedLength]">
</line>
6HTML5中canvas是什么？
答案解析：
Canvas是你在HTML中可以繪制圖形的區(qū)域堕油。?
7我們?nèi)绾问褂肅anvas來畫一條簡單的線潘飘？
答案解析：
三步走：
1、定義Canvas區(qū)域
2掉缺、獲取訪問canvas上下文區(qū)域
3卜录、繪制圖形
定義Canvas區(qū)域
定義Canvas區(qū)域你需要使用下面的HTML代碼，這定義了你能進(jìn)行繪圖的區(qū)域
<canvas id="mycanvas" width="600" height="500"></canvas>
獲取畫布區(qū)域的訪問
在畫布上進(jìn)行繪圖我們首先需要獲取上下文區(qū)域的關(guān)聯(lián)眶明，下面是獲取畫布區(qū)域的代碼艰毒。
var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");繪制圖形
現(xiàn)在一旦你獲取了訪問上下文，我們就可以開始在上下文中繪制了搜囱。首先調(diào)用“move”方法并從一個點開始丑瞧，使用線條方法繪制線條然后使用stroke方法結(jié)束。
以下是完整的代碼：
輸出結(jié)果：
8Canvas和SVG圖形的區(qū)別是什么蜀肘？
答案解析：
從前面的兩個問題中我們可以看到Canvas和SVG都可以在瀏覽器上繪制圖形绊汹。所以在這個問題上面試官可能會要你回答什么時候用哪個。
SVGCanvas繪制后記憶扮宠，換句話說任何使用SVG繪制的形狀都能被記憶和操作西乖，瀏覽器可以再次顯示Canvas則是繪制后忘記，一旦繪制完成你就不能訪問像素和操作它SVG對于創(chuàng)建圖形例如CAD軟件是良好的坛增，一旦東西繪制获雕，用戶就想去操作它Canvas則用于繪制和遺忘類似動漫和游戲的場畫。為了之后的操作轿偎，SVG需要記錄坐標(biāo)典鸡，所以比較緩慢。因為沒有記住以后事情的任務(wù)坏晦，所以Canvas更快萝玷。我們可以用繪制對象的相關(guān)事件處理我們不能使用繪制對象的相關(guān)事件處理嫁乘，因為我們沒有他們的參考分辨率獨立分辨率依賴
9HTML5中我們?nèi)绾螌崿F(xiàn)應(yīng)用緩存？
答案解析：
首先我們需要指定”manifest”文件球碉，“manifest”文件幫助你定義你的緩存如何工作蜓斧。以下是”mainfest”文件的結(jié)構(gòu)：
所有manifest文件都以“CACHE MANIFEST”語句開始。
#（散列標(biāo)簽）有助于提供緩存文件的版本睁冬。
CACHE 命令指出哪些文件需要被緩存挎春。
Mainfest文件的內(nèi)容類型應(yīng)是“text/cache-manifest”。
以下是如何在ASP.NET C#使用manifest緩存：
創(chuàng)建一個緩存manifest文件以后豆拨，接下來的事情實在HTML頁面中提供mainfest連接直奋，如下所示：
當(dāng)以上文件第一次運(yùn)行，他會添加到瀏覽器應(yīng)用緩存中施禾，在服務(wù)器宕機(jī)時脚线，頁面從應(yīng)用緩存中獲取。
10本地存儲和cookies（儲存在用戶本地終端上的數(shù)據(jù)）之間的區(qū)別是什么弥搞？
答案解析：
CookiesLocal storage客戶端/服務(wù)端客戶端和服務(wù)端都能訪問數(shù)據(jù)邮绿。Cookie的數(shù)據(jù)通過每一個請求發(fā)送到服務(wù)端。只有本地瀏覽器端可訪問數(shù)據(jù)攀例，服務(wù)器不能訪問本地存儲直到故意通過POST或者GET的通道發(fā)送到服務(wù)器船逮。大小每個cookie有4095byte。每個域5MB粤铭。過期Cookies有有效期挖胃，所以在過期之后cookie和cookie數(shù)據(jù)會被刪除。沒有過期數(shù)據(jù)梆惯，無論最后用戶從瀏覽器刪除或者使用Javascript程序刪除冠骄，我們都需要刪除。
11HTML5 為什么只需要寫 <!DOCTYPE HTML>加袋？
答案解析：
HTML5不基于SGML，因此不需要對DTD進(jìn)行引用抱既，但是需要DOCTYPE來規(guī)范瀏覽器的行為（讓瀏覽器按照他們應(yīng)該的方式來運(yùn)行）而HTML4.01基于SGML职烧，所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型防泵。
12行內(nèi)元素有哪些蚀之？塊級元素有哪些？ 空(void)元素有那些捷泞？
答案解析：
行內(nèi)元素：a ?b ?span ?img ?input ?select ?strong
塊級元素：div ?ul ?ol ?li ?dl ?dt ?dd ?h1 ?h2 ?h3 ?h4 ?p ?等
空元素：<br> ?<hr> ?<img> ?<link> <meta>
13頁面導(dǎo)入樣式時足删，使用link和@import有什么區(qū)別？
答案解析：
link屬于XHTML標(biāo)簽锁右，而@import是css提供的失受；
頁面被加載時讶泰，link會同時被加載，而@import引用的css會等到頁面被加載完再加載拂到；
@import只在IE5以上才能識別痪署，而link是XHTML標(biāo)簽，無兼容問題兄旬；
link方式的樣式的權(quán)重高于@import的權(quán)重狼犯。
14html5有哪些新特性、移除了那些元素领铐？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題悯森？
答案解析：
新特性，新增元素：
內(nèi)容元素：article绪撵、footer瓢姻、header、nav莲兢、section
表單控件：calendar汹来、date、time改艇、email收班、url、search
控件元素：webworker谒兄，websockt摔桦，Geolocation
移除元素：
顯現(xiàn)層元素：basefont，big承疲，center邻耕，font，s燕鸽，strike兄世，tt，u
性能較差元素：frame啊研，frameset御滩，noframes
處理兼容問題有兩種方式：
IE6/IE7/IE8支持通過document方法產(chǎn)生的標(biāo)簽，利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽党远。
使用是html5shim框架
另外削解，DOCTYPE聲明的方式是區(qū)分HTML和HTML5標(biāo)志的一個重要因素，此外沟娱，還可以根據(jù)新增的結(jié)構(gòu)氛驮，功能元素來加以區(qū)分。
15如何區(qū)分 HTML 和 HTML5济似？
答案解析：
在文檔類型聲明上不同：
HTML是很長的一段代碼矫废，很難記住盏缤，而HTML5卻只有簡簡單單的聲明，方便記憶磷脯。
在結(jié)構(gòu)語義上不同：
HTML：沒有體現(xiàn)結(jié)構(gòu)語義化的標(biāo)簽蛾找，通常都是這樣來命名的<div id="header"></div>，這樣表示網(wǎng)站的頭部赵誓。
HTML5：在語義上卻有很大的優(yōu)勢打毛。提供了一些新的標(biāo)簽，比如：<header><article><footer>
16簡述一下你對HTML語義化的理解俩功？
答案解析：
用正確的標(biāo)簽做正確的事情
html語義化讓頁面的內(nèi)容結(jié)構(gòu)化幻枉，結(jié)構(gòu)更清晰，便于對瀏覽器诡蜓、搜索引擎解析
即使在沒有樣式css情況下也以一種文檔格式顯示熬甫，并且是容易閱讀的
搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO
使于都源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊蔓罚，便于閱讀維護(hù)理解豺谈。
17HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
答案解析：
localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除檩帐。
18iframe有那些缺點四敞？
答案解析：
在網(wǎng)頁中使用框架結(jié)構(gòu)最大的弊病是搜索引擎的“蜘蛛”程序無法解讀這種頁面
框架結(jié)構(gòu)有時會讓人感到迷惑铺厨，頁面很混亂
19Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分筝家？它們有何意義?
答案解析：
<!Doctype>聲明位于文檔中的最前面，處于<html>標(biāo)簽之前。告知瀏覽器的解析器桥狡，用什么文檔類型規(guī)范來解析這個文檔娜汁。
嚴(yán)格模式的排版和JS運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作案训。
DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)蓉冈。
20常見兼容性問題熟嫩？
png24位的圖片在IE6瀏覽器上出現(xiàn)背景
? ? ? ??解決方案：做成PNG8
瀏覽器默認(rèn)的 margin 和 padding 不同
? ? ? ??解決方案：加一個全局的*{margin:0;padding:0;}來統(tǒng)一
IE6雙邊距bug：塊屬性標(biāo)簽float后，又有橫行的 margin 情況下，在 IE6 顯示 margin 比設(shè)置的大。浮動IE產(chǎn)生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 100px;} 這種情況下IE6會產(chǎn)生200px的距離僚害。
? ? ? ??解決方法：加上_display：inline，使浮動忽略
IE下蹄胰，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性岳遥，也可以使用getAttribute()獲取自定義屬性； Firefox下裕寨，只能使用getAttribute()獲取自定義屬性寒随。
? ? ? ?解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性。
IE下，even對象有x妻往，y屬性，但是沒有pageX试和，pageY屬性讯泣，但是沒有x，y屬性阅悍；
? ??? ?解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)好渠。
Chrome中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示
? ? ???解決方法：可通過加入 CSS 屬性 -webkt-text-size-adjust:none;解決
超鏈接訪問過后 hover 樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active 节视；
? ??? ? 解決方法：改變CSS屬性的排列順序：L-V-H-A: a:link{ } ?a:visited{ } a:hover{ } a:active{ }?
21如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信拳锚？
答案解析：
調(diào)用localstorge、cookies等本地存儲方式
22webSocket如何兼容低瀏覽器寻行？
答案解析：
Adobe Flash Socket 霍掺、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 拌蜘、 基于長輪詢的 XHR
23支持HTML5新標(biāo)簽
答案解析：
IE8/IE7/IE6支持通過 document.createElement 方法產(chǎn)生的標(biāo)簽杆烁，可以利用這一特性讓這些瀏覽器支持 HTML5 新標(biāo)簽，瀏覽器支持新標(biāo)簽后简卧，還需要添加標(biāo)簽?zāi)J(rèn)的樣式兔魂；
當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
<!--[if lt IE 9]>?
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>?
<![endif]-->
24如何區(qū)分：DOCTYPE 聲明\新增的結(jié)構(gòu)元素\功能元素举娩，語義化的理解析校？
答案解析：
用正確的標(biāo)簽做正確的事情；
html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化铜涉，便于對瀏覽器智玻、搜索引擎解析；
在沒有樣式 CSS 情況下也以一種文檔格式顯示，并且是容易閱讀的躬翁；
搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重原杂，利用 SEO ；
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊事甜，便于閱讀維護(hù)理解。
25介紹一下 CSS 的盒子模型滔韵？
答案解析：
有兩種逻谦，IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型陪蜻； IE 的 content 部分包含了 border 和 padding邦马；
盒模型：內(nèi)容（content）、填充（padding）、邊界（margin）滋将、邊框（border）邻悬。
26CSS 選擇符有哪些？哪些屬性可以繼承随闽？優(yōu)先級算法如何計算父丰？ CSS3 新增偽類有哪些？
答案解析：
id 選擇器（#myid）
類選擇器（.myclassname）
標(biāo)簽選擇器（div掘宪，h1蛾扇，p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
后代選擇器（li a）
通配符選擇器（* ）
屬性選擇器（ a[rel = "external"]）
偽類選擇器（a: hover, li: nth - child）
27可繼承的樣式有哪些？
font-size
font-family color,?
UL
LI?
DL?
DD?
DT
28不可繼承的樣式有哪些魏滚？
border?
padding?
margin?
width?
height
29優(yōu)先級就近原則
解析答案：
同權(quán)重情況下樣式定義最近者為準(zhǔn)
30載入樣式
解析答案：
以最后載入的定位為準(zhǔn);
優(yōu)先級為: !important > ?id > class > tag ?镀首； ? important 比 內(nèi)聯(lián)優(yōu)先級高?
31CSS3新增偽類舉例：
答案解析：
p:first-of-type ? 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素；
p:last-of-type ? 選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素鼠次；
p:only-of-type ?選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素更哄；
p:only-child ? ?選擇屬于其父元素的唯一子元素的每個 <p> 元素；
p:nth-child(2) ?選擇屬于其父元素的第二個子元素的每個 <p> 元素须眷；
:enabled ?:disabled 控制表單控件的禁用狀態(tài)竖瘾；
:checked ? ? ? ?單選框或復(fù)選框被選中。
32如何居中div花颗？ 如何居中一個浮動元素捕传？
答案解析：
給div 設(shè)置一個寬度，然后添加 margin:0 auto 屬性扩劝；div{width:200px; margin:0 auto; }
33居中一個浮動元素
答案解析：
確定容器的寬高 ?寬500 高300的層庸论，設(shè)置層的外邊距
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%棒呛；頭：50%}
34css3有哪些新特性聂示？
答案解析：
CSS3 實現(xiàn)圓角（border-radius:8px;）
陰影（box-shadow:10px）
對文字加特效（text-shadow）
線性漸變（gradient）
旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)//旋轉(zhuǎn)，縮放簇秒，定位鱼喉，傾斜
增加了更多的 css 選擇器 多背景 rgba
35display:inline-block 什么時候會顯示間隙？
答案解析：
移除空格趋观，使用margin 負(fù)值扛禽、使用 font-size:0、letter-spacing 皱坛、word-spacing
36使用 CSS 預(yù)處理器嗎编曼？喜歡哪個？
答案解析：
SASS
37什么是盒子模型剩辟？
答案解析：
在網(wǎng)頁中掐场，一個元素占有空間的大小由幾個部分構(gòu)成往扔，其中包括元素的內(nèi)容（content），元素的內(nèi)邊距（padding）熊户，元素的邊框（border）萍膛，元素的外邊距（margin）四個部分。
這四個部分占有的空間中嚷堡，有的部分可以顯示相應(yīng)的內(nèi)容卦羡，而有的部分只用來分隔相鄰的區(qū)域或區(qū)域。4個部分一起構(gòu)成了css中元素的盒模型麦到。
38CSS實現(xiàn)垂直水平居中
答案解析：
一道經(jīng)典的問題，實現(xiàn)方法有很多種欠肾，以下是其中一種實現(xiàn)：
HTML結(jié)構(gòu)：
<div class="content"></div>
</div>
CSS：
? ? .wrapper{position:relative;}
? ? .content{
? ? ? ? background-color:#6699FF;
? ? ? ? width:200px;
? ? ? ? height:200px;
? ? ? ? position: absolute; ? ? ? ?//父元素需要相對定位
? ? ? ? top: 50%;
? ? ? ? left: 50%;
? ? ? ? margin-top:-100px ; ? //二分之一的height瓶颠，width
? ? ? ? margin-left: -100px;
? ? }
39簡述一下src與href的區(qū)別
答案解析：
href 是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接刺桃，用于超鏈接粹淋。
src是指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置瑟慈；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)桃移，例如js腳本，img圖片和frame等元素葛碧。
當(dāng)瀏覽器解析到該元素時借杰，會暫停其他資源的下載和處理，直到將該資源加載进泼、編譯蔗衡、執(zhí)行完畢，圖片和框架等元素也如此乳绕，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)绞惦。這也是為什么將js腳本放在底部而不是頭部。
40簡述同步和異步的區(qū)別
答案解析：
同步是阻塞模式洋措，異步是非阻塞模式济蝉。
同步就是指一個進(jìn)程在執(zhí)行某個請求的時候，若該請求需要一段時間才能返回信息菠发，那么這個進(jìn)程將會一直等待下去王滤，直到收到返回信息才繼續(xù)執(zhí)行下去；
異步是指進(jìn)程不需要一直等下去雷酪，而是繼續(xù)執(zhí)行下面的操作淑仆，不管其他進(jìn)程的狀態(tài)。當(dāng)有消息返回時系統(tǒng)會通知進(jìn)程進(jìn)行處理哥力，這樣可以提高執(zhí)行的效率蔗怠。
41px和em的區(qū)別
答案解析：
px和em都是長度單位墩弯，區(qū)別是，px的值是固定的寞射，指定是多少就是多少渔工，計算比較容易。em得值不是固定的桥温，并且em會繼承父級元素的字體大小引矩。
瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px侵浸。那么12px=0.75em, 10px=0.625em
42瀏覽器的內(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ā))
