㈠ 小公司前端面試會有筆試嗎
可能會有，大多數公司都有筆試，基本都是根據你的簡歷來出題，主要詢問的都是基礎。
㈡ 前端筆試面試題總結（二）
A. null
B. [null]
C. [{}]
D. [{ name:"Lydia" }]
解析：
註：members被賦值的是person的指針；
正確答案：D
A. f foo(){ foo =10; console.log(foo)}
B. 1
C. 10
D. undefined
解析：
具名的匿名函數，函數名默認指向其本身，且具有隻讀屬性，函數會被當作函數表達式而不是一個標準的函數聲明來處理，函數表達式意味著函數被直接綁定在作用域中，意味著foo只能在被自己代表的位置被調用，不會污染全局作用域。
正確答案：A
解析：
正確答案： 30 24
解析：
正確答案：undefined 10 20
A. { name: "Lydia",age: 21} , ["name","age"]
B. { name: "Lydia",age: 21} , ["name"]
C. { name: "Lydia"} , ["name","age"]
D. { name: "Lydia"} , ["age"]
解析：
註： Object.defineProperty 是ES5提供的一種給對象定義屬性的方式，定義的屬性默認不可以枚舉、遍歷，不可以刪除；可以使用set、get，定義屬性時觸發get，修改屬性值時觸發set，利用其可以實現數據雙向綁定。
Object.keys 返回的是數組，又因 Object.defineProperty 定義的屬性默認不可以枚舉、遍歷，所以只能返回對象的第一個關鍵字；如果想要實現遍歷，可以利用 enumerable:true 實現遍歷，如果想要修改或刪除，可以利用 configurable:true 實現。
正確答案：B
A. "{"level":19,"health":90}"
B. "{"username": "xiao ming"}"
C. "["level","health"]"
D. "{"username":"xiao ming","level":19,"health":90}"
解析：
JSON.stringify(value,replacer) 方法將一個 JavaScript 對象或值轉換為 JSON 字元串，如果指定了一個 replacer 函數，則可以選擇性地替換值，或者指定的 replacer 是數組，則可選擇性地僅包含數組指定的屬性。
正確答案：A
A. 20 , 40 , 80 , 160
B. 20 , 40 , 20 , 40
C. 20 , 20 , 20 , 40
D. NaN , NaN , 20 , 40
解析：
正確答案：C
A. Calculated! 20 Calculated! 20 Calculated! 20
B. Calculated! 20 From cache! 20 Calculated! 20
C. Calculated! 20 From cache! 20 Form cache! 20
D. Calculated! 20 From cache! 20 Error
解析：
註：閉包函數定義： 當一個函數的返回值是另外一個函數，而返回的那個函數如果調用了其父函數內部的其它變數，如果返回的這個函數在外部被執行，就產生了閉包。
表現形式：使函數外部能夠調用函數內部定義的變數。
正確答案：C
A. ['apple','banana']
B. 2
C. true
D. undefined
解析：
註：push()方法的返回值：把指定的值添加到數組後的新長度
正確答案：B
A. "I made it!"
B. Promise {<resolved>: "I made it!"}
C. Promise {<pending>}
D. undefined
解析：
註：promise ES6語法中的非同步操作的API，每一個promise包含三種狀態 pending（掛起）、 resolve（成功）、 reject（失敗）， 而在每一個promise對象包含then 和 catch兩個方法，then方法接收一個函數，用於處理resolve成功方法，而catch方法接收一個函數，用於處理reject失敗的方法。
正確答案：C
㈢ 前端筆試題目求解答！！求寫出具體代碼
其實很簡單，就是一些js判斷就可以實現了，可以先用冒泡排序對它們進行排序，然後將前100名塞進一個數組裡面，當然還有排序的時間和用戶的id等，然後在排行榜按順序輸出array[0 - 100] ，用戶訪問的時候判斷一下用戶id是否在這個數組，如果在輸出數組的內容。如果不在然將 101 - 9999塞進另外一個數組，再查詢用戶id在不在這個數組，如果在，輸出用戶id 對應的排名，如果不在那就是直接輸出未上榜
㈣ web前端筆試題(HTML/CSS篇)
web前端筆試題集錦(HTML/CSS篇)
導讀：網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。以下是由我J.L為您整理推薦的前端開發筆試題目，歡迎參考閱讀。
一、HTML/CSS
1，讓一個input的背景顏色變成紅色
2，div的高寬等於瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域
思路：
(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;
(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產生滾動條
(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->不讓瀏覽器產生滾動條，避免頁面出現兩個滾動條
(5)編寫JavaScript，另div2的高度等於頁面可見高度，寬度等於頁面可見寬度，注意，在計算完可見高度height和可見寬度width後，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px
這樣題目基本就完成了，不過瀏覽器的兼容性還不是很好。
3，IE、FF下面CSS的解釋區別
(1) 讓頁面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的設置+text-align:center
(2) ff：不支持濾鏡
ie：支持濾鏡
(3) ff：支持!important
ie支持*，ie6支持_
(4) min-width,min-height
FF支持，IE不支持，IE可以用css expression來替代
(5) Css Expression
FF不支持，IE支持
(6) cursor：hand
IE下可以顯示手指狀，FF下不行
(7) UL的默認padding和margin
IE下ul默認有margin，FF下ul默認有padding
(8) FORM的默認margin
IE下FORM有默認margin，FF下margin默認為0
4，一個定寬元素在瀏覽器(IE6，IE7，Firefox)中橫向居中對齊的布局，請寫出主要的.HTML標簽及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數字，關鍵是margin-left,margin-right為auto)
5，CSS中margin和padding的區別
margin是元素的外邊框，是元素邊框和相鄰元素的距離
Padding是元素的內邊框，是元素邊框和子元素的距離
6，最後一個問題是，如何製作一個combo選項，就是可以輸入可以下拉菜單選擇。
思路：
(1)布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇
(2)編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指
7，
中alt和tittle的區別
alt：圖片顯示不出來了就提示alt
title：滑鼠劃過圖片顯示的提示
8，用css、html編寫一個兩列布局的網頁，要求右側寬度為200px，左側自動擴展。
在這里我使用了兩種方式：
(1)使用position
HTML:
left
right
(2) 使用float
HTML:
固定寬度
自適應
二者的CSS公用，如下：
html,body{width:100%;height:100%;margin:0px;padding:0px;}
.container {width:100%;height:400px;position:relative;}
.fl1 {float:left;}
.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}
.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}
.clear {clear:both;overflow:hidden;height:0px;}
.container2 {width:100%;height:400px;margin-top:100px;}
.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}
.right2 {height:400px;background:#f9afff;}
9，解釋document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"
em是相對長度單位，相當於當前對象內文本的字體尺寸，如果當前行內文本的字體尺寸未被指定，則相對於瀏覽器的默認字體尺寸。
該語句將id為ElementID的元素的字體設置為當前對象內文本的字體尺寸的1.5倍
10，Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?
DOCTYPE是文檔類型，用來說明使用的HTML或者XHTML是什麼版本，其中的DTD叫文檔類型定義，裡麵包含了文檔規則，瀏覽器根據定義的DTD來解析頁面的標識並展現出來
DOCTYPE有兩種用途：一個可以進行頁面的有效性驗證，另一個可以區分瀏覽器使用嚴格模式還是混雜模式來解析CSS。
嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式，目前使用的大部分瀏覽器對這兩種模式都支持，但是IE5隻支持混雜模式。
可那個過DOCTYPE聲明來判斷哪種模式被觸發
(1) 沒有DOCTYPE聲明的網頁採用混雜模式解析
(2) 對使用DOCTYPE聲明的網頁視不同瀏覽器進行解析
(3) 對於瀏覽器不能識別的DOCTYPE聲明，瀏覽器採用嚴格模式解析
(4) 在ie6下，如果在DOCTYPE聲明之前有一個xml聲明比如
，採用混雜模式解析，在IE7，IE8中這條規則不生效。
(5) 在ie下，如果DOCTYPE之前有任何字元，都會導致它進入混雜模式，如：
區分這兩種模式可以理解瀏覽器解析CSS的區別，主要是在盒模式的解釋上。
常見的塊級元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等
常見的內聯元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用於描述為一個HTML元素形成的矩形盒子，盒模型還涉及元素的外邊距，內邊距，邊框和內容，具體來講最裡面的內容是元素內容，直接包圍元素內容的是內邊距，包圍內邊距的是邊框，包圍邊框的是外邊距。內邊距，外邊距，邊框默認為0。
11，CSS引入的方式有哪些? link和@import的區別?
引入css的方式有下面四種
(1) 使用style屬性
(2) 使用style標簽
(3) 使用link標簽
(4) 使用@import引入
Link和@import區別：
(1) link屬於XHTML標簽，@import是CSS提供的一種方式。Link除了載入CSS外，還可以做很多事情，如定義RSS，rel連接屬性等;@import只能載入CSS
(2)載入順序不同，當頁面被載入的時候，link載入的CSS隨之載入，而@import引用的CSS會等到頁面完全下載完之後才會載入
(3)兼容性差別，由於@import是CSS2.1提出的，所以老的瀏覽器不支持，IE系列的瀏覽器IE5以上才能識別，而link沒有這個問題
使用DOM控制樣式的差別，使用JavaScript控制DOM去改變樣式的時候，只能操作link，@import不可以被DOM操作。
12，如何居中一個浮動元素?
一個浮動元素裡麵包含的元素可以水平居中，原理如下：
讓浮動元素left相對於父元素container右移50%，浮動元素left的子元素left-child相對於left左移50%就可以實現left-child相對於container水平居中
垂直居中類似，不過操作的不是left而是top
13，HTML5和CSS3的了解情況
有所了解
HTML5和CSS3分別是新推出的HTML和CSS規范，前世是XHTML2和CSS2，目前還在草案階段，不過得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也開發出了不少基於他們的應用。
HTML5相對於原來的HTML規范有一些變化：
(1)DOCTYPE更簡潔
(2)新增了一些語義化標簽，如article,header,footer,dialog等
(3)新增了一些高級標簽，如,,
CSS3相對於CSS2也新增了不少功能
(1) 選擇器更加豐富
(2) 支持為元素設置陰影
(3) 無需圖片能提供圓角
14，你怎麼來實現下面這個設計圖
(1) 切圖
(2) 布局，採用兩欄布局，分別左浮動
(3) 編寫css代碼
15，css 中id和class如何定義,哪個定義的優先順序別高?
id：#***，***為HTML中定義的id屬性
class:.***，***為HTML中定義的class屬性
id比class的優先順序高
16，用html實現如下表格(不如嵌套實用表格)
三行三列,其中第一行第一列和第二行第一列合並; 第二行第二列和第二行第三列合並(現場畫表)
運行結果如下：
17，web標准網站有那些優點
(1) Web標准網站結構和布局分離，使網站的訪問和維護更加容易
(2) Web標准網站結構，布局以及頁面訪問都標准化，使網站能在更多的web標准設備中訪問，兼容性更好
(3) Web標准網站語義化更好，語義化的XHTML不僅對用戶友好，對搜索引擎也友好。
;㈤ 大廠的前端面試難嗎
分享給你一些面試題
一面
小米的面試官給人的感覺很親切很真誠，是一個體驗很不錯的面試。
css 實現圖片自適應寬高
講 flex，手寫出 flex 常用的屬性，並且講出作用
BFC 是什麼
項目裡面的前端鑒權是怎麼實現的？
vue 裡面的虛擬 dom 是怎麼回事？
vue 雙向綁定講一講
手寫函數防抖和函數節流
講講常用的 es6 語法，比如 let、promise、class 等等
瀏覽器渲染過程，迴流重繪等等，load、DOMContentLoaded 等等事件的觸發順序
從小米應用商店裡面隨便找了一個需求讓我現場實現，寫偽代碼
講項目裡面的鑒權和圖片懶載入怎麼實現的
講 vue-lazyloader 的原理，手寫偽代碼
講 express 框架的設計思想
線上日誌是如何處理的
講事件循環
講 nodejs 的 eventEmitter 的實現
講項目裡面做的事情
講 vue 的響應式原理、依賴收集、監聽數組、虛擬 dom 等等
講 express 的中間件系統是如何設計的
現場從小米應用商店中找出一個需求現場實現，說思路，寫關鍵的代碼
四面
講 vue-lazyloader 源碼以及設計
使用 es5 實現 es6 的 class
websocket 握手過程
瀏覽器的事件循環和 nodejs 事件循環的區別
跨域以及解決辦法
手寫一段小演算法
JavaScript 的 sort 方法內部使用的什麼排序？
講項目裡面幹了啥
vue-lazyloader 怎麼實現的
vue 的響應式系統、虛擬 dom
函數式編程
手寫了一個演算法題
講講項目裡面做了什麼
vue 原理，和 react 的區別（其實我沒怎麼用過 react）
JavaScript 非同步的處理方式，現場出了一個問題，使用 promise 實現
講項目模塊規劃、項目如何部署、如何優化等等
手寫函數的防抖
手寫一道演算法題
講講項目
手寫一道演算法題
講項目
前端持久化的方式、區別
vue-lazyloader 的原理
怎麼配 webpack
手寫 vue 雙向綁定
講 es6 的一些特性，並且現場出了幾個代碼片段，說結果
手寫一道演算法題
http 狀態碼
講項目
vue-router 的原理
項目中怎麼用的 webpack，怎麼優化
講 express 的設計原理
手寫一道演算法題
講項目
手動實現 parseInt
講 tcp/ip 網路層、三次握手，為什麼不能兩次握手
講 vue 原理
手寫一道演算法題
手寫 vue 的 mixin 方法
手寫 promise 的 all 方法
現場出了一個移動端的小需求
講項目
項目裡面用 nodejs 做了啥
抽取了哪些 vue 組件
講項目
手寫實現 promise
騰訊-地圖（跪）
騰訊兩個部門面試都會先做一套筆試題，筆試題基本就是一些常見的前端問題以及演算法題
講項目，對項目提了一些問題
怎麼判斷一個點是否在圓形內、正方形內
對筆試題
筆試題
沒了
講項目
vue 響應式原理，什麼是 mvvm
es6 使用過的特性
flex 常見的屬性
css 選擇器的優先順序
抽取過哪些 vue 組件
講項目
express 設計原理，面試官對動態路由匹配一直追問下去，但是這里的源碼設計我確實是忘了，一路討論下去扯到了字元串的前綴樹…
實現一個事件發布訂閱類，其實就是 eventEmitter
講項目
事件循環
回調函數的壞處
vue 裡面哪兒不會用到雙向綁定
講項目
如何抽取公共組件的
vue 的響應式原理
如何實現一個可設置過期時間的 localStorage
實現一個發布訂閱系統，包括 on、emit、off 等等
一道智力題
軟體工程思想、設計模式等等
async/await 代碼片段，說輸出結果
講項目
講 lazyloader 實現
用 docker 做了什麼
用 webpack 做了什麼
手寫一個演算法題
講 flex
vue 響應式原理
es6
JavaScript 非同步
優化項目
vue 原理，包括計算屬性、依賴收集等等
用 JavaScript 的非同步實現 sleep 函數
演算法題
手寫快排，時間復雜度，優化
手寫實現 jsonp
項目部署，線上問題等等
websocket 握手過程
對 vuex 的理解，單向數據流
設計一個單點登錄的系統，類似阿里系那種
手寫一個演算法
實現一個聯想搜索組件
手寫函數防抖和節流
講項目
講 vue 的 響應式系統，講了好久，從渲染 watcher 到虛擬 dom，面試官還跟我討論了好久
忘了
講項目
忘了
websocket 握手過程
tcp/ip 網路層，http 的特點
http 強行使用 udp 能實現嗎？
vue 原理
webpack 熱更新原理，使用過的插件
原型、閉包、跨域
手寫了一道演算法題
二面
三面
百思編程（過）
這個公司是獵頭推薦的，CEO 比較強勢，也算比較有趣。
一面
二面
這一面是 CEO 面，主要問了我的職業規劃等等問題，在我沒有表現出很強的要去該公司的意願後，直接給我送走了…
ponyAI-基礎架構（過）
一面
二面
這輪面試時從美國打電話過來的，事後才知道是 Google 的前端…
三面
四面
洋錢罐（過）
一面
二面
創新奇智（過）
一面
二面
這一面居然遇到了前同事…寫了一些筆試題，問了一些問題！
三面
猿輔導（跪）
猿輔導好像總共就一面，期間一些實現方式和面試官有爭議（沒有沖突）。
一面
搜狐-垂直媒體部門（過）
一面
二面
三面
騰訊-天天快報（跪）
也是先做了一套筆試題，但是令人尷尬的是，面試官覺得我快排寫錯了，然而我只是在原地快排沒有申請額外空間…
網路-網路雲（過）
這個部門今年據說升為一級部門了，好像還挺不錯的~
一面
二面
三面
三面是山大老學長，聊了一些業務上的事情~
搜狗-手機搜狗（過）
搜狗一面的體驗比較差，面試官給人的感覺不太好…
一面
二面
忘了…
快手-商業化（過）
一面
二面
今日頭條-廣告系統（過）
一面
二面
三面
四面
五面
OPPO 成都研發中心（過）
一面
二面
百詞斬（跪）
首先會在線做一道演算法題，挺簡單的，百詞斬感覺掛的稀里糊塗的…
一面
為什麼面這么多公司
因為我是實習直接轉正的，也沒參加過秋招，所以對自己在市場上是個怎樣的實力沒有一個清晰的了解，而且我也想多了解一下其他公司在做什麼，於是就盡量的多面，不過說實話面試確實挺累的。
㈥ 前端開發筆試可以用手機嗎
可以用。把上篇剩下的部分也寫一下敗激，因為最近比較忙這篇已經拖了很久了。現在剛剛開始銀四了，應該還是有些小岩枯臘夥伴在找工作，時間還不算太粗滑晚
㈦ 前端筆試形式
《Web前端開發》考試標准
Web前端開發職業技能分為初、中、高三個等級，初級證書持有者具有靜態頁面開發能力（用HTML5+CSS3把設計成圖的頁面排版成HMTL的靜態頁面，加上JS或JQ生成簡單的前端交互，如翻板動態banner、輪播圖、動態菜單、輸入格式提示等）；中級證書持有者具有動態網頁設計開發能力（會一門後台語言，可以跟資料庫結合，生成完美的後台數據管理系統，如PHP、ASP、C++等）；其中高級證書持有者具有復雜[fù zá]網頁設計開發能力和網站架構設計規劃能力（相當於產品經理的角色）。
㈧ 經典的 Web 前端或者 JavaScript 面試筆試題有哪些
一、不定項選擇題 （每題3分，共30分）
1. 聲明一個對象，給它加上name屬性和show方法顯示其name值，以下代碼中正確的是（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:」zhangsan」,show:」alert(this.name)」};
C. var obj = {name:」zhangsan」,show:function(){alert(name);}};
D. var obj = {name:」zhangsan」,show:function(){alert(this.name);}};
2. 以下關於Array數組對象的說法不正確的是（ CD ）
A. 對數組里數據的排序可以用sort函數，如果排序效果非預期，可以給sort函數加一個排序函數的參數
B. reverse用於對數組數據的倒序排列
C. 向數組的最後位置加一個新元素，可以用pop方法
D. unshift方法用於向數組刪除第一個元素
3. 要將頁面的狀態欄中顯示「已經選中該文本框」，下列JavaScript語句正確的是（ A ）
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
4. 點擊頁面的按鈕，使之打開一個新窗口，載入一個網頁，以下JavaScript代碼中可行的是（ AD ）
A. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>
5. 使用JavaScript向網頁中輸出<h1>hello</h1>，以下代碼中可行的是（ BD ）
A. <scripttype=」text/javascript」>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=」text/javascript」>
document.write(「<h1>hello</h1>」);
</script>
C. <scripttype=」text/javascript」>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=」text/javascript」>
document.write(「hello」);
</script>
</h1>
6. 分析下面的代碼：
<html>
<head>
<script type=」text/javascript」>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=」#ffffff」>
<form name=」myfm」>
<input type=」text」 name=」first_text」>
<input type=」text」 name=」second_text」>
</form>
</body>
</html>
以下說法中正確的是（ CD ）
A. 在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時，第一個文本框的內容不變
B. 在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，將在第二個文本框中復制第一個文本框的內容
C. 在頁面的第二個文本框中輸入內容後，當滑鼠離開第二個文本框時，將在第一個文本框中復制第二個文本框的內容
D. 在頁面的第一個文本框中輸入內容後，當滑鼠離開第一個文本框時，第二個文本框的內容不變
7. 下面的JavaScript語句中，（ D ）實現檢索當前頁面中的表單元素中的所有文本框，並將它們全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==」text」)
form1.elements.value=」";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==」text」)
forms[0].elements.value=」";
}
C. if(document.form.elements.type==」text」)
form.elements.value=」";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==」text」)
document.forms.elements[j].value=」";
}
}
8. 在表單(form1)中有一個文本框元素(fname)，用於輸入電話號碼，格式如：010-82668155，要求前3位是010，緊接一個「-」，後面是8位數字。要求在提交表單時，根據上述條件驗證該文本框中輸入內容的有效性，下列語句中，（ A ）能正確實現以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
B. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」 && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
C. var str= form1.fname.value;
if(str.substr(0,3)!=」010-」|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(「無效的電話號碼！」);
D. var str= form1.fname.value;
if(str.substr(0,4)!=」010-」&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(「無效的電話號碼！」);
9. 關於正則表達式聲明6位數字的郵編，以下代碼正確的是（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(「\d{6}」);
10. 關於JavaScript里的xml處理，以下說明正確的是（ BCD ）
A. Xml是種可擴展標記語言，格式更規范，是作為未來html的替代
B. Xml一般用於傳輸和存儲數據，是對html的補充，兩者的目的不同
C. 在JavaScript里解析和處理xml數據時，因為瀏覽器的不同，其做法也不同
D. 在IE瀏覽器里處理xml，首先需要創建ActiveXObject對象
二、問答題
1. 列舉瀏覽器對象模型BOM里常用的至少4個對象，並列舉window對象的常用方法至少5個 （10分）
對象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
2. 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法並做簡單說明 （10分）
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素
三、程序題
1、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之後關閉窗口； （10分）
<html>
<head>
<script type=」text/javascript」 >
function closeWin(){
//在此處添加代碼
if(confirm(「確定要退出嗎？」)){
window.close();
}
}
</script>
</head>
<body>
<input type=」button」value=」關閉窗口」onclick=」closeWin()」/>
</body>
</html>
2、寫出簡單描述html標簽（不帶屬性的開始標簽和結束標簽）的正則表達式，並將以下字元串中的html標簽去除掉（15分）
var str = 「<div>這里是div<p>裡面的段落</p></div>」;
//
<scripttype=」text/javascript」>
varreg = /<\/?\w+\/?>/gi;
varstr = 「<div>這里是div<p>裡面的段落</p></div>」;
alert(str.replace(reg,」"));
</script>
3、完成foo()函數的內容，要求能夠彈出對話框提示當前選中的是第幾個單選框。（10分）
<html>
<head>
<metahttp-equiv=」Content-Type」 content=」text/html;charset=utf-8″ />
</head>
<body>
<script type=」text/javascript」 >
function foo() {
//在此處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(「您選擇的是第」+(i+1)+」個單選框」);
}
}
}
</script>
<body>
<form name=」form1″ >
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」submit」/>
</form>
</body>
</html>
4、完成函數showImg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示 （15分）
<body>
<script type=」text/javascript」 >
function showImg (oSel) {
//在此處添加代碼
var str = oSel.value;
document.getElementById(「pic」).src= str+」.jpg」;
}
</script>
<img id=」pic」src=」img1.jpg」width=」200″ height=」200″ />
<br />
<select id=」sel」>
<option value=」img1「>城市生活</option>
<option value=」img2「>都市早報</option>
<option value=」img3「>青山綠水</option>
</select></body>
㈨ 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人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.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
㈩ 有哪些經典的 Web 前端或者 JavaScript 面試筆試題
HTML、CSS部分
8.html5\CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，地理定位等功能的增加。
* 繪畫 canvas 元素
用於媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，比如 article、footer、header、nav、section
表單控制項，calendar、date、time、email、url、search
CSS3實現圓角，陰影，對文字加特效，增加了更多的CSS選擇器 多背景 rgba
新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
* 是IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽後，還需要添加標簽默認的樣式：
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
9.你怎麼來實現頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?
* 首先劃分成頭部、body、腳部；。。。。。
*
實現效果圖是最基本的工作，精確到2px；
與設計師，產品經理的溝通和項目的參與
做好的頁面結構，頁面重構和用戶體驗
處理hack，兼容、寫出優美的代碼格式
針對伺服器的優化、擁抱 HTML5。
10.常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或組件？
* 使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。
輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
（理解這些框架的功能、性能、設計原理）
* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
* 城市選擇插件，汽車型號選擇插件、幻燈片插件。彈出層。（寫過開源程序，載入器，js引擎更好）
JavaScript原型，原型鏈 ? 有什麼特點？
* 原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鏈。
* 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。
* JavaScript的數據對象有那些屬性值？
writable：這個屬性的值是否可以改。
configurable：這個屬性的配置是否可以刪除，修改。
enumerable：這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。
value：屬性值。
* 當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 如果沒有的話，就會查找他的Prototype對象是否有這個屬性。
function clone(proto) {
function Dummy() { }
Dummy.prototype = proto;
Dummy.prototype.constructor = Dummy;
return new Dummy(); //等價於Object.create(Person);
}
function object(old) {
function F() {};
F.prototype = old;
return new F();
}
var newObj = object(oldObject);
12.列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？
1. block 象塊類型元素一樣顯示。
none 預設值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
2.
*absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
*fixed （老IE不支持）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。
*relative
生成相對定位的元素，相對於其正常位置進行定位。
* static 默認值。沒有定位，元素出現在正常的流中
*（忽略 top, bottom, left, right z-index 聲明）。
* inherit 規定從父元素繼承 position 屬性的值。
13.頁面重構怎麼操作？
編寫 CSS、讓頁面結構更合理化，提升用戶體驗，實現良好的頁面效果和提升性能。
14.語義化的理解？
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
15.HTML5的離線儲存？
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 數據在瀏覽器關閉後自動刪除。
16.為什麼要初始化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; }
17.(寫)描述一段語義的html代碼吧。
（HTML5中新增加的很多標簽（如：<article>、<nav>、<header>和<footer>等）
就是基於語義化設計原則）
< div id="header">
< h1>標題< /h1>
< h2>專注Web前端技術< /h2>
< /div>
語義 HTML 具有以下特性：
文字包裹在元素中，用以反映內容。例如：
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其他來源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用作語義用途以外的其他目的。例如：
<h1>包含標題，但並非用於放大文本。
<blockquote>包含大段引述，但並非用於文本縮進。
空白段落元素 ( <p></p> ) 並非用於跳行。
文本並不直接包含任何樣式信息。例如：
不使用 <font> 或 <center> 等格式標記。
類或 ID 中不引用顏色或位置。
18.absolute的containing block計算方式跟正常流有什麼不同？
19.position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
20.對BFC規范的理解？（W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關 系和相互作用。）
21.iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。
22.css定義的權重
以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：
/*權重為1*/
div{
}
/*權重為10*/
.class1{
}
/*權重為100*/
#id1{
}
/*權重為100+1=101*/
#id1 div{
}
/*權重為10+1=11*/
.class1 div{
}
/*權重為10+10+1=21*/
.class1 .class2 div{
}
如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現
23.eval是做什麼的？
它的功能是把對應的字元串解析成JS代碼並運行；
避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。
23.寫一個通用的事件偵聽器函數
`// event(事件)工具集，來源：https://github.com/markyun
markyun.Event = {
// 頁面載入完成後
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 視能力分別使用dom0||dom2||IE方式 來綁定事件
// 參數： 操作的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件類型、需要執行的函數、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默認行為
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 獲取事件目標
getTarget : function(event) {
return event.target || event.srcElement;
},
// 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
24.99%的網站都需要被重構是那本書上寫的？
* 網站重構：應用web標准進行設計（第2版）
25.什麼叫優雅降級和漸進增強？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.
漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來並發揮作用。
26.Node.js的適用場景
高並發、聊天、實時消息推送
27.WEB應用從伺服器主動推送Data到客戶端有那些方式？ html5 websoket
WebSocket通過Flash
XHR長時間連接
XHR Multipart Streaming
不可見的Iframe
<script>標簽的長時間連接(可跨域)