㈠ 前端面試會提問到哪些
在面試前端的過程中，有些問題是經常會被提問到的
一、基礎篇
1. 在不使用第三個變數的情況下，如何調換a與b的值？
2. px與em的區別
3. 簡述一下盒模型
4. 頁面導入樣式時，使用link和@import有什麼區別？
5. 簡述一下事件代理
二、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、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
四、JavaScript類的題目
01、JavaScript中this是如何工作的
02、請解釋原型繼承的原理。
03、什麼是閉包(closure)，如何使用它，為什麼要使用它？
04、.call 和.apply的區別是什麼？
05、請指出JavaScript 宿主對象(host objects) 和原生對象(native objects) 的區別？
06、請指出以下代碼的區別：function Person(){}、var person = Person()、var person = new Person()？
07、請解釋變數聲明提升(hoisting)。
08、什麼是 「use strict」; ？ 使用它的好處和壞處分別是什麼？
09、什麼是事件循環 (event loop)？
10、請解釋同步 (synchronous) 和非同步 (asynchronous) 函數的區別。
五、開發及性能優化類題目
01、如何規避javascript多人開發函數重名問題？
02、請說出三種減低頁面載入時間的方法.
03、說說你所了解到的Web攻擊技術。
04、說說你說了解的前端性能優化方法？
05、前端開發中，如何優化圖像？圖像格式的區別？
06、瀏覽器是如何渲染頁面的？
07、頁面重構怎麼操作？
08、什麼叫優雅降級和漸進增強？
09、前端需要注意哪些SEO？如何做SEO優化？
10、平時如何管理你的項目？
㈡ 前端面試的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共同開發)
㈢ HTML5+CSS3新手怎麼學習
隨著移動互聯網的發展，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前端的朋友都希望在學成後能找到一份滿意的工作，所以我們在學習過程中一定要注意實戰經驗的積累，如果你所學的東西對企業沒有用，那你所做的一切都是無用功
㈣ 2022前端開發面試記錄（深圳篇）
2022年來到深圳，感覺到了與之前所在城市的差異，心裡多少有點落差。雖然時機不太對吧，但是相信一切都會好起來的，給自己加油呀！
整理了一些面試被問到的問題，雖然很多是無效面試，但是我也強行問了面試官，從他們的回答中猜測了一下他們關注的面試點，所以也算是有點收獲吧，只是浪費了很多簡歷和路費，哭唧唧。
——1、區塊鏈——
1-1、vue生命周期；
1-2、vuex屬性；
1-3、用戶開始登錄到登錄成功都發生了什麼；
1-4、git常用的命令；
——2、金融：vue——
筆試：
2-1、深淺拷貝的區別，為什麼會出現深淺拷貝，淺拷貝的優勢；
2-2、強制中斷 foreach 遍歷；
2-3、多處組件復用；
2-4、你對前端是什麼概念，前端在整個軟體生態內是什麼角色；
2-5、Vue2 中數據變化但視圖沒有發生同步更新，描述一下出現的場景，解決方式，以及該問題發生的可能原因；
2-6、nextTick 是如何確保開發者能夠獲取到最新的 DOM 狀態的；
2-7、如何使用 mixins，有何利弊；
2-8、使用 Hooks 模式開發時，useMemo，useCallback 常用來作為優化的手段。描述一下它們各自的適用場景，以及背後的原理實現?；
2-9、前端從 Jquery 時代演變至如今的三大框架，這種演變的根源是什麼，jquery 解決了什麼問題，如今的三大框架又是為了解決什麼問題出現的？
視頻面試：
2-10、js遍歷樹形結構，每個節點都有一個唯一ID，只能遍歷一次；
2-11、組件封裝的意義；
——3、知識產權：vue2、vue3、ts、react——
3-1、說一說面向對象的理解，包括繼承、封裝、多態等；
3-2、說一說promise；
3-3、webpack優化；
3-4、vuex使用場景；
3-5、描述一下對vue響應式原理的理解；
3-6、vue生命周期；
3-7、父子組件鉤子函數執行順序；
3-8、v-if和v-show；
3-9、js數據類型；
3-10、實現深拷貝；
——4、物流——
4-1、vue生命周期；
4-2、生命周期-修改元素樣式在生命周期的哪個階段；
4-3、生命周期-修改數據在哪個階段；
4-4、生命周期-destroy裡面會做哪些操作；
4-5、怎麼修改title的內容；
4-6、父子組件傳參的具體寫法；
4-7、v-model的多種寫法；
4-8、js數據類型；
4-9、判斷數組的方法；
4-10、實現左邊固定右邊自適應的布局；
4-11、實現div垂直水平居中；
4-12、flex:1；
4-13、flex詳解；
4-14、call,apply,bind是干什麼的；
——5、新興產業——
5-1、封裝路由，怎麼攔截路由；
5-2、瀏覽器緩存有哪些，又問localStorage和sessionStrorage的區別和應用場景；
5-3、瀏覽器強緩存和協商緩存；
5-4、webpack打包機制，構建過程和配置；
5-5、性能優化方法；
5-6、前端的業務和後端的API是怎麼做到數據實時請求的（問的其實是前端對後端API介面的封裝和管理）；
5-7、computed和watch；
5-8、說了幾個關於大屏的應用場景，有沒有做過，怎麼做的；
——6、某水果：vue2、vue3、ts、各種前沿技術都用——
6-1、怎麼封裝一個組件庫/工具類庫，比如vue封裝過什麼復雜組件，jquery封裝過什麼類庫；
6-2、get和post的區別，傳參格式等；
6-3、promise怎麼用的；
6-4、原型鏈，test()的原型鏈；
6-5、websocket；
6-6、es6中的generator；
6-7、es6中的set和map有啥區別，set為什麼能去重；
6-8、項目難點；
——7、醫療健康：vue——
7-1、vue自定義指令配置；
7-2、webpack的理解；
7-3、對node的了解，用過express嗎；
7-4、項目中的拖拽是怎麼做的；
7-5、websocket和socket的區別；
7-6、聽過mqtt嗎，因為沒聽過所以解釋了一下activemq的用法；
7-7、二維地圖的聚合，如果有十萬個點，會做什麼優化；
7-8、地圖實現多個點連成一條線會怎麼做；
7-9、地圖實現一條曲線；
7-10、內網下git怎麼用的；
7-11、openlayers渲染機制；
7-12、父子組件通信方法；
7-13、router中實現攔截；
7-14、對象合並的方法；
7-15、父子組件的生命周期執行順序，渲染階段為什麼會先執行父組件再執行子組件；
7-16、vue生命周期；
7-17、npm run dev, run build可以在項目中的什麼位置找到；
7-18、vue中跳轉頁面的方法；
7-19、mixins用過嗎；
7-20、判斷引用類型的方法；
7-21、js數據類型；
7-22、判斷基本數據類型的方法；
7-23、for in和for of的用法和區別，兩者遍歷的是索引還是屬性值，兩者都可以遍歷對象嗎；
7-24、foreach和map的區別，兩者會不會改變原數組；
7-25、主要用什麼技術棧；
7-26、行內元素和塊級元素的區別，分別都有哪些，行塊級元素有哪些；
7-27、div垂直水平居中，grid知不知道怎麼用；
7-28、splice和slice；
——8、智慧園區：vue2、vue3、ts、uniapp——
8-1、flex了解嗎，flex布局方向，flex:1 0的頁面效果是怎樣的；
8-2、做過移動端嗎，了解uniapp嗎；
8-3、keep-alive；問了一個沒聽明白的，可能和keep-alive有關系；
8-4、vuex中的action；不用vuex，怎麼代替vuex；
8-5、promise.all和promise.on；
8-6、防止表單重復提交；
8-7、async，await的使用；
8-8、vue3和ts的了解；
8-9、防抖怎麼控制時間；
8-10、vue中的data為什麼要設計成一個函數；
——9、智慧工地：vue、uniapp、小程序——
9-1、Vuex是干什麼的；
9-2、openlayers怎麼用的；
9-3、性能優化；
9-4、spa首屏載入優化；
9-5、bundler.js太大，打包怎麼優化；
9-6、加密方式了解多少，比如md5,base64等，一大堆沒聽過的；
9-7、冒泡排序的實現原理；
9-8、js設計模式；
——10、某快遞公司外包——
10-1、一棵樹的數據，給的是列表格式，轉換成樹形結構；
10-2、項目相關的，聊天怎麼做的，拖拽怎麼做的，拖拽的數據怎麼渲染的，拖拽重疊怎麼處理的；
10-3、js設計模式；
——11、三維：vue、cesium——
11-1、一棵樹的數據，給的是列表格式，轉換成樹形結構；
11-2、openlayers怎麼用的，發布過wms嗎，發布流程是怎樣的；
11-3、openlayers轉換經緯度的方法名是什麼；
11-4、cesium常用的函數；
11-5、vue數據雙向綁定原理；
11-6、Vue中data屬性如果改變一個數組的下標，會不會馬上發生變化，不變化可以怎麼解決
11-7、數組常用方法有哪些；
11-8、 map和filter的區別；
11-9、es6常用的方法；
11-10、父子組件通信，兄弟組件通信；
11-11、new具體進行了什麼操作；
——12、醫療：vue、angular——
12-1、js渲染機制和運行機制；
12-2、vue數據綁定原理；
——13、建設行業：vue、uniapp——
筆試：
13-1、||與&運算符；
13-2、垂直居中方案；
13-3、let a=arr, b=a, c=arr.concat(), a[0]=3，列印b和c，應該是深淺拷貝；
13-4、實現font-size:12；
13-5、介面路徑，給一個地址 http://localhost/projectname/resource/index(http://localhost/projectname/resource/index).html ，根據url請求介面路徑寫出完整路徑，』/ geturl.do 』，』 geturl.do 』，』../ geturl.do 』；
13-6、微信小程序流程和主要文件；
13-7、獲取url參數及內容；
13-8、$(function(){}) / (function(){}) / (function(){})()的區別；
13-9、前端優化方案；
面試：
13-10、項目難點；
13-11、git工作流；
13-12、jquery項目會不會用webpack打包；
13-13、webpack優化；
13-14、web優化；
——14、文化：uniapp——
14-1、ssr渲染；
14-2、ajax和axios的區別；
14-3、cookie和session的區別；
14-4、vue生命周期；
14-5、數據請求寫在哪個生命周期中；
14-6、router的history模式和hash模式；
14-7、工作中的開發流程；
14-8、uniapp的開發流程和坑；
14-9、uniapp滑動問題，下滑切換視頻不生效，一般是什麼原因；
14-10、uniapp載入速度慢，點擊載入圖片速度太慢，一般是什麼原因；
——15、企業平台某外包：vue，node，性能優化——
15-1、說一說websocket；
15-2、vue數據雙向綁定原理；
15-3、項目難點；
15-4、對mvvm、mvc、mvp等的理解；
15-5、vue的常見指令；
15-6、computed和watch；
15-7、class和style怎麼綁定；
15-8、ajax和axios的區別；
15-9、axios攔截器，axios的post請求；
15-10、對前端渲染，服務端渲染的理解；
——16、智慧城市：vue，node，three.js——
16-1、vue生命周期；
16-2、vue組件通信方法；
16-3、js的繼承；
16-4、oracle、mysql、sqllite的區別；
16-5、oracle連表查詢；
16-6、openlayers項目場景；
16-7、cesium項目場景；
——17、租房：jquery+layui，vue2——
17-1、筆試：
17-2、foo列印題；
17-3、this列印題；
17-4、變數提升列印題；
17-5、let arr=[1,2,[5,8,[9,[3,5,]7,]20,37]] 把數組扁平化成一個數組，並進行去重升序;
17-6、let a=[1,2,3,4,5,6,7]; let b=[4,5,6]; 求b在a中第一次出現的位置；
17-7、面試：主要問項目
——18、跑腿：vue2，vue3+ts——
18-1、對html5語義化的理解；
18-2、css實現一個三角形；
18-3、css怎麼實現0.5px的線，為什麼有這種需求，涉及到兼容性問題；
18-4、怎麼解決變數提升的問題；
18-5、es6新增了哪些定義變數的方式；
18-6、const定義的變數可以被修改嗎；
18-7、map和filter的區別，會改變原數組嗎；
18-8、es6去重的方法；
18-9、談一談對promise的理解；
18-10、除了鏈式調用，promise還可以怎麼處理同步請求(async/await)；
18-11、對vue響應式原理的理解，核心是什麼；
18-12、對vue生命周期每個階段的理解；
18-13、為什麼要用key，key有什麼作用；
18-14、v-if和v-show；
18-15、Vue中data為什麼是一個函數；
18-16、vue各場景下的傳值方式有哪些，比如父子組件，兄弟組件，祖孫組件；
18-17、對vuex的理解和使用場景；
18-18、vue常見修飾符；
18-19、Vue3用過嗎(因為沒用過，所以就只針對響應式原理說了一下vue3和vue2的區別)；
——19、實業：jquery，vue2，vue3——
筆試：需要解釋
19-1、html5新標簽，css3新特性；
19-2、js+css3實現某元素以50px每秒的速度左移100px；
19-3、css實現左中右布局，不改變文檔流；
19-4、js兼容性有哪些，以及常見的解決方案；
19-5、描述一下事件循環機制eventloop，eventloop解決了什麼問題；
19-6、給了一個題，大概是後端返回的介面數據，data的格式有很多，比如null，對象，數組，字元串等，怎麼處理這種問題；
19-7、前端性能優化方法，首屏頁面怎麼優化；
19-8、用js寫一個方法實現數據去重並排序(用es5和es6+實現)；
19-9、給定一個數組，把數組中為0的往後排，其他值按順序排序; （示例：[1,0,4,0,5,3]轉換結果為[1,3,4,5,0,0]）
19-10、用0，1，2代表紅黃藍三種顏色，實現以下排序，不能用array.sort實現;（示例：[0,1,0,2,0,1,2]轉換結果為[0,0,0,1,1,2,2]）
面試：
19-11、flex布局；flex:1對應的屬性；
19-12、講一下原型鏈； proto 和prototype有什麼區別；字元串有沒有原型；給定一個str，str.test()調用的誰的test方法；
19-13、講一下閉包；什麼情況下才能算是閉包；形成閉包的條件；列了三個題讓你判斷是不是閉包；
19-14、v-if和v-show是干什麼的；應用場景有哪些；給定一對父子組件，默認值是false，另外有一個ajax請求，值發生了以下變化（false true false true true），在v-show和v-if中，父子組件的哪個階段里會請求ajax；
19-15、computed的實現原理，怎麼實現一個computed；
19-16、css中，transform，margin，position的都是怎麼渲染的，渲染機制是什麼；amd，cmd，commonjs了解嗎；
㈤ 網頁中HTML5與CSS3的應用
網頁中HTML5與CSS3的應用
下面是我為大家搜索整理的關於網頁中HTML5與CSS3的應用，歡迎參考閱讀，希望對大家有所幫助!想了解更多相關信息請持續關注我們應屆畢業生培訓網!
網頁技術的發展和進步，使得網頁的功能朝著越來越豐富的方向發展，網頁計算機設計技術也在這樣的情況下得以不斷融合。比如HTML5與CSS3兩者之間的融合，為網頁設計打開了全新的局面，有利於提升網頁設計的效益。因此，積極探究HTML5與CSS3的在網頁設計中的應用，顯得尤為必要。
1 HTML的發展，特性和應用
1.1 HTML的發展歷程
HTML英文翻譯全稱為超文本標記語言，是用來描述網頁文檔的標記語言。1991年Tim Berners-Le編寫了名稱為HTML標簽的文檔，裡面涉及到20多個標記網頁的HTML標簽，他在借用SGML標記格式之後，形成了HTML的標記格式，由此打開了HTML的發展歷史：(1)從IETF到W3C的轉變。實際上HTML的第一個官方版本是有IETF推出的HTML2.0。早在1994年的時候，有瀏覽器就在這樣的超文本語言標准下實現了文檔嵌入圖片，並且以img的標簽納入到HTML2.0體系中去。隨後W3C漸漸成為HTML的標准組織，在對於HTML多數的修改之後，終於在1999年的時候推出了HTML4.0。(2)XHTML1，具備XML風格的HTML。繼HTML4.0之後，出現了第一次修訂的版本，那就是XHTML1.0，其關注於其擴展方面的效能，因為其對於語法方面的嚴格要求，並沒有在使用方面表現出隨意性，影響到此版本的使用效益。但是此時CSS的不斷崛起，也使得網頁設計者意識到XHTML的應用前景。(3)W3C推出XGTML1.1，XHTML1.1再也無法使用直接輸出，即使此時網頁設計者使用此版本的語言，但是由於主流瀏覽器的不支持，就使得其陷入到被架空的地步。(4)W3C推出了XHTML2，但是由於其在兼容方面的問題，難以發揮其效能，接著越來越多的主流瀏覽器開始對於W3C的開發行為提出反對，並且要求在HTML的基礎上實現新的拓展，在沒有達成共識之後，主流瀏覽器自發組織成立了超文本應用技術小組，那就是WHATWG，他們關注於Web Forms2和Web Appsl，並且將其融合在一起，形成了全新的HTML5的規范。
1.2 HTML的特性
從本質上來講，HTML文檔製作的過程並不是很復雜，很多時候都可以依靠其強大的功能去進行處理，甚至支持不同數據格式文本的嵌入。具體來講其特性主要體現在以下幾個方面：(1)簡易性，基於超集方式可以使得其升級變得更加靈活和方便;(2)擴展性，有著較強的擴展性;(3)平台無關性，對於應用平台沒有過多的要求。
1.3 HTML的應用
HTML技術體系不斷完善，功能越發強大，在網頁設計過程的應用也越來越頻繁。一般情況下，HTML作為基本標記語言，主要在以下幾個方面發揮效能(1)實現靜態網頁的編寫，多數情況下以.html為結尾的網址就是在HTML的基礎上誕生的，通常看到的網頁源代碼就是標記語言;(2)實現動態網頁的編寫，主要會以PHP或者ASP等語言方式去呈現網頁的動態效果。
2 CSS的發展、特性和應用
2.1 CSS的發展歷程
1994年哈坤利提出構建CSS的提議，當時正在設計一款瀏覽器的伯特・波斯與其實現合作，開展了CSS的設計工作。在當時CSS作為第一個含有層疊意識的語言，給予讀者和作者更多的自由行，以實現設計效益的提升。隨後他們在1994年芝加哥的一次會議上展示了CSS，隨後兩人就組織成立了技術小組，終於在1996年完成了CSS，次年12月份第一本公開版本被出版。1997年初，W3C內組織了專管CSS的工作組，並且在1998年推出了第二個版本CSS2.1。CSS3現在還處於開發中，CSS 3在包含了所有CSS 2所支持的基礎上更有所改進。
2.2 CSS的特性與應用
CSS中文翻譯為層疊樣式表單，其可以很方便的運用到網頁外觀控制上去。具體來講，其特性主要體現在以下幾個方面：(1)可以同時實現多個網頁樣式的更新;(2)使得網頁的表示層和結構層處於分離的狀態，不至於受到彼此的影響;(3)使得網頁文件的大小得到了縮減;(4)對於提升網頁載入速度來講，有著積極作用。因此，CSS樣式表被大量運用到網頁設計實踐工作中去。
3 HTML與CSS在網頁設計中的應用
從理論上來講，HTML和CSS3有著自己的優勢和特點，關注的方向也存在差異性，運用的領域也展現出很多的不同之處。但是隨著近幾年網頁設計理念的革新，網頁設計的范圍被延展，移動終端的不斷出現，越來越多的設計人員開始意識到其兩者的融合，可以在促進網頁設計工作質量提升方面發揮著巨大的作用。當HTML5與CSS3在網頁設計方面的融合效益被展現出來之後，就有越來越多的網頁設計人員開始參與到探索和嘗試中去，遵循兩者之間的不同之處，充分發揮各自的優勢，解決當前各種困難，已經成為當前網頁設計人員的公司。筆者結合自身從事網頁設計的工作經驗，認為兩者之間的融合運用可以在以下幾個方面發揮積極效能。
3.1 在移動上網平台中的設計運用
從當前網頁設計的工作來看，HTML5與CSS3是使用率比較高的技術模式，尤其在移動網頁設計，網頁表單製作的過程中發揮著越來越重要的作用。我們知道，傳統的移動上網設備由於配置方面的問題，其網頁瀏覽的功能往往受到局限，或者不能看視頻，或者不能獲得高清的效果，為了解決這樣的問題很多網站都在創建移動互聯網版本，往往消耗大量的人力和物力。但是如果在此網格設計的過程跟蹤，充分利用HTML5與CSS3的話，不僅僅可以實現跨平台操作，還能夠使得用戶獲得最佳的用戶體驗。以網頁界面大量圖片插入為例，傳統模式下不僅僅會使得網頁運行速度受到制約，還會使得客戶的.體驗度不斷降低。此時利用HTML5和CSS3技術，設計出有效的網頁表單交互設計模型，如此一來就可以避免網頁運行速度緩慢的問題。
3.2 在跨瀏覽器調整方面的設計應用
不得不承認的是在HTML5和CSS3技術幫助下，的確可以使得設計者獲得更多的設計工具和方法，但是難以實現在跨瀏覽器的調整，如果出現特殊版本的網際網路搜索引擎的話，就需要對於附加設置和幫助進行識別。為了能夠解決這樣的難題，可以嘗試以HTML5SHIM的開放的JAVASCRIPT文件對於網路搜索引擎進行識別。當然此項功能不能僅僅依靠搜索引擎本身。另外還可以對於頁面結構進行調整和編輯，在網頁可編輯的區域，利用Ajax實現更新內容的保存，並且將其納入到資料庫中去，以便在任何時候都可以對於對應的數據信息進行訪問。當然HTML5與CSS3的功能的確強大，但是還難以進行跨瀏覽器的操作，但是這將是未來兩者實現更好融合的切入點，也是網頁設計的發展趨勢。
綜上所述，HTML5與CSS3的發展和進步，是無數網頁設計人員艱苦奮斗的結果，其在提升網頁設計效果，增強其用戶體驗度方面發揮著越來越重要的作用。尤其在當前各種語言技術相互融合，彼此之間的交叉不斷出現，統一的標准和規范，可供擴展的介面，都為實現技術的融合和發展營造了良好的外在環境。人們需要看到的是HTML5與CSS3之間的關系也是不容忽視的，兩者之間存在的各種異同點都會為兩者的融合效益發揮打下基礎。作為網頁設計人員應該樹立發展的理念，正確認識這兩者之間的關系，不斷將兩者運用到網頁設計的工作中去，以發揮兩者的融合效應。
;㈥ 請問面試的時候面試官問你了解html5嗎
那倒說不定，加入這個公司的方向是CSS3和HTML5，那麼對HTML5要求肯定高，就像優酷視頻有個HTML5播放，還有手機網頁，但是只要前端技術扎實，html5又玩過一些，那麼你可能會很符合他們的胃口，其實大部分公司就需要你了解而已，因為HTML5和CSS3還沒有完全兼容下來，只是在原有兼容所有的基礎上加上些HTML5讓逼格更高一點
前端主要先把基礎的搞好，然後表現出一副你對HTML5和CSS3的喜歡，有空玩玩，CSS3還是蠻好玩的
㈦ 2020年入門Web前端需要學習哪些知識
今天小編要跟大家分享的文章是關於2020年入門web前端需要學習哪些知識?正准備學習web前端的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
一、HTML、CSS基礎、JavaScript語法基礎。學完基礎後，可以仿照電商網站(例如京東、小米)做首頁的布局。
二、JavaScript語法進階。包括：作用域和閉包、this和對象原型等。相信我，JS語法，永遠是面試中最重要的部分。
三、jQuery、Ajax等。jQuery沒有過時，它仍然是前端基礎的一部分。
四、ES6語法。這部分屬於JS新增的語法，面試必問。其中，關於promise、async等內容要尤其關注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面試時，有的公司不一定會問canvas，靠運氣。如果時間不夠，這部分的內容可以先不學。但如果你會，絕對屬於加分項。
七、移動Web開發、Bootstrap等。要注意移動開發中的適配和兼容性問題。
八、前端框架：Vue.js和React。這兩個框架至少要會一個。入門時，建議先學Vue.js，上手相對容易。但無論如何，同時掌握Vue和
React才是合格的前端同學。
九、Node.js。屬於加分項，如果時間不夠，可以先不學，但至少要知道node環境的配置。
十、自動化工具：構建工具Webpack、構建工具gulp、CSS預處理器Sass等。注意，Sass比Less用得多，gulp比
grunt用得多。
十一、前端綜合：HTTP協議、跨域通信、安全問題(CSRF、XSS)、瀏覽器渲染機制、非同步和單線程、頁面性能優化、防抖動(Debouncing)和節流閥(Throtting)、lazyload、前端錯誤監控、虛擬DOM等。
十二、編輯器相關。SublimeText是每個學前端的人都要用到的編輯器。另外，前端常見的IDE有兩個：WebStorm和Visual
StudioCode。WebStorm什麼都好，可就是太卡頓;VSCode就相對輕量很多。個人總結一下：用VSCode的人越來越多，用
WebStorm的人越來越少。
十三、TypeScript(簡稱TS)。ES是JS的標准，TS是JS的超集。TS屬於進階內容，建議把上面的基礎掌握之後，再學TS。
以上就是小編今天為大家分享的關於2020年入門web前端需要學習哪些知識的文章，希望本篇文章能夠對想要了解web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
㈧ 好多招聘前端的都要求精通，精通html5，精通css3,精通js，請問這是認真的嗎弄得我懷疑人生
市場需求決定用人成本，3D框架是近兩年才興起的，thingjs是物聯網3D可視化的國產平台，開始受到資本青睞，說明市場潛力巨大。但是3D可視化技術更多是在客戶端顯示，例如指揮中心的可視化大屏，本身市場需求很低調，很多消費者都不知道，要想做智慧城市的大型項目，很多還是保密項目（監所、電力、建築、安全消防），能承擔開發的團隊本來也不多，都是一個圈內的。
thingjs官網-資源中心有很多可視化大屏項目案例，可以感受一下：
好多公司的前端招聘都把3D可視化開發混為一談，因為都是需要前端開發基礎，但是也是有針對性要求，比如掌握three.js或者babylon.js，熟悉NodeJS、MongoDB等,至少熟悉一種數據可視化JS類庫,如D3、HighCharts、Echarts等，這對於用人單位來說，才算是「精通webgl」。
有了技術不等於做出了受歡迎的商業應用，這個不僅僅是技術發展原因，也有市場需求的原因，簡單的3D可視化都是臨時需求，比如展覽、演示，很難沉澱技術資源。大部分的需求都是偏向於大型客戶端，也很難帶動市場，這樣就更需要一個簡化的3D開發流程，讓中小開發者也能夠加入到3D商業開發，有廣泛的基層基礎，thingjs平台正是如此。
雖然3D可視化開發技術不是一個成熟的市場，但是絕對是增量市場！加入一個有前瞻性的平台，第一時間接觸到3D開發技術，有價值的人才工資自然不是問題。
㈨ Web前端面試指導（四十）：CSS3有哪些新特性
第 1 選擇器
第 2 RGBA和透明度
第 3 多欄布局
第 4 多背景圖
第 5 Word Wrap
第 6 文字陰影
第 7 @font-face屬性
第 8 圓角(邊框半徑)
第 9 邊框圖片
第 10 盒陰影
第 11 盒子大小
第 12 媒體查詢
第 13 語音
㈩ HTML5都有哪些新特性呢
1、離線緩存。可以在關閉瀏覽器後再次打開時恢復數據，以減少網路流量。
2、音頻視頻自由嵌入，多媒體形式更為靈活。
3、地理定位。地理位置定位，讓定位和導航不再專屬導航軟體，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。
4、Canvas繪圖，提升移動平台的繪圖能力。使用Canvas API可以簡單繪制熱點圖收集用戶體驗資料，支持圖片的移動、旋轉、縮放等常規編輯。
5、豐富的交互方式。提升互動能力：拖拽、撤銷歷史操作、文本選擇等。
6、開發及維護成本低，這個相對於原生APP開發來說。更低的開發及維護成本;?使頁面變得更小，減少了用戶不必要的支出;而且，性能更好使耗電量更低。
7、CSS3 視覺設計師的輔助利器的支持。CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。
8、html5調用手機攝像頭和手機相冊、通訊錄等功能。