HTML 5網(wǎng)頁制作全程揭秘圖書目錄

時(shí)間：2023-02-18 01:20:01 | 來源：營銷百科

時(shí)間：2023-02-18 01:20:01 來源：營銷百科

HTML 5網(wǎng)頁制作全程揭秘圖書目錄：第1章 HTML 5基礎(chǔ) 1
1.1 關(guān)于HTML 1
1.1.1 什么是HTML 51
1.1.2 HTML 5的基本結(jié)構(gòu) 1
實(shí)例01 視頻：創(chuàng)建HTML頁面 2
1.1.3 HTML 5的標(biāo)簽 3
實(shí)例02 視頻：使用標(biāo)簽的方法 8
1.1.4 HTML 5屬性 9
實(shí)例03 視頻：使用標(biāo)簽屬性的方法 11
1.1.5 HTML 5事件屬性 11
實(shí)例04 視頻：使用事件屬性的方法 14
1.1.6 HTML注釋標(biāo)簽 15
實(shí)例05 視頻：為標(biāo)簽添加注釋 15
1.2 HTML 5與HTML 4的區(qū)別 16
1.2.1 HTML 5的語法變化 16
1.2.2 HTML 5中的標(biāo)記方法 16
1.3 HTML 5新增元素和廢除元素 17
1.3.1 新增的結(jié)構(gòu)元素 17
實(shí)例06 視頻：使用新增結(jié)構(gòu)元素制作頁面 18
1.3.2 新增的其他元素 19
實(shí)例07 視頻：使用新增的音頻標(biāo)簽插入音樂 22
1.3.3 被廢除的元素 23
1.4 HTML編寫方法 24
1.4.1 使用記事本編寫HTML 24
實(shí)例08 視頻：使用記事本創(chuàng)建HTML文檔 24
1.4.2 使用Dreamweaver編寫HTML文檔 25
1.4.3 元素和屬性的大小寫規(guī)范 25
1.4.4 斷行符與空白字符 26
1.5 預(yù)覽測試HTML頁面 26
1.5.1 查看頁面效果 26
1.5.2 查看源代碼 27
1.6 本章小結(jié) 27
第2章 網(wǎng)頁基本HTML標(biāo)簽 28
2.1 使用head頭部標(biāo)簽 28
2.2 使用title標(biāo)題標(biāo)簽 28
實(shí)例09 視頻：定義標(biāo)題 28
2.3 使用meta標(biāo)簽 29
2.3.1 設(shè)置頁面關(guān)鍵字 29
實(shí)例10 視頻：定義搜索引擎關(guān)鍵字 30
2.3.2 設(shè)置頁面說明 31
2.3.3 定義編輯工具 31
2.3.4 定義作者信息 31
實(shí)例11 視頻：定義作者 31
2.3.5 設(shè)置網(wǎng)頁內(nèi)容類型和字符集 32
2.3.6 設(shè)置網(wǎng)頁跳轉(zhuǎn)效果 33
實(shí)例12 視頻：設(shè)置網(wǎng)頁定時(shí)跳轉(zhuǎn) 33
2.4 使用body標(biāo)簽定義頁面主體 34
2.4.1 使用bgcolor定義網(wǎng)頁背景色 34
實(shí)例13 視頻：設(shè)置背景顏色 35
2.4.2 使用background定義網(wǎng)頁背景 36
實(shí)例14 視頻：設(shè)置背景圖像 36
2.4.3 使用text定義文字顏色 37
實(shí)例15 視頻：設(shè)置文字顏色 37
2.4.4 使用link實(shí)現(xiàn)鏈接 38
實(shí)例16 視頻：設(shè)置鏈接文本的顏色 39
2.4.5 使用margin定義頁面邊距 40
實(shí)例17 視頻：定義頁面邊距 40
2.5 文字與段落標(biāo)簽 41
2.5.1 在網(wǎng)頁中輸入文字 41
實(shí)例18 視頻：在網(wǎng)頁中輸入文字 41
2.5.2 標(biāo)題字 42
實(shí)例19 視頻：使用標(biāo)題標(biāo)簽 43
2.5.3 文本基本屬性 44
實(shí)例20 視頻：使用＜font＞標(biāo)簽 45
2.5.4 文本格式化標(biāo)簽 45
實(shí)例21 視頻：使用粗體、斜體標(biāo)簽 46
2.5.5 上標(biāo)和下標(biāo) 47
實(shí)例22 視頻：使用上標(biāo)、下標(biāo)標(biāo)簽 48
2.5.6 大小字號和下劃線 49
實(shí)例23 視頻：使用大小字號和下劃線 49
2.6 使用圖像 50
2.6.1 圖像的格式 50
2.6.2 插入圖像 50
實(shí)例24 視頻：插入圖像 51
2.6.3 圖片的大小 52
實(shí)例25 視頻：修改圖片大小 53
2.6.4 圖像提示文字 53
實(shí)例26 視頻：圖像提示字 54
2.6.5 圖像的邊框 55
2.6.6 圖像的邊距 55
實(shí)例27 視頻：圖像的邊框和垂直邊距 56
2.6.7 圖像的排列 56
實(shí)例28 視頻：網(wǎng)頁圖文排版 57
2.6.8 圖像的超鏈接 58
實(shí)例29 視頻：創(chuàng)建圖像超鏈接 58
2.6.9 圖像熱區(qū)鏈接 59
實(shí)例30 視頻：使用圖像熱區(qū)創(chuàng)建鏈接 59
2.7 使用列表 60
2.7.1 有序列表（ol元素） 60
實(shí)例31 視頻：定義有序新聞列表 61
2.7.2 自定義有序列表的序號 62
實(shí)例32 視頻：定義新聞列表序號樣式 62
2.7.3 自定義有序列表的起始數(shù) 63
實(shí)例33 視頻：定義新聞列表的起始數(shù) 63
2.7.4 自定義有序列表的數(shù)值 64
實(shí)例34 視頻：定義新聞列表數(shù)值 64
2.7.5 無序列表（ul元素） 65
實(shí)例35 視頻：制作無序列表 65
2.7.6 dl定義列表 66
實(shí)例36 視頻：使用dl定義網(wǎng)頁公告列表 66
2.7.7 嵌套列表 67
2.7.8 反轉(zhuǎn)序號值（reversed屬性） 68
2.8 使用表格 68
2.8.1 表格簡介 68
2.8.2 表格屬性 68
實(shí)例37 視頻：制作表格 69
2.8.3 表格樣式 69
實(shí)例38 視頻：定義表格樣式 70
2.8.4 表格的標(biāo)題 71
實(shí)例39 視頻：定義表格標(biāo)題 71
2.8.5 區(qū)分單元格 72
實(shí)例40 視頻：制作年級成績排名單172
實(shí)例41 視頻：制作年級成績平均分?jǐn)?shù)單 74
2.8.6 跨多行、多列的單元格 76
實(shí)例42 視頻：制作年級成績平均分?jǐn)?shù)單276
2.9 本章小結(jié) 77
第3章 建立超鏈接 78
3.1 鏈接的基礎(chǔ)知識 78
3.2 定義基本鏈接 79
3.2.1 定義鏈接的目標(biāo)URL（href屬性） 79
3.2.2 定義鏈接的目標(biāo)窗口（target屬性） 79
3.2.3 定義鏈接的提示信息（title屬性） 80
3.2.4 國際化和鏈接（hreflang屬性） 80
3.3 鏈接路徑 80
3.3.1 絕對路徑 81
3.3.2 相對路徑 81
3.4 內(nèi)部鏈接 81
實(shí)例43 視頻：創(chuàng)建內(nèi)部鏈接 82
3.5 錨點(diǎn)鏈接 82
3.5.1 建立錨點(diǎn) 83
實(shí)例44 視頻：建立錨點(diǎn) 83
3.5.2 鏈接同一頁面中的錨點(diǎn) 84
實(shí)例45 視頻：建立錨點(diǎn)鏈接 84
3.5.3 鏈接到其他頁面中的錨點(diǎn) 85
實(shí)例46 視頻：鏈接到其他頁面中的錨點(diǎn) 85
3.6 外部鏈接 86
3.6.1 鏈接到外部網(wǎng)站 86
實(shí)例47 視頻：創(chuàng)建友情鏈接 87
3.6.2 鏈接到FTP 87
實(shí)例48 視頻：創(chuàng)建FTP鏈接 88
3.6.3 鏈接到Telnet 89
3.6.4 下載鏈接 89
實(shí)例49 視頻：下載數(shù)據(jù) 89
3.7 本章小結(jié) 90
第4章 使用canvas 91
4.1 關(guān)于canvas元素 91
4.1.1 canvas的歷史 91
4.1.2 canvas的使用方法 91
4.2 繪制矩形 92
實(shí)例50 視頻：使用canvas繪制矩形 92
4.3 使用路徑 93
4.3.1 開始和閉合路徑 94
4.3.2 moveTo和lineTo 94
實(shí)例51 視頻：使用lineTo繪制圖形 94
4.3.3 arc（）方法 96
實(shí)例52 視頻：繪制圓形 96
4.3.4 bezierCurveTo（）方法 98
實(shí)例53 視頻：繪制心形 98
4.4 漸變圖形 100
4.4.1 線性漸變 100
實(shí)例54 視頻：繪制線性漸變 100
4.4.2 徑向漸變 102
實(shí)例55 視頻：繪制徑向漸變 102
4.5 在canvas中繪制圖像 104
4.5.1 圖像繪制的基本步驟 104
實(shí)例56 視頻：繪制圖像（一） 105
實(shí)例57 視頻：繪制圖像（二） 107
實(shí)例58 視頻：繪制圖像（三） 108
4.5.2 圖像平鋪 109
實(shí)例59 視頻：繪制平鋪圖像 109
4.5.3 圖像裁剪 111
實(shí)例60 視頻：裁剪圖像 111
4.5.4 像素處理 113
實(shí)例61 視頻：繪制隨機(jī)像素 114
4.6 圖形的變形 116
4.6.1 平移 116
實(shí)例62 視頻：平移圖形 116
4.6.2 擴(kuò)大 118
實(shí)例63 視頻：擴(kuò)大圖形 118
4.6.3 旋轉(zhuǎn) 119
實(shí)例64 視頻：旋轉(zhuǎn)圖形 119
4.6.4 變形矩陣 120
實(shí)例65 視頻：使用矩陣變換 121
4.7 繪制文本 123
實(shí)例66 視頻：繪制文本 124
4.7.1 對齊方式 125
4.7.2 基準(zhǔn)線 125
實(shí)例67 視頻：調(diào)整繪制文本 125
4.8 圖形的組合 127
實(shí)例68 視頻：組合圖形 128
4.9 繪制陰影 132
實(shí)例69 視頻：為圖形添加陰影 133
4.10 繪制動畫效果 134
實(shí)例70 視頻：使用canvas繪制動畫 135
4.11 保存與恢復(fù)繪圖狀態(tài) 136
4.11.1 保存繪圖狀態(tài) 137
4.11.2 恢復(fù)繪圖狀態(tài) 137
實(shí)例71 視頻：使用restore繪制圖形 137
4.12 本章小結(jié) 139
第5章 CSS基礎(chǔ) 140
5.1 什么是XHTML 140
5.1.1 為何要升級到XHTML 140
5.1.2 XHTML的頁面結(jié)構(gòu) 140
5.1.3 XHTML的代碼規(guī)范 141
5.1.4 在Dreamweaver中編輯XHTML 143
實(shí)例72 視頻：創(chuàng)建XHTML文檔 143
5.1.5 HTML和XHTML的轉(zhuǎn)換 144
5.2 CSS的概念 145
5.2.1 CSS的基本語法 145
5.2.2 CSS的優(yōu)勢 145
5.2.3 CSS樣式的類型 145
5.3 CSS的分類 146
5.3.1 內(nèi)聯(lián)樣式 147
實(shí)例73 視頻：設(shè)置內(nèi)聯(lián)樣式 147
5.3.2 內(nèi)部樣式表 148
實(shí)例74 視頻：設(shè)置內(nèi)部樣式 149
5.3.3 外部樣式表 150
實(shí)例75 視頻：設(shè)置外部樣式 150
5.4 CSS文檔結(jié)構(gòu) 151
5.4.1 文檔結(jié)構(gòu) 152
5.4.2 CSS的繼承性 152
5.4.3 CSS的特殊性 152
5.4.4 CSS的層疊性 152
5.4.5 CSS的重要性 153
5.5 CSS選擇器 153
5.5.1 標(biāo)簽選擇器 153
實(shí)例76 視頻：使用標(biāo)簽選擇符 154
5.5.2 類選擇器 155
實(shí)例77 視頻：使用類選擇符 155
5.5.3 id選擇器 156
實(shí)例78 視頻：使用id選擇符 157
5.5.4 通配選擇器 158
實(shí)例79 視頻：使用通配選擇符 159
5.5.5 組合選擇器 160
5.6 CSS選擇器聲明 160
5.6.1 群選擇器 160
5.6.2 派生選擇器 160
5.7 偽類及偽對象 161
5.8 本章小結(jié) 162
第6章 SVG 163
6.1 SVG的基礎(chǔ)概要 163
6.1.1 為什么要使用SVG 163
6.1.2 SVG規(guī)范 164
6.1.3 SVG的特征 164
6.1.4 SVG在瀏覽器中的顯示方法 164
實(shí)例80 視頻：將SVG圖像鏈接到HTML文檔中 165
6.2 SVG的語法基礎(chǔ) 166
6.3 繪制SVG基本圖形 167
6.3.1 繪制矩形 167
實(shí)例81 視頻：繪制矩形和圓角矩形 167
6.3.2 繪制圓形 169
實(shí)例82 視頻：使用SVG繪制正圓 169
6.3.3 繪制橢圓 170
實(shí)例83 視頻：使用SVG繪制橢圓 170
6.3.4 繪制直線 171
實(shí)例84 視頻：使用SVG繪制直線 171
6.3.5 繪制折線與多角星形 172
實(shí)例85 視頻：使用SVG繪制五角星 173
6.3.6 使用path元素繪制圖形 174
實(shí)例86 視頻：使用path元素繪制五角星 174
6.3.7 坐標(biāo)與編組 175
實(shí)例87 視頻：通過g元素對圖形進(jìn)行編組 175
6.3.8 使用transform屬性 177
實(shí)例88 視頻：對編組元素進(jìn)行操作 177
6.4 繪制文本 178
實(shí)例89 視頻：使用SVG繪制文本 179
實(shí)例90 視頻：制作波浪紋路徑文本 180
6.5 SVG漸變效果 181
6.5.1 線性漸變 182
實(shí)例91 視頻：制作橫向與縱向線性漸變效果 182
6.5.2 徑向漸變 183
實(shí)例92 視頻：制作徑向漸變效果 183
6.6 樣式單 184
實(shí)例93 視頻：使用樣式控制繪制元素的外觀 184
6.7 本章小結(jié) 185
第7章 音頻和視頻 186
7.1 ＜audio＞和＜video＞的概要 186
7.2 ＜audio＞和＜video＞的屬性 187
實(shí)例94 視頻：導(dǎo)入視頻 187
實(shí)例95 視頻：設(shè)置video自動播放 188
實(shí)例96 視頻：添加video播放條 189
實(shí)例97 視頻：使用poster替換video 190
7.3 ＜audio＞和＜video＞的方法 192
7.3.1 play方法 192
實(shí)例98 視頻：控制播放audio 192
7.3.2 pause方法 193
實(shí)例99 視頻：設(shè)置暫停audio 194
7.3.3 load方法 195
7.3.4 canPlayType方法 195
7.4 ＜audio＞和＜video＞的事件 195
實(shí)例100 視頻：設(shè)置監(jiān)聽audio 197
7.5 本章小結(jié) 198
第8章 鏈入內(nèi)聯(lián)框架、對象和其他
多媒體元素 199
8.1 內(nèi)聯(lián)框架（iframe元素） 199
8.2 iframe元素的屬性 199
8.2.1 src的屬性 199
8.2.2 width和height屬性 200
實(shí)例101 視頻：創(chuàng)建內(nèi)聯(lián)框架 200
8.2.3 frameborder屬性 201
8.2.4 marginwidth和marginwidht屬性 201
8.2.5 name屬性 201
8.2.6 align屬性 202
8.2.7 scrolling屬性 202
8.3 沙盒安全限制 202
8.4 使用object元素鏈入對象 203
實(shí)例102 視頻：鏈入jpg圖像 203
8.4.1 object元素的屬性 204
8.4.2 渲染對象的規(guī)則 204
8.4.3 對象初始化（param元素） 205
8.4.4 內(nèi)聯(lián)數(shù)據(jù)和外部數(shù)據(jù) 205
8.5 使用embed元素鏈入多媒體對象 206
8.5.1 設(shè)置自動播放 206
8.5.2 設(shè)置循環(huán)播放 206
8.5.3 控制面板的顯示 206
8.5.4 設(shè)置開始時(shí)間 207
8.5.5 設(shè)置音量大小 207
8.5.6 設(shè)置容器屬性 207
8.5.7 外觀設(shè)置 207
8.5.8 設(shè)置對象名稱和文字說明 207
8.5.9 設(shè)置背景 208
8.5.10 設(shè)置對齊方式 208
實(shí)例103 視頻：鏈入swf文件 208
8.6 本章小結(jié) 210
第9章 使用表單 211
9.1 表單標(biāo)簽＜ form＞ 211
9.1.1 提交表單action 211
實(shí)例104 視頻：設(shè)置表單action屬性 211
9.1.2 表單名稱name 212
實(shí)例105 視頻：為表單命名 212
9.1.3 傳送方法method 213
實(shí)例106 視頻：設(shè)置表單傳送方法 214
9.1.4 編碼方式enctype 215
實(shí)例107 視頻：設(shè)置表單的編碼方式 215
9.1.5 目標(biāo)打開方式target 216
實(shí)例108 視頻：在新窗口中打開鏈接 216
9.2 插入表單對象 217
9.2.1 文字字段Text 217
實(shí)例109 視頻：創(chuàng)建文字字段 218
9.2.2 密碼域password 219
實(shí)例110 視頻：創(chuàng)建密碼域 219
9.2.3 單選按鈕radio 220
實(shí)例111 視頻：創(chuàng)建單選按鈕 220
9.2.4 復(fù)選框checkbox 221
實(shí)例112 視頻：創(chuàng)建復(fù)選框 221
9.2.5 普通按鈕button 222
實(shí)例113 視頻：創(chuàng)建關(guān)閉窗口按鈕 222
9.2.6 提交按鈕submit 223
實(shí)例114 視頻：創(chuàng)建提交按鈕 223
9.2.7 重置按鈕submit 224
實(shí)例115 視頻：創(chuàng)建重置按鈕 224
9.2.8 圖像域image 225
實(shí)例116 視頻：創(chuàng)建鬧鐘按鈕 226
9.2.9 隱藏域hidden 226
實(shí)例117 視頻：添加隱藏域 227
9.2.10 文件域file 228
實(shí)例118 視頻：在網(wǎng)頁中上傳照片 228
9.3 菜單和列表 229
9.3.1 下拉菜單 229
實(shí)例119 視頻：創(chuàng)建下拉菜單 230
9.3.2 列表項(xiàng) 231
實(shí)例120 視頻：選擇愛吃的水果 231
9.4 文本域標(biāo)簽textarea 232
實(shí)例121 視頻：創(chuàng)建意見框 232
9.5 id標(biāo)簽 233
實(shí)例122 視頻：給表單元素命名 233
9.6 表單的綜合使用 234
實(shí)例123 視頻：創(chuàng)建點(diǎn)歌表單 234
9.7 本章小結(jié) 236
第10章 離線網(wǎng)絡(luò)應(yīng)用 237
10.1 實(shí)現(xiàn)文件緩存 237
10.1.1 離線應(yīng)用與網(wǎng)頁引用的資源 237
實(shí)例124 視頻：測試離線應(yīng)用 238
10.1.2 創(chuàng)建清單文件 239
10.1.3 更新離線儲存 239
10.2 緩存清單文件 239
10.2.1 定義緩存文件 240
10.2.2 備抵機(jī)制 240
10.2.3 白名單 241
10.2.4 注釋 241
10.3 本章小結(jié) 242
第11章 JavaScript腳本基礎(chǔ) 243
11.1 JavaScript簡介 243
實(shí)例125 視頻：JavaScript的基本用法 243
11.2 JavaScript基本語法 244
11.2.1 常量 244
11.2.2 變量 244
11.2.3 表達(dá)式 245
11.2.4 運(yùn)算符 245
11.2.5 基本語句 246
實(shí)例126 視頻：交替顯示圖片 246
實(shí)例127 視頻：循環(huán)輸出文字 247
11.2.6 函數(shù) 249
11.3 JavaScript事件 249
11.3.1 onClick事件 249
實(shí)例128 視頻：全屏顯示圖像 250
11.3.2 onChange事件 251
實(shí)例129 視頻：彈出提示信息 251
11.3.3 onSelect事件 252
實(shí)例130 視頻：彈出提示信息 252
11.3.4 onFocus事件 253
實(shí)例131 視頻：選擇課程 253
11.3.5 onLoad事件 254
實(shí)例132 視頻：使用onLoad事件 254
11.3.6 onUnLoad事件 255
實(shí)例133 視頻：使用onUnLoad事件 255
11.3.7 onBlur事件 256
實(shí)例134 視頻：使用onBlur事件 256
11.3.8 onMouseOver事件 257
實(shí)例135 視頻：顯示圖像 257
11.3.9 onMouseOut事件 258
實(shí)例136 視頻：隱藏圖像 259
11.3.10 onDblClick事件 260
實(shí)例137 視頻：雙擊打開網(wǎng)站 260
11.3.11 其他常用事件 261
11.4 瀏覽器的內(nèi)部對象 264
11.4.1 navigator對象 264
實(shí)例138 視頻：顯示瀏覽器信息 265
11.4.2 document對象 265
實(shí)例139 視頻：顯示網(wǎng)頁信息 266
11.4.3 Windows對象 267
11.4.4 location對象 268
11.4.5 history對象 269
實(shí)例140 視頻：瀏覽歷史 269
11.5 本章小結(jié) 271
第12章 使用HTML制作文字特效 272
實(shí)例141 視頻：彩色文字移動效果 272
實(shí)例142 視頻：文字滾動效果 273
實(shí)例143 視頻：文字跟隨鼠標(biāo)效果 275
實(shí)例144 視頻：文字輸入效果 277
實(shí)例145 視頻：文字替換效果 284
實(shí)例146 視頻：文字和顏色轉(zhuǎn)換 288
實(shí)例147 視頻：文字漸顯效果 291
第13章 使用HTML制作圖片特效 295
實(shí)例148 視頻：圖片放大縮小 295
實(shí)例149 視頻：圖片放大鏡效果 296
實(shí)例150 視頻：圖片抖動效果 300
實(shí)例151 視頻：3D相冊特效 302
實(shí)例152 視頻：滾動的照片寫真效果 304
實(shí)例153 視頻：圖片切塊換圖片效果 306
實(shí)例154 視頻：鼠標(biāo)移動時(shí)展示大圖 309
實(shí)例155 視頻：圖片縮放 311
實(shí)例156 視頻：3D效果換圖 313
實(shí)例157 視頻：全屏漂浮的圖片 315
實(shí)例158 視頻：圖片展示效果 317
實(shí)例159 視頻：收縮切換圖像效果 319
實(shí)例160 視頻：精致的相冊效果 321
第14章 使用HTML制作交互效果 326
實(shí)例161 視頻：廣告交互效果 326
實(shí)例162 視頻：網(wǎng)頁相冊效果 329
實(shí)例163 視頻：點(diǎn)擊展示效果 332
實(shí)例164 視頻：鼠標(biāo)拖曳效果 337
實(shí)例165 視頻：鼠標(biāo)交互效果 340
實(shí)例166 視頻：導(dǎo)航跳轉(zhuǎn)效果 344
第16章 使用HTML制作其他特效 368
實(shí)例176 視頻：仿手機(jī)滑屏效果 368
實(shí)例177 視頻：制作時(shí)鐘特效 371
實(shí)例178 視頻：書本翻頁效果 374
實(shí)例179 視頻：制作游戲效果 378
實(shí)例180 視頻：磁帶播放效果 381
實(shí)例181 視頻：可拖動的池子球效果 385