⑴ 做HTML5前端工程師需要考什麼證嗎
目前來說，二線城市及以下，web前端工程師是不需要持證上戚此扒崗的。
但是需要你懂以下的知識：
1、精通HTML/XHTMLCSS,熟悉頁面架構和布局，對Web標准和標簽語義化有深入了解
2、精通Ajax、JavaScript、DOM等前端技術，掌握面向對象編程思想 。
3、熟悉一種以上後台開發語言（如Java/PHP或C++/C/.NET）以及一種資料庫（MySQL/Oracle/DB2）
5、精通Flash,Photoshop,Dreamweaver,fireworks,等網站美工設計軟體，具備一定的平面設計能力
5、對用戶體驗、交互操作流程、用戶需求有深入理解
如果是畢業大學生的話，計算機等級證是有一些幫助的。
面試時最好帶一份自己設計的web前端項目，簡單來說就是自己做一個網頁，清楚的能夠講解你做的項目的特點，和一些運用到的知識點，如果是大企業的話，會有一些面試題，這個就需要你去網上做大量的題庫。其他基本靠口才和過硬的專業知識。
對於之後，有4種選擇：
1、技術專家。
就搞前端，但前端的分支很扒攜多，你要抓住潮流。例如web可視化？WEB VR？前端動畫特效？
這時的你，就不能執著於技術比別人好。那沒用，因為比別人好，意味著你能做的別人也能做。所以得搞點別人整不了的。
可能許多人會覺得這樣很累。但我告訴你們，負責的講，這個方向是最輕松的。因為有過去的技術積累，新東西你看看就會了。
2、轉行為產品經理。
就是搞搞產品原型，梳理下業務流程，成天開產品討論會，寫產品說明word文檔。這個我不太懂，就不多說了。但總之這是一個方向。
有技術背景的人，搞產品會多那高昌么一點點優勢。
3、做項目經理。
脫離開發一會，著力管控項目進度，甲乙雙方的溝通什麼的，搞什麼招投標，什麼售前、售後之類的。這個我也不太懂，也不多說了。但這也是一個方向。
4、自己創業。
創業嘛，一看機緣，二看運氣。不多說了。
(1)h5前端面試擴展閱讀
web前端工程師職責
1、Web前端開發工程師，除了主要職責外，還要為網站上提供的產品和服務實現一流的Web界面，優化代碼並保持良好兼容性
2、Web前端表現層及與前後端交互的架構設計和開發
3、配合後台開發人員實現產品界面和功能
4、利用各種Web技術模擬開發產品原型
5、Web新技術調研和資訊整理
web前端基礎技術
1、對常用的一些JS框架了解，如jQuery、YUI等。
2、掌握最基本的JavaScript計算方法編寫。
3、對目前互聯網流行的網頁製作方法（Web2.0）HTML+CSS，以及各大瀏覽器兼容性有很大的了解。
4、對前沿技術（HTML5+CSS3）的基本掌握。
5、還要對IT其他編程語言有所了解如：PHP，Java，.net！有一些公司還要求懂一點SEO優化！
⑵ 常見的web前端面試題及答案分享
1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)
答：行內元素：會在水平方向排列，不能包含塊級元素，設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效。塊級元素：各占據一行，垂直方向排列。從新行開始結束接著一個斷行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的屬性有哪些?分別有什麼作用?
答：box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
3、Doctype作用?標准模式與兼容模式各有什麼區別?
答：告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
答：HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制項，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。
以上就是環球青藤小編關於web前端面試題的相關分享，希望對大家有所幫助，想要了解更多相關內容，請及時關注本平台並進行查看!
⑶ 如何學習H5前端課程
隨著移動互聯網的發展，web前端逐漸受到企業的重視，前端開發人員的薪資也水漲船高，越來越多的人看好前端行業的發展，想要轉行加入。下面，給大家分享一份web前端學習路線圖，希望對初學者有所幫助。Web前端行業的發展，讓前端人員能完成比以前更多的職責范圍，所以未來前端可以寬口徑就業，前景非常好。
對於零基礎的人而言，要怎麼學習web前端呢?
1、 前端頁面重構。主要內容為PC端網站布局、Photoshop 工具及切圖、H5移動端網頁布局、HTML5+CSS3新特性與交互。學習目標是完成PC端網站布局，可實現響應式布局，一套代碼適配 PC 端、移動端、平板設備等。
2、 前後端網頁交互。主要內容為JavaScript語法全面進階、ES6 到 ES10 新語法實踐、jQuery 應用及插件使用、設計模式及插件編寫、封裝JS工具庫及Web APIS、AJAX+PHP+MySQL前後端交互、前端工程化與模塊化應用以及PC 端全棧開發項目等。學習目標是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建項目及開發項目。
3、 Node.js + 前端框架。主要內容為Node.js 全面進階、Koa2+MongoDB搭建服務、Vue.js 框架、React.js 框架、小程序雲開發與小程序框架、原生APP與混合APP、數據可視化與桌面應用等。學習目標是掌握桌面應用及可視化大數據，實現復雜數據展示類項目，能夠獨立完成前後台相關功能，勝任HTML5全棧開發工程師職位。很多學習web前端的朋友都希望在學成後能找到一份滿意的工作，所以我們在學習過程中一定要注意實戰經驗的積累，如果你所學的東西對企業沒有用，那你所做的一切都是無用功
⑷ WEB前端面試題
第二章 面試題基礎篇
2.1 HTML面試題
面試題：行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
面試題：頁面導入樣式時，使用link和@import有什麼區別？
面試題：title與h1的區別、b與strong的區別、i與em的區別？
面試題：img標簽的title和alt有什麼區別？
面試題：png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用？
2.2 CSS面試題
面試題：css背景紋路
面試題：介紹一下CSS的盒子模型
面試題：CSS選擇符有哪些？哪些屬性可以繼承？
面試題：CSS優先順序演算法如何計算？
面試題：用CSS畫一個三角形
面試題：一個盒子不給寬度和高度如何水平垂直居中？
面試題：display有哪些值？說明他們的作用。
面試題：對BFC規范(塊級格式化上下文：block formatting context)的理解？
面試題：清除浮動有哪些方式？
面試題：在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。
面試題：什麼是CSS reset？
面試題：css sprite是什麼,有什麼優缺點
面試題：display: none;與visibility: hidden;的區別
面試題：position有哪些值?有什麼作用? 【特別多公司問】
面試題：line-height和height有什麼區別？
面試題：opacity 和 rgba區別
2.3 JavaScript基礎面試題
面試題：延遲載入JS有哪些方式？
面試題：JS數據類型有哪些？
面試題：null和undefined的區別
面試題：JS數據類型考題
面試題：==和===有什麼不同
面試題：JS微任務和宏任務
面試題：JS作用域考題
面試題：JS對象考題
面試題：JS作用域+this指向+原型 考題
面試題：JS判斷變數是不是數組，你能寫出哪些方法？
面試題：slice是幹嘛的、splice是否會改變原數組
面試題：JS數組去重
面試題：找出多維數組最大值
面試題：給字元串新增方法實現功能
面試題：找出字元串出現最多次數的字元以及次數
2.4 真正移動端 —— H5/C3面試題
面試題：什麼是語義化標簽
面試題：::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
面試題：如何關閉iOS鍵盤首字母自動大寫
面試題：怎麼讓Chrome支持小於12px 的文字？
面試題：rem和em有什麼樣區別
面試題：ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
面試題：webkit表單輸入框placeholder的顏色值能改變嗎？
面試題：禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
面試題：禁止ios和android用戶選中文字
面試題：自適應 [淘寶無線適配]
面試題：響應式
第三章 面試題進階篇
3.1 JavaScript進階面試題
面試題：new操作符具體做了什麼
面試題：閉包 【必須會】
面試題：原型鏈 【必須會】
面試題： JS繼承有哪些方式
面試題：說一下call、apply、bind區別
面試題：sort背後原理是什麼？
面試題：深拷貝和淺拷貝
面試題：localstorage、sessionstorage、cookie的區別
3.2 ES6面試題
面試題：var、let、const區別
面試題：作用域考題
面試題：將下列對象進行合並
面試題：箭頭函數和普通函數有什麼區別？
面試題：Promise有幾種狀態
面試題：find和filter的區別 【大廠】
面試題：some和every的區別 【大廠】
3.3 webpack面試題
面試題：webpack插件
3.4 Git面試題
面試題：git常用命令
面試題：解決沖突
面試題：GitFlow
第四章 面試題框架篇
4.1 區分初中高級的 —— Vue面試題
面試題：Vue2.x 生命周期有哪些？
1.系統自帶八個
2.當一旦進入到某個組件會執行哪些生命周期
3.$el和$data在哪個階段有
4.如果使用keep-alive會多倆個生命周期
5.如果加入keep-alive第一次進入組件會執行哪些生命周期
6.如果加入keep-alive第二次或者第N進入該組件會執行哪些生命周期
面試題：談談你對keep-alive的了解
面試題：v-if和v-show區別
面試題：v-if和v-for優先順序 2.x
面試題：ref是什麼？
面試題：nextTick是什麼？
面試題：Vue中如何做樣式穿透
面試題：scoped原理
面試題：Vuex是單向數據流還是雙向數據流？
面試題：講一下MVVM
面試題：雙向綁定原理
面試題：什麼是虛擬DOM
面試題：key是干什麼？
面試題：diff演算法
面試題：Vue組件傳值
面試題：props和data優先順序誰高？
面試題：computed、methods、watch有什麼區別？
面試題：Vuex
面試題：Vue路由
面試題：Vue項目打包後出現空白頁
4.2 微信小程序面試題
面試題：如何自定義頭部？
面試題：如何自定義底部？
4.3 uni-app面試題
面試題：生命周期
面試題：條件編譯
第五章 面試題性能優化篇
⑸ 前端面試的H5問題有哪些
前端面試的H5問題匯總：
1.HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
答案解析：
HTML5不基於SGML，因此不需要對DTD進行引用，但是需要DOCTYPE來規范瀏覽器的行為（讓瀏覽器按照他們應該的方式來運行）而HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
2、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
答案解析：
行內元素：a b span img input select strong
塊級元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：<br> <hr> <img> <link> <meta>
3、頁面導入樣式時，使用link和@import有什麼區別？
答案解析：
1）link屬於XHTML標簽，而@import是css提供的；
2）頁面被載入時，link會同時被載入，而@import引用的css會等到頁面被載入完再載入；
3）@import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題；
4）link方式的樣式的權重高於@import的權重。
4、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
答案解析：
新特性，新增元素：
1）內容元素：article、footer、header、nav、section
2）表單控制項：calendar、date、time、email、url、search
3）控制項元素：webworker，websockt，Geolocation
移除元素：
1）顯現層元素：basefont，big，center，font，s，strike，tt，u
2）性能較差元素：frame，frameset，noframes
處理兼容問題有兩種方式：
1）IE6/IE7/IE8支持通過document方法產生的標簽，利用這一特性讓這些瀏覽器支持HTML5新標簽。
2）使用是html5shim框架
另外，DOCTYPE聲明的方式是區分HTML和HTML5標志的一個重要因素，此外，還可以根據新增的結構，功能元素來加以區分。
5、如何區分 HTML 和 HTML5？
答案解析：
1）在文檔類型聲明上不同：
HTML是很長的一段代碼，很難記住，而HTML5卻只有簡簡單單的聲明，方便記憶。
2）在結構語義上不同：
HTML：沒有體現結構語義化的標簽，通常都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。
HTML5：在語義上卻有很大的優勢。提供了一些新的標簽，比如：<header><article><footer>
6、簡述一下你對HTML語義化的理解？
答案解析：
1）用正確的標簽做正確的事情；
2）html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析；
3）即使在沒有樣式css情況下也以一種文檔格式顯示，並且是容易閱讀的；
4）搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO；
5）使於都源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
7、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
答案解析：
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 數據在瀏覽器關閉後自動刪除。
8、iframe有那些缺點？
答案解析：
1）在網頁中使用框架結構最大的弊病是搜索引擎的「蜘蛛」程序無法解讀這種頁面；
2）框架結構有時會讓人感到迷惑，頁面很混亂；
9、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
答案解析：
1）<!Doctype>聲明位於文檔中的最前面，處於<html>標簽之前。告知瀏覽器的解析器，用什麼文檔類型規范來解析這個文檔。
2）嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標准運行。
3）在混雜模式中，頁面以寬松的向後兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
4）DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
10、常見兼容性問題？
1）png24位的圖片在IE6瀏覽器上出現背景；
解決方案是：做成PNG8；
2）瀏覽器默認的 margin 和 padding 不同。
解決方案是：加一個全局的*{margin:0;padding:0;}來統一。
3）IE6雙邊距bug：塊屬性標簽float後，又有橫行的 margin 情況下，在 IE6 顯示 margin 比設置的大。浮動IE產生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 100px;} 這種情況下IE6會產生200px的距離。
解決方法：加上_display：inline，使浮動忽略
4）IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性； Firefox下，只能使用getAttribute()獲取自定義屬性。
解決方法：統一通過getAttribute()獲取自定義屬性。
5）IE下，even對象有x，y屬性，但是沒有pageX，pageY屬性，但是沒有x，y屬性；
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
6）Chrome中文界面下默認會將小於 12px 的文本強制按照 12px 顯示
解決方法：可通過加入 CSS 屬性 -webkt-text-size-adjust:none;解決
7）超鏈接訪問過後 hover 樣式就不出現了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active ；
解決方法：改變CSS屬性的排列順序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }
11、如何實現瀏覽器內多個標簽頁之間的通信？
答案解析：
調用localstorge、cookies等本地存儲方式
12、webSocket如何兼容低瀏覽器？
答案解析：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR
13、支持HTML5新標簽
答案解析：
1）IE8/IE7/IE6支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式；
2）當然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
14、如何區分：DOCTYPE 聲明\新增的結構元素\功能元素，語義化的理解？
答案解析：
1）用正確的標簽做正確的事情；
2）html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
3）在沒有樣式 CSS 情況下也以一種文檔格式顯示，並且是容易閱讀的；
4）搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利用 SEO ；
5）使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
15、介紹一下 CSS 的盒子模型？
答案解析：
1）有兩種，IE 盒子模型、標准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
2）盒模型：內容（content）、填充（padding）、邊界（margin）、邊框（border）。
16、CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3 新增偽類有哪些？
答案解析：
1）id 選擇器（#myid）
2）類選擇器（.myclassname）
3）標簽選擇器（div，h1，p）
4）相鄰選擇器（h1 + p）
5）子選擇器（ul > li）
6）後代選擇器（li a）
7）通配符選擇器（* ）
8）屬性選擇器（ a[rel = "external"]）
9）偽類選擇器（a: hover, li: nth - child）
17、可繼承的樣式： font-size font-family color, UL LI DL DD DT
18、不可繼承的樣式：border padding margin width height
19、優先順序就近原則，同權重情況下樣式定義最近者為准
20、載入樣式以最後載入的定位為准;
解析答案：優先順序為: !important > id > class > tag ； important 比 內聯優先順序高
21、CSS3新增偽類舉例：
答案解析：
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 控製表單控制項的禁用狀態；
:checked 單選框或復選框被選中。
22、如何居中div？ 如何居中一個浮動元素？
答案解析：
給div 設置一個寬度，然後添加 margin:0 auto 屬性；div{width:200px; margin:0 auto; }
23、居中一個浮動元素
答案解析：
確定容器的寬高 寬500 高300的層，設置層的外邊距
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%；頭：50%}
24、css3有哪些新特性？
答案解析：
CSS3 實現圓角（border-radius:8px;），陰影（box-shadow:10px）,對文字加特效（text-shadow）,線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉，縮放，定位，傾斜
增加了更多的 css 選擇器 多背景 rgba
25、為什麼要初始化 CSS 樣式
答案解析：
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對 SEO 有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法是：*{padding:0;margin:0} (不建議)
淘寶的樣式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,
textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
26、display:inline-block 什麼時候會顯示間隙？
答案解析：
移除空格，使用margin 負值、使用 font-size:0、letter-spacing 、word-spacing
27、使用 CSS 預處理器嗎？喜歡哪個？
答案解析：SASS
28、什麼是盒子模型？
答案解析：
在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
29、CSS實現垂直水平居中
答案解析：
一道經典的問題，實現方法有很多種，以下是其中一種實現：
HTML結構：
<divclass="wrapper">
<divclass="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;
}
30、簡述一下src與href的區別
答案解析：
href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用於超鏈接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什麼將js腳本放在底部而不是頭部。
31、簡述同步和非同步的區別
答案解析：
同步是阻塞模式，非同步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
非同步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。
32、px和em的區別
答案解析：
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em
33、瀏覽器的內核分別是什麼?
答案解析：
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
⑹ h5前端該自學還是培訓糾結
自學有自學的好處，培訓有培訓的優點。你可以根據下圖自學和培訓的優劣勢來進行參考。
那麼什麼情況下你適合自學？當你：
1、總結分析能力強，這決定了你是否能自己構建知識體系。
2、資料搜索、篩選能力強，你們懂得，不會搜索哪有學習資料！
3、自製力強勁！自學能力強勁！
4、還喜歡單打獨斗式學習。
5、最好有前輩幫忙指導。
6、時間充足，其他工作學習或是生活壓力較小
什麼情況下你最好參加培訓班？比如你：
1、對自己的總結分析能力、資料搜索能力沒什麼感知，甚至明確地知道很差。畢竟並不急於拿時間來培養這些能力。
2、自製力較差，會在應該學習6小時的一天里只學習了2小時，效果還一般，幾乎沒記住。
3、在安靜地自習室學習比在家裡房間學習更有效率。
4、想要安心拿一段時間來突破學習。
太過於糾結只是在耽擱時間，快速有效的尋找適合你的方式才是正解！
⑺ Web前端面試題：瀏覽器是怎麼對HTML5的離線
在線的情況下，瀏覽器發現Html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問APP，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過APP並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。 離線的情況下，瀏覽器就直接使用離線存儲的資源。
⑻ H5前端工程師難找工作嗎
回答H5前端工程師是否好找工作之前，我們先來回顧一下H5前端工程師的發展歷程。從2010年起，互聯網開始全面進入移動時代，前端工程師的地位越來越重要，前端領域的技術發展也越來越快，各種新的思想、設計模式、工具和平台都快速發展，對前端工程師的技能要求也越來越高。直到現在，互聯網前端工程師的缺口都一直存在。
那麼H5前端工程師到底好不好找工作呢？答案是肯定的。只要你技術水平越高，搶手程度也會隨即增高。這里再給大家幾點建議，以助於在面試前端工作時更有優勢。
1.學會溝通。領導和同事看的是你學習態度和學習能力，不懂的問題，先盡力自己解決，解決不了再虛心求教。
2.規劃自己。規劃自己，給自己定個小目標，讓奮斗更有方向感和動力。
3.持續進步。技術的世界，變化會越來越快。之前學習的技術，有的會一直用下去，有的需要不斷補充新技術。
說了這么多，希望大家對前端工程師有進一步的了解。
⑼ 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。
HTML篇
1.doctype是什麼？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
4.bootstrap響應式的原理是什麼？
5.多移動終端頁面適配是如何實現的？
CSS篇
1.如何實現兩列布局，左邊自適應，右邊固定寬度？
2.用CSS畫一個三角形
3.CSS實現字體大寫
4.display有哪些常用的屬性值？分別是什麼意思？
5.position為absolute，relative，fixed的定點位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)
2.js創建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變數類型是否是數組
5.如何實現對象的拷貝？
6.什麼是閉包？閉包的優缺點。
7.簡述一下ajax請求的過程。
8.簡述一下new一個人構造函數的人過程。
9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。
10.js原始數據類型有哪些？
11.學一個函數，判斷一個變數是否是字元串
12.typeof有哪些結果？
13.剪頭函數和普通函數有什麼區別？
14.請用三種方法實現數組去重
15.href和src有什麼區別？
jquery篇
1.attr()和prop()有什麼區別？
2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？
3.touch和click有什麼區別？
4.window.onload和jquery的ready有什麼區別？
vue篇
1.簡述一下vue的生命周期及其特點
2.vue雙向綁定的原理是什麼？
3.vue的特點有哪些？和jquery有什麼區別？
4.父子組件之間傳遞數據的方法
5.子組件如何共享數據？
6.一般有什麼工具進行數據交互？
7.webpack的原理是什麼？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區別是什麼？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制
網路篇
1.http和https之間的區別
2.從伺服器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項目經驗篇
1.項目中遇到的最大挑戰以及解決辦法
2.常見的網頁優化有哪些？
作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。
希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。
第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。
第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。
第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。
最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答
1. cookie session 的用途和區別，以及有效期
1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能
考慮到減輕伺服器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
2. vue的數據綁定原理，mvvm與mvc的區別
MVVM：
m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數據劫持的原理，
MVC：
m:model數據模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數據在view層進行顯示
MVC兩種方式，圖片說明：
總結：
mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
不懂得可以復制鏈接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的區別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的
有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】
緩存路由組件
使用的是vue的一個組件，參考vue的官方文檔
使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀
-----【保障組件的數據不會被切換路由而銷毀數據】
Home是對應的組件對象的名字，不是路由的名字
6.多維數組拍平
數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組
一紅六種方法吧……
了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解決方案
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協議---埠---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是後端解決跨域問題
【別的需要了解看下方鏈接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容問題§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）
【詳情請看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML書寫規范
H5新增標簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發
常見的布局方案
移動端前端常見的觸摸相關事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優化
GPU渲染
GPU核心渲染過程
五、調試
常用的調試工具
Chrome控制台調試js使用
移動端測試
六、HTTP網路知識
常見的HTTP狀態碼
不同請求類型的區別
WEB緩存方案
——————————
牛客網（www.nowcoder.com）
- 專業IT筆試面試備考平台
- 最全C++JAVA前端等互聯網技術求職題庫
- 全面提升IT編程能力
- 程序員交友聖地
分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！
放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。
建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！
一、HTML常見題目01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
二、CSS類的題目01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
三、Java類的題目
01、介紹Java的基本數據類型。
02、說說寫Java的基本規范？
03、Java原型，原型鏈？有什麼特點？
04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？
05、Java如何實現繼承？
06、Java創建對象的幾種方式？
07、Java作用鏈域？
08、談談This對象的理解。
09、eval是做什麼的？
10、什麼是window對象？什麼是document對象？
OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。
如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……
你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！
扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
⑽ H5前端學習後有前途嗎
H5前端學習有前途，前景廣闊是高薪行業。因此選擇好的培訓機構是重要的，好的培訓機構推薦。【達內教育】歷時一年，耗資千萬，重磅推出「因材施教、分級培優」創新教學模式，同一課程方向，面向不同受眾群體，提供就業、培優、才高三個級別教學課程，達內「因材施教、分級培優「差異化教學模式，讓每一位來達內學習的學員都能找到適合自己的課程。感興趣的話點擊此處，免費學習一下
學習任何一門語言前，了解語言前景是很好的。【H5前端】在市場需求上面，雖然沒有前幾年那麼火爆，但在中高級前端開發崗位上依舊有缺口，市場對於這類人才的需求依舊很大。並且，在待遇方面，中級開發大概在1w左右，高級開發基本算是年入百萬並不少見，所以「錢」途還是很大的。要想就業好，就要多努力，老師領進門，修行在個人。勤於動手，去落實代碼，才是不二選擇。
想了解更多有關H5學習前途的相關信息，推薦咨詢【達內教育】。該機構是引領行業的職業教育公司，致力於面向IT互聯網行業培養人才，達內大型T專場招聘會每年定期舉行，為學員搭建快捷高效的雙選綠色通道，在提升學員的面試能力、積累面試經驗同時也幫助不同技術方向的達內學員快速就業達內IT培訓機構,試聽名額限時搶購。