第一部分 初級(jí)篇·············································································································1
1.1 一個(gè)簡單的HTML5頁面代碼是什么樣子的？·······················································.2
1.2 ＜html＞、＜body＞、＜head＞標(biāo)簽真的可以省略嗎？··················································.2
1.3 如何安裝與使用Sublime Text? ·················································································.4
1.3.1 安裝步驟·········································································································.4
1.3.2 使用·················································································································.5
1.4 什么是tableless design頁面布局？········································································.11
1.4.1 table布局······································································································.11
1.4.2 DIV+CSS 布局······························································································.13
1.5 什么是行內(nèi)元素與塊級(jí)元素？···············································································.14
1.6 什么是元素套框結(jié)構(gòu)？···························································································.19
1.7 如何選擇正確的列表標(biāo)簽？···················································································.22
1.7.1 無序列表·······································································································.22
1.7.2 有序列表·······································································································.23
1.7.3 定義列表·······································································································.24
1.8 什么是文檔流？·······································································································.25
1.9 什么是相對(duì)定位？如何相對(duì)定位？········································································.26
1.10 什么是絕對(duì)定位？如何絕對(duì)定位？······································································.28
1.11 如何讓文本水平居中？·························································································.30
1.12 如何讓文本垂直居中？·························································································.31
1.13 如何讓元素顯示在其他元素之上？······································································.33
1.14 如何制作一面照片墻？·························································································.35
1.15 input有多少種？····································································································.37
1.15.1 傳統(tǒng)的10個(gè)輸入控件··············································································.37
1.15.2 新增的13個(gè)輸入控件··············································································.39
1.16 如何組合使用＜select＞和＜o(jì)ption＞標(biāo)簽？······························································.43
1.17 為什么＜datalist＞標(biāo)簽靈活又方便？······································································.45
1.18 顏色有哪幾種標(biāo)識(shí)方式？·····················································································.47
1.18.1 英文單詞表示顏色····················································································.47
1.18.2 十六進(jìn)制表示顏色····················································································.48
1.18.3 RGB表示顏色··························································································.49
1.18.4 HSL表示顏色···························································································.50
1.19 CSS的光標(biāo)功能有哪些？·····················································································.51
1.19.1 新的內(nèi)建光標(biāo)···························································································.51
1.19.2 not-allowed光標(biāo)·······················································································.51
1.19.3 none隱藏光標(biāo)···························································································.52
1.20 如何使用多媒體標(biāo)簽？·························································································.52
1.20.1 ＜embed＞標(biāo)簽····························································································.52
1.20.2 ＜video＞標(biāo)簽······························································································.53
1.20.3 ＜audio＞標(biāo)簽······························································································.54
1.21 CSS屬性在JavaScript中如何使用？···································································.54
1.21.1 讀寫行內(nèi)樣式···························································································.54
1.21.2 使用style對(duì)象··························································································.55
1.21.3 編輯樣式···································································································.58
1.21.4 讀取媒體查詢···························································································.58
1.21.5 使用CSS 事件··························································································.59
1.22 JavaScript定位DOM元素的幾種方式·································································.61
1.22.1 顯示信息交互···························································································.61
1.22.2 控制臺(tái)監(jiān)控·······························································································.63
1.23 Document對(duì)象如何查找定位元素？····································································.64
1.23.1 getElementById( )定位··············································································.64
1.23.2 getElementsByClassName( )定位······························································.64
1.23.3 getElementsByTagName( )定位·································································.65
1.23.4 querySelector( )定位··················································································.67
1.24 JavaScript如何操縱DOM元素節(jié)點(diǎn)？·································································.67
1.24.1 節(jié)點(diǎn)創(chuàng)建 API ····························································································68
1.24.2 頁面修改API····························································································.69
1.24.3 節(jié)點(diǎn)查詢API····························································································.70
1.25 JavaScript如何操縱DOM元素屬性？·································································.72
1.26 JavaScript數(shù)組的創(chuàng)建方式有哪些？····································································.74
1.26.1 字面量表示法···························································································.74
1.26.2 使用Array( )構(gòu)造函數(shù)··············································································.74
1.26.3 使用Array(n)構(gòu)造函數(shù)·············································································.74
1.27 JavaScript數(shù)組函數(shù)如何使用？············································································.75
1.27.1 pop( )和push( )···························································································.75
1.27.2 shift( )和unshift( ) ······················································································.75
1.27.3 join( ) ··········································································································76
1.27.4 sort( ) ··········································································································76
1.27.5 reverse( ) ·····································································································76
1.27.6 splice( ) ·······································································································77
1.27.7 slice( ) ·········································································································77
1.27.8 concat( ) ······································································································78
1.27.9 indexOf( )和lastIndex( )·············································································.78
1.27.10 every( )和some( ) ·····················································································.78
1.27.11 fill( ) ··········································································································79
1.27.12 filter( )·······································································································79
1.27.13 find( )和findindex( )·················································································.79
1.27.14 map( )········································································································80
1.27.15 toString( )··································································································80
1.28 JavaScript 的Date對(duì)象如何使用？········································································.80
1.28.1 定義Date對(duì)象···························································································.80
1.28.2 獲取Date對(duì)象的各個(gè)時(shí)間元素·······························································.80
1.29 JavaScript的Math對(duì)象如何使用？······································································.82
1.29.1 Math.random( ) ···························································································82
1.29.2 Math.abs( ) ··································································································83
1.29.3 Math.max( )和Math.min( )········································································.83
1.29.4 取整函數(shù)···································································································.83
1.29.5 Math.sqrt( ) ·································································································84
1.29.6 對(duì)數(shù)、指數(shù)、冪函數(shù)················································································.84
1.29.7 其他Math函數(shù)·························································································.84
第二部分 進(jìn)階篇···········································································································85
2.1 如何使用background-clip屬性設(shè)置半透明邊框？················································.86
2.2 如何實(shí)現(xiàn)多重邊框的效果？···················································································.87
2.2.1 box-shadow·····································································································87
2.2.2 outline·············································································································87
2.3 如何改變背景圖的定位？·······················································································.88
2.4 如何設(shè)置邊框內(nèi)圓角效果？···················································································.89
2.5 如何設(shè)置多樣式背景？···························································································.92
2.5.1 生成條紋背景·······························································································.92
2.5.2 修改背景大小·······························································································.93
2.5.3 生成垂直條紋·······························································································.94
2.5.4 生成斜向條紋·······························································································.94
2.5.5 實(shí)現(xiàn)更多角度的漸變條紋············································································.95
2.5.6 使用一種顏色實(shí)現(xiàn)同色系條紋····································································.96
2.6 如何設(shè)置CSS漸變效果？······················································································.97
2.6.1 設(shè)置網(wǎng)格圖案·······························································································.97
2.6.2 設(shè)置波點(diǎn)圖案·······························································································.97
2.6.3 設(shè)置棋盤圖案·······························································································.98
2.7 如何實(shí)現(xiàn)背景的隨機(jī)效果？··················································································100
2.8 如何設(shè)置裝飾性的圖片邊框？··············································································102
2.9 如何設(shè)置靈活的橢圓？··························································································103
2.9.1 設(shè)置自適應(yīng)橢圓··························································································104
2.9.2 設(shè)置自適應(yīng)半橢圓·······················································································105
2.9.3 設(shè)置四分之一橢圓·······················································································106
2.10 什么是偽類？········································································································107
2.10.1 :hover 偽類·······························································································107
2.10.2 :nth-child(n)偽類······················································································107
2.10.3 :nth-of-type(n)偽類···················································································108
2.11 什么是偽元素？····································································································108
2.11.1 ::first-line偽元素······················································································109
2.11.2 ::first-letter偽元素····················································································109
2.11.3 ::before和::after偽元素···········································································109
2.12 如何根據(jù)子元素的數(shù)量來設(shè)置樣式？································································.110
2.13 如何將矩形框修改為平行四邊形框？································································.113
2.14 如何將圖片裁剪成菱形？···················································································.115
2.15 如何實(shí)現(xiàn)文本的連字符斷行？···········································································.118
2.16 如何插入換行？···································································································.118
2.17 如何實(shí)現(xiàn)文本行條紋背景？················································································121
2.18 如何調(diào)整Tab的寬度？························································································122
2.19 如何擴(kuò)大區(qū)域范圍？····························································································123
2.20 如何設(shè)置CSS元素寬度自適應(yīng)內(nèi)部元素？························································124
2.21 如何精確控制表格列寬？····················································································127
2.22 如何設(shè)置連字的字形？························································································129
2.23 什么是圖標(biāo)字體？································································································130
2.24 如何對(duì)＆字符進(jìn)行美化？·····················································································132
2.25 如何自定義文本下畫線？····················································································133
2.26 如何實(shí)現(xiàn)多種文字效果？····················································································135
2.26.1 凸起效果··································································································135
2.26.2 描邊效果··································································································136
2.26.3 發(fā)光效果··································································································137
2.26.4 3D效果····································································································138
2.27 什么是JavaScript的順序結(jié)構(gòu)？··········································································139
2.28 什么是JavaScript的分支結(jié)構(gòu)？··········································································139
2.28.1 if語句·······································································································139
2.28.2 if…else語句·····························································································140
2.28.3 多重if…else語句····················································································140
2.28.4 嵌套if…else語句····················································································141
2.28.5 switch case語句·······················································································141
2.29 什么是Java Script的循環(huán)結(jié)構(gòu)？·········································································142
2.29.1 for循環(huán)·····································································································143
2.29.2 while循環(huán)································································································143
2.29.3 do…while循環(huán)·························································································143
2.29.4 for…in循環(huán)······························································································144
2.29.5 break和continue······················································································144
2.30 什么是定時(shí)器？····································································································145
2.30.1 setTimeout (Expression , DelayTime ) ·····················································.145
2.30.2 setInterval ( Expression,DelayTime ) ·······················································.145
2.30.3 clearTimeout (對(duì)象) ··················································································146
2.30.4 clearInteval (對(duì)象) ····················································································146
2.31 canvas繪圖技術(shù)有哪些？····················································································147
2.31.1 ＜canvas＞標(biāo)簽的基本繪圖步驟································································147
2.31.2 canvas 繪圖中的基本方法·······································································148
2.31.3 線型相關(guān)屬性··························································································148
2.31.4 運(yùn)用canvas繪圖······················································································149
2.32 canvas圖像技術(shù)有哪些？····················································································153
2.32.1 drawImage ( )····························································································153
2.32.2 getImageData ( )和putImageData ( ) ·························································156
第三部分 高級(jí)篇·········································································································157
3.1 如何實(shí)現(xiàn)環(huán)形文字效果？······················································································158
3.2 如何實(shí)現(xiàn)切角效果？······························································································159
3.2.1 CSS漸變方式······························································································159
3.2.2 CSS裁剪路徑方式······················································································161
3.3 如何實(shí)現(xiàn)梯形標(biāo)簽頁的效果？··············································································161
3.4 如何實(shí)現(xiàn)簡單餅圖效果？······················································································162
3.4.1 transform·······································································································163
3.4.2 SVG··············································································································167
3.5 如何添加多樣式背景投影？··················································································170
3.5.1 背景的單側(cè)投影··························································································170
3.5.2 背景的鄰邊投影··························································································171
3.5.3 背景的雙側(cè)投影··························································································171
3.6 如何給不規(guī)則圖形設(shè)置陰影？··············································································172
3.7 如何給圖片添加染色效果？··················································································173
3.7.1 濾鏡（filter）·······························································································173
3.7.2 混合模式······································································································174
3.8 如何實(shí)現(xiàn)毛玻璃效果？··························································································175
3.9 如何實(shí)現(xiàn)模擬折角效果？······················································································179
3.9.1 45°折角········································································································179
3.9.2 其他角度折角······························································································180
3.10 如何實(shí)現(xiàn)自定義復(fù)選框？····················································································183
3.10.1 自定義復(fù)選框··························································································183
3.10.2 開關(guān)按鈕··································································································185
3.11 如何實(shí)現(xiàn)輪播圖？································································································186
3.12 如何設(shè)置背景的遮罩效果？················································································190
3.12.1 偽元素······································································································190
3.12.2 box-shadow·······························································································191
3.12.3 backdrop ···································································································191
3.13 如何實(shí)現(xiàn)背景的弱化？························································································192
3.14 什么是固定定位？································································································194
3.15 如何設(shè)置背景圖集（一圖多用）？·····································································195
3.16 如何實(shí)現(xiàn)頁面滾動(dòng)提示？····················································································197
3.17 如何利用CSS實(shí)現(xiàn)圖片對(duì)比？···········································································199
3.18 如何實(shí)現(xiàn)背景覆蓋和內(nèi)容定寬？·········································································202
3.19 如何實(shí)現(xiàn)元素垂直居中？····················································································204
3.20 如何設(shè)置頁面頁腳？····························································································206
3.21 如何實(shí)現(xiàn)動(dòng)畫的緩動(dòng)效果？················································································209
3.21.1 實(shí)現(xiàn)彈跳動(dòng)畫的緩動(dòng)效果·······································································209
3.21.2 實(shí)現(xiàn)彈性過渡效果···················································································210
3.22 如何設(shè)置圖片逐幀顯示？····················································································212
3.23 如何設(shè)置文字的閃爍效果？················································································214
3.23.1 CSS 動(dòng)畫實(shí)現(xiàn)··························································································214
3.23.2 普通的閃爍效果·······················································································215
3.24 如何實(shí)現(xiàn)文本內(nèi)容逐個(gè)顯示？············································································216
3.25 如何實(shí)現(xiàn)平滑的動(dòng)畫效果？················································································217
3.26 如何實(shí)現(xiàn)沿環(huán)形路徑平移的動(dòng)畫效果？·····························································219
3.27 什么是CSS變量？·······························································································222
3.27.1 CSS 中聲明一個(gè)變量···············································································222
3.27.2 使用JavaScript操作CSS變量·······························································223
3.28 如何編輯展示后的頁面？····················································································225
3.29 如何利用CSS Grid實(shí)現(xiàn)響應(yīng)式布局？·······························································226
第四部分 框架篇·········································································································231
4.1 ES6框架··················································································································232
4.1.1 ECMAScript是什么？它與JavaScript有什么關(guān)系？·······························232
4.1.2 ES6中的let、const關(guān)鍵字有什么區(qū)別，如何使用它們？······················232
4.1.3 ES6用什么更簡單的方法處理字符串？····················································234
4.1.4 Set和Map是什么？有什么作用？····························································236
4.1.5 ES6對(duì)Object類型做了哪些升級(jí)優(yōu)化？···················································241
4.1.6 ES6對(duì)函數(shù)有哪些擴(kuò)展？···········································································243
4.1.7 解構(gòu)賦值的規(guī)則是什么？有哪些用途？····················································246
4.1.8 數(shù)組如何擴(kuò)展？··························································································248
4.1.9 什么是Number？························································································252
4.1.10 JavaScript中如何聲明一個(gè) “類”？··························································254
4.1.11 如何優(yōu)雅地處理異步操作？·····································································257
4.1.12 ES6中的Proxy有什么作用？··································································263
4.1.13 什么是JavaScript Generator？···································································266
4.2 Bootstrap框架·········································································································270
4.2.1 Bootstrap是什么？為什么使用它？···························································270
4.2.2 如何開始使用Bootstrap?·············································································271
4.2.3 如何運(yùn)用Bootstrap進(jìn)行自適應(yīng)？······························································273
4.2.4 如何使用Bootstrap的組件？······································································276
4.2.5 如何使用Bootstrap工具類？······································································289
4.3 React 框架··············································································································292
4.3.1 為什么要使用React？·················································································292
4.3.2 什么是JSX語法？······················································································293
4.3.3 如何創(chuàng)建React項(xiàng)目？················································································294
4.3.4 React如何渲染元素?···················································································296
4.3.5 什么是React組件？如何定義一個(gè)組件?···················································297
4.3.6 如何給React組件添加樣式？····································································299
4.3.7 state與props有何區(qū)別？············································································301
4.3.8 React生命周期有哪些？·············································································302
4.3.9 React元素的事件處理有何不同？·····························································305
4.3.10 React條件渲染如何實(shí)現(xiàn)？·······································································307
4.3.11 key的作用是什么？··················································································309
4.3.12 受控組件與非受控組件有何區(qū)別？·························································310