前端程序員面試筆試通關(guān)寶典

第1章  面試禮儀和技巧  001
1.1  面試前的準(zhǔn)備  001
1.1.1  了解面試企業(yè)的基本情況以及企業(yè)文化  001
1.1.2  了解應(yīng)聘職位的招聘要求以及自身的優(yōu)勢(shì)和劣勢(shì)  003
1.1.3  簡(jiǎn)歷的投遞  003
1.1.4  禮貌答復(fù)面試或筆試通知  004
1.1.5  了解公司的面試流程  004
1.1.6  面試前的心理調(diào)節(jié)  006
1.1.7  儀容儀表  006
1.2  面試中的應(yīng)對(duì)技巧  006
1.2.1  自我介紹  007
1.2.2  面試中的基本禮儀  007
1.2.3  如何巧妙地回答面試官的問(wèn)題  008
1.2.4  如何回答技術(shù)性的問(wèn)題  009
1.2.5  如何應(yīng)對(duì)自己不會(huì)的題  009
1.2.6  如何回答非技術(shù)性的問(wèn)題  010
1.2.7  當(dāng)與面試官對(duì)某個(gè)問(wèn)題持有不同觀點(diǎn)時(shí)，應(yīng)如何應(yīng)對(duì)  010
1.2.8  如何向面試官提問(wèn)  011
1.2.9  明人“暗語(yǔ)”  011
1.3  面試結(jié)束  012
1.3.1  面試結(jié)束后是否會(huì)立即收到回復(fù)  013
1.3.2  面試沒(méi)有通過(guò)是否可以再次申請(qǐng)  013
1.3.3  怎樣處理錄用與被拒  013
1.3.4  錄用后的薪資談判  014
1.3.5  入職準(zhǔn)備  014
 
第2章  HTML 5  015
2.1  HTML 5基礎(chǔ)  015
2.1.1  基本結(jié)構(gòu)  015
2.1.2  HTML的發(fā)展史  016
2.1.3  HTML 5的優(yōu)勢(shì)  017
2.1.4  W3C標(biāo)準(zhǔn)  018
2.2  網(wǎng)頁(yè)標(biāo)簽  019
2.2.1  基本標(biāo)簽  019
2.2.2  圖像標(biāo)簽  022
2.2.3  鏈接標(biāo)簽  024
2.3  常用超鏈接  026
2.3.1  頁(yè)面間鏈接  026
2.3.2  錨鏈接  026
2.4  行內(nèi)元素和塊級(jí)元素  028
2.5  面試與筆試試題解析  031
2.5.1  怎樣區(qū)分HTML 5、HTML和XHTML  031
2.5.2  請(qǐng)闡述你對(duì)W3C的理解  032
2.5.3  HTML文檔中的DOCTYPE有什么作用  033
2.5.4  DOCTYPE文檔類型有幾種  033
2.5.5  Quirks模式是什么？它和Standards模式的區(qū)別  033
2.5.6  HTTP狀態(tài)碼  034
2.5.7  什么是IP地址  036
2.5.8  瀏覽器內(nèi)核  036
2.5.9  行內(nèi)元素和塊級(jí)元素  037
2.5.10  link和@import  038
2.5.11  HTML 5新特性和瀏覽器兼容  039
2.5.12  如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信  039
2.5.13  元素的alt和title有什么異同  040
2.5.14  CSS和JavaScript的文件和圖片  040
2.5.15  網(wǎng)頁(yè)中的亂碼原因  041
2.5.16  在目標(biāo)窗口中打開(kāi)超鏈接頁(yè)面的兩種方式是什么  041
2.6  名企真題解析  042
2.6.1  JavaScript放在HTML的不同位置有什么區(qū)別  042
2.6.2  HTML 5的離線存儲(chǔ)資源的管理和加載  042
2.6.3  封裝一個(gè)isInteger()函數(shù)，用于檢測(cè)傳入的值是整數(shù)  042
2.6.4  使用CSS實(shí)現(xiàn)水平垂直居中  043
2.6.5  輸完網(wǎng)址按Enter鍵，在這個(gè)過(guò)程中發(fā)生了什么  043
 
第3章  列表、表格、媒體元素和表單  044
3.1  列表  044
3.1.1  認(rèn)識(shí)列表  044
3.1.2  列表的分類  045
3.2  表格  047
3.2.1  基本語(yǔ)法  047
3.2.2  跨行和跨列  048
3.3  HTML 5的媒體元素  050
3.3.1  視頻元素  050
3.3.2  音頻元素  050
3.4  HTML 5的結(jié)構(gòu)元素  051
3.5  內(nèi)聯(lián)框架  055 3.6  表單  056
3.6.1  表單和表單元素  057
3.6.2  表單校驗(yàn)  060
3.6.3  正則表達(dá)式  061
3.7  面試與筆試試題解析  062
3.7.1  什么是列表以及列表的分類  063
3.7.2  常見(jiàn)的表單元素有哪些  063
3.7.3  表單提交的方式  064
3.7.4  制作下拉列表需要使用哪些表單元素  065
3.7.5  如何在頁(yè)面中使用音頻元素和視頻元素  066
3.7.6  定義列表的標(biāo)簽  066
3.7.7  為什么使用HTML 5結(jié)構(gòu)標(biāo)簽來(lái)布局網(wǎng)頁(yè)  067
3.7.8  使用什么屬性可以達(dá)到表單的初步驗(yàn)證  068
3.7.9  使用JavaScript去除字符串空格  068
3.7.10  在HTML 5中支持哪幾種列表  069
3.7.11  Web前端開(kāi)發(fā)，如何提高頁(yè)面性能優(yōu)化  070
3.7.12  iframe的優(yōu)缺點(diǎn)  070
3.8  名企真題解析  071
3.8.1  JavaScript的垃圾回收機(jī)制  071
3.8.2  如何制作語(yǔ)義化的表單  071
3.8.3  怎樣制作一個(gè)調(diào)查問(wèn)卷  072
3.8.4  如何使用表格制作流量查詢表  073
3.8.5  請(qǐng)說(shuō)出幾種減少頁(yè)面加載時(shí)間的方法  074
 
第4章  認(rèn)識(shí) CSS  075
4.1  CSS簡(jiǎn)介  075
4.2  CSS的基本語(yǔ)法  076
4.3  HTML中引入CSS樣式  076
4.3.1  行內(nèi)樣式表  076
4.3.2  內(nèi)部樣式表  077
4.3.3  鏈入外部樣式表  078
4.3.4  導(dǎo)入外部樣式表  078
4.4  CSS樣式優(yōu)先級(jí)  079
4.5  基本選擇器  079
4.5.1  標(biāo)簽選擇器  079
4.5.2  ID選擇器  080
4.5.3  類選擇器  080
4.6  高級(jí)選擇器  081
4.6.1  層次選擇器  081
4.6.2  復(fù)合選擇器  082
4.6.3  屬性選擇器  083
4.7  面試與筆試試題解析  084
4.7.1  什么是CSS  084
4.7.2  CSS優(yōu)先級(jí)算法如何計(jì)算  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實(shí)現(xiàn)一個(gè)三角形  087
4.7.8  瀏覽器怎樣解析CSS選擇器  088
4.7.9  請(qǐng)列舉幾種隱藏元素的方法  089
4.7.10  CSS 3的基本選擇器和語(yǔ)法規(guī)則  089
4.7.11  CSS 3的選擇符有哪些？哪些選擇符可以繼承  089
4.7.12  哪種方式可以對(duì)一個(gè)DOM設(shè)置其CSS樣式  089
4.7.13  什么是外邊距重疊？重疊的結(jié)果是什么  090
4.8  名企真題解析  090
4.8.1  CSS的文本替換省略號(hào)  090
4.8.2  如何使用CSS設(shè)置漸變效果  091
4.8.3  頁(yè)面實(shí)現(xiàn)等高布局  092
4.8.4  如何使用CSS設(shè)置背景樣式  093
 
第5章  CSS 3網(wǎng)頁(yè)制作和美化  095
5.1  span標(biāo)簽  095
5.2  文本樣式  096
5.3  超鏈接偽類  100
5.4  使用CSS設(shè)置超鏈接  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屬性制作動(dòng)畫  105
5.6.1  CSS 3變形  106
5.6.2  CSS 3過(guò)渡  107
5.6.3  CSS 3動(dòng)畫  110
5.7  面試與筆試試題解析  112
5.7.1  font屬性設(shè)置  112
5.7.2  在CSS中設(shè)置文本行高使用哪些屬性  112
5.7.3  全屏滾動(dòng)的原理以及用到的CSS屬性  113
5.7.4  CSS優(yōu)化、提高性能的方法有哪些  114
5.7.5  CSS 3的flexbox（彈性盒布局模型）  114
5.7.6  簡(jiǎn)單介紹什么是REST  115
5.7.7  使用CSS 3過(guò)渡有哪些觸發(fā)方式  115
5.7.8  圖片格式png、jpg和gif的使用  116
5.7.9  簡(jiǎn)單闡述圖像的預(yù)加載和懶加載  116
5.7.10  字號(hào)使用奇數(shù)還是偶數(shù)  117
5.7.11  undefined和null有哪些異同  117
5.7.12  first-child和first-of-type有什么區(qū)別  118
5.7.13  CSS中類選擇器和ID選擇器有哪些區(qū)別  118
5.7.14  CSS偽類與CSS偽對(duì)象的區(qū)別  118
5.7.15  position的absolute與fixed的共同點(diǎn)與不同點(diǎn)  118
5.8  名企真題解析  119
5.8.1  如何制作百度音樂(lè)標(biāo)簽頁(yè)面  119
5.8.2  如何制作新聞資訊頁(yè)  119
5.8.3  display:none與visibility:hidden的區(qū)別  121
5.8.4  如何制作家用電器商品分類頁(yè)面  122
5.8.5  暢銷書排行榜頁(yè)面怎樣實(shí)現(xiàn)  123
5.8.6  margin和padding分別適合什么場(chǎng)景使用  124
 
第6章  盒子模式和浮動(dòng)  125
6.1  盒子模型  125
6.1.1  盒子模型的組成  125
6.1.2  盒子模型的特征  127
6.2  盒子陰影  128
6.3  display屬性  128
6.4  浮動(dòng)  129
6.5  盒子模型的定位  130
6.6  溢出處理  131
6.7  inline-block和float的共性和區(qū)別  131
6.8  面試與筆試試題解析  132
6.8.1  position的定位屬性有哪些  132
6.8.2  什么叫Web安全色  133
6.8.3  如何清除一個(gè)網(wǎng)頁(yè)元素的浮動(dòng)  134
6.8.4  前端為什么提倡模塊化開(kāi)發(fā)  134
6.8.5  去掉網(wǎng)頁(yè)中超鏈接的藍(lán)色邊框  136
6.8.6  請(qǐng)說(shuō)說(shuō)你對(duì)元素浮動(dòng)float的理解  137
6.8.7  CSS中的@font-face有什么作用  138
6.8.8  定位absolute和浮動(dòng)float有哪些區(qū)別  138
6.8.9  有幾種方法可以解決父級(jí)邊框塌陷  139
6.8.10  CSS的盒子模型有哪些以及它們的區(qū)別  141
6.9  名企真題解析  141
6.9.1  如何實(shí)現(xiàn)一個(gè)圣杯布局  141
6.9.2  標(biāo)準(zhǔn)盒子模型和IE盒子模型的區(qū)別  144
6.9.3  如何判斷哪一年是閏年  145
6.9.4  編寫一個(gè)函數(shù)，用于清除字符串前后的空格  145
6.9.5  用伸縮盒子實(shí)現(xiàn)子元素的水平和垂直居中  147
 
第7章  定位網(wǎng)頁(yè)元素  150
7.1  定位  150
7.1.1  元素的定位屬性  150
7.1.2  靜態(tài)定位  151
7.1.3  相對(duì)定位  151
7.1.4  定位  151
7.1.5  固定定位  152
7.2  z-index屬性  153
7.2.1  z-index基礎(chǔ)  154
7.2.2  層疊上下文和層疊層  154
7.2.3  層疊次序  154
7.2.4  層級(jí)關(guān)系的比較  155
7.2.5  z-index規(guī)則  155
7.3  網(wǎng)頁(yè)元素透明度  156
7.4  面試與筆試試題解析  157
7.4.1  不同的定位方式有什么特性  157
7.4.2  什么是CSS Sprite  158
7.4.3  什么是設(shè)備像素比  158
7.4.4  全局函數(shù)eval()有什么作用  159
7.4.5  HTML中a標(biāo)簽的幾大作用  160
7.4.6  什么是錨點(diǎn)  162
7.4.7  z-index的用法  162
7.4.8  什么是分區(qū)響應(yīng)圖  163
7.4.9  在網(wǎng)頁(yè)中z-index對(duì)沒(méi)有設(shè)置定位的網(wǎng)頁(yè)元素是否有效  163
7.4.10  設(shè)置為relative對(duì)象的z-index屬性需要遵循什么規(guī)則  164
7.4.11  怎么比較z-index的優(yōu)先級(jí)  164
7.4.12  一個(gè)DOM元素綁定多個(gè)事件時(shí)，先執(zhí)行冒泡還是捕獲  165
7.4.13  元素位置重疊的可能原因  165
7.4.14  div元素的層疊次序  166
7.4.15  IE怎么設(shè)置頁(yè)面的透明度  167
7.4.16  怎么解決div相互層疊覆蓋問(wèn)題  168
7.4.17  哪些方式可以創(chuàng)建層疊上下文  168
7.5  名企真題解析  169
7.5.1  在CSS中使用什么方式可以設(shè)置網(wǎng)頁(yè)元素的透明度  169
7.5.2  請(qǐng)列舉幾個(gè)HTML 5新增的圖像相關(guān)的語(yǔ)義化元素  170
7.5.3  如何獲得頁(yè)面上元素的背景色  170
7.5.4  如何設(shè)計(jì)一個(gè)浮動(dòng)中的元素水平居中  171
7.5.5  JavaScript尋找當(dāng)前頁(yè)面中的z-index值的方法  171
 
第8章  腳本語(yǔ)言  174
8.1  JavaScript  174
8.1.1  組成結(jié)構(gòu)  174
8.1.2  核心語(yǔ)法  175
8.1.3  函數(shù)定義和調(diào)用  177
8.1.4  JavaScript操作BOM對(duì)象  177
8.1.5  JavaScript操作DOM對(duì)象  178
8.2  jQuery  180
8.2.1  jQuery工作原理  180
8.2.2  事件與動(dòng)畫  181
8.2.3  使用jQuery操作DOM  183
8.2.4  jQuery HTML  184
8.3  面試與筆試試題解析  185
8.3.1  在HTML頁(yè)面中如何引用JavaScript  185
8.3.2  如何實(shí)現(xiàn)DOM對(duì)象和jQuery對(duì)象間的轉(zhuǎn)化  186
8.3.3  如何按層次關(guān)系訪問(wèn)節(jié)點(diǎn)  186
8.3.4  列出實(shí)現(xiàn)不同模塊之間通信的方式  188
8.3.5  如何使用jQuery實(shí)現(xiàn)隔行變色的效果  188
8.3.6  原生JavaScript獲取節(jié)點(diǎn)的方法  189
8.3.7  如何改變?yōu)g覽器地址欄中的網(wǎng)址  190
8.3.8  jQuery操作select下拉框的多種方法  190
8.3.9  如何用jQuery來(lái)創(chuàng)建插件  191
8.3.10  在jQuery中使用什么方法可控制元素的淡入和淡出  192
8.3.11  jQuery中.css()與.addClass()設(shè)置樣式的區(qū)別  193
8.3.12  JavaScript訪問(wèn)HTML元素的幾種方式  194
8.3.13  簡(jiǎn)述JavaScript中的12種DOM節(jié)點(diǎn)類型  194
8.3.14  controller as和controller有什么區(qū)別，能解決什么問(wèn)題?  196
8.3.15  請(qǐng)指出JavaScript宿主對(duì)象和原生對(duì)象的區(qū)別  196
8.3.16  請(qǐng)解釋JavaScript中this是如何工作的  197
8.3.17  請(qǐng)解釋JSONP的工作原理  197
8.4  名企真題解析  198
8.4.1  何如使用JavaScript實(shí)現(xiàn)冒泡排序  198
8.4.2  如何取消$timeout以及停止一個(gè)$watch()  199
8.4.3  在網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)，能夠動(dòng)態(tài)顯示“某天某時(shí)某分某秒”  199
8.4.4  在jQuery中顯示和隱藏HTML元素的方法分別是什么  200
 
第9章  前端流行框架  202
9.1  Vue.js  202
9.1.1  Vue.js簡(jiǎn)介  202
9.1.2  基礎(chǔ)語(yǔ)法  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表達(dá)式  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的雙向數(shù)據(jù)綁定原理是什么  211
9.3.2  如何優(yōu)化臟檢查與運(yùn)行效率  211
9.3.3  談?wù)勀銓?duì)Vue.js是一套漸進(jìn)式框架的理解  212
9.3.4  在Vue.js中組件之間的傳值如何實(shí)現(xiàn)  213
9.3.5  v-if和v-show有什么區(qū)別  213
9.3.6  什么是$rootScrope以及和$scope有什么區(qū)別  214
9.3.7  如何在頁(yè)面上實(shí)現(xiàn)前進(jìn)、后退  214
9.3.8  什么是Vue的計(jì)算屬性  215
9.3.9  在Angular中是否可以使用jQuery  216
9.3.10  請(qǐng)簡(jiǎn)述$compile的用法  216
9.4  名企真題解析  217
9.4.1  Vue項(xiàng)目的搭建步驟  217
9.4.2  vue-router有哪幾種導(dǎo)航鉤子（導(dǎo)航守衛(wèi)）  217
9.4.3  請(qǐng)寫出完整的vue-router導(dǎo)航解析流程  219
 
第10章  BootStrap  221
10.1  響應(yīng)式布局  221
10.2  BootStrap樣式  222
10.3  BootStrap組件  224
10.4  JavaScript插件  227
10.5  精選面試與筆試題解析  228
10.5.1  簡(jiǎn)單描述BootStrap的整體架構(gòu)  228
10.5.2  什么是BootStrap柵格系統(tǒng)，為什么要使用BootStrap  229
10.5.3  使用BootStrap的基本HTML模板必需要引入什么文件  230
10.5.4  寫出基本下拉菜單組件的結(jié)構(gòu)  231
10.5.5  BootStrap有哪些插件，分別是什么  231
10.5.6  動(dòng)畫過(guò)渡插件應(yīng)用在其他的哪些插件中  232
10.5.7  如何設(shè)置模態(tài)框尺寸大  233
10.5.8  BootStrap常用的組件有哪些  233
10.5.9  旋轉(zhuǎn)輪播有哪些方法  234
10.5.10  BootStrap導(dǎo)航欄中有哪些功能  234
10.5.11  布局有幾種方式  236
10.5.12  Flex布局有哪幾種屬性  237
10.5.13  媒體查詢有哪些屬性  238
10.5.14  響應(yīng)式布局的優(yōu)點(diǎn)和缺點(diǎn)是什么  239
10.5.15  HTML中適合做按鈕的元素是什么  240
10.5.16  寫出BootStrap中基礎(chǔ)的表單結(jié)構(gòu)  240
10.5.17  BootStrap有什么特點(diǎn)  241
10.5.18  組件、控件和插件的區(qū)別  242
10.5.19  BootStrap網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理  242
10.6  名企真題解析  243
10.6.1  BootStrap表格有哪些可選樣式  243
10.6.2  如果網(wǎng)頁(yè)內(nèi)容需要支持多語(yǔ)言，應(yīng)該怎么做  244
10.6.3  BootStrap中Class怎么命名  245
 
第11章  Web頁(yè)面開(kāi)發(fā)  246
11.1  移動(dòng)Web頁(yè)面開(kāi)發(fā)  246
11.1.1  移動(dòng)開(kāi)發(fā)測(cè)試瀏覽器  246
11.1.2  移動(dòng)端視口及視口標(biāo)簽  247
11.1.3  移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)  248
11.1.4  設(shè)備像素比  249
11.2  移動(dòng)Web特效開(kāi)發(fā)  249
11.2.1  移動(dòng)端事件  249
11.2.2  zepto框架  251
11.3  面試與筆試試題解析  252
11.3.1  相對(duì)單位rem的特性是什么  252
11.3.2  移動(dòng)網(wǎng)頁(yè)開(kāi)發(fā)與計(jì)算機(jī)網(wǎng)頁(yè)開(kāi)發(fā)有什么區(qū)別  252
11.3.3  移動(dòng)開(kāi)發(fā)測(cè)試瀏覽器有什么差異  253
11.3.4  移動(dòng)端視口有哪些  254
11.3.5  px、em和rem有什么區(qū)別  255
11.3.6  實(shí)現(xiàn)Web App屏幕適配的方法有哪些  256
11.3.7  寫出CSS 3變形、過(guò)渡、動(dòng)畫的語(yǔ)法和采用的屬性  257
11.3.8  簡(jiǎn)述jQuery與zepto的異同  258
11.3.9  zepto的點(diǎn)透問(wèn)題如何解決  259
11.3.10  理想視口是什么，怎么實(shí)現(xiàn)理想視口  260
11.3.11  什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)  260
11.3.12  怎么解決移動(dòng)端300ms點(diǎn)擊延遲  261
11.3.13  固定定位布局時(shí)鍵盤擋住輸入框內(nèi)容怎么解決  262
11.3.14  怎么判斷是否橫屏  263
11.3.15  移動(dòng)端用過(guò)哪些meta標(biāo)簽  263
11.3.16  移動(dòng)端開(kāi)發(fā)的兼容問(wèn)題  266
11.3.17  頁(yè)面優(yōu)化有哪些方法  266
11.3.18  移動(dòng)端手勢(shì)操作有哪些，怎么實(shí)現(xiàn)  269
11.4  名企真題解析  271
11.4.1  移動(dòng)觸摸端怎么應(yīng)用幻燈片  271
11.4.2  計(jì)算機(jī)端與移動(dòng)端在UI設(shè)計(jì)方面有什么區(qū)別  272
11.4.3  視差滾動(dòng)實(shí)現(xiàn)原理是什么  273