第1章 認(rèn)識(shí)HTML 5 001
1.1 HTML的基本概念 002
1.1.1 什么是HTML 002
1.1.2 HTML的發(fā)展歷程 002
1.2 HTML文件的基本結(jié)構(gòu) 003
1.3 認(rèn)識(shí)HTML 5基本標(biāo)記 003
1.3.1 文檔類型說(shuō)明 003
1.3.2 html標(biāo)記 004
1.3.3 頭標(biāo)記head 004
1.3.4 網(wǎng)頁(yè)的主體標(biāo)記body 006
1.3.5 頁(yè)面注釋標(biāo)記 007
1.4 HTML 5網(wǎng)頁(yè)的開(kāi)發(fā)環(huán)境 008
1.4.1 使用記事本手工編寫HTML文件 008
1.4.2 使用WebStorm編寫HTML文件 009
1.5 新手常見(jiàn)疑難問(wèn)題 012
1.6 實(shí)戰(zhàn)訓(xùn)練營(yíng) 013
第2章 設(shè)計(jì)網(wǎng)頁(yè)的文本與段落 015
2.1 標(biāo)題 016
2.1.1 標(biāo)題文字標(biāo)記 016
2.1.2 標(biāo)題的對(duì)齊方式 016
2.2　設(shè)置文字格式 017
2.2.1 文字的字體、字號(hào)和顏色 017
2.2.2　文字的粗體、斜體和下劃線 019
2.2.3　文字的上標(biāo)和下標(biāo) 020
2.3 設(shè)置段落格式 020
2.3.1　段落標(biāo)記 020
2.3.2　段落的換行標(biāo)記 021
2.3.3　段落的原格式標(biāo)記 021
2.4　網(wǎng)頁(yè)的列表 022
2.4.1 無(wú)序列表 022
2.4.2 有序列表 023
2.4.3　自定義列表 024
2.5　新手常見(jiàn)疑難問(wèn)題 025
2.6 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 025
第3章 網(wǎng)頁(yè)中的圖像和超鏈接 027
3.1 網(wǎng)頁(yè)中的圖像 028
3.1.1　網(wǎng)頁(yè)中支持的圖片格式 028
3.1.2　圖像中的路徑 028
3.2 在網(wǎng)頁(yè)中插入圖像 030
3.3　編輯網(wǎng)頁(yè)中的圖像 031
3.3.1　設(shè)置圖像的大小和邊框 031
3.3.2　設(shè)置圖像的間距和對(duì)齊方式 032
3.3.3 設(shè)置圖像的替換文字和提示文字 033
3.4　認(rèn)識(shí)網(wǎng)頁(yè)超鏈接 034
3.4.1 什么是網(wǎng)頁(yè)超鏈接 034
3.4.2　超鏈接中的URL 034
3.4.3　超鏈接的URL類型 035
3.5　建立網(wǎng)頁(yè)超級(jí)鏈接 035
3.5.1　創(chuàng)建超文本鏈接 035
3.5.2 創(chuàng)建圖片鏈接 036
3.5.3　創(chuàng)建下載鏈接 037
3.5.4　使用相對(duì)路徑和路徑 038
3.5.5　設(shè)置以新窗口顯示超鏈接頁(yè)面 038
3.5.6　設(shè)置電子郵件鏈接 039
3.6 使用浮動(dòng)框架iframe 040
3.7 使用書(shū)簽鏈接制作電子書(shū)閱讀網(wǎng)頁(yè) 041
3.8 圖像熱點(diǎn)鏈接 043
3.9 新手常見(jiàn)疑難問(wèn)題 045
3.10 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 046
第4 章 表格與 標(biāo)記 047
4.1 表格的基本結(jié)構(gòu) 048
4.2 創(chuàng)建表格 049
4.2.1 創(chuàng)建普通表格 049
4.2.2 創(chuàng)建一個(gè)帶有標(biāo)題的表格 049
4.3 編輯表格 050
4.3.1 定義表格的邊框類型 050
4.3.2 定義表格的表頭 050
4.3.3 設(shè)置表格背景 051
4.3.4 設(shè)置單元格的背景 052
4.3.5 合并單元格 052
4.3.6 表格的分組 054
4.3.7 設(shè)置單元格的行高與列寬 055
4.4 完整的表格標(biāo)記 056
4.5 設(shè)置懸浮變色的表格 056
4.6 標(biāo)記 058
4.7 標(biāo)記 059
4.8 新手常見(jiàn)疑難問(wèn)題 060
4.9 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 060
第5 章 網(wǎng)頁(yè)中的表單 062
5.1 表單概述 063
5.2 輸入標(biāo)記 063
5.2.1 文本框 063
5.2.2 單選按鈕和復(fù)選框 065
5.2.3 按鈕 066
5.3 圖像域和文件域 068
5.4 列表 069
5.5 表單的高級(jí)元素 070
5.5.1 url 屬性 070
5.5.2 email 屬性 071
5.5.3 date 和time 屬性 071
5.5.4 number 屬性 072
5.5.5 range 屬性 072
5.5.6 required 屬性 073
5.6 新手常見(jiàn)疑難問(wèn)題 073
5.7 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 074
第6 章 網(wǎng)頁(yè)中的多媒體 075
6.1 audio 標(biāo)記概述 076
6.1.1 認(rèn)識(shí)audio 標(biāo)記 076
6.1.2 audio 標(biāo)記的屬性 076
6.1.3 瀏覽器對(duì)audio 標(biāo)記的支持情況 077
6.2 在網(wǎng)頁(yè)中添加音頻文件 077
6.3 video 標(biāo)記 078
6.3.1 認(rèn)識(shí)video 標(biāo)記 078
6.3.2 video 標(biāo)記的屬性 079
6.3.3 瀏覽器對(duì)video 標(biāo)記的支持情況 080
6.4 在網(wǎng)頁(yè)中添加視頻文件 080
6.5 新手常見(jiàn)疑難問(wèn)題 081
6.6 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 082
第7 章 數(shù)據(jù)存儲(chǔ)Web Storage 083
7.1　認(rèn)識(shí)Web 存儲(chǔ) 084
7.1.1　本地存儲(chǔ)和Cookies 的區(qū)別 084
7.1.2　Web 存儲(chǔ)方法 084
7.2　使用HTML 5 Web Storage API 084
7.2.1　測(cè)試瀏覽器的支持情況 085
7.2.2　使用sessionStorage 方法創(chuàng)建對(duì)象 085
7.2.3　使用localStorage 方法創(chuàng)建對(duì)象 086
7.2.4　 Web Storage API 的其他操作 087
7.2.5　使用JSON 對(duì)象存取數(shù)據(jù) 088
7.3 目前瀏覽器對(duì)Web 存儲(chǔ)的支持情況 090
7.4 制作簡(jiǎn)單Web 留言本 090
7.5 新手常見(jiàn)疑難問(wèn)題 093
7.6 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 093
第8 章 認(rèn)識(shí)CSS 樣式表 094
8.1 CSS 概 述 095
8.1.1 CSS 的功能 095
8.1.2 CSS 的基礎(chǔ)語(yǔ)法 095
8.2 創(chuàng)建和鏈接CSS 文件 096
8.3 CSS 中的選擇器 097
8.3.1 標(biāo)記選擇器 097
8.3.2 類選擇器 098
8.3.3 ID 選擇器 099
8.3.4 偽類選擇器 100
8.3.5 屬性選擇器 101
8.4 CSS 中的常用樣式 102
8.4.1 使用字體樣式 102
8.4.2 使用文本樣式 105
8.4.3 使用背景樣式 108
8.4.4 設(shè)計(jì)邊框樣式 111
8.4.5 設(shè)置列表樣式 114
8.5 新手常見(jiàn)疑難問(wèn)題 116
8.6 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 116
第9 章 設(shè)計(jì)圖片、鏈接和菜單的樣式 118
9.1 設(shè)計(jì)圖片的樣式 119
9.1.1 設(shè)置圖片的大小 119
9.1.2 圖片對(duì)齊 120
9.1.3 文字環(huán)繞圖片 122
9.1.4 圖片與文字的間距 123
9.2 為圖片添加圓角邊框樣式 124
9.3 設(shè)計(jì)鏈接的樣式 125
9.3.1 設(shè)置鏈接樣式 125
9.3.2 定義下劃線樣式 126
9.3.3 定義鏈接背景圖 127
9.3.4 定義鏈接提示信息 128
9.3.5 定義鏈接按鈕樣式 129
9.4 設(shè)計(jì)菜單的樣式 129
9.4.1 制作動(dòng)態(tài)導(dǎo)航菜單 130
9.4.2 制作多級(jí)菜單列表 131
9.5 新手常見(jiàn)疑難問(wèn)題 133
9.6 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 134
第10 章 設(shè)計(jì)表格和表單的樣式 136
10.1 設(shè)計(jì)表格的樣式 137
10.1.1 設(shè)置表格顏色 137
10.1.2 設(shè)置表格邊框 138
10.1.3 表格邊框?qū)挾? 139
10.1.4 表格邊框顏色 140
10.1.5 表格標(biāo)題位置 140
10.1.6 隱藏空單元格 142
10.1.7 單元格的邊距 143
10.2 設(shè)計(jì)表單的樣式 144
10.2.1 表單字體樣式 144
10.2.2 表單邊框樣式 145
10.2.3 表單背景樣式 146
10.2.4 設(shè)計(jì)表單按鈕樣式 147
10.2.5 設(shè)計(jì)下拉菜單樣式 148
10.3 新手常見(jiàn)疑難問(wèn)題 149
10.4 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 149
第11 章 使用CSS3 布局網(wǎng)頁(yè)版式 151
11.1 認(rèn)識(shí)CSS3 布局版式 152
11.1.1 將頁(yè)面用DIV 分塊 152
11.1.2 設(shè)置各塊位置 152
11.1.3 用CSS 定位版式 153
11.2 固定寬度網(wǎng)頁(yè)布局模式 155
11.2.1 網(wǎng)頁(yè)單列布局模式 155
11.2.2 網(wǎng)頁(yè)1-2-1 型布局模式 157
11.3 自動(dòng)縮放網(wǎng)頁(yè)布局模式 159
11.3.1 1-2-1 等比例變寬布局 159
11.3.2 1-2-1 單列變寬布局 160
11.3.3 1-3-1 單側(cè)列寬度固定布局 160
11.3.4 1-3-1 中間列寬度固定布局 162
11.4 新手常見(jiàn)疑難問(wèn)題 164
11.5 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 164
第12 章 JavaScript 和jQuery 166
12.1 認(rèn)識(shí)JavaScript 167
12.1.1 什么是JavaScript 167
12.1.2 在HTML 網(wǎng)頁(yè)頭中嵌入JavaScript 代碼 167
12.2 JavaScript 對(duì)象與函數(shù) 168
12.2.1 認(rèn)識(shí)對(duì)象 168
12.2.2 認(rèn)識(shí)函數(shù) 169
12.3 JavaScript 事件 170
12.3.1 事件與事件處理概述 170
12.3.2 JavaScript 的常用事件 171
12.4 認(rèn)識(shí)jQuery 172
12.4.1 jQuery 能做什么 172
12.4.2 jQuery 的配置 173
12.5 jQuery 選擇器 173
12.5.1 jQuery 的工廠函數(shù) 173
12.5.2 常見(jiàn)選擇器 174
12.6 新手常見(jiàn)疑難問(wèn)題 175
12.7 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 175
第13 章 jQuery Mobile 快速入門 177
13.1 認(rèn)識(shí)jQuery Mobile 178
13.2 跨平臺(tái)移動(dòng)設(shè)備網(wǎng)頁(yè)jQuery Mobile 178
13.2.1 移動(dòng)設(shè)備模擬器 178
13.2.2 jQuery Mobile 的安裝 180
13.2.3 jQuery Mobile 網(wǎng)頁(yè)的架構(gòu) 182
13.3 創(chuàng)建多頁(yè)面的jQuery Mobile 網(wǎng)頁(yè) 183
13.4 創(chuàng)建模態(tài)頁(yè) 184
13.5 絢麗多彩的頁(yè)面切換效果 185
13.6 新手常見(jiàn)疑難問(wèn)題 187
13.7 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 187
第14 章 使用UI 組件 189
14.1 套用UI 組件 190
14.1.1 表單組件 190
14.1.2 按鈕和組按鈕 196
14.1.3 按鈕圖標(biāo) 198
14.1.4 彈窗 200
14.2 列表 201
14.2.1 列表視圖 201
14.2.2 列表內(nèi)容 203
14.2.3 列表過(guò)濾 204
14.3 面板和可折疊塊 206
14.3.1 面板 206
14.3.2 可折疊塊 207
14.4 導(dǎo)航條 209
14.5 jQuery Mobile 主題 211
14.6 新手常見(jiàn)疑難問(wèn)題 214
14.7 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 215
第15 章 jQuery Mobile 事件 216
15.1 頁(yè)面事件 217
15.1.1 初始化事件 217
15.1.2 外部頁(yè)面加載事件 219
15.1.3 頁(yè)面過(guò)渡事件 220
15.2 觸摸事件 222
15.2.1 點(diǎn)擊事件 222
15.2.2 滑動(dòng)事件 224
15.3 滾屏事件 226
15.4 定位事件 227
15.5 新手常見(jiàn)疑難問(wèn)題 229
15.6 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 230
第16 章 數(shù)據(jù)存儲(chǔ)和讀取技術(shù) 231
16.1 認(rèn)識(shí)Web SQL Database 232
16.2 使用Web SQL Database 操作數(shù)據(jù) 232
16.2.1 數(shù)據(jù)庫(kù)的基本操作 232
16.2.2 數(shù)據(jù)表的基本操作 233
16.2.3 數(shù)據(jù)的基本操作 234
16.3 創(chuàng)建簡(jiǎn)易的學(xué)生管理系統(tǒng) 236
16.4 選擇文件 237
16.4.1 選擇單個(gè)文件 237
16.4.2　選擇多個(gè)文件 238
16.5　使用FileReader 接口讀取文件 239
16.5.1　檢測(cè)瀏覽器是否支持FileReader 接口 239
16.5.2　 FileReader 接口的方法 239
16.5.3　使用readAsDataURL 方法預(yù)覽圖片 239
16.5.4　使用readAsText 方法讀取文本文件 241
16.6 新手常見(jiàn)疑難問(wèn)題 242
16.7 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 243
第17 章 設(shè)計(jì)流行的響應(yīng)式網(wǎng)頁(yè) 244
17.1 什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 245
17.2 像素和屏幕分辨率 246
17.3 視口 246
17.3.1 視口的分類和常用屬性 246
17.3.2 媒體查詢 247
17.4 響應(yīng)式網(wǎng)頁(yè)的布局設(shè)計(jì) 248
17.4.1 常用布局類型 248
17.4.2 布局的實(shí)現(xiàn)方式 248
17.4.3 響應(yīng)式布局的設(shè)計(jì)與實(shí)現(xiàn) 250
17.5 響應(yīng)式圖片 250
17.5.1 使用 標(biāo)記 251
17.5.2 使用CSS 圖片 252
17.6 響應(yīng)式視頻 253
17.7 響應(yīng)式導(dǎo)航菜單 253
17.8 響應(yīng)式表格 255
17.8.1 隱藏表格中的列 255
17.8.2 滾動(dòng)表格中的列 256
17.8.3 轉(zhuǎn)換表格中的列 258
17.9 響應(yīng)式開(kāi)發(fā)框架Bootstrap 260
17.10 新手常見(jiàn)疑難問(wèn)題 261
17.11 實(shí)戰(zhàn)技能訓(xùn)練營(yíng) 262
第18 章 App 的打包和測(cè)試 263
18.1 配置Android 開(kāi)發(fā)環(huán)境 264
18.1.1 安裝Java JDK 264
18.1.2 安裝Android SDK 266
18.1.3 安裝Apache Ant 268
18.2 下載與安裝Apache Cordova 270
18.3 設(shè)置Android 模擬器 271
18.4 將網(wǎng)頁(yè)轉(zhuǎn)換為Android App 272
18.5 新手常見(jiàn)疑難問(wèn)題 274
第19 章 項(xiàng)目實(shí)訓(xùn)1開(kāi)發(fā)連鎖咖啡響應(yīng)式網(wǎng)站 275
19.1 網(wǎng)站概述 276
19.1.1 網(wǎng)站結(jié)構(gòu) 276
19.1.2 設(shè)計(jì)效果 276
19.1.3 設(shè)計(jì)準(zhǔn)備 277
19.2 設(shè)計(jì)首頁(yè)布局 277
19.3 設(shè)計(jì)可切換導(dǎo)航 278
19.4 主體內(nèi)容 282
19.4.1 設(shè)計(jì)輪播廣告區(qū) 283
19.4.2 設(shè)計(jì)產(chǎn)品推薦區(qū) 284
19.4.3 設(shè)計(jì)登錄注冊(cè)和Logo 285
19.4.4 設(shè)計(jì)特色展示區(qū) 286
19.4.5 設(shè)計(jì)產(chǎn)品生產(chǎn)流程區(qū) 287
19.5 設(shè)計(jì)底部隱藏導(dǎo)航 289
第20 章 項(xiàng)目實(shí)訓(xùn)2家庭記賬本App 291
20.1 記賬本的需求分析 292
20.2 數(shù)據(jù)庫(kù)分析 292
20.2.1 分析數(shù)據(jù)庫(kù) 292
20.2.2 創(chuàng)建數(shù)據(jù)庫(kù) 292
20.3 記賬本的代碼實(shí)現(xiàn) 293
20.3.1 設(shè)計(jì)首頁(yè) 293
20.3.2 新增記賬頁(yè)面 293
20.3.3 記賬列表頁(yè)面 295
20.3.4 記賬詳情頁(yè)面 296
20.3.5 刪除記賬 297
第21 章 項(xiàng)目實(shí)訓(xùn)3連鎖酒店訂購(gòu)系統(tǒng)App 302
21.1 連鎖酒店訂購(gòu)的需求分析 303
21.2 網(wǎng)站的結(jié)構(gòu) 303
21.3 連鎖酒店系統(tǒng)的代碼實(shí)現(xiàn) 304
21.3.1 設(shè)計(jì)首頁(yè) 304
21.3.2 設(shè)計(jì)訂購(gòu)頁(yè)面 305
21.3.3 設(shè)計(jì)連鎖分店頁(yè)面 310
21.3.4 設(shè)計(jì)查看訂單頁(yè)面 312
21.3.5 設(shè)計(jì)酒店介紹頁(yè)面 313