前端程序員面試筆試通關寶典

目　錄

CONTENTS

第1章  面試禮儀和技巧 001

1.1  面試前的準備 001

1.1.1  瞭解面試企業的基本情況以及企業文化 001

1.1.2  瞭解應聘職位的招聘要求以及自身的優勢和劣勢 003

1.1.3  簡歷的投遞 003

1.1.4  禮貌答復面試或筆試通知 004

1.1.5  瞭解公司的面試流程 004

1.1.6  面試前的心理調節 006

1.1.7  儀容儀表 006

1.2  面試中的應對技巧 006

1.2.1  自我介紹 007

1.2.2  面試中的基本禮儀 007

1.2.3  如何巧妙地回答面試官的問題 008

1.2.4  如何回答技術性的問題 009

1.2.5  如何應對自己不會的題 009

1.2.6  如何回答非技術性的問題 010

1.2.7  當與面試官對某個問題持有不同觀點時，應如何應對 010

1.2.8  如何向面試官提問 011

1.2.9  明人“暗語” 011

1.3  面試結束 012

1.3.1  面試結束後是否會立即收到回復 013

1.3.2  面試沒有通過是否可以再次申請 013

1.3.3  怎樣處理錄用與被拒 013

1.3.4  錄用後的薪資談判 014

1.3.5  入職準備 014

第2章  HTML 5 015

2.1  HTML 5基礎 015

2.1.1  基本結構 015

2.1.2  HTML的發展史 016

2.1.3  HTML 5的優勢 017

2.1.4  W3C標準 018

2.2  網頁標簽 019

2.2.1  基本標簽 019

2.2.2  圖像標簽 022

2.2.3  鏈接標簽 024

2.3  常用超鏈接 026

2.3.1  頁面間鏈接 026

2.3.2  錨鏈接 026

2.4  行內元素和塊級元素 028

2.5  面試與筆試試題解析 031

2.5.1  怎樣區分HTML 5、HTML和XHTML 031

2.5.2  請闡述你對W3C的理解 032

2.5.3  HTML文檔中的DOCTYPE有什麽作用 033

2.5.4  DOCTYPE文檔類型有幾種 033

2.5.5  Quirks模式是什麽？它和Standards模式的區別 033

2.5.6  HTTP狀態碼 034

2.5.7  什麽是IP地址 036

2.5.8  瀏覽器內核 036

2.5.9  行內元素和塊級元素 037

2.5.10  link和@import 038

2.5.11  HTML 5新特性和瀏覽器兼容 039

2.5.12  如何實現瀏覽器內多個標簽頁之間的通信 039

2.5.13  元素的alt和title有什麽異同 040

2.5.14  CSS和JavaScript的文件和圖片 040

2.5.15  網頁中的亂碼原因 041

2.5.16  在目標窗口中打開超鏈接頁面的兩種方式是什麽 041

2.6  名企真題解析 042

2.6.1  JavaScript放在HTML的不同位置有什麽區別 042

2.6.2  HTML 5的離線存儲資源的管理和加載 042

2.6.3  封裝一個isInteger()函數，用於檢測傳入的值是整數 042

2.6.4  使用CSS實現水平垂直居中 043

2.6.5  輸完網址按Enter鍵，在這個過程中發生了什麽 043

第3章  列表、表格、媒體元素和表單 044

3.1  列表 044

3.1.1  認識列表 044

3.1.2  列表的分類 045

3.2  表格 047

3.2.1  基本語法 047

3.2.2  跨行和跨列 048

3.3  HTML 5的媒體元素 050

3.3.1  視頻元素 050

3.3.2  音頻元素 050

3.4  HTML 5的結構元素 051

3.5  <iframe>內聯框架 055

3.6  表單 056

3.6.1  表單和表單元素 057

3.6.2  表單校驗 060

3.6.3  正則表達式 061

3.7  面試與筆試試題解析 062

3.7.1  什麽是列表以及列表的分類 063

3.7.2  常見的表單元素有哪些 063

3.7.3  表單提交的方式 064

3.7.4  製作下拉列表需要使用哪些表單元素 065

3.7.5  如何在頁面中使用音頻元素和視頻元素 066

3.7.6  定義列表的標簽 066

3.7.7  為什麽使用HTML 5結構標簽來佈局網頁 067

3.7.8  使用什麽屬性可以達到表單的初步驗證 068

3.7.9  使用JavaScript去除字符串空格 068

3.7.10  在HTML 5中支持哪幾種列表 069

3.7.11  Web前端開發，如何提高頁面性能優化 070

3.7.12  iframe的優缺點 070

3.8  名企真題解析 071

3.8.1  JavaScript的垃圾回收機制 071

3.8.2  如何製作語義化的表單 071

3.8.3  怎樣製作一個調查問捲 072

3.8.4  如何使用表格製作流量查詢表 073

3.8.5  請說出幾種減少頁面加載時間的方法 074

第4章  認識 CSS 075

4.1  CSS簡介 075

4.2  CSS的基本語法 076

4.3  HTML中引入CSS樣式 076

4.3.1  行內樣式表 076

4.3.2  內部樣式表 077

4.3.3  鏈入外部樣式表 078

4.3.4  導入外部樣式表 078

4.4  CSS樣式優先級 079

4.5  基本選擇器 079

4.5.1  標簽選擇器 079

4.5.2  ID選擇器 080

4.5.3  類選擇器 080

4.6  高級選擇器 081

4.6.1  層次選擇器 081

4.6.2  復合選擇器 082

4.6.3  屬性選擇器 083

4.7  面試與筆試試題解析 084

4.7.1  什麽是CSS 084

4.7.2  CSS優先級算法如何計算 085

4.7.3  在HTML中引入CSS樣式的方式是什麽 085

4.7.4  CSS 3新特性有哪些 086

4.7.5  為什麽要初始化CSS樣式 087

4.7.6  CSS 3新增偽類有哪些 087

4.7.7  如何使用CSS實現一個三角形 087

4.7.8  瀏覽器怎樣解析CSS選擇器 088

4.7.9  請列舉幾種隱藏元素的方法 089

4.7.10  CSS 3的基本選擇器和語法規則 089

4.7.11  CSS 3的選擇符有哪些？哪些選擇符可以繼承 089

4.7.12  哪種方式可以對一個DOM設置其CSS樣式 089

4.7.13  什麽是外邊距重疊？重疊的結果是什麽 090

4.8  名企真題解析 090

4.8.1  CSS的文本替換省略號 090

4.8.2  如何使用CSS設置漸變效果 091

4.8.3  頁面實現等高佈局 092

4.8.4  如何使用CSS設置背景樣式 093

第5章  CSS 3網頁製作和美化 095

5.1  span標簽 095

5.2  文本樣式 096

5.3  超鏈接偽類 100

5.4  使用CSS設置超鏈接 102

5.4.1  列表樣式 102

5.4.2  背景樣式 103

5.5  CSS 3漸變 104

5.5.1  CSS 3漸變兼容 104

5.5.2  線性漸變 105

5.6  CSS 3屬性製作動畫 105

5.6.1  CSS 3變形 106

5.6.2  CSS 3過渡 107

5.6.3  CSS 3動畫 110

5.7  面試與筆試試題解析 112

5.7.1  font屬性設置 112

5.7.2  在CSS中設置文本行高使用哪些屬性 112

5.7.3  全屏滾動的原理以及用到的CSS屬性 113

5.7.4  CSS優化、提高性能的方法有哪些 114

5.7.5  CSS 3的flexbox（彈性盒佈局模型） 114

5.7.6  簡單介紹什麽是REST 115

5.7.7  使用CSS 3過渡有哪些觸發方式 115

5.7.8  圖片格式png、jpg和gif的使用 116

5.7.9  簡單闡述圖像的預加載和懶加載 116

5.7.10  字號使用奇數還是偶數 117

5.7.11  undefined和null有哪些異同 117

5.7.12  first-child和first-of-type有什麽區別 118

5.7.13  CSS中類選擇器和ID選擇器有哪些區別 118

5.7.14  CSS偽類與CSS偽對象的區別 118

5.7.15  position的absolute與fixed的共同點與不同點 118

5.8  名企真題解析 119

5.8.1  如何製作百度音樂標簽頁面 119

5.8.2  如何製作京東新聞資訊頁 119

5.8.3  display:none與visibility:hidden的區別 121

5.8.4  如何製作家用電器商品分類頁面 122

5.8.5  暢銷書排行榜頁面怎樣實現 123

5.8.6  margin和padding分別適合什麽場景使用 124

第6章  盒子模式和浮動 125

6.1  盒子模型 125

6.1.1  盒子模型的組成 125

6.1.2  盒子模型的特徵 127

6.2  盒子陰影 128

6.3  display屬性 128

6.4  浮動 129

6.5  盒子模型的定位 130

6.6  溢出處理 131

6.7  inline-block和float的共性和區別 131

6.8  面試與筆試試題解析 132

6.8.1  position的定位屬性有哪些 132

6.8.2  什麽叫Web安全色 133

6.8.3  如何清除一個網頁元素的浮動 134

6.8.4  前端為什麽提倡模塊化開發 134

6.8.5  去掉網頁中超鏈接的藍色邊框 136

6.8.6  請說說你對元素浮動float的理解 137

6.8.7  CSS中的@font-face有什麽作用 138

6.8.8  絕對定位absolute和浮動float有哪些區別 138

6.8.9  有幾種方法可以解決父級邊框塌陷 139

6.8.10  CSS的盒子模型有哪些以及它們的區別 141

6.9  名企真題解析 141

6.9.1  如何實現一個聖杯佈局 141

6.9.2  標準盒子模型和IE盒子模型的區別 144

6.9.3  如何判斷哪一年是閏年 145

6.9.4  編寫一個函數，用於清除字符串前後的空格 145

6.9.5  用伸縮盒子實現子元素的水平和垂直居中 147

第7章  定位網頁元素 150

7.1  定位 150

7.1.1  元素的定位屬性 150

7.1.2  靜態定位 151

7.1.3  相對定位 151

7.1.4  絕對定位 151

7.1.5  固定定位 152

7.2  z-index屬性 153

7.2.1  z-index基礎 154

7.2.2  層疊上下文和層疊層 154

7.2.3  層疊次序 154

7.2.4  層級關系的比較 155

7.2.5  z-index規則 155

7.3  網頁元素透明度 156

7.4  面試與筆試試題解析 157

7.4.1  不同的定位方式有什麽特性 157

7.4.2  什麽是CSS Sprite 158

7.4.3  什麽是設備像素比 158

7.4.4  全局函數eval()有什麽作用 159

7.4.5  HTML中a標簽的幾大作用 160

7.4.6  什麽是錨點 162

7.4.7  z-index的用法 162

7.4.8  什麽是分區響應圖 163

7.4.9  在網頁中z-index對沒有設置定位的網頁元素是否有效 163

7.4.10  設置為relative對象的z-index屬性需要遵循什麽規則 164

7.4.11  怎麽比較z-index的優先級 164

7.4.12  一個DOM元素綁定多個事件時，先執行冒泡還是捕獲 165

7.4.13  元素位置重疊的可能原因 165

7.4.14  div元素的層疊次序 166

7.4.15  IE怎麽設置頁面的透明度 167

7.4.16  怎麽解決div相互層疊覆蓋問題 168

7.4.17  哪些方式可以創建層疊上下文 168

7.5  名企真題解析 169

7.5.1  在CSS中使用什麽方式可以設置網頁元素的透明度 169

7.5.2  請列舉幾個HTML 5新增的圖像相關的語義化元素 170

7.5.3  如何獲得頁面上元素的背景色 170

7.5.4  如何設計一個浮動中的元素水平居中 171

7.5.5  JavaScript尋找當前頁面中最大的z-index值的方法 171

第8章  腳本語言 174

8.1  JavaScript 174

8.1.1  組成結構 174

8.1.2  核心語法 175

8.1.3  函數定義和調用 177

8.1.4  JavaScript操作BOM對象 177

8.1.5  JavaScript操作DOM對象 178

8.2  jQuery 180

8.2.1  jQuery工作原理 180

8.2.2  事件與動畫 181

8.2.3  使用jQuery操作DOM 183

8.2.4  jQuery HTML 184

8.3  面試與筆試試題解析 185

8.3.1  在HTML頁面中如何引用JavaScript 185

8.3.2  如何實現DOM對象和jQuery對象間的轉化 186

8.3.3  如何按層次關系訪問節點 186

8.3.4  列出實現不同模塊之間通信的方式 188

8.3.5  如何使用jQuery實現隔行變色的效果 188

8.3.6  原生JavaScript獲取節點的方法 189

8.3.7  如何改變瀏覽器地址欄中的網址 190

8.3.8  jQuery操作select下拉框的多種方法 190

8.3.9  如何用jQuery來創建插件 191

8.3.10  在jQuery中使用什麽方法可控制元素的淡入和淡出 192

8.3.11  jQuery中.css()與.addClass()設置樣式的區別 193

8.3.12  JavaScript訪問HTML元素的幾種方式 194

8.3.13  簡述JavaScript中的12種DOM節點類型 194

8.3.14  controller as和controller有什麽區別，能解決什麽問題? 196

8.3.15  請指出JavaScript宿主對象和原生對象的區別 196

8.3.16  請解釋JavaScript中this是如何工作的 197

8.3.17  請解釋JSONP的工作原理 197

8.4  名企真題解析 198

8.4.1  何如使用JavaScript實現冒泡排序 198

8.4.2  如何取消$timeout以及停止一個$watch() 199

8.4.3  在網頁中實現一個倒計時，能夠動態顯示“某天某時某分某秒” 199

8.4.4  在jQuery中顯示和隱藏HTML元素的方法分別是什麽 200

第9章  前端流行框架 202

9.1  Vue.js 202

9.1.1  Vue.js簡介 202

9.1.2  基礎語法 202

9.1.3  屬性綁定 204

9.1.4  事件處理器 205

9.1.5  Vue.js組件 206

9.2  Angular JS 207

9.2.1  Angular JS表達式 207

9.2.2  Angular JS指令 207

9.2.3  Angular JS Scope 209

9.2.4  事件、模塊和表單 210

9.3  面試與筆試試題解析 211

9.3.1  Angular JS的雙向數據綁定原理是什麽 211

9.3.2  如何優化臟檢查與運行效率 211

9.3.3  談談你對Vue.js是一套漸進式框架的理解 212

9.3.4  在Vue.js中組件之間的傳值如何實現 213

9.3.5  v-if和v-show有什麽區別 213

9.3.6  什麽是$rootScrope以及和$scope有什麽區別 214

9.3.7  如何在頁面上實現前進、後退 214

9.3.8  什麽是Vue的計算屬性 215

9.3.9  在Angular中是否可以使用jQuery 216

9.3.10  請簡述$compile的用法 216

9.4  名企真題解析 217

9.4.1  Vue項目的搭建步驟 217

9.4.2  vue-router有哪幾種導航鉤子（導航守衛） 217

9.4.3  請寫出完整的vue-router導航解析流程 219

第10章  BootStrap 221

10.1  響應式佈局 221

10.2  BootStrap樣式 222

10.3  BootStrap組件 224

10.4  JavaScript插件 227

10.5  精選面試與筆試題解析 228

10.5.1  簡單描述BootStrap的整體架構 228

10.5.2  什麽是BootStrap柵格系統，為什麽要使用BootStrap 229

10.5.3  使用BootStrap的基本HTML模板必需要引入什麽文件 230

10.5.4  寫出基本下拉菜單組件的結構 231

10.5.5  BootStrap有哪些插件，分別是什麽 231

10.5.6  動畫過渡插件應用在其他的哪些插件中 232

10.5.7  如何設置模態框尺寸大 233

10.5.8  BootStrap常用的組件有哪些 233

10.5.9  旋轉輪播有哪些方法 234

10.5.10  BootStrap導航欄中有哪些功能 234

10.5.11  佈局有幾種方式 236

10.5.12  Flex佈局有哪幾種屬性 237

10.5.13  媒體查詢有哪些屬性 238

10.5.14  響應式佈局的優點和缺點是什麽 239

10.5.15  HTML中最適合做按鈕的元素是什麽 240

10.5.16  寫出BootStrap中基礎的表單結構 240

10.5.17  BootStrap有什麽特點 241

10.5.18  組件、控件和插件的區別 242

10.5.19  BootStrap網格系統的實現原理 242

10.6  名企真題解析 243

10.6.1  BootStrap表格有哪些可選樣式 243

10.6.2  如果網頁內容需要支持多語言，應該怎麽做 244

10.6.3  BootStrap中Class怎麽命名 245

第11章  Web頁面開發 246

11.1  移動Web頁面開發 246

11.1.1  移動開發測試瀏覽器 246

11.1.2  移動端視口及視口標簽 247

11.1.3  移動端網頁開發 248

11.1.4  設備像素比 249

11.2  移動Web特效開發 249

11.2.1  移動端事件 249

11.2.2  zepto框架 251

11.3  面試與筆試試題解析 252

11.3.1  相對單位rem的特性是什麽 252

11.3.2  移動網頁開發與電腦網頁開發有什麽區別 252

11.3.3  移動開發測試瀏覽器有什麽差異 253

11.3.4  移動端視口有哪些 254

11.3.5  px、em和rem有什麽區別 255

11.3.6  實現Web App屏幕適配的方法有哪些 256

11.3.7  寫出CSS 3變形、過渡、動畫的語法和採用的屬性 257

11.3.8  簡述jQuery與zepto的異同 258

11.3.9  zepto的點透問題如何解決 259

11.3.10  理想視口是什麽，怎麽實現理想視口 260

11.3.11  什麽叫優雅降級和漸進增強 260

11.3.12  怎麽解決移動端300ms點擊延遲 261

11.3.13  固定定位佈局時鍵盤擋住輸入框內容怎麽解決 262

11.3.14  怎麽判斷是否橫屏 263

11.3.15  移動端用過哪些meta標簽 263

11.3.16  移動端開發的兼容問題 266

11.3.17  頁面優化有哪些方法 266

11.3.18  移動端手勢操作有哪些，怎麽實現 269

11.4  名企真題解析 271

11.4.1  移動觸摸端怎麽應用幻燈片 271

11.4.2  電腦端與移動端在UI設計方面有什麽區別 272

11.4.3  視差滾動實現原理是什麽 273