Web前端技術

第1章  網(wǎng)頁設計基礎知識 1
1．1  相關知識 2
1．2  Web前端開發(fā)技術 5
1．2．1  認識HTML 5
1．2．2  認識CSS 6
1．2．3  認識JavaScript 7
第2章  HTML基礎 9
2．1  HTML的概念 10
2．2  HTML的基本語法 10
2．2．1  標簽 10
2．2．2  屬性 11
2．3  HTML的文檔結構 12
2．3．1  基本結構 12
2．3．2  書寫注意事項 12
2．4  HTML的頭部文件和主體文件 13
2．4．1  文件頭部內(nèi)容 13
2．4．2  主體內(nèi)容 16
習題 19
第3章  網(wǎng)頁文字與排版設計 21
3．1  編輯網(wǎng)頁內(nèi)容 22
3．1．1  添加文字 22
3．1．2  添加注釋 22
3．1．3  添加空格 23
3．2  文字效果與修飾 23
3．2．1  設置文字樣式 23
3．2．2  修飾文字 24
3．3  段落與排版 29
3．3．1  段落的標簽 30
3．3．2  換行 30
3．3．3  預格式化 32
3．3．4  居中顯示文字 33
3．3．5  插入水平線 33
3．3．6  設置段落縮進 34
3．4  建立列表 35
3．4．1  建立定義列表 35
3．4．2  建立無序列表 37
3．4．3  建立有序列表 39
3．4．4  建立嵌套列表 41
3．5  文字網(wǎng)頁綜合實例 41
習題 43
第4章  超鏈接的使用 45
4．1  超鏈接簡介 46
4．2  超鏈接的路徑 46
4．2．1  設置絕對路徑 46
4．2．2  設置相對路徑 46
4．2．3  設置根路徑 47
4．3  超鏈接的應用 47
4．3．1  超鏈接的建立 47
4．3．2  插入內(nèi)部和外部鏈接 48
4．3．3  插入錨鏈接（書簽鏈接） 49
4．3．4  插入圖片鏈接 52
4．3．5  電子郵件鏈接 53
4．3．6  下載文件的鏈接 54
4．4  設置圖像映射 55
4．5  其他鏈接 56
4．5．1  定義基準網(wǎng)址＜base＞ 56
4．5．2  框架的鏈接 57
4．6  綜合實例 57
習題 58
第5章  表格的使用 60
5．1  創(chuàng)建表格 61
5．1．1  表格的結構 61
5．1．2  表格的標題與表頭 62
5．2  設置表格屬性 64
5．2．1  設置表格的邊框 64
5．2．2  設置邊框樣式 65
5．2．3  設置表格的寬度和高度 67
5．2．4  設置表格的背景顏色 67
5．3  設置單元格 68
5．3．1  設置單元格水平對齊屬性 68
5．3．2  設置單元格垂直對齊 69
5．3．3  設置單元格間距和邊距 70
5．3．4  合并單元格 72
5．4  表格嵌套 74
5．5  綜合實例 75
習題 76
第6章  網(wǎng)頁框架設計 78
6．1  框架 79
6．1．1  框架的概念 79
6．1．2  框架的基本結構 80
6．2  框架的設置 80
6．2．1  框架的文件屬性 80
6．2．2  設置框架的名稱 81
6．2．3  框架的邊框 81
6．2．4  框架的滾動條 82
6．2．5  調整框架尺寸 83
6．2．6  設置框架邊緣寬度與高度 84
6．3  框架集的設置 85
6．3．1  框架集邊框寬度 85
6．3．2  設置框架集邊框顏色 86
6．3．3  框架的分割 87
6．4  框架的嵌套 88
6．5  不支持框架 88
6．6  浮動框架 90
6．7  設置框架的鏈接 91
6．7．1  普通框架添加鏈接 91
6．7．2  浮動框架添加鏈接 92
6．8  框架的綜合應用 94
習題 96
第7章  層的應用 98
7．1  創(chuàng)建層 99
7．2  層的屬性 99
7．2．1  層屬性的設置 99
7．2．2  層的邊框 100
7．2．3  層邊框的顏色 100
7．3  嵌套層 102
7．4  ＜span＞標簽的使用 102
7．5  綜合應用 103
習題 104
第8章  表單的使用 106
8．1 表單 107
8．1．1  基本概念 107
8．1．2  表單的屬性 107
8．2  輸入標簽＜input＞ 108
8．2．1  表單元素標記 108
8．2．2  文本框 108
8．2．3  密碼框 109
8．2．4  單選框、復選框 110
8．2．5  圖像域 111
8．2．6  隱藏域 112
8．2．7  多行文本域 113
8．2．8  按鈕 113
8．2．9  下拉菜單和滾動列表 114
8．2．10  插入文件域 115
8．3  表單綜合實例 117
習題 118
第9章  HTML5基本介紹 120
9．1  認識HTML5 121
9．1．1  HTML5的發(fā)展史 121
9．1．2  HTML5與HTML4的差異 121
9．1．3  HTML5廢除的標簽 122
9．2  HTML5的新功能 122
9．2．1  HTML5聲明 123
9．2．2  語義化標簽 123
9．3  新增標簽介紹 126
9．3．1  視頻標簽與屬性 126
9．3．2  音頻標簽與屬性 127
9．3．3  畫布標簽與屬性 128
9．3．4  表單屬性 129
9．4  Web存儲 137
9．4．1  Web存儲的兩種方法 137
9．4．2  Web存儲的優(yōu)勢和意義 139
第10章  CSS語法基礎 140
10．1  CSS的簡介 141
10．1．1  CSS的發(fā)展史 141
10．1．2  CSS的定義 141
10．2  CSS的基本語法 142
10．3  CSS選擇符的類型 143
10．3．1  標記選擇符 143
10．3．2  組合選擇符 144
10．3．3  類選擇符 145
10．3．4  id選擇符 146
10．3．5  包含選擇符 148
10．3．6  偽類 149
10．4  選擇符的優(yōu)先級 150
10．5  應用CSS樣式表 151
10．5．1  行內(nèi)樣式 151
10．5．2  內(nèi)嵌樣式 152
10．5．3  鏈接外部樣式 153
10．5．4  導入外部樣式 154
10．5．5  樣式表的優(yōu)先級 155
習題 156
第11章  CSS設置文字與版式 158
11．1  字體屬性的設置 159
11．1．1  字體font-family 159
11．1．2  字號font-size 159
11．1．3  字體風格font-style 162
11．1．4  字體加粗font-weight 162
11．1．5  字體變體font-variant 162
11．1．6  綜合字體屬性font 163
11．2  文本的版式控制（文本排版） 164
11．2．1  設置首行縮進text-indent 164
11．2．2  設置首字下沉first-letter類 165
11．2．3  調整行高line-height 166
11．2．4  調整字符間距l(xiāng)etter-spacing 168
11．2．5  調整單詞間距word-spacing 168
11．2．6  添加文字修飾text-decoration 169
11．2．7  設置文本對齊方式text-align和vertical-align 170
11．2．8  轉換英文大小寫text-transform 171
11．2．9  文本陰影text-shadow 172
習題 173
第12章  顏色和背景 174
12．1  顏色color 175
12．1．1  顏色名稱定義 175
12．1．2  顏色的十六進制定義 175
12．1．3  顏色的RGB函數(shù)定義 176
12．2  頁面背景background 176
12．2．1  設置背景顏色 176
12．2．2  設置背景圖片 177
12．2．3  設置重復背景圖片 179
12．2．4  設置滾動背景圖片 180
12．2．5  設置背景圖片位置 181
12．2．6  背景復合屬性background 183
12．2．7  設置背景尺寸 184
12．2．8  定義透明度 185
習題 186
第13章  CSS盒子模型 188
13．1  盒模型簡介 189
13．1．1  盒模型定義 189
13．1．2  DIV盒子 189
13．2  邊框屬性 190
13．2．1  邊框樣式屬性border-style 190
13．2．2  邊框寬度屬性border-width 192
13．2．3  邊框顏色屬性border-color 192
13．2．4  邊框屬性的綜合設置 193
13．3  邊距屬性 194
13．3．1  內(nèi)邊距padding 194
13．3．2  外邊距margin 195
13．4  圓角邊框 199
習題 201
第14章  定位和布局 202
14．1  CSS元素定位 203
14．1．1  定位方式 203
14．1．2  設置位置top、bottom、right、left 203
14．1．3  圖層定位z-index屬性 206
14．1．4  使用浮動屬性 207
14．2  CSS布局屬性 207
14．2．1  可見性visibility 207
14．2．2  裁切clip 209
14．2．3  設置層大小width和height 210
14．2．4  溢出overflow 211
14．2．5  浮動float 212
14．2．6  清除浮動clear 213
14．3  其他頁面元素的設置 214
14．3．1  鼠標特效 214
14．3．2  項目列表 216
習題 221
第15章  CSS濾鏡特效 223
15．1  概述 224
15．2  視覺濾鏡 225
15．2．1  Alpha濾鏡 225
15．2．2  Blur濾鏡 227
15．2．3  DropShadow濾鏡 228
15．2．4  Glow濾鏡 229
15．2．5  FlipH/FlipV濾鏡 230
15．2．6  Gray、Invert、Xray濾鏡 232
15．2．7  Chroma濾鏡 233
15．2．8  Wave濾鏡 235
15．2．9  Shadow濾鏡 237
15．2．10  Mask濾鏡 239
15．2．11  Emboss、Engrave濾鏡 240
習題 243
第16章  JavaScript基礎 244
16．1  JavaScript簡介 245
16．1．1  什么是腳本語言 245
16．1．2  JavaScript、VBScript與Jscript 245
16．1．3  JavaScript語言的基本特點 245
16．1．4  在HTML中加入JavaScript代碼 246
16．1．5  一個簡單的實例 247
16．2  JavaScript基本語法 247
16．2．1  JavaScript的語句 247
16．2．2  數(shù)據(jù)類型 248
16．2．3  變量和常量 249
16．2．4  運算符和表達式 250
16．3  JavaScript流程控制語句 254
16．3．1  選擇語句 254
16．3．2  循環(huán)語句 259
16．3．3  其他語句 263
16．4  函數(shù) 264
16．4．1  函數(shù)的定義 264
16．4．2  函數(shù)的參數(shù)與返回值 265
習題 269
第17章  JavaScript的對象和事件 271
17．1  JavaScript的對象 272
17．1．1  JavaScript對象 272
17．1．2  JavaScript的內(nèi)置對象和函數(shù) 272
17．1．3  瀏覽器內(nèi)部對象 279
17．1．4  自定義對象 295
17．2  JavaScript的事件處理方式 297
17．2．1  JavaScript的常用事件 298
17．2．2  事件處理 299
習題 303
第18章  Web前端新技術――響應式網(wǎng)頁的設計與實現(xiàn) 305
18．1  響應式網(wǎng)頁技術 306
18．2  前端開發(fā)框架 306
18．3  Bootstrap框架 307
18．3．1  框架簡介 307
18．3．2  Bootstrap框架特點 307
18．3．3  Bootstrap環(huán)境安裝 310
18．4  基于數(shù)字媒體技術專業(yè)網(wǎng)站的設計與實現(xiàn) 311
18．4．1  美術設計 311
18．4．2  首頁的設計 312
18．4．3  Bootstrap導航 313
18．4．4  網(wǎng)頁內(nèi)容區(qū) 313
18．4．5  頁腳導航區(qū) 317
18．5  小結 318
參考文獻 319
習題答案（選擇題） 320