Web 前端實用技術示例教程

本書以問答的方式介紹Web 前端的相關知識，分為初級篇、進階篇、高級篇、框架篇；內容包括JavaScript、HTML、CSS的基礎知識，邊框效果、背景效果、形狀效果、陰影效果、動畫效果，文本、字體技術，選擇器、定時器，canvas繪圖，定位，圖片、背景美化，ES6框架、Bootstrap框架、React框架。

廖雪花，副教授，川師範大學計算機科學學院計算機系主任，長期從事計算機應用技術、系統開發與集成的教學工作。

**部分 初級篇·1
1.1 一個簡單的HTML5頁面代碼是什麼樣子的？ .2
1.2 ＜html＞、＜body＞、＜head＞標籤真的可以省略嗎？ ··.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 什麼是行內元素與塊級元素？ .14
1.6 什麼是元素套框結構？ .19
1.7 如何選擇正確的列表標籤？ .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 inut有多少種？ .37
1.15.1 傳統的10個輸入控件··.37
1.15.2 新增的13個輸入控件··.39
1.16 如何組合使用＜select＞和＜tion＞標籤？ ··.43
1.17 為什麼＜datalist＞標籤靈活又方便？ ··.45
1.18 顏色有哪幾種標識方式？ ·.47
1.18.1 英文單詞表示顏色.47
1.18.2 十六製表示顏色.48
1.18.3 RGB表示顏色··.49
1.18.4 HSL表示顏色.50
1.19 CSS的光標功能有哪些？ ·.51
1.19.1 新的內建光標.51
1.19.2 not-allowed光標.51
1.19.3 none隱藏光標.52
1.20 如何使用多媒體標籤？ ·.52
1.20.1 ＜embed＞標籤.52
1.20.2 ＜video＞標籤··.53
1.20.3 ＜audio＞標籤··.54
1.21 CSS屬性在JavaScrit中如何使用？ .54
1.21.1 讀寫行內樣式.54
1.21.2 使用style對象··.55
1.21.3 編輯樣式.58
1.21.4 讀取媒體查詢.58
1.21.5 使用CSS 事件··.59
1.22 JavaScrit定位DOM元素的幾種方式·.61
1.22.1 顯示信息交互.61
1.22.2 控制台監控.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 JavaScrit如何操縱DOM元素節點？ ·.67
1.24.1 節點創建 AI 68
1.24.2 頁面修改AI.69
1.24.3 節點查詢AI.70
1.25 JavaScrit如何操縱DOM元素屬性？ ·.72
1.26 JavaScrit數組的創建方式有哪些？ .74
1.26.1 字面量表示法.74
1.26.2 使用Array( )構造函數··.74
1.26.3 使用Array(n)構造函數·.74
1.27 JavaScrit數組函數如何使用？ .75
1.27.1 ( )和ush( ).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 slice( ) 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 ma( )80
1.27.15 toString( )··80
1.28 JavaScrit 的Date對像如何使用？ .80
1.28.1 定義Date對象.80
1.28.2 獲取Date對象的各個時間元素.80
1.29 JavaScrit的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 取整函數.83
1.29.5 Math.sqrt( ) ·84
1.29.6 對數、指數、冪函數.84
1.29.7 其他Math函數·.84
第二部分 階篇85
2.1 如何使用background-cli屬性設置半透明邊框？ .86
2.2 如何實現多重邊框的效果？ .87
2.2.1 box-shadow·87
2.2.2 outline·87
2.3 如何改變背景圖的定位？ .88
2.4 如何設置邊框內圓角效果？ .89
2.5 如何設置多樣式背景？ .92
2.5.1 生成條紋背景.92
2.5.2 修改背景大小.93
2.5.3 生成垂直條紋.94
2.5.4 生成斜向條紋.94
2.5.5 實現更多角度的漸變條紋.95
2.5.6 使用一種顏色實現同色系條紋.96
2.6 如何設置CSS漸變效果？ ··.97
2.6.1 設置網格圖案.97
2.6.2 設置波點圖案.97
2.6.3 設置棋盤圖案.98
2.7 如何實現背景的隨機效果？ ··100
2.8 如何設置裝飾性的圖片邊框？ ··102
2.9 如何設置靈活的橢圓？ ··103
2.9.1 設置自適應橢圓··104
2.9.2 設置自適應半橢圓105
2.9.3 設置四分之一橢圓106
2.10 什麼是偽類？ 107
2.10.1 :hover 偽類107
2.10.2 :nth-child(n)偽類··107
2.10.3 :nth-of-tye(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 如何根據子元素的數量來設置樣式？ .110
2.13 如何將矩形框修改為平行四邊形框？ .113
2.14 如何將圖片裁剪成菱形？ .115
2.15 如何實現文本的連字符斷行？ .118
2.16 如何插入換行？ .118
2.17 如何實現文本行條紋背景？ 121
2.18 如何調整Tab的寬度？ 122
2.19 如何擴大區域範圍？ 123
2.20 如何設置CSS元素寬度自適應內部元素？ 124
2.21 如何控製表格列寬？ 127
2.22 如何設置連字的字形？ 129
2.23 什麼是圖標字體？ 130
2.24 如何對＆字符行美化？ ·132
2.25 如何自定義文本下畫線？ 133
2.26 如何實現多種文字效果？ 135
2.26.1 凸起效果··135
2.26.2 描邊效果··136
2.26.3 發光效果··137
2.26.4 3D效果138
2.27 什麼是JavaScrit的順序結構？ ··139
2.28 什麼是JavaScrit的分支結構？ ··139
2.28.1 if語句139
2.28.2 ifelse語句·140
2.28.3 多重ifelse語句140
2.28.4 嵌套ifelse語句141
2.28.5 switch case語句141
2.29 什麼是Java Scrit的循環結構？ ·142
2.29.1 for循環·143
2.29.2 while循環143
2.29.3 dowhile循環·143
2.29.4 forin循環··144
2.29.5 break和continue··144
2.30 什麼是定時器？ 145
2.30.1 setTimeout (Exression , DelayTime ) ·.145
2.30.2 setInterval ( Exression,DelayTime ) .145
2.30.3 clearTimeout (對象) ··146
2.30.4 clearInteval (對象) 146
2.31 canvas繪圖技術有哪些？ 147
2.31.1 ＜canvas＞標籤的基本繪圖步驟147
2.31.2 canvas 繪圖中的基本方法148
2.31.3 線型相關屬性··148
2.31.4 運用canvas繪圖··149
2.32 canvas圖像技術有哪些？ 153
2.32.1 drawImage ( )153
2.32.2 getImageData ( )和utImageData ( ) ·156
第三部分 高級篇·157
3.1 如何實現環形文字效果？ ··158
3.2 如何實現切角效果？ ··159
3.2.1 CSS漸變方式··159
3.2.2 CSS裁剪路徑方式··161
3.3 如何實現梯形標籤頁的效果？ ··161
3.4 如何實現簡單餅圖效果？ ··162
3.4.1 transform163
3.4.2 SVG··167
3.5 如何添加多樣式背景投影？ ··170
3.5.1 背景的單側投影··170
3.5.2 背景的鄰邊投影··171
3.5.3 背景的雙側投影··171
3.6 如何給不規則圖形設置陰影？ ··172
3.7 如何給圖片添加染色效果？ ··173
3.7.1 濾鏡（filter）173
3.7.2 混合模式··174
3.8 如何實現毛玻璃效果？ ··175
3.9 如何實現模擬折角效果？ ··179
3.9.1 45°折角179
3.9.2 其他角度折角··180
3.10 如何實現自定義復選框？ 183
3.10.1 自定義復選框··183
3.10.2 開關按鈕··185
3.11 如何實現輪播圖？ 186
3.12 如何設置背景的遮罩效果？ 190
3.12.1 偽元素··190
3.12.2 box-shadow191
3.12.3 backdr 191
3.13 如何實現背景的弱化？ 192
3.14 什麼是固定定位？ 194
3.15 如何設置背景圖集（一圖多用）？ ·195
3.16 如何實現頁面滾動提示？ 197
3.17 如何利用CSS實現圖片對比？ 199
3.18 如何實現背景覆蓋和內容定寬？ ·202
3.19 如何實現元素垂直居中？ 204
3.20 如何設置頁面頁腳？ 206
3.21 如何實現動畫的緩動效果？ 209
3.21.1 實現彈跳動畫的緩動效果209
3.21.2 實現彈性過渡效果210
3.22 如何設置圖片逐幀顯示？ 212
3.23 如何設置文字的閃爍效果？ 214
3.23.1 CSS 動畫實現··214
3.23.2 普通的閃爍效果215
3.24 如何實現文本內容逐個顯示？ 216
3.25 如何實現平滑的動畫效果？ 217
3.26 如何實現沿環形路徑平移的動畫效果？ ·219
3.27 什麼是CSS變量？ 222
3.27.1 CSS 中聲明一個變量222
3.27.2 使用JavaScrit操作CSS變量223
3.28 如何編輯展示後的頁面？ 225
3.29 如何利用CSS Grid實現響應式佈局？ 226
第四部分 框架篇·231
4.1 ES6框架··232
4.1.1 ECMAScrit是什麼？它與JavaScrit有什麼關係？ 232
4.1.2 ES6中的let、const關鍵字有什麼區別，如何使用它們？ ··232
4.1.3 ES6用什麼更簡單的方法處理字符串？ 234
4.1.4 Set和Ma是什麼？有什麼作用？ 236
4.1.5 ES6對Object類型做了哪些升級優化？ 241
4.1.6 ES6對函數有哪些擴展？ 243
4.1.7 解構賦值的規則是什麼？有哪些用途？ 246
4.1.8 數組如何擴展？ ··248
4.1.9 什麼是Number？ 252
4.1.10 JavaScrit中如何聲明一個 “類”？ ··254
4.1.11 如何優雅地處理異步操作？ ·257
4.1.12 ES6中的roxy有什麼作用？ ··263
4.1.13 什麼是JavaScrit Generator？ 266
4.2 Bootstra框架·270
4.2.1 Bootstra是什麼？為什麼使用它？ 270
4.2.2 如何開始使用Bootstra?·271
4.2.3 如何運用Bootstra行自適應？ ··273
4.2.4 如何使用Bootstra的組件？ ··276
4.2.5 如何使用Bootstra工具類？ ··289
4.3 React 框架··292
4.3.1 為什麼要使用React？ ·292
4.3.2 什麼是JSX語法？ ··293
4.3.3 如何創建React項目？ 294
4.3.4 React如何渲染元素?296
4.3.5 什麼是React組件？如何定義一個組件?297
4.3.6 如何給React組件添加樣式？ 299
4.3.7 state與rs有何區別？ 301
4.3.8 React生命週期有哪些？ ·302
4.3.9 React元素的事件處理有何不同？ ·305
4.3.10 React條件渲染如何實現？ 307
4.3.11 key的作用是什麼？ ··309
4.3.12 受控組件與非受控組件有何區別？ ·310