零基礎(chǔ)學(xué)HTML+CSS（第2版）

前言
第一篇　 HTML基礎(chǔ)知識(shí)
第1章　 認(rèn)識(shí)HTML語言 1
1.1　 HTML簡介 1
1.2　 HTML的標(biāo)記組成 2
1.2.1　 單標(biāo)記 2
1.2.2　 雙標(biāo)記 2
1.3　 創(chuàng)建第一張網(wǎng)頁 4
1.4　 瀏覽HTML的瀏覽器兼容 6
1.5　 編寫HTML的工具 7
1.5.1　 Aptana代碼提示工具 7
1.5.2　 Dreamweaver網(wǎng)頁開發(fā)工具 10
1.6　 小結(jié) 12
1.7　 上機(jī)實(shí)踐 13
第2章　 常用HTML標(biāo)記和格式 14
2.1　 設(shè)置正文的標(biāo)題 14
2.1.1　 標(biāo)題設(shè)置的語法 14
2.1.2　 標(biāo)題設(shè)置經(jīng)典案例—字號(hào)由大到小 14
2.2　 設(shè)置段落 16
2.3　 強(qiáng)制換行 17
2.4　 給代碼添加注釋 18
2.5　 粗體與斜體 19
2.6　 下劃線與刪除線 20
2.7　 上標(biāo)與下標(biāo) 21
2.8　 HTML標(biāo)記和格式實(shí)例 22
2.8.1　 標(biāo)題用h1 22
2.8.2　 設(shè)置每一行為一段落 23
2.8.3　 粗體和刪除線 24
2.8.4　 加上化學(xué)元素和數(shù)學(xué)平方根 24
2.9　 小結(jié) 26
2.10　 上機(jī)實(shí)踐 26
第3章　 字體標(biāo)記 27
3.1　 設(shè)置字體大小 27
3.2　 設(shè)置字體顏色 28
3.3　 設(shè)置標(biāo)題字體樣式 29
3.3.1　 標(biāo)題的字體 29
3.3.2　 設(shè)置字體的大小和顏色 30
3.4　 字體標(biāo)記 32
3.4.1　 物理字體 32
3.4.2　 邏輯字體 33
3.5　 字體實(shí)例 34
3.5.1　 插入字體 34
3.5.2　 字體顏色設(shè)為紅色 35
3.5.3　 把文字設(shè)為標(biāo)題h1 35
3.5.4　 設(shè)為斜體并加刪除線 36
3.5.5　 設(shè)置字體為 36
3.6　 小結(jié) 37
3.7　 上機(jī)實(shí)踐 37
第4章　 文字布局 38
4.1　 行的控制 38
4.1.1　 換行控制 38
4.1.2　 不換行控制 39
4.2　 文字對齊 40
4.3　 段落設(shè)置 42
4.4　 列表 43
4.4.1　 無序列表 43
4.4.2　 有序列表 43
4.5　 其他方式修飾文本 44
4.5.1　 欲格式化文本 44
4.5.2　 計(jì)算機(jī)輸出格式 47
4.6　 文字布局實(shí)例 48
4.6.1　 設(shè)置文字換行與不換行 48
4.6.2　 設(shè)置文字對齊 49
4.6.3　 顯示列表 49
4.6.4　 在網(wǎng)頁中顯示計(jì)算機(jī)源代碼 50
4.7　 小結(jié) 52
4.8　 上機(jī)實(shí)踐 52
第5章　 圖像 53
5.1　 圖像的基本語法 53
5.1.1　 在網(wǎng)頁中插入圖像 53
5.1.2　 圖像無法顯示時(shí)的提示信息 54
5.1.3　 控制圖像的大小 55
5.2　 圖像的鏈接 56
5.3　 圖像和文字對齊 56
5.4　 圖像的邊框 57
5.5　 圖像映射圖 58
5.6　 圖像實(shí)例 58
5.6.1　 在網(wǎng)頁上引入圖像標(biāo)記 58
5.6.2　 設(shè)置圖像參數(shù)alt 59
5.6.3　 給圖像做超鏈接 59
5.6.4　 設(shè)置圖像的邊框 59
5.6.5　 設(shè)置文本與圖像對齊 60
5.6.6　 設(shè)置圖像的映射圖 60
5.7　 小結(jié) 61
5.8　 上機(jī)實(shí)踐 61
第6章　 超級鏈接 62
6.1　 文字鏈接 62
6.1.1　 最簡單的文字超鏈接 62
6.1.2　 超鏈接網(wǎng)頁的打開方式 63
6.1.3　 鏈接的注釋 64
6.2　 圖片鏈接 64
6.3　 錨點(diǎn)鏈接 65
6.4　 郵箱地址鏈接 66
6.5　 相對路徑與絕對路徑 67
6.5.1　 相對路徑 67
6.5.2　 絕對路徑 68
6.6　 鏈接實(shí)例 68
6.6.1　 在網(wǎng)頁中做文字鏈接 69
6.6.2　 給圖片設(shè)置超鏈接 69
6.6.3　 設(shè)置錨點(diǎn)鏈接 70
6.6.4　 郵箱鏈接 72
6.7　 小結(jié) 73
6.8　 上機(jī)實(shí)踐 73
第7章　 表單 74
7.1　 表單基本語法 74
7.2　 文本框和密碼框 76
7.2.1　 文本框 76
7.2.2　 密碼框 76
7.3　 單選框和復(fù)選框 77
7.3.1　 單選框 77
7.3.2　 復(fù)選框 78
7.4　 下拉列表與文本域 79
7.4.1　 下拉列表 79
7.4.2　 文本域 80
7.5　 按鈕 82
7.6　 表單實(shí)例 83
7.6.1　 插入表單 83
7.6.2　 添加文本框和密碼框 84
7.6.3　 添加單選框和復(fù)選框 84
7.6.4　 添加下拉列表和文本域 85
7.6.5　 在表單中添加提交按鈕 87
7.7　 小結(jié) 89
7.8　 上機(jī)實(shí)踐 89
第8章　 表格 90
8.1　 表格基本語法 90
8.2　 跨多行、多列表元 91
8.2.1　 跨多行表元 91
8.2.2　 跨多列表元 92
8.3　 設(shè)置表格大小 93
8.3.1　 設(shè)置表格邊框 93
8.3.2　 設(shè)置表格高度和寬度 94
8.4　 表格內(nèi)文字對齊 95
8.5　 表格在網(wǎng)頁中對齊 96
8.6　 表格實(shí)例 97
8.6.1　 表格中嵌入表格 97
8.6.2　 設(shè)置跨行和跨列 99
8.7　 小結(jié) 100
8.8　 上機(jī)實(shí)踐 100
第9章　 框架 101
9.1　 框架基本語法 101
9.2　 框架分欄 102
9.2.1　 框架垂直分欄 102
9.2.2　 框架水平分欄 104
9.3　 框架的常用屬性 105
9.3.1　 設(shè)置不可調(diào)節(jié)框架大小 105
9.3.2　 瀏覽器不支持框架 106
9.3.3　 設(shè)置框架邊框 107
9.3.4　 設(shè)置滾動(dòng)條 108
9.4　 框架鏈接 109
9.4.1　 導(dǎo)航框架 109
9.4.2　 內(nèi)聯(lián)框架 110
9.5　 框架實(shí)例 111
9.5.1　 在網(wǎng)頁中插入框架 111
9.5.2　 設(shè)置框架的滾動(dòng)條和邊框 112
9.5.3　 設(shè)置不支持框架文字 113
9.5.4　 設(shè)置框架導(dǎo)航鏈接 114
9.6　 小結(jié) 115
9.7　 上機(jī)實(shí)踐 115
第10章　 移動(dòng)的字體和圖片 117
10.1　 移動(dòng)屬性基本語法 117
10.2　 文字的移動(dòng) 118
10.3　 圖片的移動(dòng) 120
10.4　 如何設(shè)置對象移動(dòng) 121
10.4.1　 文本移動(dòng)的方向 121
10.4.2　 文本的滾動(dòng)循環(huán) 121
10.4.3　 文本的移動(dòng)速度 121
10.4.4　 應(yīng)用文本的全部移動(dòng)標(biāo)記 121
10.5　 移動(dòng)實(shí)例—電影結(jié)束效果 123
10.6　 小結(jié) 125
10.7　 上機(jī)實(shí)踐 125
第11章　 網(wǎng)頁多媒體 126
11.1　 網(wǎng)頁多媒體的基本語法 126
11.2　 設(shè)置自動(dòng)播放 127
11.3　 設(shè)置多媒體循環(huán)播放 128
11.4　 隱藏面板的設(shè)置 130
11.5　 設(shè)置面板大小 131
11.6　 對齊方式 132
11.7　 網(wǎng)頁多媒體實(shí)例—在網(wǎng)頁中播放視頻 133
11.7.1　 引入視頻文件 134
11.7.2　 設(shè)置多媒體為非自動(dòng)播放 134
11.7.3　 設(shè)置多媒體無循環(huán)播放 134
11.7.4　 設(shè)置控制面板的大小 135
11.8　 小結(jié) 136
11.9　 上機(jī)實(shí)踐 136
第二篇　 DIV+CSS布局
第12章　 為什么用DIV布局 137
12.1　 DIV與TABLE布局比較 137
12.1.1　 什么是DIV 137
12.1.2　 DIV與TABLE的區(qū)別 138
12.2　 如何用DIV布局 142
12.2.1　 設(shè)置DIV選擇符 142
12.2.2　 設(shè)置CSS修飾DIV效果 143
12.2.3　 設(shè)置DIV的背景顏色 145
12.3　 使用DIV注意事項(xiàng) 146
12.4　 小結(jié) 146
12.5　 上機(jī)實(shí)踐 147
第13章　 DIV與SPAN 148
13.1　 解讀SPAN 148
13.2　 何時(shí)用SPAN 149
13.3　 DIV與SPAN的區(qū)別 150
13.3.1　 默認(rèn)寬度不同 150
13.3.2　 塊元素與行內(nèi)元素 151
13.4　 DIV與SPAN實(shí)例—多層布局 152
13.5　 小結(jié) 154
13.6　 上機(jī)實(shí)踐 154
第14章　 DIV與CSS結(jié)合 156
14.1　 用CSS控制DIV 156
14.2　 CSS文件鏈接 157
14.2.1　 內(nèi)聯(lián)定義 157
14.2.2　 鏈入內(nèi)部CSS 158
14.2.3　 鏈接外部CSS 160
14.3　 DIV+CSS布局實(shí)例 161
14.3.1　 確定布局 162
14.3.2　 定義body樣式 162
14.3.3　 定義主要的DIV 163
14.3.4　 設(shè)置層居中 165
14.4　 小結(jié) 166
14.5　 上機(jī)實(shí)踐 166
第三篇　 CSS部分
第15章　 CSS基礎(chǔ)知識(shí) 167
15.1　 CSS簡介 167
15.2　 CSS文件鏈接方式 168
15.3　 選擇符 168
15.4　 偽類 169
15.5　 注解 170
15.6　 單位 170
15.7　 用編寫CSS工具演示 171
15.7.1　 打開CSS工具軟件 171
15.7.2　 新建CSS文件 171
15.7.3　 保存為CSS后綴文件 172
15.7.4　 打開Aptana工具 173
15.7.5　 在菜單欄中新建CSS文件 173
15.8　 CSS與瀏覽器兼容性 174
15.9　 CSS基礎(chǔ)實(shí)例 174
15.9.1　 在Aptana中新建網(wǎng)頁 175
15.9.2　 在Aptana中新建CSS文件 175
15.9.3　 鏈接CSS文件到HTML頁面中 176
15.9.4　 用不同的瀏覽器測試頁面 176
15.10　 小結(jié) 177
15.11　 上機(jī)實(shí)踐 177
第16章　 字體設(shè)置 178
16.1　 字體的復(fù)合屬性 178
16.2　 字體顏色 180
16.3　 字體大小 181
16.4　 字體重量 183
16.5　 字體類型 185
16.6　 行距 186
16.7　 如何設(shè)置文本間距與間隔 187
16.7.1　 文本間距 187
16.7.2　 文本間隔 187
16.8　 字體實(shí)例—字體花樣 189
16.8.1　 加入字體名字 190
16.8.2　 加入CSS控制字體 190
16.8.3　 設(shè)置行距 191
16.8.4　 設(shè)置文本間隔 192
16.9　 小結(jié) 194
16.10　 上機(jī)實(shí)踐 194
第17章　 文本設(shè)置 195
17.1　 字母大小寫轉(zhuǎn)換 195
17.2　 文本修飾 197
17.3　 空格處理方式 199
17.4　 設(shè)置文本的垂直與水平對齊 201
17.4.1　 文本垂直對齊 201
17.4.2　 文本水平對齊 204
17.5　 文本縮進(jìn) 205
17.6　 文本設(shè)置—給段落設(shè)置縮進(jìn) 207
17.6.1　 對DIV布局 207
17.6.2　 設(shè)置文本首行縮進(jìn) 207
17.7　 小結(jié) 208
17.8　 上機(jī)實(shí)踐 209
第18章　 設(shè)置背景 210
18.1　 背景語法 210
18.2　 設(shè)置背景顏色 211
18.3　 設(shè)置背景圖像 213
18.3.1　 設(shè)置背景圖像滾動(dòng) 214
18.3.2　 設(shè)置背景圖像位置 215
18.3.3　 設(shè)置背景圖像如何鋪排 217
18.4　 背景實(shí)例 219
18.4.1　 設(shè)置層背景為綠色 219
18.4.2　 設(shè)置層背景圖像 220
18.4.3　 設(shè)置背景為不鋪排 220
18.4.4　 設(shè)置背景圖像位置 221
18.5　 小結(jié) 222
18.6　 上機(jī)實(shí)踐 223
第19章　 設(shè)置尺寸 224
19.1　 設(shè)置寬度 224
19.2　 設(shè)置高度 226
19.3　 尺寸實(shí)例—設(shè)置層居中 227
19.3.1　 尺寸實(shí)例手把手 227
19.3.2　 設(shè)置層居中 231
19.4　 小結(jié) 233
19.5　 上機(jī)實(shí)踐 234
第20章　 設(shè)置外補(bǔ)丁 235
20.1　 外補(bǔ)丁基本語法 235
20.2　 外補(bǔ)丁的四邊設(shè)置 237
20.2.1　 頂端外補(bǔ)丁用法 237
20.2.2　 右端外補(bǔ)丁用法 238
20.2.3　 底端外補(bǔ)丁用法 239
20.2.4　 左端外補(bǔ)丁用法 241
20.3　 外補(bǔ)丁實(shí)例—設(shè)置層與層的距離 242
20.3.1　 層與層的距離效果 242
20.3.2　 對層布局 245
20.3.3　 設(shè)置層的尺寸 246
20.3.4　 設(shè)置層漂移 247
20.3.5　 設(shè)置層與層之間的間隔 249
20.4　 小結(jié) 251
20.5　 上機(jī)實(shí)踐 251
第21章　 設(shè)置內(nèi)補(bǔ)丁 252
21.1　 內(nèi)補(bǔ)丁基本語法 252
21.2　 內(nèi)補(bǔ)丁的四邊屬性 253
21.2.1　 頂端內(nèi)補(bǔ)丁用法 253
21.2.2　 右端內(nèi)補(bǔ)丁用法 254
21.2.3　 底端內(nèi)補(bǔ)丁用法 255
21.2.4　 左端內(nèi)補(bǔ)丁用法 256
21.3　 內(nèi)補(bǔ)丁實(shí)例 258
21.3.1　 設(shè)置頂部內(nèi)補(bǔ)丁 258
21.3.2　 設(shè)置其他位置的內(nèi)補(bǔ)丁 259
21.3.3　 用復(fù)合屬性padding設(shè)置內(nèi)補(bǔ)丁 261
21.4　 小結(jié) 262
21.5　 上機(jī)實(shí)踐 262
第22章　 設(shè)置對象邊框 264
22.1　 邊框的基本語法 264
22.2　 邊框顏色 266
22.3　 邊框樣式 267
22.4　 邊框?qū)挾?270
22.5　 對象的四個(gè)邊框 273
22.5.1　 設(shè)置頂端邊框的屬性 273
22.5.2　 設(shè)置右端邊框的屬性 274
22.5.3　 設(shè)置底端邊框的屬性 275
22.5.4　 設(shè)置左端邊框的屬性 276
22.6　 邊框?qū)嵗p邊框 277
22.6.1　 實(shí)例手把手 278
22.6.2　 設(shè)置多層邊框 281
22.7　 小結(jié) 283
22.8　 上機(jī)實(shí)踐 283
第23章　 定位 284
23.1　 定位的基本語法 284
23.2　 設(shè)置對象層疊順序 286
23.3　 設(shè)置對象的邊框位置 288
23.4　 定位實(shí)例—圓角制作 289
23.4.1　 相對定位實(shí)例 290
23.4.2　 絕對定位實(shí)例 291
23.4.3　 實(shí)例—圓角制作 293
23.5　 小結(jié) 299
22.6　 上機(jī)實(shí)踐 299
第24章　 列表 300
24.1　 列表的基本語法 300
24.2　 設(shè)置列表的圖像 302
24.3　 設(shè)置列表的文本排列 303
24.4　 列表的預(yù)設(shè)標(biāo)記 304
24.5　 列表實(shí)例 307
24.5.1　 設(shè)置列表圖像文字內(nèi)顯示 307
24.5.2　 設(shè)置列表樣式為空心圓 308
24.5.3　 設(shè)置文本外自定義列表圖像 309
24.6　 小結(jié) 310
24.7　 上機(jī)實(shí)踐 310
第25章　 用CSS控制表格 312
25.1　 控制表格的基本語法 312
25.2　 設(shè)置表格邊框獨(dú)立或合并 314
25.3　 設(shè)置表格布局的算法 316
25.4　 CSS控制表格實(shí)例 318
25.4.1　 布局好表格 318
25.4.2　 表格邊框獨(dú)立和合并 319
25.4.3　 設(shè)置表格算法為自動(dòng)和固定 321
25.5　 小結(jié) 322
25.6　 上機(jī)實(shí)踐 322
第26章　 CSS設(shè)置滾動(dòng)條 323
26.1　 滾動(dòng)條的基本語法 323
26.2　 設(shè)置滾動(dòng)條亮邊框顏色 324
26.3　 設(shè)置3D界面亮邊顏色和表面顏色 325
26.4　 設(shè)置滾動(dòng)條方向箭頭顏色 326
26.5　 設(shè)置滾動(dòng)條3D界面暗邊顏色和暗邊框顏色 327
26.6　 設(shè)置滾動(dòng)條基準(zhǔn)顏色和拖動(dòng)區(qū)域顏色 329
26.7　 小結(jié) 331
26.8　 上機(jī)實(shí)踐 331
第27章　 CSS布局 332
27.1　 設(shè)置層的漂移 332
27.2　 清除層的漂移范圍 334
27.3　 設(shè)置層的可視區(qū)域 337
27.4　 內(nèi)容超過層大小時(shí) 338
27.5　 鼠標(biāo)指針的不同表示 340
27.6　 設(shè)置對象可見性 343
27.6.1　 設(shè)置對象是否隱藏 344
27.6.2　 設(shè)置對象是否顯示 346
27.7　 小結(jié) 348
27.8　 上機(jī)實(shí)踐 348
第28章　 選擇符 349
28.1　 通配選擇符 349
28.2　 類型選擇符 350
28.3　 包含選擇符 352
28.4　 布局常用選擇符 353
28.4.1　 ID選擇符 353
28.4.2　 類選擇符 355
28.5　 分組選擇符 356
28.6　 小結(jié) 358
28.7　 上機(jī)實(shí)踐 358
第29章　 偽類 360
29.1　 偽類概念 360
29.2　 偽類的四種狀態(tài) 362
29.2.1　 訪問鏈接的狀態(tài) 362
29.2.2　 鼠標(biāo)光標(biāo)置于其上的狀態(tài) 363
29.2.3　 獲得焦點(diǎn)的狀態(tài) 364
29.2.4　 訪問過后的狀態(tài) 365
29.3　 小結(jié) 367
29.4　 上機(jī)實(shí)踐 367
第30章　 單位 368
30.1　 長度單位 368
30.2　 顏色單位 370
30.3　 小結(jié) 372
30.4　 上機(jī)實(shí)踐 372
第四篇　 實(shí) 踐 部 分
第31章　 游戲網(wǎng)站布局 375
31.1　 網(wǎng)站主頁規(guī)劃 375
31.2　 用DIV+CSS布局 377
31.2.1　 實(shí)現(xiàn)頁面頭部 377
31.2.2　 實(shí)現(xiàn)中間部分 379
31.2.3　 實(shí)現(xiàn)頁面底部 386
31.3　 加入文字 388
31.4　 調(diào)整全頁面的兼容性 391
31.5　 小結(jié) 391
第32章　 企業(yè)網(wǎng)站布局 393
32.1　 企業(yè)主頁規(guī)劃 393
32.2　 對網(wǎng)頁布局 394
32.2.1　 將頁面用DIV布局出框圖 395
32.2.2　 用CSS實(shí)現(xiàn)頁面頭部 397
32.2.3　 用CSS實(shí)現(xiàn)頁面體 398
32.3　 添加文本等信息 403
32.4　 調(diào)整全頁面和瀏覽器兼容 404
32.5　 其他二級頁面模塊制作 405
32.6　 小結(jié) 406
第33章　 博客主要頁面布局 407
33.1　 博客網(wǎng)站主頁規(guī)劃 407
33.1.1　 分析主頁需求 408
33.1.2　 確定內(nèi)容模塊 408
33.1.3　 畫出效果圖 408
33.2　 用DIV布局框圖 409
33.2.1　 頁眉 409
33.2.2　 實(shí)現(xiàn)內(nèi)容模塊 410
33.2.3　 頁腳 413
33.3　 CSS實(shí)現(xiàn)框圖 414
33.3.1　 實(shí)現(xiàn)內(nèi)容模塊 414
33.3.2　 實(shí)現(xiàn)整頁效果 419
33.4　 添加圖片 420
33.5　 加入文字 422
33.6　 調(diào)整全頁面 423
33.7　 其他頁面的布局 423
33.8　 小結(jié) 423
第34章　 面試題 424
面試題1　 DIV與SPAN的區(qū)別 424
面試題2　 HTML的框架是什么 424
面試題3　 CSS引入的方式有哪些 425
面試題4　 前端頁面由哪三層構(gòu)成，各層的作用是什么 425
面試題5　 瀏覽器的內(nèi)核有哪些？常用的瀏覽器都是什么內(nèi)核 425
面試題6　 img元素的alt text屬性和title屬性有什么不同 426
面試題7　 document.body和document.documentElement有什么不同 426
面試題8　 XHTML 和 DHTML 有什么區(qū)別 426
面試題9　 寫出實(shí)現(xiàn)效果所需的CSS代碼 426
面試題10　 寫出一段左邊固定、右邊隨電腦屏幕浮動(dòng)而變動(dòng)的HTML+CSS代碼 427
面試題11　 寫一段兩個(gè)DIV交叉重疊的CSS樣式 427
面試題12　 怎樣使一個(gè)層垂直居中于瀏覽器中 428
面試題13　 Firefox嵌套DIV標(biāo)簽居中問題的處理方法 428
面試題14　 用純CSS實(shí)現(xiàn)帶下拉的二級橫向?qū)Ш讲藛?428
面試題15　 在網(wǎng)頁制作中為什么要使用CSS技術(shù) 430
面試題16　 CSS+DIV開發(fā)Web頁面的優(yōu)勢有哪些 430
面試題17　 實(shí)現(xiàn)兩列高度自適應(yīng)的CSS代碼 430