Web前端開(kāi)發(fā)技術(shù)：HTML5、CSS3、JavaScript（第3版）

第1章  Web前端開(kāi)發(fā)技術(shù)綜述... 1
1.1  Web概述... 1
1.1.1  Web的起源... 2
1.1.2  Web的特點(diǎn)... 3
1.1.3  Web工作原理... 3
1.1.4  Web相關(guān)概念... 4
1.2  Web前端開(kāi)發(fā)工程師的職業(yè)需求... 6
1.2.1  Web前端開(kāi)發(fā)的由來(lái)... 6
1.2.2  Web前端開(kāi)發(fā)工程師的職業(yè)要求... 6
1.3  Web前端開(kāi)發(fā)技術(shù)... 7
1.3.1  HTML. 7
1.3.2  CSS. 8
1.3.3  JavaScript 9
1.3.4  HTML DOM.. 9
1.3.5  BOM.. 10
1.3.6  AJAX.. 10
1.3.7  jQuery. 11
1.4  Web前端開(kāi)發(fā)工具... 11
1.4.1  EditPlus 11
1.4.2  Adobe Dreamweaver 11
1.4.3  Sublime Text 12
1.4.4  WebStorm.. 12
1.4.5  HBuilder 13
1.5  瀏覽器工具... 13
1.5.1  Internet Explorer 14
1.5.2  Google Chrome. 14
1.5.3  Mozilla Firefox. 14
1.5.4  Safari 14
1.5.5  Opera. 14
1.6  綜合實(shí)例... 15
本章小結(jié)... 16
練習(xí)與實(shí)驗(yàn)... 16
練習(xí)1. 16
實(shí)驗(yàn)1. 17
第2章  HTML基礎(chǔ)... 18
2.1  HTML文檔結(jié)構(gòu)... 18
2.2  頭部head. 19
2.2.1  標(biāo)題title標(biāo)記... 19
2.2.2  元信息meta標(biāo)記... 20
2.3  主體body. 22
2.3.1  body標(biāo)記... 22
2.3.2  body標(biāo)記屬性... 23
2.4  HTML基本語(yǔ)法... 25
2.4.1  標(biāo)記類型... 25
2.4.2  HTML屬性... 26
2.5  注釋... 27
2.6  HTML文檔編寫規(guī)范... 28
2.6.1  HTML代碼書寫規(guī)范... 28
2.6.2  HTML文檔命名規(guī)則... 29
2.7  HTML文檔類型... 30
2.7.1  標(biāo)記... 30
2.7.2  DTD類型... 30
2.8  綜合實(shí)例... 31
本章小結(jié)... 32
練習(xí)與實(shí)驗(yàn)... 32
練習(xí)2. 32
實(shí)驗(yàn)2. 33
第3章  格式化文本與段落... 34
3.1  Web頁(yè)面初步設(shè)計(jì)... 34
3.1.1  向Web頁(yè)面添加文字信息... 34
3.1.2  標(biāo)題字標(biāo)記... 35
3.1.3  添加空格與特殊符號(hào)... 36
3.2  格式化文本標(biāo)記... 37
3.2.1  文本修飾標(biāo)記... 37
3.2.2  計(jì)算機(jī)輸出標(biāo)記... 38
3.2.3  引用和術(shù)語(yǔ)標(biāo)記... 38
3.2.4  字體font標(biāo)記... 39
3.3  段落與排版標(biāo)記... 40
3.3.1  段落p標(biāo)記... 40
3.3.2  換行br標(biāo)記... 41
3.3.3  水平分隔線hr標(biāo)記... 41
3.3.4  拼音/音標(biāo)注釋ruby標(biāo)記和rt/rp標(biāo)記... 42
3.3.5  段落縮進(jìn)blockquote標(biāo)記... 43
3.3.6  預(yù)格式化pre標(biāo)記... 44
3.4  綜合實(shí)例... 45
本章小結(jié)... 46
練習(xí)與實(shí)驗(yàn)... 46
練習(xí)3. 46
實(shí)驗(yàn)3. 47
第4章  列表... 49
4.1  列表概述... 49
4.2  無(wú)序列表... 49
4.3  有序列表... 51
4.4  列表嵌套... 53
4.5  定義列表... 54
4.6  綜合實(shí)例... 56
本章小結(jié)... 57
練習(xí)與實(shí)驗(yàn)... 57
練習(xí)4. 57
實(shí)驗(yàn)4. 58
第5章  超鏈接與浮動(dòng)框架... 59
5.1  超鏈接概述... 59
5.2  超鏈接語(yǔ)法、路徑及分類... 59
5.2.1  超鏈接語(yǔ)法... 59
5.2.2  超鏈接路徑... 61
5.2.3  超鏈接分類... 62
5.3  超鏈接的應(yīng)用... 62
5.3.1  創(chuàng)建HTTP文件下載超鏈接... 62
5.3.2  創(chuàng)建FTP站點(diǎn)訪問(wèn)超鏈接... 62
5.3.3  創(chuàng)建圖像超鏈接... 63
5.3.4  創(chuàng)建電子郵件超鏈接... 63
5.3.5  創(chuàng)建頁(yè)面書簽鏈接... 65
5.4  浮動(dòng)框架... 67
5.5  綜合實(shí)例... 69
本章小結(jié)... 70
練習(xí)與實(shí)驗(yàn)... 70
練習(xí)5. 70
實(shí)驗(yàn)5. 71
第6章  圖像與多媒體文件... 73
6.1  圖像... 73
6.1.1  插入圖像... 73
6.1.2  設(shè)置圖像的替代文本... 75
6.1.3  設(shè)置圖像的高度和寬度... 75
6.1.4  設(shè)置圖像的邊框... 76
6.1.5  設(shè)置圖像對(duì)齊方式... 77
6.1.6  設(shè)置圖像的間距... 77
6.1.7  設(shè)置圖像熱區(qū)鏈接... 77
6.2  滾動(dòng)文字... 79
6.2.1  添加滾動(dòng)文字... 79
6.2.2  設(shè)置滾動(dòng)文字背景顏色與滾動(dòng)循環(huán)... 80
6.2.3  設(shè)置滾動(dòng)方向與滾動(dòng)方式... 80
6.2.4  設(shè)置滾動(dòng)速度與滾動(dòng)延遲... 81
6.2.5  設(shè)置滾動(dòng)范圍與滾動(dòng)空白空間... 81
6.3  音頻、視頻及Flash文件... 82
6.4  綜合實(shí)例... 84
本章小結(jié)... 85
練習(xí)與實(shí)驗(yàn)... 85
練習(xí)6. 85
實(shí)驗(yàn)6. 86
第7章  CSS基礎(chǔ)... 88
7.1  CSS概念... 88
7.1.1  CSS的基本概念... 88
7.1.2  傳統(tǒng)HTML的缺點(diǎn)... 88
7.1.3  CSS的特點(diǎn)... 89
7.1.4  CSS的優(yōu)勢(shì)... 89
7.1.5  CSS的編輯方法... 89
7.2  使用CSS控制Web頁(yè)面... 90
7.2.1  CSS基本語(yǔ)法... 90
7.2.2  CSS選擇器類型... 91
7.2.3  CSS選擇器聲明... 95
7.2.4  CSS定義與引用... 96
7.3  CSS繼承與層疊... 101
7.4  綜合實(shí)例... 102
本章小結(jié)... 105
練習(xí)與實(shí)驗(yàn)... 106
練習(xí)7. 106
實(shí)驗(yàn)7. 106
第8章  DIV與SPAN.. 108
8.1  DIV圖層... 108
8.1.1  DIV定義... 108
8.1.2  DIV應(yīng)用... 109
8.2  圖層嵌套與層疊... 110
8.2.1  DIV嵌套... 110
8.2.2  DIV層疊... 111
8.3  div標(biāo)記與span標(biāo)記... 112
8.4  綜合實(shí)例... 114
本章小結(jié)... 118
練習(xí)與實(shí)驗(yàn)... 118
練習(xí)8. 118
實(shí)驗(yàn)8. 119
第9章  CSS樣式屬性... 120
9.1  CSS屬性值中的單位... 120
9.1.1  單位... 120
9.1.2  相對(duì)單位... 120
9.2  CSS字體樣式... 121
9.2.1  字體大小font-size屬性... 121
9.2.2  字體樣式font-style屬性... 122
9.2.3  字體系列font-family屬性... 122
9.2.4  字體變體font-variant屬性... 123
9.2.5  字體粗細(xì)font-weight屬性... 124
9.2.6  字體font屬性... 124
9.3  CSS文本樣式... 125
9.3.1  字符間距l(xiāng)etter-spacing屬性... 125
9.3.2  行距l(xiāng)ine-height屬性... 125
9.3.3  首行縮進(jìn)text-indent屬性... 126
9.3.4  字符裝飾text-decoration屬性... 127
9.3.5  英文大小寫轉(zhuǎn)換text-transform屬性... 127
9.3.6  水平對(duì)齊text-align屬性... 128
9.3.7  垂直對(duì)齊vertical-align屬性... 128
9.4  CSS顏色與背景... 130
9.4.1  顏色color屬性... 130
9.4.2  背景background屬性... 131
9.5  CSS列表樣式... 134
9.6  CSS盒模型... 136
9.6.1  CSS盒模型結(jié)構(gòu)... 136
9.6.2  邊界屬性設(shè)置... 137
9.6.3  邊框?qū)傩栽O(shè)置... 138
9.6.4  填充屬性設(shè)置... 141
9.7  綜合實(shí)例... 142
本章小結(jié)... 146
練習(xí)與實(shí)驗(yàn)... 146
練習(xí)9. 146
實(shí)驗(yàn)9. 147
第10章  DIV CSS頁(yè)面布局... 149
10.1  頁(yè)面布局設(shè)計(jì)... 149
10.1.1 “三行模式”或“三列模式”... 149
10.1.2 “三行二列”“三行三列”模式... 150
10.1.3  多行多列復(fù)雜模式... 152
10.2  導(dǎo)航菜單設(shè)計(jì)... 154
10.2.1  一級(jí)水平導(dǎo)航菜單... 154
10.2.2  二級(jí)水平導(dǎo)航菜單... 156
10.3  綜合實(shí)例... 162
本章小結(jié)... 168
練習(xí)與實(shí)驗(yàn)... 168
練習(xí)10. 168
實(shí)驗(yàn)10. 169
第11章  表格... 170
11.1  表格概述... 170
11.2  表格標(biāo)記... 171
11.3  表格屬性設(shè)置... 173
11.3.1  表格邊框?qū)傩?.. 174
11.3.2  表格的寬度和高度屬性... 174
11.3.3  表格背景顏色與背景圖像屬性... 174
11.3.4  表格邊框樣式屬性... 176
11.3.5  表格單元格間距、單元格邊距屬性... 177
11.3.6  表格水平對(duì)齊屬性... 178
11.4  設(shè)置表格行的屬性... 180
11.5  設(shè)置單元格的屬性... 181
11.5.1  表格單元格跨行屬性... 182
11.5.2  表格單元格跨列屬性... 182
11.6  表格嵌套... 183
11.7  綜合實(shí)例... 185
本章小結(jié)... 189
練習(xí)與實(shí)驗(yàn)... 189
練習(xí)11. 189
實(shí)驗(yàn)11. 190
第12章  表單... 191
12.1  表單概述... 191
12.2  定義域和域標(biāo)題... 193
12.3  表單信息輸入... 194
12.3.1  單行文本輸入框... 194
12.3.2  密碼輸入框... 195
12.3.3  復(fù)選框... 196
12.3.4  單選按鈕... 196
12.3.5  圖像按鈕... 198
12.3.6  提交按鈕... 199
12.3.7  重置按鈕... 199
12.3.8  普通按鈕... 200
12.3.9  文件選擇框... 201
12.3.10  隱藏框... 201
12.4  多行文本輸入框... 203
12.5  下拉列表框... 204
12.6  綜合實(shí)例... 205
本章小結(jié)... 208
練習(xí)與實(shí)驗(yàn)... 208
練習(xí)12. 208
實(shí)驗(yàn)12. 209
第13章  HTML5基礎(chǔ)與CSS3應(yīng)用... 210
13.1  HTML5概述... 210
13.1.1  HTML5的八個(gè)特性... 211
13.1.2  HTML5的優(yōu)勢(shì)... 212
13.1.3  HTML5新增結(jié)構(gòu)元素及頁(yè)面元素... 213
13.1.4  HTML5廢除的元素與屬性... 214
13.1.5  瀏覽器支持與選擇... 215
13.2  HTML5文檔結(jié)構(gòu)... 216
13.2.1  HTML5頁(yè)面結(jié)構(gòu)... 216
13.2.2  HTML5新增結(jié)構(gòu)元素... 217
13.3  HTML5新增頁(yè)面元素... 221
13.3.1  hgroup標(biāo)記... 222
13.3.2  figure標(biāo)記與figcaption標(biāo)記... 222
13.3.3  mark標(biāo)記與time標(biāo)記... 223
13.3.4  details標(biāo)記與summary標(biāo)記... 224
13.3.5  progress標(biāo)記與meter標(biāo)記... 225
13.3.6  input標(biāo)記與datalist標(biāo)記... 226
13.4  HTML5表單... 227
13.4.1  HTML5新增的表單屬性... 227
13.4.2  HTML5新增的表單元素... 231
13.4.3  HTML5新增的input類型... 232
13.5  HTML5視頻與音頻... 236
13.5.1  video標(biāo)記及屬性... 236
13.5.2  audio標(biāo)記及屬性... 238
13.6  CSS3基礎(chǔ)應(yīng)用... 239
13.6.1  CSS3新特性... 239
13.6.2  CSS3瀏覽器兼容性... 239
13.6.3  CSS3邊框... 240
13.6.4  CSS3轉(zhuǎn)換transform屬性... 247
13.6.5  CSS3過(guò)渡transition屬性... 251
13.6.6  CSS3動(dòng)畫animation. 253
13.6.7  CSS3多列屬性... 256
13.6.8  CSS3文本效果... 258
13.7  綜合實(shí)例... 260
本章小結(jié)... 262
練習(xí)與實(shí)驗(yàn)... 262
練習(xí)13. 262
實(shí)驗(yàn)13. 263
第14章  JavaScript基礎(chǔ)... 265
14.1  JavaScript概述... 265
14.1.1  JavaScript簡(jiǎn)介... 265
14.1.2  個(gè)JavaScript程序... 266
14.1.3  JavaScript放置的位置... 267
14.2  JavaScript程序... 270
14.2.1  語(yǔ)句和語(yǔ)句塊... 270
14.2.2  代碼... 271
14.2.3  消息對(duì)話框... 271
14.2.4  JavaScript注釋... 274
14.3  標(biāo)識(shí)符和變量... 274
14.3.1  命名規(guī)范... 274
14.3.2  數(shù)據(jù)類型... 275
14.3.3  變量... 278
14.3.4  轉(zhuǎn)義字符... 278
14.4  運(yùn)算符和表達(dá)式... 279