內 容 簡 介
本書以零基礎講解為宗旨，用實例引導讀者深入學習，采取“基礎知識→核心技術→高級應用→項目案例實戰”的講解模式，深入淺出地講解HTML5的各項技術及實戰技能。
本書第1篇“基礎知識”主要講解初識HTML5、HTML5網頁文檔結構、HTML5與HTML4的區別等；第2篇“核心技術”主要講解設計網頁文本內容、網頁列表與段落設計、HTML5網頁中的圖像、使用HTML5建立超鏈接、使用HTML5創建表單、使用HTML5創建表格、 HTML5中的多媒體、使用HTML5繪制圖形、HTML 5中的文件與拖放等；第3篇“高級應用”主要講解獲取地理位置、Web通信新技術、數據存儲技術、使用Web Worker處理線程、HTML5服務器發送事件、構建離線的Web應用等；第4篇“項目案例實戰”主要講解HTML5、CSS3和JavaScript的搭配應用案例，制作電子商務類網頁，制作休閑娛樂類網頁，制作企業門戶類網頁。
本書配套的DVD光盤中贈送了豐富的資源，諸如HTML5案例源碼命令、教學幻燈片、本書精品教學視頻、HTML5標簽速查手冊、CSS屬性速查表、CSS+DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析、Web前端工程師常見面試題等。
本書適合任何想學習HTML5的人員，無論您是否從事計算機相關行業或是否接觸過HTML5，通過學習均可快速地掌握HTML5的設計方法和技巧。
前 言
“網站開發案例課堂”系列圖書是專門為網站開發和數據庫初學者量身定做的一套學習用書，由劉玉紅策劃，IT應用實訓中心的高級講師編著。整套書涵蓋網站開發、數據庫設計等方面。整套書具有以下特點。
* 前沿科技
無論是網站建設、數據庫設計還是HTML5、CSS3，我們都精選較為前沿或者用戶群最大的領域推進，幫助大家認識和了解最新動態。
* 權威的作者團隊
組織國家重點實驗室和資深應用專家聯手編著該套圖書，融合豐富的教學經驗與優秀的管理理念。
* 學習型案例設計
以技術的實際應用過程為主線，全程采用圖解和同步多媒體結合的教學方式，生動、直觀、全面地剖析使用過程中的各種應用技能，降低難度，提高讀者的學習效率。
為什么要寫這樣一本書
自從HTML5正式推出以來，它立刻受到世界各大瀏覽器的熱烈歡迎和支持。根據世界各大IT界知名媒體的評論，新的Web時代，HTML5馬上就要到來。隨著用戶頁面體驗要求的提高，頁面前端技術日趨重要，HTML5的技術成熟，使其在前端技術中突顯優勢，隨著各大廠商瀏覽器的支持，它會更加盛行。通過本書的實訓，讀者可以很快地上手設計網頁，提高職業化能力，從而幫助讀者解決公司需求問題。
本書特色
* 零基礎、入門級的講解
無論您是否從事計算機相關行業，無論您是否接觸過HTML5，都能從本書中找到最佳起點。
* 超多、實用、專業的范例和項目
本書內容在編排上緊密結合深入學習HTML5技術的先后過程，從HTML5的基本概念開始，帶領大家逐步深入地學習各種應用技巧，側重實戰技能，使用簡單易懂的實際案例進行分析和操作指導，讓讀者學習起來簡明輕松，操作起來有章可循。
* 隨時檢測自己的學習成果
每章首頁中，均提供了學習目標，以指導讀者重點學習及學后檢查。
每章最后的“跟我練練手”板塊，均根據本章內容精選而成，讀者可以隨時檢測自己的學習成果和實戰能力，做到融會貫通。
* 細致入微、貼心提示
本書在講解過程中，在各章中使用了“注意”“提示”“技巧”等小欄目，使讀者在學習過程中更清楚地了解相關操作、理解相關概念，并輕松地掌握各種操作技巧。
* 專業創作團隊和技術支持
本書由IT應用實訓中心編著和提供技術支持。
如果您在學習過程中遇到任何問題，可加入QQ群：221376441進行提問，專家人員會在線答疑。
“HTML5網頁設計”學習最佳途徑
本書以學習“HTML5網頁設計”的最佳制作流程來分配章節，從最初的HTML5基本概念開始，然后講解了HTML5的核心技術、HTML5的高級應用等。同時，在最后的項目實戰環節特意補充了4個常見網站設計過程，以便更進一步提高大家的實戰技能。
超值光盤
* 全程同步教學錄像
涵蓋本書所有知識點，詳細講解每個實例及項目的過程及技術關鍵點，讀者可以更輕松地掌握書中所有的HTML5網頁設計知識，而且擴展的講解部分能使您得到比書中更多的收獲。
* 超多容量王牌資源大放送
贈送大量王牌資源，包括HTML5案例源碼命令、教學幻燈片、本書精品教學視頻、HTML5標簽速查手冊、CSS屬性速查表、CSS+DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析、Web前端工程師常見面試題等。
讀者對象
* 沒有任何HTML5基礎的初學者
* 有一定的HTML5基礎，想精通HTML5的人員
* 有一定的HTML5基礎，沒有項目經驗的人員
* 正在進行畢業設計的學生
* 大專院校及培訓學校的教師和學生
創作團隊
本書由劉玉紅策劃，IT應用實訓中心高級講師編著，參加編寫的人員有胡同夫、付紅、郭廣新、侯永崗、蒲娟、王月嬌、包慧利、陳偉光、梁云梁和周浩浩。
在編寫過程中，我們盡所能地將最好的講解呈現給讀者，但書中也難免有疏漏和不妥之處，敬請讀者不吝指正。
編 者
目 錄
第1篇 基礎知識
第1章 初識HTML5 3
1.1 HTML5簡介 4
1.1.1 HTML 5簡介 4
1.1.2 HTML5文件的基本結構 5
1.2 HTML5文件的編寫方法 5
1.2.1 案例1——手工編寫HTML5 5
1.2.2 案例2——使用HTML編輯器 6
1.3 使用瀏覽器查看HTML5文件 10
1.3.1 各大瀏覽器與HTML5
的兼容 11
1.3.2 案例3——查看頁面效果 11
1.3.3 案例4——查看源文件 11
1.4 跟我練練手 12
1.4.1 練習目標 12
1.4.2 上機練習 12
1.5 高手甜點 12
第2章 HTML5網頁文檔結構 15
2.1 Web標準 16
2.1.1 Web標準概述 16
2.1.2 Web標準規定的內容 16
2.2 HTML5文檔的基本結構 17
2.2.1 文檔類型說明 18
2.2.2 HTML5標記<HTML> 19
2.2.3 頭標記<HEAD> 19
2.2.4 網頁的主體標記<BODY> 22
2.2.5 頁面注釋標記<!-- --> 22
2.3 綜合案例——符合W3C標準的
HTML5網頁制作 23
2.4 跟我練練手 24
2.4.1 練習目標 24
2.4.2 上機練習 25
2.5 高手甜點 25
第3章 HTML5與HTML4的區別 27
3.1 新增的主體結構元素 28
3.1.1 案例1——section元素的使用 28
3.1.2 案例2——article元素的使用 29
3.1.3 案例3——aside元素的使用 32
3.1.4 案例4——nav元素的使用 33
3.1.5 案例5——time元素的使用 36
3.2 新增的非主體結構元素 37
3.2.1 案例6——header元素的使用 37
3.2.2 案例7——hgroup元素的使用 38
3.2.3 案例8——footer元素的使用 40
3.2.4 案例9——figure元素的使用 42
3.2.5 案例10——address元素的
使用 45
3.3 新增其他常用元素 46
3.3.1 案例11——mark元素的使用 46
3.3.2 案例12——rp元素、rt元素
與ruby元素的使用 48
3.3.3 案例13——progress元素的
使用 49
3.3.4 案例14——command元素的
使用 50
3.3.5 案例15——embed元素的
使用 50
3.3.6 案例16——details元素與
summary元素的使用 51
3.3.7 案例17——datalist元素的
使用 52
3.4 新增全局屬性 53
3.4.1 案例18——contentEditable
屬性的使用 53
3.4.2 案例19——spellcheck屬性的
使用 54
3.4.3 案例20——tabIndex屬性的
使用 55
3.5 新增的其他屬性 56
3.5.1 案例21——表單相關屬性的
使用 56
3.5.2 案例22——鏈接相關屬性的
使用 64
3.5.3 案例23——其他屬性的使用 66
3.6 HTML5廢除的屬性 66
3.7 跟我練練手 68
3.7.1 練習目標 68
3.7.2 上機練習 68
3.8 高手甜點 68
第2篇 核心技術
第4章 設計網頁文本內容 73
4.1 標題文字的建立 74
4.1.1 案例1——標題文字標記 74
4.1.2 案例2——標題文字的對齊
方式 75
4.2 設置文字格式 75
4.2.1 案例3——設置文字字體 75
4.2.2 案例4——設置字號 77
4.2.3 案例5——設置文字顏色 78
4.2.4 案例6——設置粗體、斜體、
下劃線 79
4.2.5 案例7——設置上標與下標 81
4.2.6 案例8——設置字體風格 82
4.2.7 案例9——設置加粗字體 83
4.2.8 案例10——設置字體復合
屬性 84
4.2.9 案例11——設置陰影文本 85
4.2.10 案例12——控制換行 86
4.3 設置段落格式 88
4.3.1 案例13——設置段落標記 88
4.3.2 案例14——設置換行標記 89
4.4 設置網頁水平線 90
4.4.1 案例15——添加水平線 90
4.4.2 案例16——設置水平線的
寬度與高度 91
4.4.3 案例17——設置水平線的
顏色 92
4.4.4 案例18——設置水平線的
對齊方式 92
4.4.5 案例19——去掉水平線陰影 93
4.5 綜合案例——成才教育網文本設計 94
4.6 跟我練練手 95
4.6.1 練習目標 95
4.6.2 上機練習 95
4.7 高手甜點 95
第5章 網頁列表與段落設計 97
5.1 網頁文字列表設計 98
5.1.1 案例1——建立無序列表<ul> 98
5.1.2 案例2——建立有序列表<ol> 99
5.1.3 案例3——建立不同類型的
無序列表 100
5.1.4 案例4——建立不同類型的
有序列表 101
5.1.5 案例5——嵌套列表 102
5.1.6 案例6——自定義列表<dl> 103
5.2 網頁段落格式的設計 104
5.2.1 案例7——設計單詞間隔
word-spacing 104
5.2.2 案例8——設計字符間隔
letter-spacing 105
5.2.3 案例9——設計文字修飾
text-decoration 106
5.2.4 案例10——設計垂直對齊
方式vertical-align 107
5.2.5 案例11——設計文本轉換
text-transform 109
5.2.6 案例12——設計水平對齊
方式text-align 110
5.2.7 案例13——設計文本縮進
text-indent 112
5.2.8 案例14——設計文本行高
line-height 113
5.2.9 案例15——處理空白
white-space 114
5.2.10 案例16——文本反排
unicode-bidi 115
5.3 綜合案例——制作圖文混排型
旅游網頁 117
5.4 跟我練練手 118
5.4.1 練習目標 118
5.4.2 上機練習 118
5.5 高手甜點 118
第6章 HTML5網頁中的圖像 121
6.1 網頁中的圖像<img> 122
6.1.1 網頁中支持的圖片格式 122
6.1.2 圖像中的路徑 122
6.2 在網頁中插入圖像 124
6.2.1 案例1——插入圖像 124
6.2.2 案例2——從不同位置插入
圖像 125
6.3 編輯網頁中的圖像 126
6.3.1 案例3——設置圖像的寬度
和高度 126
6.3.2 案例4——設置圖像的提示
文字 127
6.3.3 案例5——將圖片設置為
網頁背景 128
6.3.4 案例6——排列圖像 129
6.4 實戰演練——圖文并茂房屋裝飾
裝修網頁 130
6.5 跟我練練手 131
6.5.1 練習目標 131
6.5.2 上機練習 131
6.6 高手甜點 131
第7章 使用HTML5建立超鏈接 133
7.1 網頁超鏈接的概念 134
7.1.1 什么是網頁超鏈接 134
7.1.2 超鏈接中的URL 134
7.1.3 超鏈接的URL類型 135
7.2 建立網頁超級鏈接 135
7.2.1 案例1——創建超文本鏈接 135
7.2.2 案例2——創建圖片鏈接 137
7.2.3 案例3——創建下載鏈接 138
7.2.4 案例4——使用相對路徑
和絕對路徑 139
7.2.5 案例5——設置以新窗口
顯示超鏈接頁面 140
7.2.6 案例6——設置電子郵件
鏈接 142
7.3 案例7——浮動框架iframe的使用 143
7.4 案例8——精確定位熱點區域 145
7.5 綜合案例——使用錨鏈接制作
電子書閱讀網頁 148
7.6 跟我練練手 151
7.6.1 練習目標 151
7.6.2 上機練習 151
7.7 高手甜點 151
第8章 使用HTML5創建表單 153
8.1 案例1——認識表單 154
8.2 表單基本元素的使用 155
8.2.1 案例2——單行文本輸入框
text的使用 155
8.2.2 案例3——多行文本輸入框
textarea的使用 156
8.2.3 案例4——密碼域password
的使用 156
8.2.4 案例5——單選按鈕radio的
使用 157
8.2.5 案例6——復選框checkbox
的使用 158
8.2.6 案例7——下拉列表框select
的使用 159
8.2.7 案例8——普通按鈕button
的使用 160
8.2.8 案例9——提交按鈕submit
的使用 161
8.2.9 案例10——重置按鈕reset
的使用 162
8.3 表單高級元素的使用 163
8.3.1 案例11——url屬性的應用 163
8.3.2 案例12——email屬性的
應用 164
8.3.3 案例13——date屬性和
times屬性的應用 165
8.3.4 案例14——number屬性的
應用 166
8.3.5 案例15——range屬性的
應用 167
8.3.6 案例16——required屬性
的應用 167
8.4 綜合案例——創建用戶反饋表單 168
8.5 跟我練練手 170
8.5.1 練習目標 170
8.5.2 上機練習 170
8.6 高手甜點 170
第9章 使用HTML5創建表格 171
9.1 表格的基本結構 172
9.2 使用HTML5創建表格 173
9.2.1 案例1——創建普通表格 174
9.2.2 案例2——創建一個帶有
標題的表格 175
9.2.3 案例3——定義表格的邊框
類型 176
9.2.4 案例4——定義表格的表頭 177
9.2.5 案例5——設置表格背景 178
9.2.6 案例6——設置單元格背景 180
9.2.7 案例7——合并單元格 181
9.2.8 案例8——排列單元格中的
內容 185
9.2.9 案例9——設置單元格的
行高與列寬 186
9.3 案例10——創建完整的表格 187
9.4 綜合案例——制作商品報價表 189
9.5 跟我練練手 191
9.5.1 練習目標 191
9.5.2 上機練習 191
9.6 高手甜點 191
第10章 HTML5中的多媒體 193
10.1 網頁音頻標簽audio 194
10.1.1 audio標簽概述 194
10.1.2 audio標簽的屬性 194
10.1.3 音頻解碼器 195
10.1.4 audio標簽瀏覽器的支持
情況 195
10.2 網頁視頻標簽video 195
10.2.1 video標簽概述 195
10.2.2 video標簽的屬性 195
10.2.3 視頻解碼器 196
10.2.4 video標簽瀏覽器的支持
情況 196
10.3 添加網頁音頻文件 197
10.3.1 案例1——設置背景音樂 197
10.3.2 案例2——設置音樂循環
播放 198
10.4 添加網頁視頻文件 198
10.4.1 案例3——為網頁添加視頻
文件 198
10.4.2 案例4——設置自動運行 199
10.4.3 案例5——設置視頻文件
的循環播放 200
10.4.4 案例6——設置視頻窗口
的高度與寬度 201
10.5 添加網頁滾動文字 202
10.5.1 案例7——滾動文字標簽
的使用 202
10.5.2 案例8——滾動方向屬性
的應用 203
10.5.3 案例9——滾動方式屬性
的應用 204
10.5.4 案例10——滾動速度屬性
的應用 205
10.5.5 案例11——滾動延遲屬性
的應用 206
10.5.6 案例12——滾動循環屬性
的應用 206
10.5.7 案例13——滾動范圍屬性
的應用 207
10.5.8 案例14——滾動背景顏色
屬性的應用 208
10.5.9 案例15——滾動空間屬性
的應用 209
10.6 跟我練練手 210
10.6.1 練習目標 210
10.6.2 上機練習 210
10.7 高手甜點 210
第11章 使用HTML5繪制圖形 213
11.1 什么是canvas 214
11.2 繪制基本形狀 215
11.2.1 案例1——繪制矩形 215
11.2.2 案例2——繪制圓形 216
11.2.3 案例3——使用moveTo與
lineTo繪制直線 217
11.2.4 案例4——使用bezierCurveTo
繪制貝濟埃曲線 219
11.3 繪制漸變圖形 221
11.3.1 案例5——繪制線性漸變 221
11.3.2 案例6——繪制徑向漸變 222
11.4 繪制變形圖形 223
11.4.1 案例7——變換原點坐標 223
11.4.2 案例8——圖形縮放 225
11.4.3 案例9——旋轉圖形 226
11.5 繪制其他樣式的圖形 227
11.5.1 案例10——圖形組合 227
11.5.2 案例11——繪制帶陰影的
圖形 229
11.5.3 案例12——繪制文字 230
11.6 使用圖像 232
11.6.1 案例13——繪制圖像 232
11.6.2 案例14——圖像平鋪 234
11.6.3 案例15——圖像裁剪 235
11.6.4 案例16——像素處理 237
11.7 圖形的保存與恢復 239
11.7.1 案例17——保存與恢復
狀態 239
11.7.2 案例18——保存文件 240
11.8 實戰演練——繪制圖形商標 241
11.9 跟我練練手 243
11.9.1 練習目標 243
11.9.2 上機練習 243
11.10 高手甜點 244
第12章 HTML5中的文件與拖放 245
12.1 選擇文件 246
12.1.1 案例1——選擇單個文件 246
12.1.2 案例2——選擇多個文件 246
12.2 使用FileReader接口讀取文件 247
12.2.1 案例3——檢測瀏覽器
是否支持FileReader接口 247
12.2.2 案例4——FileReader接口
的方法 248
12.2.3 案例5——使用
readAsDataURL方法預覽
圖片 248
12.2.4 案例6——使用readAsText
方法讀取文本文件 250
12.3 使用HTML5實現文件的拖放 252
12.3.1 案例7——認識文件拖放
的過程 252
12.3.2 瀏覽器支持情況 253
12.3.3 案例8——在網頁中拖放
圖片 253
12.3.4 案例9——在網頁中拖放
文字 254
12.4 綜合案例——在網頁中來回拖放
圖片 256
12.5 跟我練練手 258
12.5.1 練習目標 258
12.5.2 上機練習 258
12.6 專家甜點 258
第3篇 高級應用
第13章 獲取地理位置 261
13.1 Geolocation API獲取地理位置 262
13.1.1 地理地位的原理 262
13.1.2 獲取定位信息的方法 262
13.1.3 常用地理定位方法 262
13.1.4 案例1——判斷瀏覽器是
否支持HTML5獲取地理
位置信息 263
13.1.5 案例2——指定緯度和經度
坐標 264
13.1.6 案例3——獲取當前位置的
經度與緯度 265
13.2 目前瀏覽器對地理定位的支持情況 267
13.3 綜合案例——在網頁中調用
Google地圖 268
13.4 跟我練練手 271
13.4.1 練習目標 271
13.4.2 上機練習 271
13.5 高手甜點 271
第14章 Web通信新技術 273
14.1 跨文檔消息傳輸 274
14.1.1 跨文檔消息傳輸的基本知識 274
14.1.2 案例1——跨文檔通信應用
測試 274
14.2 WebSockets API 277
14.2.1 什么是WebSocket API 277
14.2.2 WebSockets通信基礎 277
14.2.3 案例2——服務器端使用
Web Sockets API 279
14.2.4 案例3——客戶機端使用
WebSockets API 282
14.3 綜合案例——編寫簡單的
WebSocket服務器 283
14.4 跟我練練手 287
14.4.1 練習目標 287
14.4.2 上機練習 287
