內容簡介

本書以零基礎講解為宗旨，用實例引導讀者深入學習，采取【基礎入門→核心技術→高級技能→移動開發→綜合案例實戰】的講解模式，深入淺出地講解HTML 5的各項技術及實戰技能。

本書第Ⅰ篇【基礎入門】主要內容包括新一代Web前端技術HTML 5、HTML 5網頁的文檔結構、HTML 5與HTML4的區別等；第Ⅱ篇【核心技術】主要內容包括設計網頁文本內容、設計網頁列表與段落、HTM L5網頁中的圖像、使用HTML 5建立超鏈接、使用HTML 5創建表單、使用HTML 5創建表格、HTML 5中的音頻和視頻、使用HTML 5繪制圖形等；第Ⅲ篇【高級技能】主要內容包括HTML 5中的文件與拖放、定位地理位置技術、Web存儲和通信技術、處理線程和服務器發送事件、構建離線的Web應用等；第Ⅳ篇【移動開發】主要內容包括jQuery Mobile基礎、jQuery Mobile UI組件、jQuery Mobile 事件、數據存儲和讀取技術等；第Ⅴ篇【綜合案例實戰】主要內容包括制作休閑娛樂類網頁、制作企業門戶類網頁、制作電子商務類網頁、開發連鎖酒店訂購系統。本書贈送了13個超值的王牌資源。

 

本書適合任何想學習網頁前臺設計與布局的人員，無論您是否從事計算機相關行業，無論您是否接觸過HTML 5，通過學習均可快速掌握網頁的設計方法和技巧。

前    言

　　“網站開發案例課堂”系列圖書是專門為辦公技能和網頁設計初學者量身定制的一套學習用書。整套書涵蓋高效辦公、網站開發、數據庫設計等方面。整套書具有以下特點。

前沿科技

　　無論是網站建設、數據庫設計還是HTML 5、CSS 3，我們都精選較為前沿或者用戶群最大的領域推進，幫助大家認識和了解最新動態。

權威的作者團隊

　　組織國家重點實驗室和資深應用專家聯手編著該套圖書，融合豐富的教學經驗與優秀的管理理念。

學習型案例設計

　　以技術的實際應用過程為主線，全程采用圖解和同步多媒體結合的教學方式，生動、直觀、全面地剖析使用過程中的各種應用技能，降低難度，提升學習效率

為什么要寫這樣一本書

　　隨著用戶對頁面體驗要求的提高，頁面前端技術日趨重要。HTML 5技術成熟，在前端技術中突顯優勢，在各大瀏覽器廠商的支持下，將會更加盛行，因此本書致力于幫助讀者完全掌握該技術。本書可以讓讀者掌握目前流行的最新前端技術，使前端從外觀上變得更炫、技術上更簡易。通過本書的案例實訓，大學生可以很快地掌握流行的工具，提高職業化能力，從而幫助解決公司與求職者的雙重需求問題。

本書特色

零基礎、入門級的講解

　　無論您是否從事計算機相關行業，無論您是否接觸過網頁制作和設計，都能從本書中找到最佳起點。

超多、實用、專業的范例和項目

　　本書在編排上緊密結合深入學習網頁制作技術的先后過程，從HTML 5的基本概念開始，引導讀者逐步深入地學習各種應用技巧，并側重實戰技能，使用簡單易懂的實際案例進行分析和操作指導，讓讀者讀起來簡明輕松，操作起來有章可循。

隨時檢測自己的學習成果

　　每章首頁中，均提供了學習目標，以指導讀者重點學習及學后檢查。

　　大部分章節最后的“跟我學上機”板塊，均根據本章內容精選而成，讀者可以隨時檢測自己的學習成果和實戰能力，做到融會貫通。

細致入微、貼心提示

　　本書在講解過程中，在各章使用了“注意”“提示”“技巧”等小貼士，使讀者在學習過程中更清楚地了解相關操作、相關概念，并輕松掌握各種操作技巧。

專業創作團隊和技術支持

　　本書由千谷高新教育中心編著和提供技術支持。

　　您在學習過程中遇到任何問題，可加入QQ群(案例課堂VIP)451102631進行提問，專家人員會在線答疑。

超值資源大放送

全程同步教學錄像

　　涵蓋本書所有知識點，詳細講解每個實例及項目的過程及技術關鍵點。比看書更輕松地掌握書中所有的網頁制作和設計知識，而且擴展的講解部分可使您得到比書中更多的收獲。

超多容量王牌資源

　　贈送大量王牌資源，包括實例源代碼、教學幻燈片、本書精品教學視頻、88個實用類網頁模板、12部網頁開發必備參考手冊、HTML 5標簽速查手冊、精選的JavaScript實例、CSS 3屬性速查表、JavaScript函數速查手冊、CSS+DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析、Web前端工程師常見面試題等。讀者可以通過QQ群(案例課堂VIP)451102631獲取贈送資源，也可以掃描二維碼，下載本書資源。

讀者對象

沒有任何網頁設計基礎的初學者。

有一定的HTML 5基礎，想精通網頁制作和設計的人員。

有一定的HTML 5基礎，沒有項目經驗的人員。

正在進行畢業設計的學生。

大專院校及培訓學校的老師和學生。

創作團隊

　　本書由劉春茂編著，參加編寫的人員還有劉玉萍、張金偉、蒲娟、周佳、付紅、李園、郭廣新、侯永崗、王攀登、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、王偉、展娜娜、李琪、梁云梁和周浩浩。在編寫過程中，我們力盡所能地將最好的講解呈現給讀者，但也難免有疏漏和不妥之處，敬請不吝指正。若您在學習中遇到困難或疑問，或有何建議，可寫信至信箱357975357@qq.com。

　　

 

　　                                                      編  者  

 

目    錄

第Ⅰ篇  基 礎 入 門

第1章  新一代Web前端

技術HTML 5 3

1.1  HTML的基本概念 4

1.1.1  HTML的發展歷程 4

1.1.2  什么是HTML 4

1.1.3  HTML 5文件的基本結構 5

1.2  HTML 5的優勢 5

1.2.1  解決了跨瀏覽器問題 5

1.2.2  新增了多個新特性 5

1.2.3  用戶優先的原則 6

1.2.4  化繁為簡的優勢 7

1.3  HTML 5網頁的開發環境 7

1.3.1  案例1——使用記事本手工

編寫HTML 5 7

1.3.2  案例2——使用Dreamweaver CC

編寫HTML文件 8

1.4  使用瀏覽器查看HTML 5文件 11

1.4.1  案例3——查看頁面效果 11

1.4.2  案例4——查看源文件 12

1.5  高手解惑 12

第2章  HTML 5網頁的文檔結構 13

2.1  HTML 5文件的基本結構 14

2.1.1  HTML 5頁面的整體結構 14

2.1.2  HTML 5新增的結構標記 14

2.2  HTML 5基本標記詳解 15

2.2.1  文檔類型說明 15

2.2.2  HTML標記 15

2.2.3  頭標記head 16

2.2.4  網頁的主體標記body 18

2.2.5  頁面注釋標記<!-- --> 19

2.3  HTML 5語法的變化 20

2.3.1  標簽不再區分大小寫 20

2.3.2  允許屬性值不使用引號 20

2.3.3  允許部分屬性值的屬性省略 20

2.4  必知必會——HTML 5代碼規范 21

2.5  綜合案例——符合W3C標準的

HTML 5網頁 22

2.6  跟我學上機——簡單的HTML 5網頁 22

2.7  高手解惑 23

第3章   HTML 5與HTML 4 的區別 25

3.1　新增的主體結構元素 26

3.1.1　案例1——section元素的使用 26

3.1.2　案例2——article元素的使用 26

3.1.3　案例3——aside元素的使用 29

3.1.4　案例4——nav元素的使用 31

3.1.5　案例5——time元素的使用 32

3.2　新增的非主體結構元素 34

3.2.1　案例6——header元素的使用 34

3.2.2　案例7——hgroup元素的使用 34

3.2.3　案例8——footer元素的使用 36

3.2.4　案例9——figure元素的使用 37

3.2.5　案例10——address元素的使用 39

3.3　新增其他常用元素 40

3.3.1　案例11——mark元素的使用 40

3.3.2　案例12——rp元素、rt元素與

ruby元素的使用 41

3.3.3　案例13——progress元素的

使用 42

3.3.4　案例14——command元素的

使用 42

3.3.5　案例15——embed元素的

使用 43

3.3.6　案例16——details元素與

summary元素的使用 43

3.3.7　案例17——datalist元素的

使用 44

3.4　新增全局屬性 45

3.4.1　案例18——contentEditable

屬性的使用 45

3.4.2　案例19——spellcheck屬性的

使用 46

3.4.3　案例20——tabIndex屬性的

使用 46

3.5　新增的其他屬性 47

3.5.1　案例21——表單相關屬性的

使用 47

3.5.2　案例22——鏈接相關屬性的

使用 54

3.5.3　案例23——其他新增屬性的

使用 55

3.6　HTML 5廢除的屬性 56

3.7　高手解惑 57

 

第II篇  核 心 技 術

 

第4章  設計網頁文本內容 61

4.1　標題文字的建立 62

4.1.1　案例1——標題文字標記 62

4.1.2　案例2——標題文字的

對齊方式 63

4.2　設置文字格式 63

4.2.1　案例3——設置文字字體 63

4.2.2　案例4——設置字號 64

4.2.3　案例5——設置文字顏色 66

4.2.4　案例6——設置粗體、斜體、

下畫線 67

4.2.5　案例7——設置上標與下標 68

4.2.6　案例8——設置字體風格 68

4.2.7　案例9——設置加粗字體 69

4.2.8　案例10——設置字體

復合屬性 70

4.2.9　案例11——設置陰影文本 71

4.2.10　案例12——控制換行 72

4.3　設置段落格式 73

4.3.1　案例13——設置段落標記 73

4.3.2　案例14——設置換行標記 74

4.4　設置網頁水平線 75

4.4.1　案例15——添加水平線 75

4.4.2　案例16——設置水平線的

寬度與高度 75

4.4.3　案例17——設置水平線的顏色 76

4.4.4　案例18——設置水平線的

對齊方式 76

4.4.5　案例19——去掉水平線陰影 77

4.5　綜合案例——成才教育網文本設計 77

4.6　高手解惑 78

第5章  設計網頁列表與段落 79

5.1　網頁文字列表的設計 80

5.1.1　案例1——建立無序列表<ul> 80

5.1.2　案例2——建立有序列表<ol> 81

5.1.3　案例3——建立不同類型的

無序列表 82

5.1.4　案例4——建立不同類型的

有序列表 82

5.1.5　案例5——嵌套列表 83

5.1.6　案例6——自定義列表<dl> 83

5.2　網頁段落格式的設計 84

5.2.1　案例7——設計單詞間隔

word-spacing 84

5.2.2　案例8——設計字符間隔

letter-spacing 85

5.2.3　案例9——設計文字修飾

text-decoration 86

5.2.4　案例10——設計垂直

對齊方式vertical-align 87

5.2.5　案例11——設計文本轉換

text-transform 88

5.2.6　案例12——設計水平對齊

方式text-align 89

5.2.7　案例13——設計文本縮進

text-indent 91

5.2.8　案例14——設計文本行高

line-height 92

5.2.9　案例15——處理空白

white-space 93

5.2.10　案例16——文本反排

unicode-bidi 94

5.3　綜合案例——制作圖文混排型

旅游網頁 96

5.4　高手解惑 97

第6章  HTML 5網頁中的圖像 99

6.1　網頁中的圖像<img> 100

6.1.1　網頁中支持的圖片格式 100

6.1.2　圖像中的路徑 100

6.2　在網頁中插入圖像 102

6.2.1　案例1——插入圖像 102

6.2.2　案例2——從不同位置插入

圖像 103

6.3　編輯網頁中的圖像 103

6.3.1　案例3——設置圖像的

寬度和高度 104

6.3.2　案例4——設置圖像的

提示文字 104

6.3.3　案例5——將圖片設置為

網頁背景 105

6.3.4　案例6——排列圖像 106

6.4　綜合案例——圖文并茂的房屋裝飾

裝修網頁 107

6.5　高手解惑 108

第7章  使用HTML 5建立超鏈接 109

7.1　網頁超鏈接的概念 110

7.1.1　什么是網頁超鏈接 110

7.1.2　超鏈接中的URL 110

7.1.3　超鏈接的URL類型 111

7.2　建立網頁超級鏈接 111

7.2.1　案例1——創建超文本鏈接 111

7.2.2　案例2——創建圖片鏈接 113

7.2.3　案例3——創建下載鏈接 114

7.2.4　案例4——使用相對路徑和

絕對路徑 115

7.2.5　案例5——設置以新窗口顯示

超鏈接頁面 115

7.2.6　案例6——設置電子郵件鏈接 116

7.3　案例7——浮動框架iframe的使用 117

7.4　綜合案例——使用錨鏈接制作電子書

閱讀網頁 119

7.5  高手解惑 122

第8章  使用HTML 5 創建表單 123

8.1  案例1——認識表單 124

8.2  表單基本元素的使用 124

8.2.1  案例2——單行文本輸入框

text 125

8.2.2  案例3——多行文本輸入框

textarea 125

8.2.3  案例4——密碼域password 126

8.2.4  案例5——單選按鈕radio 127

8.2.5  案例6——復選框checkbox 128

8.2.6  案例7——列表框select 128

8.2.7  案例8——普通按鈕button 129

8.2.8  案例9——提交按鈕submit 130

8.2.9  案例10——重置按鈕reset 131

8.3  表單高級元素的使用 132

8.3.1  案例11——url屬性的使用 132

8.3.2  案例12——email屬性的使用 132

8.3.3  案例13——date和time屬性的

使用 133

8.3.4  案例14——number屬性的

使用 134

8.3.5  案例15——range屬性的使用 135

8.3.6  案例16——required屬性的

使用 136

8.4  綜合案例——創建用戶反饋表單 137

8.5  跟我學上機——制作用戶注冊表單 138

8.6  高手解惑 139

第9章  使用HTML 5 創建表格 141

9.1  案例1——表格的基本結構 142

9.2  創建表格 143

9.2.1  案例2——創建普通表格 143

9.2.2  案例3——創建一個帶有標題的

表格 144

9.3  編輯表格 145

9.3.1  案例4——定義表格的

邊框類型 145

9.3.2  案例5——定義表格的表頭 146

9.3.3  案例6——設置表格背景 147

9.3.4  案例7——設置單元格的背景 148

9.3.5  案例8——合并單元格 148

9.3.6  案例9——排列單元格中的

內容 152

9.3.7  案例10——設置單元格的

行高與列寬 153

9.4  案例11——完整的表格標記 153

9.5  綜合案例——制作計算機報價表 154

9.6  跟我學上機——制作學生成績表 157

9.7  高手解惑 160

第10章  HTML 5中的音頻和視頻 161

10.1  audio標簽概述 162

10.1.1  案例1——認識audio標簽 162

10.1.2  audio標簽的屬性 163

10.1.3  瀏覽器對audio標簽的

支持情況 163

10.2  在網頁中添加音頻文件 163

10.2.1  案例2——添加自動播放的

音頻文件 163

10.2.2  案例3——添加帶有控件的

音頻文件 164

10.2.3  案例4——添加循環播放的

音頻文件 165

10.2.4  案例5——添加預播放的

音頻文件 165

10.3  video標簽概述 166

10.3.1  案例6——認識video標簽 166

10.3.2  video標簽的屬性 167

10.3.3  瀏覽器對video標簽的

支持情況 167

10.4  在網頁中添加視頻文件 168

10.4.1  案例7——添加自動播放的

視頻文件 168

10.4.2  案例8——添加帶有控件的

視頻文件 169

10.4.3  案例9——添加循環播放的

視頻文件 169

10.5  綜合案例——設置視頻文件的

高度與寬度 170

10.6  跟我學上機——添加預播放的

視頻文件 171

10.7  高手解惑 172

第11章  使用HTML 5繪制圖形 173

11.1  添加canvas的步驟 174

11.2  繪制基本形狀 174

11.2.1  案例1——繪制矩形 175

11.2.2  案例2——繪制圓形 176

11.2.3  案例3——使用moveTo與

lineTo繪制直線 177

11.2.4  案例4——使用bezierCurveTo

繪制貝濟埃曲線 178

11.3  繪制漸變圖形 179

11.3.1  案例5——繪制線性漸變 179

11.3.2  案例6——繪制徑向漸變 181

11.4  繪制變形圖形 182

11.4.1  案例7——繪制平移效果的

圖形 182

11.4.2  案例8——繪制縮放效果的

圖形 183

11.4.3  案例9——繪制旋轉效果的

圖形 185

11.4.4  案例10——繪制組合效果的

圖形 186

11.4.5  案例11——繪制帶陰影的

圖形 188

11.5  使用圖像 189

11.5.1  案例12——繪制圖像 189

11.5.2  案例13——平鋪圖像 190

11.5.3  案例14——裁剪圖像 192

11.5.4  案例15——圖像的

像素化處理 193

11.6  案例16——繪制文字 195

11.7  圖形的保存與恢復 196

11.7.1  案例17——保存與

恢復狀態 196

11.7.2  案例18——保存文件 197

11.8  綜合案例——繪制火柴棒人物 199

11.9  跟我學上機——繪制商標 201

11.10  高手解惑 203

 

第III篇  高 級 技 能

 

第12章  HTML 5中的文件與拖放 207

12.1　選擇文件 208

12.1.1　案例1——選擇單個文件 208

12.1.2　案例2——選擇多個文件 208

12.2　使用FileReader接口讀取文件 209

12.2.1　檢測瀏覽器是否支持

FileReader接口 209

12.2.2　 FileReader接口的方法 210

12.2.3　案例3——使用readAsDataURL

方法預覽圖片 210

12.2.4　案例4——使用readAsText方法

讀取文本文件 212

12.3　使用HTML 5實現文件的拖放 213

12.3.1　認識文件拖放的過程 214

12.3.2　瀏覽器支持情況 214

12.3.3　案例5——在網頁中拖放

圖片 215

12.4　綜合案例——在網頁中來回拖放

圖片 216

12.5  跟我學上機——在網頁中拖放文字 217

12.6  高手解惑 219

第13章  定位地理位置技術 221

13.1　Geolocation API獲取地理位置 222

13.1.1　地理地位的原理 222

13.1.2　獲取定位信息的方法 222

13.1.3　常用地理定位方法 222

13.1.4　判斷瀏覽器是否支持HTML 5

獲取地理位置信息 223

13.1.5　指定緯度和經度坐標 224

13.1.6　獲取當前位置的經度與

緯度 225

13.1.7　處理錯誤和拒絕 227

13.2　目前瀏覽器對地理定位的

支持情況 227

13.3　綜合案例——在網頁中調用Google

地圖 228

13.4　跟我學上機——持續獲取用戶

移動后的位置 230

13.5　高手解惑 231

第14章  Web存儲和通信技術 233

14.1　認識Web存儲 234

14.1.1　本地存儲和Cookies的區別 234

14.1.2　Web存儲方法 234

14.2　使用HTML 5 Web Storage API 234

14.2.1　測試瀏覽器的支持情況 235

14.2.2　案例1——使用sessionStorage

方法創建對象 236

14.2.3　案例2——使用localStorage

方法創建對象 237

14.2.4　案例3——Web Storage API的

其他操作 238

14.2.5　案例4——使用JSON對象

存取數據 239

14.3　目前瀏覽器對Web存儲的

支持情況 241

14.4  跨文檔消息傳輸 242

14.4.1  跨文檔消息傳輸的基本知識 242

14.4.2  案例5——跨文檔通信應用

測試 242

14.5  WebSocket API 245

14.5.1  什么是WebSocket API 245

14.5.2  WebSocket通信基礎 245

14.5.3  案例6——服務器端使用Web 

Socket API 247

14.5.4  案例7——客戶端使用

WebSocket API 250

14.6  綜合案例&mda