HTML5網(wǎng)頁(yè)設(shè)計(jì)經(jīng)典課堂

目 錄

第1章　HTML入門(mén)必學(xué)
1.1　認(rèn)識(shí)HTML　/2
1.2　HTML5的優(yōu)勢(shì)　/2
1.2.1　強(qiáng)大的交互性　/3
1.2.2　使用HTML5的優(yōu)勢(shì)　/4
1.3　HTML5語(yǔ)法　/6
1.3.1　文檔類(lèi)型聲明　/6
1.3.2　字符編碼　/7
1.3.3　省略引號(hào)　/7
1.4　HTML5元素分類(lèi)　/8
1.4.1　結(jié)構(gòu)性元素　/8
1.4.2　級(jí)塊性元素　/8
1.4.3　行內(nèi)語(yǔ)義性元素　/9
1.4.4　交互性元素　/9
1.5　HTML5中新增的元素　/9
1.5.1　section元素　/9
1.5.2　article元素　/10
1.5.3　aside元素　/10
1.5.4　header元素　/11
1.5.5　fhgroup元素　/11
1.5.6　footer元素　/12
1.5.7　nav元素　/12
1.5.8　figure元素　/13
1.5.9　video元素　/13
1.5.10　audio元素　/14
1.5.11　embed元素　/14
1.5.12　mark元素　/14
1.5.13　progress元素　/15
1.5.14　meter元素　/15
1.5.15　time元素　/15
1.5.16　wbr元素　/15
1.5.17　canvas元素　/16
1.5.18　command元素　/16
1.5.19　datalist元素　/16
1.5.20　details元素　/16
1.5.21　datagrid元素　/17
1.5.22　keygen元素　/17
1.5.23　output元素　/17
1.5.24　source元素　/17
1.5.25　menu元素　/18
1.6　課堂練習(xí)　/18
強(qiáng)化訓(xùn)練　/19
第2章　文字和圖片樣式
2.1　網(wǎng)頁(yè)中的文字和段落　/22
2.1.1　標(biāo)題文字標(biāo)簽　/22
2.1.2　標(biāo)題文字的對(duì)齊方式　/23
2.1.3　設(shè)置文字字體　/24
2.1.4　設(shè)置段落換行　/25
2.1.5　設(shè)置字體顏色　/26
2.1.6　設(shè)置上標(biāo)和下標(biāo)　/27
2.1.7　設(shè)置刪除線(xiàn)　/28
2.1.8　不換行標(biāo)簽用法　/29
2.1.9　加粗標(biāo)簽的用法　/30
2.1.10　傾斜標(biāo)簽的用法　/31
2.2　網(wǎng)頁(yè)中的圖片樣式　/32
2.2.1　圖像格式　/33
2.2.2　添加圖片　/33
2.2.3　設(shè)置圖像大小　/34
2.2.4　設(shè)置圖像邊框　/35
2.2.5　圖像的水平間距　/36
2.2.6　圖像的垂直間距　/37
2.2.7　圖像的提示文字　/39
2.2.8　圖像的替換文字　/40
2.2.9　圖片相對(duì)于文字的對(duì)齊方式　/41
2.2.10　為圖片添加超鏈接　/41
2.3　課堂練習(xí)　/42
強(qiáng)化訓(xùn)練　/44
第3章　HTML中列表的樣式
3.1　使用無(wú)序列表　/48
3.1.1　ul標(biāo)簽　/48
3.1.2　type無(wú)序列表類(lèi)型　/49
3.2　使用有序列表　/51
3.2.1　ol標(biāo)簽　/51
3.2.2　type有序列表類(lèi)型　/52
3.2.3　start有序列表的起始值　/54
3.2.4　dl定義列表標(biāo)簽　/56
3.2.5　menu菜單列表　/60
3.2.6　color設(shè)置列表文字顏色　/61
3.3　列表的嵌套　/61
3.3.1　定義列表的嵌套　/62
3.3.2　無(wú)序列表和有序列表的嵌套　/63
3.3.3　有序列表之間的嵌套　/65
3.4　課堂練習(xí)　/66
強(qiáng)化訓(xùn)練　/68
第4章　制作網(wǎng)頁(yè)中的表單
4.1　表單的基本標(biāo)簽　/72
4.1.1　標(biāo)簽　/72 4.1.2　標(biāo)簽　/73
4.1.3　標(biāo)簽　/74
4.1.4　標(biāo)簽　/75
4.2　表單的基本屬性　/76
4.2.1　action屬性　/76
4.2.2　name屬性　/77
4.2.3　method屬性　/78
4.2.4　enctype屬性　/79
4.2.5　target屬性　/79
4.3　插入表單對(duì)象　/80
4.3.1　文本域　/80
4.3.2　密碼域　/81
4.3.3　普通按鈕　/82
4.3.4　單選按鈕　/84
4.3.5　復(fù)選框　/84
4.3.6　提交按鈕　/85
4.3.7　重置按鈕　/86
4.3.8　圖像按鈕　/87
4.3.9　隱藏域　/88
4.3.10　文件域　/90
4.3.11　菜單和列表　/90
4.4　課堂練習(xí)　/92
強(qiáng)化訓(xùn)練　/94
第5章　網(wǎng)頁(yè)多媒體的設(shè)置
5.1　插入多媒體　/98
5.1.1　插入音頻和視頻　/98
5.1.2　插入flash動(dòng)畫(huà)　/99
5.2　設(shè)置滾動(dòng)效果　/99
5.2.1　設(shè)置滾動(dòng)速度　/100
5.2.2　設(shè)置滾動(dòng)方向　/101
5.2.3　設(shè)置滾動(dòng)延遲　/102
5.2.4　設(shè)置滾動(dòng)方式　/103
5.2.5　設(shè)置滾動(dòng)的背景顏色　/104
5.2.6　設(shè)置滾動(dòng)范圍　/105
5.2.7　設(shè)置空白空間　/106
5.3　設(shè)置背景音樂(lè)　/107
5.3.1　插入背景音樂(lè)　/107
5.3.2　設(shè)置循環(huán)播放次數(shù)　/109
5.4　課堂練習(xí)　/110
強(qiáng)化訓(xùn)練　/111
第6章　使用表格和鏈接
6.1　創(chuàng)建表格　/114
6.1.1　表格的構(gòu)成　/114
6.1.2　表格的標(biāo)題　/115
6.1.3　表格的表頭　/116
6.2　設(shè)置表格屬性　/118
6.2.1　表格的寬度　/118
6.2.2　表格的高度　/120
6.2.3　表格的對(duì)齊方式　/122
6.3　設(shè)置表格邊框?qū)傩浴?123
6.3.1　表格的邊框　/123
6.3.2　內(nèi)框的寬度　/125
6.3.3　文字與邊框間距　/126
6.4　設(shè)置表格背景　/128
6.4.1　表格背景顏色　/128
6.4.2　行的背景顏色　/130
6.5　設(shè)置單元格樣式　/131
6.5.1　設(shè)置單元格的大小　/131
6.5.2　設(shè)置單元格邊框顏色　/133
6.5.3　設(shè)置單元格跨度　/134
6.6　超鏈接的路徑　/136
6.6.1　絕對(duì)路徑　/136
6.6.2　相對(duì)路徑　/136
6.7　創(chuàng)建超鏈接　/137
6.7.1　超鏈接標(biāo)簽的屬性　/137
6.7.2　內(nèi)部鏈接　/137
6.7.3　錨點(diǎn)鏈接　/139
6.7.4　外部鏈接　/142
6.8　課堂練習(xí)　/145
強(qiáng)化訓(xùn)練　/147
第7章　HTML5新增元素的用法
7.1　HTML5新增主體結(jié)構(gòu)元素　/150
7.1.1　article元素　/150
7.1.2　section元素　/151
7.1.3　nav元素　/152
7.1.4　aside元素　/154
7.1.5　pubdate元素　/155
7.2　HTML5新增非主體結(jié)構(gòu)元素　/156
7.2.1　header元素　/156
7.2.2　hgroup元素　/157
7.2.3　footer元素　/158
7.2.4　address元素　/160
7.3　新增audio和video元素　/161
7.3.1　檢測(cè)瀏覽器是否支持　/161
7.3.2　audio元素　/162
7.3.3　使用audio元素　/163
7.3.4　video元素　/164
7.3.5　使用video元素　/165
7.4　新增的屬性　/167
7.4.1　表單相關(guān)屬性　/167
7.4.2　其他相關(guān)屬性　/168
7.5　課堂練習(xí)　/168
強(qiáng)化訓(xùn)練　/171
第8章　制作新型表單
8.1　認(rèn)識(shí)HTML5 forms　/174
8.1.1　HTML5 forms新特性　/174
8.1.2　新型表單的輸入型控件　/175
8.2　表單新屬性　/179
8.2.1　新增表單元素　/179
8.2.2　新增表單屬性　/182
8.3　HTML5中forms的應(yīng)用　/186
8.4　課堂練習(xí)　/189
強(qiáng)化訓(xùn)練　/191
第9章　地理位置請(qǐng)求
9.1　關(guān)于地理位置信息　/194
9.1.1　經(jīng)度和緯度坐標(biāo)　/194
9.1.2　IP地址定位數(shù)據(jù)　/194
9.1.3　GPS地理定位數(shù)據(jù)　/195
9.1.4　WiFi地理定位數(shù)據(jù)　/195
9.1.5　自定義地理定位　/195
9.2　各種瀏覽器對(duì)Geolocation的支持　/195
9.2.1　Geolocation API概述　/196
9.2.2　Geolocation的瀏覽器支持情況　/198
9.3　隱私處理　/199
9.3.1　應(yīng)用隱私保護(hù)機(jī)制　/199
9.3.2　處理位置信息　/199
9.4　使用Geolocation API　/199
9.4.1　檢測(cè)瀏覽器是否支持　/200
9.4.2　位置請(qǐng)求　/201
9.5　在地圖上顯示你的位置　/203
9.6　課堂練習(xí)　/207
強(qiáng)化訓(xùn)練　/209
第10章　在頁(yè)面中繪圖
10.1　canvas入門(mén)　/212
10.1.1　canvas含義　/212
10.1.2　canvas坐標(biāo)　/212
10.2　使用canvas　/213
10.2.1　在頁(yè)面中加入canvas　/213
10.2.2　繪制矩形和五角形　/215
10.2.3　檢測(cè)瀏覽器是否支持　/218
10.3　繪制曲線(xiàn)路徑　/219
10.3.1　繪制路徑的方法　/219
10.3.2　描邊樣式的使用　/222
10.3.3　填充和曲線(xiàn)的繪制方法　/224
10.4　繪制圖像　/226
10.4.1　插入圖片　/226
10.4.2　漸變顏色的使用　/228
10.4.3　變形圖形的設(shè)置方法　/231
10.4.4　組合圖形的繪制方法　/232
10.4.5　使用canvas繪制文字　/235
10.5　課堂練習(xí)　/236
強(qiáng)化訓(xùn)練　/240
第11章　離線(xiàn)儲(chǔ)存和拖放
11.1?離線(xiàn)Web入門(mén)　/244
11.1.1　離線(xiàn)Web介紹　/244
11.1.2　離線(xiàn)Web應(yīng)用的瀏覽器支持情況　/244
11.2　使用離線(xiàn)Web　/245
11.2.1　支持離線(xiàn)行為　/245
11.2.2　manifest文件介紹　/246
11.2.3　applicationCache對(duì)象　/247
11.2.4　離線(xiàn)Web的具體應(yīng)用　/249
11.3　Web workers知識(shí)　/251
11.3.1　Web workers概述　/251
11.3.2　Web workers的簡(jiǎn)單應(yīng)用　/252
11.4　使用Web workers API　/254
11.4.1　檢測(cè)瀏覽器是否支持　/254
11.4.2　創(chuàng)建Web workers　/255
11.4.3　多線(xiàn)程文件的加載與執(zhí)行　/255
11.4.4　與Web workers通信　/256
11.5　拖放API　/257
11.5.1　實(shí)現(xiàn)拖放API的過(guò)程　/257
11.5.2　dataTransfer對(duì)象的屬性與方法　/258
11.6　拖放API的應(yīng)用　/258
11.6.1　拖放應(yīng)用　/259
11.6.2　拖放列表　/261
11.7　課堂練習(xí)　/264
強(qiáng)化訓(xùn)練　/267
第12章　綜合實(shí)戰(zhàn)
12.1　制作一個(gè)商業(yè)網(wǎng)站　/270
12.1.1　商業(yè)網(wǎng)站的功能　/270
12.1.2　界面設(shè)計(jì)分析　/271
12.2　頭部和banner的制作　/271
12.2.1　頭部?jī)?nèi)容的結(jié)構(gòu)分析　/271
12.2.2　banner的制作　/272
12.3　頁(yè)面主體的制作　/273
12.3.1　主體內(nèi)容結(jié)構(gòu)分析　/274
12.3.2　主體內(nèi)容樣式定義　/275
12.4　頁(yè)面尾部的制作　/276
12.5　網(wǎng)站首頁(yè)代碼示例　/277
12.6　二級(jí)頁(yè)面的制作　/282
參考文獻(xiàn)　/287