整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著移動互聯網時代的到來，web前端開發工程師在人才市場中變得非常吃香，招聘網站上的web前端開發工程師職位數量依舊龐大。那么求職者們怎樣才能成功的面試上web前端開發工程師崗位呢？除了要有一份精美的簡歷，還得做好充足的面試準備，其中最重要的是需要了解一些用人企業常問的HTML5面試題和套路。下面，小千就給小伙伴們分享六個面試題，都是一線互聯網企業愛問的，你一定要仔細看哦！
首先向各位簡單的介紹下面試流程。大公司的面試流程分為筆試—項目經理面談—總監面談—機試—HR面談五大部分。筆試題目不會太難，都是些基礎題目，且js部分占的比例較多，主要是企業想了解你的前端基礎如何；面談過程都會比較輕松，對方的面試官會在與你聊天的過程中，問你一些相關的技術問題，這個稍后下面著重介紹；機試給你一個頁面，然后讓你在電腦上用代碼寫出來；最后才是HR與你談薪資待遇。
那么，用人企業的項目經理和技術總監一般會問哪些的問題呢，項目經理重基礎，問得會比較細，而總監注重架構，全局觀。
問題一：瀏覽器是怎么對HTML5的離線存儲資源進行管理和加載的？
瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。離線情況下，瀏覽器就直接使用離線存儲的資源。
問題二：JS中有哪些數據類型呢？
答：JS中有5種數據類型：Undefined、Null、Boolean、Number和String。還有一種復雜的數據類型object，object本質是一組無序的名值對組成的。
問題三：IE瀏覽器css浮動與兼容性問題
答：浮動之后，需要清除浮動才不會產生問題。現在主流方法是在浮動元素的父級添加一個class，內容為：
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}//這個是為了兼容IE
然后父級添加一個class=“clear”即可。
問題四：js放在html的不同位置有什么區別嗎？
答：如果使用window.onload函數，將js代碼放在其中，則放在哪里都是一樣的，因為都是在body加載完再執行的，如果不使用window.onload函數,放在head中的話，代碼不會被執行，這是因為html執行順序，確切的說是js的執行順序，HTML從上運行到 的時候進入test.js文件。前面的不會運行，也就是被function包起來的不會被運行，這個時候就執行最后一句。去頁面中取元素。但是這個時候，HTML頁面并沒有加載完。所以找不到元素，就會報錯。
問題五：移動html5開發流行的框架有哪些？
答：1、jQueryMobile，jQueryMobile是jQuery在手機上和平板設備上的版本。jQueryMobile不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。jQueryMobile開發團隊說：能開發這個項目，非常興奮。移動web太需要一個跨瀏覽器的框架，讓開發人員開發出真正的移動web網站。
2、jQTouch，jQTouch是一個jQuery的插件，主要用于手機上的Webkit瀏覽器上實現一些包括動畫、列表導航、默認應用樣式等各種常見UI效果的JavaScript庫。支持包括iPhone、Android等手機。
問題六：ajax和jsonp的區別是？
答：實現方法完全不一樣。ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加標簽來調用服務器提供的js腳本。
以上六條，均是給大家總結的在第一輪面試時項目經理會問到web前端開發工程師關于HTML5的技術問題，相信這些面試題目都不難，那就請你一定記住它，祝大家面試成功。如果你想獲得更多關于web前端的行業動態和學習資料，可以關注“武漢千鋒”微信公眾號。
著HTML5大前端開發技術的日臻成熟，越來越多的開發人才涌現。企業在追求人才數量的同時更加注重人才質量，尤其在面試環節，不再單純的考察應聘人員的理論知識，更看重面試者的綜合素質。千鋒廣州前端小編總結了HTML5大前端常見的面試問題及答案，下面一起來看看吧！
?問題一：在選擇框架的時候要從哪方面入手?
(1)AngularJS
當我們在設計一個應用，而這個應用對性能要求不是很高的時候，就應該選擇開發速度更快的技術棧AngularJS，它擁有混合開發能力的ionic框架。對于復雜的前端應用來說，基于 AngularJS 應用的運行效率，仍然有大量地改進空間。
(2)React
選擇React有兩個原因，一是通過Virtual DOM提高運行效率，二是通過組件提高開發效率。除此之外，選擇 React 還有一個重要原因是React Native、React VR 等應用，可以讓 React 運行在不同的平臺之上。同時我們還能通過 React輕松編寫出原生應用以及 VR 應用。
問題二：如果沒有框架，怎么搭建你的項目?
(1) 基本模塊
common：公共的一組件，下面的各模塊都會用到;
config：配置模塊，解決框架的配置問題;
startup：啟動模塊，解決框架和Servlet如何進行整合的問題;
plugin：插件模塊，插件機制的實現，提供IPlugin的抽象實現;
routing：路由模塊，解決請求路徑的解析問題，提供了IRoute的抽象實現和基本實現;
controller：控制器模塊，解決的是如何產生控制器;
model：視圖模型模塊，解決的是如何綁定方法的參數;
action：action模塊，解決的是如何調用方法以及方法返回的結果，提供了IActionResult的抽象實現和基本實現;
view：視圖模塊，解決的是各種視圖引擎和框架的適配;
filter：過濾器模塊，解決是執行Action，返回IActionResult前后的AOP功能，提供了IFilter的抽象實現以及基本實現。
(2)擴展模塊
filters：一些IFilter的實現;
results：一些IActionResult的實現;
routes：一些IRoute的實現;
plugins：一些IPlugin的實現。
問題三：如果讓你來制作一個訪問量很高的大型網站，你會如何來管理所有的CSS、JS文件、圖片?
(1)遵循自定的一套CSS、JS，圖片文件和文件夾命名規范;
(2)依托采用的前端工程化工具，依照工具架規范 ;
(3)依據采用的框架規范。
以上HTML5大前端的問題都可能會被招聘者所提及，如果你想成為一名全棧型IT人才，這些內容你必須掌握！
好程序員web前端學習路線分享HTML5常見面試題集錦，接下來將會持續為大家分享幾篇HTML5常見面試題。
1.布局 左邊20% 中間自適應 右邊200px 不能用定位
答案：圣杯布局/雙飛翼布局或者flex
2.什么叫優雅降級和漸進增強？
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點則認為應關注于內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
3.簡述一下src與href的區別。
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。<script src =”js.js”></script>當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加<link href=”common.css” rel=”stylesheet”/>那么瀏覽器會識別該文檔為css文件，就會并行下載資源并且不會停止對當前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
4.z-index是什么？在position的值是什么時可以觸發？
答案:absolute,relative,fixed, sticky
5.什么是標準文檔流？
文檔流指的是元素排版布局過程中，遵循于從上向下，從左向右的流式排列。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。
分為兩種等級：塊級元素和行內元素；
塊級元素：
1).霸占一行，不能與其他任何元素并列
2).能接受寬、高
3).如果不設置寬度，那么寬度將默認變為父親的100%，即和父親一樣寬
行內元素：
1).與其他元素并排
2).不能設置寬、高。默認的寬度就是文字的寬度
在HTML中，標簽分為：文本級和容器級；
文本級：p、span、a、b、i、u、em
容器級：div、h系列、li、dt、dd
6.簡述選擇器~和+的區別。
答案:都是層級選擇器
相鄰兄弟選擇器： E + F, 選中的僅是一個元素。同級并且F元素在E元素的后面。
通用兄弟選擇器：E ~ F 選中的是與E相鄰的后面的兄弟元素f
7.flex中元素的margin是否會合并？
答案:不會合并
8.<div class="parent"><div class="child"></div></div>,父元素和子元素寬高不固定，如何實現水平垂直居中。
答案:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
body{
display: flex;
}
section{
background: pink;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
}
article{
background: blue;
}
</style>
</head>
<body>
<section>
<article>123</article>
</section>
</body>
</html>
9.簡述title與h1的區別，b與strong的區別，i與em的區別。
1、title是網站header部分的內容是網站的標題，而h表示body內的標題
2、但從視覺上效果觀看b與strong、i與em是沒有區別的，唯一區別是搜索引擎檢索的時候搜索引擎可以識別strong、em標簽、而不能識別b與i標簽
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
