Web前端開發(fā)技術(shù)

目　錄
第1章　網(wǎng)頁開發(fā)起步.1
1.1　HTML文檔的結(jié)構(gòu).2
1.1.1　HTML的基本結(jié)構(gòu).2
1.1.2　使用記事本開發(fā)HTML頁面3
【示例1.1】使用記事本開發(fā)HTML3
1.1.3　使用VS Code開發(fā)網(wǎng)頁4
1.1.4　設(shè)置頁面背景色和背景圖片8
【示例1.2】設(shè)置網(wǎng)頁背景顏色.9
【示例1.3】設(shè)置背景圖片.9
1.2　基礎(chǔ)標(biāo)簽10
1.2.1　文本類標(biāo)簽10
【示例1.4】標(biāo)題標(biāo)簽的使用.11
【示例1.5】 p標(biāo)簽的使用12
【示例1.6】行內(nèi)標(biāo)簽的使用.13
【示例1.7】換行標(biāo)簽的使用.14
1.2.2　水平線標(biāo)簽14
【示例1.8】水平線的使用.15
1.2.3　HTML文檔注釋和特殊符號15
【示例1.9】 在網(wǎng)頁底部添加
版權(quán)部分16
1.3　圖像標(biāo)簽17
1.3.1　圖像標(biāo)簽的使用17
【示例1.10】圖片的使用.18
1.3.2　圖片的相對路徑與絕對路徑19
1.4　超鏈接標(biāo)簽20
1.4.1　頁面間鏈接20
【示例1.11】超鏈接的使用.21
【示例1.12】網(wǎng)站內(nèi)頁面間的鏈接22
1.4.2　錨點鏈接23
【示例1.13】錨點鏈接23
1.4.3　電子郵件鏈接25
【示例1.14】郵箱鏈接的使用.25
1.5　塊級標(biāo)簽與行內(nèi)標(biāo)簽.26
1.5.1　div標(biāo)簽和span標(biāo)簽.26
【示例1.15】div標(biāo)簽的使用.26
【示例1.16】span 標(biāo)簽的使用.27
1.5.2　 HTML的標(biāo)簽分類27
實踐任務(wù)28
小　　結(jié)29
習(xí)　　題29
第2章　CSS樣式入門.31
2.1　CSS的基本語法.32
2.1.1　CSS樣式表概述32
2.1.2　樣式表的基本語法34
2.1.3　樣式表的選擇器34
【示例2.1】標(biāo)簽選擇器應(yīng)用.35
【示例2.2】類樣式選擇器案例.37
【示例2.3】ID樣式選擇器示例38
2.2　常見的樣式屬性及其應(yīng)用39
2.2.1　文本及字體屬性39
【示例2.4】文本及字體樣式設(shè)置.40
2.2.2　盒子模型41
【示例2.5】邊框樣式設(shè)置.44
【示例2.6】填充樣式設(shè)置.45
【示例2.7】 塊級元素和行內(nèi)元素
設(shè)置寬與高47
2.2.3　背景屬性49
【示例2.8】背景相關(guān)樣式設(shè)置.50
2.3　樣式使用分類.51
2.3.1　行內(nèi)樣式表51
【示例2.9】行內(nèi)樣式設(shè)置. 52
2.3.2　內(nèi)嵌樣式表52
2.3.3　外部樣式表52
實踐任務(wù) 55
小　　結(jié) 63
習(xí)　　題 64
第3 章　排列網(wǎng)頁內(nèi)容66
3.1　列表標(biāo)簽 67
3.1.1　無序列表67
【示例3.1】無序列表標(biāo)簽的使用. 68
3.1.2　有序列表69
【示例3.2】有序列表標(biāo)簽的使用. 69
3.1.3　定義列表70
【示例3.3】定義列表標(biāo)簽的使用. 71
【示例3.4】定義列表混合布局. 72
3.2　表格標(biāo)簽 73
3.2.1　表格的基本結(jié)構(gòu)73
3.2.2　表格的使用74
【示例3.5】表格標(biāo)簽的應(yīng)用. 75
3.2.3　合并單元格76
【示例3.6】colspan 屬性的用法 77
【示例3.7】rowspan 屬性的用法. 79
【示例3.8】跨行與跨列的同時應(yīng)用 81
3.2.4　表格的高級用法82
【示例3.9】表格高級標(biāo)簽的應(yīng)用. 83
3.3　表格的美化與布局 85
3.3.1　表格的美化85
【示例3.10】 表格寬度、高度、.
邊框?qū)傩缘挠梅? 85
【示例3.11】表格背景和對齊設(shè)置 87
【示例3.12】 設(shè)置表格單元格的.
間距與填充. 89
3.3.2　表格布局90
實踐任務(wù) 94
小　　結(jié) 95
習(xí)　　題 96
第4 章　表單與框架98
4.1　表單. 99
4.1.1　表單概述99
4.1.2　表單的基本語法100
【示例4.1】用戶登錄 101
4.2　表單元素. 102
4.2.1　表單元素的基本格式102
4.2.2　表單元素介紹103
4.3　表單的綜合應(yīng)用. 110
4.4　內(nèi)嵌框架. 114
4.4.1　 的使用114
【示例4.2】內(nèi)嵌框架的使用. 114
4.4.2　超鏈接與內(nèi)嵌框架關(guān)聯(lián)115
【示例4.3】內(nèi)嵌框架的使用. 116
實踐任務(wù). 117
小　　結(jié). 127
習(xí)　　題. 128
第5 章　網(wǎng)頁布局設(shè)計 130
5.1　盒子的定位 131
5.1.1　標(biāo)準(zhǔn)文檔流131
【示例5.1】display 屬性的使用. 132
【示例5.2】 行內(nèi)塊inline-block.
屬性值的使用. 135
5.1.2　盒子的定位136
【示例5.3】固定定位的使用. 142
5.2　盒子的浮動 144
5.2.1　float 屬性144
【示例5.4】 使用float 實現(xiàn)文字.
繞排圖片 145
5.2.2　inline-block 與浮動的區(qū)別153
5.3　頁面整體布局 153

5.3.1　頁面布局概述153
5.3.2　布局案例分析155
實踐任務(wù). 161
小　　結(jié). 168
習(xí)　　題. 169
第6 章　CSS 樣式進階. 170
6.1　CSS 樣式選擇器 171
6.1.1　基本選擇器分類171
6.1.2　復(fù)合選擇器分類171
【示例6.1】層次選擇器的使用. 173
6.1.3　偽類選擇器175
【示例6.2】 超鏈接偽類樣式的.
使用 175
【示例6.3】偽類選擇器的使用. 177
6.1.4　屬性選擇器178
【示例6.4】屬性選擇器的使用. 179
6.2　CSS 樣式的特性與常用屬性. 180
6.2.1　CSS 樣式的特性180
【示例6.5】 CSS 的繼承性.
與層疊性 180
6.2.2　樣式屬性分類181
6.2.3　頁面布局屬性184
6.3　CSS3 的其他樣式. 185
6.3.1　盒子模型的圓角185
【示例6.6】圓角邊框的使用. 185
6.3.2　盒子陰影186
【示例6.7】 盒子陰影box-.
shadow 的使用 187
【示例6.8】 設(shè)置水平垂直偏移.
得到陰影效果. 189
6.3.3　動畫設(shè)置190
實踐任務(wù). 198
小　　結(jié). 204
習(xí)　　題. 205
第7 章　響應(yīng)式網(wǎng)頁設(shè)計 207
7.1　響應(yīng)式網(wǎng)頁概述. 208
7.1.1　響應(yīng)式網(wǎng)頁的起源208
7.1.2　響應(yīng)式網(wǎng)頁的技術(shù)手段208
7.2　Bootstrap 概述. 209
7.2.1　Bootstrap 的特點210
7.2.2　Bootstrap 的結(jié)構(gòu)210
【示例7.1】 使用Bootstrap 框架.
開發(fā)第一個網(wǎng)頁. 211
7.3　柵格系統(tǒng). 213
7.3.1　柵格系統(tǒng)原理213
【示例7.2】柵格系統(tǒng)的使用. 213
7.3.2　柵格系統(tǒng)的其他用法216
【示例7.3】列偏移 216
7.4　CSS 全局樣式. 218
7.4.1　基礎(chǔ)排版218
7.4.2　表格.220
7.4.3　按鈕.221
7.4.4　圖像.222
7.4.5　表單.223
【示例7.4】基本表單的使用. 223
7.5　Bootstrap 組件. 225
7.5.1　圖標(biāo).226
【示例7.5】小圖標(biāo)的使用. 226
7.5.2　下拉菜單227
7.5.3　按鈕組.228
7.5.4　導(dǎo)航.229
7.5.5　導(dǎo)航欄.230
【示例7.6】導(dǎo)航條的使用. 230
【示例7.7】響應(yīng)式導(dǎo)航欄的實現(xiàn) 232
7.5.6　縮略圖.234
【示例7.8】縮略圖的使用. 234
實踐任務(wù). 235
小　　結(jié). 242
習(xí)　　題. 243
第8 章　網(wǎng)頁腳本編程 245
8.1　JavaScript 概述 246
8.1.1　JavaScript 簡介.246
8.1.2　基本語法247
8.1.3　邏輯控制語句249
【示例8.1】 輸出1~10 之間的.
奇數(shù) 250
8.2　函數(shù)與事件 251
8.2.1　函數(shù)的定義與調(diào)用252
8.2.2　變量的作用域252
8.2.3　事件處理254
【示例8.2】驗證郵箱格式. 255
8.2.4　JavaScript 的內(nèi)置對象257
【示例8.3】顯示系統(tǒng)時間. 257
【示例8.4】動態(tài)時鐘 259
8.3　JavaScript 操作DOM 元素 261
8.3.1　瀏覽器對象模型261
8.3.2　文檔對象模型263
【示例8.5】動態(tài)表格 266
8.3.3　訪問元素的CSS 樣式.269
8.4　jQuery 270
8.4.1　jQuery 庫的導(dǎo)入270
【示例8.6】第一個jQuery 代碼 271
8.4.2　jQuery 選擇器271
8.4.3　jQuery 函數(shù).273
【示例8.7】動畫特效函數(shù)的使用 274
實踐任務(wù). 275
小　　結(jié). 278
習(xí)　　題. 279
參 考 文 獻(xiàn). 280