Web前端技術(shù)

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