Web前端實用技術(shù)示例教程

部分 初級篇?????????????????????????????????????????????????????????????????????????????????????????????????????????????1
1.1 一個簡單的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)元素與塊級元素？???????????????????????????????????????????????????????????????????????????????.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 什么是相對定位？如何相對定位？????????????????????????????????????????????????????????????????????????.26
1.10 什么是 定位？如何 定位？??????????????????????????????????????????????????????????????????????.28
1.11 如何讓文本水平居中？?????????????????????????????????????????????????????????????????????????????????????????.30
1.12 如何讓文本垂直居中？?????????????????????????????????????????????????????????????????????????????????????????.31
1.13 如何讓元素顯示在其他元素之上？??????????????????????????????????????????????????????????????????????.33
1.14 如何制作一面照片墻？?????????????????????????????????????????????????????????????????????????????????????????.35
1.15 input有多少種？????????????????????????????????????????????????????????????????????????????????????????????????????.37
1.15.1 傳統(tǒng)的10個輸入控件??????????????????????????????????????????????????????????????????????????????.37
1.15.2 新增的13個輸入控件??????????????????????????????????????????????????????????????????????????????.39
1.16 如何組合使用＜select＞和＜o(jì)ption＞標(biāo)簽？??????????????????????????????????????????????????????????????.43
1.17 為什么＜datalist＞標(biāo)簽靈活又方便？??????????????????????????????????????????????????????????????????????.45
1.18 顏色有哪幾種標(biāo)識方式？?????????????????????????????????????????????????????????????????????????????????????.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對象??????????????????????????????????????????????????????????????????????????????????????????.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 控制臺監(jiān)控???????????????????????????????????????????????????????????????????????????????????????????????.63
1.23 Document對象如何查找定位元素？????????????????????????????????????????????????????????????????????.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é)點？?????????????????????????????????????????????????????????????????.67
1.24.1 節(jié)點創(chuàng)建 API ????????????????????????????????????????????????????????????????????????????????????????????68
1.24.2 頁面修改API????????????????????????????????????????????????????????????????????????????????????????????.69
1.24.3 節(jié)點查詢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對象如何使用？????????????????????????????????????????????????????????????????????????.80
1.28.1 定義Date對象???????????????????????????????????????????????????????????????????????????????????????????.80
1.28.2 獲取Date對象的各個時間元素???????????????????????????????????????????????????????????????.80
1.29 JavaScript的Math對象如何使用？??????????????????????????????????????????????????????????????????????.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 對數(shù)、指數(shù)、冪函數(shù)????????????????????????????????????????????????????????????????????????????????.84
1.29.7 其他Math函數(shù)?????????????????????????????????????????????????????????????????????????????????????????.84
第二部分 進(jìn)階篇???????????????????????????????????????????????????????????????????????????????????????????????????????????85
2.1 如何使用background-clip屬性設(shè)置半透明邊框？????????????????????????????????????????????????.86
2.2 如何實現(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 實現(xiàn) 多角度的漸變條紋????????????????????????????????????????????????????????????????????????????.95
2.5.6 使用一種顏色實現(xiàn)同色系條紋????????????????????????????????????????????????????????????????????.96
2.6 如何設(shè)置CSS漸變效果？??????????????????????????????????????????????????????????????????????????????????????.97
2.6.1 設(shè)置網(wǎng)格圖案???????????????????????????????????????????????????????????????????????????????????????????????.97
2.6.2 設(shè)置波點圖案???????????????????????????????????????????????????????????????????????????????????????????????.97
2.6.3 設(shè)置棋盤圖案???????????????????????????????????????????????????????????????????????????????????????????????.98
2.7 如何實現(xiàn)背景的隨機效果？??????????????????????????????????????????????????????????????????????????????????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 如何實現(xiàn)文本的連字符斷行？???????????????????????????????????????????????????????????????????????????.118
2.16 如何插入換行？???????????????????????????????????????????????????????????????????????????????????????????????????.118
2.17 如何實現(xiàn)文本行條紋背景？????????????????????????????????????????????????????????????????????????????????121
2.18 如何調(diào)整Tab的寬度？????????????????????????????????????????????????????????????????????????????????????????122
2.19 如何擴大區(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 如何對＆字符進(jìn)行美化？?????????????????????????????????????????????????????????????????????????????????????132
2.25 如何自定義文本下畫線？????????????????????????????????????????????????????????????????????????????????????133
2.26 如何實現(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 什么是定時器？????????????????????????????????????????????????????????????????????????????????????????????????????145
2.30.1 setTimeout (Expression , DelayTime ) ?????????????????????????????????????????????????????.145
2.30.2 setInterval ( Expression,DelayTime ) ???????????????????????????????????????????????????????.145
2.30.3 clearTimeout (對象) ??????????????????????????????????????????????????????????????????????????????????146
2.30.4 clearInteval (對象) ????????????????????????????????????????????????????????????????????????????????????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 運用canvas繪圖??????????????????????????????????????????????????????????????????????????????????????149
2.32 canvas圖像技術(shù)有哪些？????????????????????????????????????????????????????????????????????????????????????153
2.32.1 drawImage ( )????????????????????????????????????????????????????????????????????????????????????????????153
2.32.2 getImageData ( )和putImageData ( ) ?????????????????????????????????????????????????????????156
第三部分 篇?????????????????????????????????????????????????????????????????????????????????????????????????????????157
3.1 如何實現(xiàn)環(huán)形文字效果？??????????????????????????????????????????????????????????????????????????????????????158
3.2 如何實現(xiàn)切角效果？??????????????????????????????????????????????????????????????????????????????????????????????159
3.2.1 CSS漸變方式??????????????????????????????????????????????????????????????????????????????????????????????159
3.2.2 CSS裁剪路徑方式??????????????????????????????????????????????????????????????????????????????????????161
3.3 如何實現(xiàn)梯形標(biāo)簽頁的效果？??????????????????????????????????????????????????????????????????????????????161
3.4 如何實現(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 如何實現(xiàn)毛玻璃效果？??????????????????????????????????????????????????????????????????????????????????????????175
3.9 如何實現(xiàn)模擬折角效果？??????????????????????????????????????????????????????????????????????????????????????179
3.9.1 45°折角????????????????????????????????????????????????????????????????????????????????????????????????????????179
3.9.2 其他角度折角??????????????????????????????????????????????????????????????????????????????????????????????180
3.10 如何實現(xiàn)自定義復(fù)選框？????????????????????????????????????????????????????????????????????????????????????183
3.10.1 自定義復(fù)選框??????????????????????????????????????????????????????????????????????????????????????????183
3.10.2 開關(guān)按鈕??????????????????????????????????????????????????????????????????????????????????????????????????185
3.11 如何實現(xiàn)輪播圖？????????????????????????????????????????????????????????????????????????????????????????????????186
3.12 如何設(shè)置背景的遮罩效果？????????????????????????????????????????????????????????????????????????????????190
3.12.1 偽元素??????????????????????????????????????????????????????????????????????????????????????????????????????190
3.12.2 box-shadow???????????????????????????????????????????????????????????????????????????????????????????????191
3.12.3 backdrop ???????????????????????????????????????????????????????????????????????????????????????????????????191
3.13 如何實現(xiàn)背景的弱化？????????????????????????????????????????????????????????????????????????????????????????192
3.14 什么是固定定位？????????????????????????????????????????????????????????????????????????????????????????????????194
3.15 如何設(shè)置背景圖集（一圖多用）？?????????????????????????????????????????????????????????????????????195
3.16 如何實現(xiàn)頁面滾動提示？????????????????????????????????????????????????????????????????????????????????????197
3.17 如何利用CSS實現(xiàn)圖片對比？???????????????????????????????????????????????????????????????????????????199
3.18 如何實現(xiàn)背景覆蓋和內(nèi)容定寬？?????????????????????????????????????????????????????????????????????????202
3.19 如何實現(xiàn)元素垂直居中？????????????????????????????????????????????????????????????????????????????????????204
3.20 如何設(shè)置頁面頁腳？????????????????????????????????????????????????????????????????????????????????????????????206
3.21 如何實現(xiàn)動畫的緩動效果？????????????????????????????????????????????????????????????????????????????????209
3.21.1 實現(xiàn)彈跳動畫的緩動效果???????????????????????????????????????????????????????????????????????209
3.21.2 實現(xiàn)彈性過渡效果???????????????????????????????????????????????????????????????????????????????????210
3.22 如何設(shè)置圖片逐幀顯示？????????????????????????????????????????????????????????????????????????????????????212
3.23 如何設(shè)置文字的閃爍效果？????????????????????????????????????????????????????????????????????????????????214
3.23.1 CSS 動畫實現(xiàn)??????????????????????????????????????????????????????????????????????????????????????????214
3.23.2 普通的閃爍效果???????????????????????????????????????????????????????????????????????????????????????215
3.24 如何實現(xiàn)文本內(nèi)容逐個顯示？????????????????????????????????????????????????????????????????????????????216
3.25 如何實現(xiàn)平滑的動畫效果？????????????????????????????????????????????????????????????????????????????????217
3.26 如何實現(xiàn)沿環(huán)形路徑平移的動畫效果？?????????????????????????????????????????????????????????????219
3.27 什么是CSS變量？???????????????????????????????????????????????????????????????????????????????????????????????222
3.27.1 CSS 中聲明一個變量???????????????????????????????????????????????????????????????????????????????222
3.27.2 使用JavaScript操作CSS變量???????????????????????????????????????????????????????????????223
3.28 如何編輯展示后的頁面？????????????????????????????????????????????????????????????????????????????????????225
3.29 如何利用CSS Grid實現(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對Object類型做了哪些升級優(yōu)化？???????????????????????????????????????????????????241
4.1.6 ES6對函數(shù)有哪些擴展？???????????????????????????????????????????????????????????????????????????243
4.1.7 解構(gòu)賦值的規(guī)則是什么？有哪些用途？????????????????????????????????????????????????????246
4.1.8 數(shù)組如何擴展？??????????????????????????????????????????????????????????????????????????????????????????248
4.1.9 什么是Number？????????????????????????????????????????????????????????????????????????????????????????252
4.1.10 JavaScript中如何聲明一個 “類”？??????????????????????????????????????????????????????????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 如何運用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項目？????????????????????????????????????????????????????????????????????????????????294
4.3.4 React如何渲染元素????????????????????????????????????????????????????????????????????????????????????296
4.3.5 什么是React組件？如何定義一個組件????????????????????????????????????????????????????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條件渲染如何實現(xiàn)？???????????????????????????????????????????????????????????????????????307
4.3.11 key的作用是什么？??????????????????????????????????????????????????????????????????????????????????309
4.3.12 受控組件與非受控組件有何區(qū)別？?????????????????????????????????????????????????????????310