HTML 5網頁製作全程揭秘

HTML 5是取代HTML 4的新一代Web技術,它將會成為HTML、XHTML以及HTML DOM的新標準。本書系統、全面講解了HTML語言及其最新版本HTML 5的新功能與新特性,技術新穎實用。書中大部分的知識點都結合實例進行講解,讀者在學習基礎知識後,親手實踐,可以快速鞏固所學知識。在每一個實例之後都會對該實例以及知識點的重要部分進行提問,並進行詳細解答,使讀者系統而全面地學習理論知識。書中的知識點所涉及的代碼都會給出詳細的注釋,從而使讀者輕鬆領會HTML語言的精髓,更加快速地提高技能。本書附贈1張CD光碟,其中提供了豐富的練習素材、源檔案,並為書中所有實例都錄製了多媒體教學視頻,方便讀者學習和參考。本書內容詳盡,實例豐富,非常適合作為編程初、中級讀者的學習用書,也適合作為開發人員的參考資料。

內容簡介

《HTML 5網頁製作全程揭秘》由清華大學出版社出版。

圖書目錄

第1章 HTML 5基礎 1

1.1 關於HTML 1

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

序言

在現在這個網際網路飛速發展的時代,網路已經成為人們生活中不可或缺的一部分,作為更加新穎、全面的技術,HTML 5標準具有巨大的魅力和市場前景。該技術目前已經開始影響我們的生活、工作和學習,相信在不久的將來,HTML 5將會成為業內正式的標準並得到所有人的認可。
在這種形勢下,學習並掌握HTML 5無疑成為Web開發者的一項重要任務。
本書內容
全書共分16章,通過結合實例操作,向用戶詳細而系統地講解了HTML 5的相關規則和功能,每一個知識點的介紹和實例都講解得通俗易懂。
第1章介紹了HTML 5的基礎知識,包括HTML 5的基本結構、標籤屬性以及HTML 5的編寫方法等。
第2章詳細介紹網頁的基本標籤,其中包括網頁頭部標籤、meta標籤、主體標籤、文字與段落標籤、圖像標籤以及列表標籤等。
第3章介紹超連結的建立方法,包括連結的基礎知識、基本連結的定義方法、連結的路徑、內部連結、錨點連結以及外部連結等。
第4章介紹canvas的使用方法,其中包括canvas元素的基本概要、繪製矩形的方法、使用路徑、繪製漸變圖形、繪製圖像、圖形的變形、繪製文本、圖形的組合、繪製陰影、繪製動畫效果以及保存與恢復繪圖狀態等。
第5章主要對CSS進行講解和套用,其中包括XHTML的介紹、CSS的概念、CSS的分類、CSS文檔結構、CSS選擇器、CSS選擇器聲明以及偽類和偽對象等。
第6章主要介紹SVG的使用方法,其中包括SVG的基礎概要、SVG的語法基礎、繪製SVG基本圖形、繪製文本、SVG漸變效果和樣式單等。
第7章主要介紹音頻和視頻在網頁中的插入方法,其中包括和的概要、和的屬性、和的方法、和的事件等。
第8章主要介紹鏈入內聯框架、對象和其他多媒體元素,其中包括內聯框架、iframe元素的屬性、沙盒安全限制、使用object元素鏈入對象和使用embed元素鏈入多媒體對象等。
第9章介紹表單的使用方法,其中包括表單標籤、插入表單對象、選單和列表、文本域標籤textarea和id標籤等。
第10章主要介紹離線網路套用,其中包括檔案快取的實現方法和定義快取清單檔案的方法等。
第11章主要介紹JavaScript腳本基礎,其中包括JavaScript簡介、JavaScript基本語法、JavaScript事件和瀏覽器的內部對象等。
第12章通過實例的形式向用戶介紹HTML文字特效的製作方法,其中包括彩色文字移動效果、文字滾動效果、文字跟隨滑鼠效果、文字輸入效果、文字替換效果、文字和顏色轉換以及文字漸顯效果等。
第13章通過實例的形式向用戶介紹HTML圖片特效的製作方法,其中包括圖片放大縮小、圖片放大鏡效果、圖片抖動效果、3D相冊特效、滾動的照片寫真效果、圖片切塊換圖片效果、滑鼠移動時展示大圖效果、圖片縮放效果、3D效果換圖、全螢幕漂浮的圖片效果、圖片展示效果、收縮切換圖像效果和精緻的相冊效果等。

相關詞條

熱門詞條

聯絡我們