Web前端開發(fā)技術

目　錄
第1章　網頁開發(fā)起步.1
1.1　HTML文檔的結構.2
1.1.1　HTML的基本結構.2
1.1.2　使用記事本開發(fā)HTML頁面3
【示例1.1】使用記事本開發(fā)HTML3
1.1.3　使用VS Code開發(fā)網頁4
1.1.4　設置頁面背景色和背景圖片8
【示例1.2】設置網頁背景顏色.9
【示例1.3】設置背景圖片.9
1.2　基礎標簽10
1.2.1　文本類標簽10
【示例1.4】標題標簽的使用.11
【示例1.5】 p標簽的使用12
【示例1.6】行內標簽的使用.13
【示例1.7】換行標簽的使用.14
1.2.2　水平線標簽14
【示例1.8】水平線的使用.15
1.2.3　HTML文檔注釋和特殊符號15
【示例1.9】 在網頁底部添加
版權部分16
1.3　圖像標簽17
1.3.1　圖像標簽的使用17
【示例1.10】圖片的使用.18
1.3.2　圖片的相對路徑與絕對路徑19
1.4　超鏈接標簽20
1.4.1　頁面間鏈接20
【示例1.11】超鏈接的使用.21
【示例1.12】網站內頁面間的鏈接22
1.4.2　錨點鏈接23
【示例1.13】錨點鏈接23
1.4.3　電子郵件鏈接25
【示例1.14】郵箱鏈接的使用.25
1.5　塊級標簽與行內標簽.26
1.5.1　div標簽和span標簽.26
【示例1.15】div標簽的使用.26
【示例1.16】span 標簽的使用.27
1.5.2　 HTML的標簽分類27
實踐任務28
小　　結29
習　　題29
第2章　CSS樣式入門.31
2.1　CSS的基本語法.32
2.1.1　CSS樣式表概述32
2.1.2　樣式表的基本語法34
2.1.3　樣式表的選擇器34
【示例2.1】標簽選擇器應用.35
【示例2.2】類樣式選擇器案例.37
【示例2.3】ID樣式選擇器示例38
2.2　常見的樣式屬性及其應用39
2.2.1　文本及字體屬性39
【示例2.4】文本及字體樣式設置.40
2.2.2　盒子模型41
【示例2.5】邊框樣式設置.44
【示例2.6】填充樣式設置.45
【示例2.7】 塊級元素和行內元素
設置寬與高47
2.2.3　背景屬性49
【示例2.8】背景相關樣式設置.50
2.3　樣式使用分類.51
2.3.1　行內樣式表51
【示例2.9】行內樣式設置. 52
2.3.2　內嵌樣式表52
2.3.3　外部樣式表52
實踐任務 55
小　　結 63
習　　題 64
第3 章　排列網頁內容66
3.1　列表標簽 67
3.1.1　無序列表67
【示例3.1】無序列表標簽的使用. 68
3.1.2　有序列表69
【示例3.2】有序列表標簽的使用. 69
3.1.3　定義列表70
【示例3.3】定義列表標簽的使用. 71
【示例3.4】定義列表混合布局. 72
3.2　表格標簽 73
3.2.1　表格的基本結構73
3.2.2　表格的使用74
【示例3.5】表格標簽的應用. 75
3.2.3　合并單元格76
【示例3.6】colspan 屬性的用法 77
【示例3.7】rowspan 屬性的用法. 79
【示例3.8】跨行與跨列的同時應用 81
3.2.4　表格的高級用法82
【示例3.9】表格高級標簽的應用. 83
3.3　表格的美化與布局 85
3.3.1　表格的美化85
【示例3.10】 表格寬度、高度、.
邊框屬性的用法. 85
【示例3.11】表格背景和對齊設置 87
【示例3.12】 設置表格單元格的.
間距與填充. 89
3.3.2　表格布局90
實踐任務 94
小　　結 95
習　　題 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　表單的綜合應用. 110
4.4　內嵌框架. 114
4.4.1　 的使用114
【示例4.2】內嵌框架的使用. 114
4.4.2　超鏈接與內嵌框架關聯(lián)115
【示例4.3】內嵌框架的使用. 116
實踐任務. 117
小　　結. 127
習　　題. 128
第5 章　網頁布局設計 130
5.1　盒子的定位 131
5.1.1　標準文檔流131
【示例5.1】display 屬性的使用. 132
【示例5.2】 行內塊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
實踐任務. 161
小　　結. 168
習　　題. 169
第6 章　CSS 樣式進階. 170
6.1　CSS 樣式選擇器 171
6.1.1　基本選擇器分類171
6.1.2　復合選擇器分類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】 設置水平垂直偏移.
得到陰影效果. 189
6.3.3　動畫設置190
實踐任務. 198
小　　結. 204
習　　題. 205
第7 章　響應式網頁設計 207
7.1　響應式網頁概述. 208
7.1.1　響應式網頁的起源208
7.1.2　響應式網頁的技術手段208
7.2　Bootstrap 概述. 209
7.2.1　Bootstrap 的特點210
7.2.2　Bootstrap 的結構210
【示例7.1】 使用Bootstrap 框架.
開發(fā)第一個網頁. 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　基礎排版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　圖標.226
【示例7.5】小圖標的使用. 226
7.5.2　下拉菜單227
7.5.3　按鈕組.228
7.5.4　導航.229
7.5.5　導航欄.230
【示例7.6】導航條的使用. 230
【示例7.7】響應式導航欄的實現(xiàn) 232
7.5.6　縮略圖.234
【示例7.8】縮略圖的使用. 234
實踐任務. 235
小　　結. 242
習　　題. 243
第8 章　網頁腳本編程 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ù)的定義與調用252
8.2.2　變量的作用域252
8.2.3　事件處理254
【示例8.2】驗證郵箱格式. 255
8.2.4　JavaScript 的內置對象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 庫的導入270
【示例8.6】第一個jQuery 代碼 271
8.4.2　jQuery 選擇器271
8.4.3　jQuery 函數(shù).273
【示例8.7】動畫特效函數(shù)的使用 274
實踐任務. 275
小　　結. 278
習　　題. 279
參 考 文 獻. 280