本書從常用的HTML/CSS/Javascript以及jQuery語法解說起, 搭配各種時下最流行的動態網頁技術, 帶您逐步學會制作跨平臺的響應式網站及Web App, 全書共分4部分。基礎知識篇; jQuery實用技術篇; 跨設備的網頁技術篇; 快速打造Web App篇: 學習jQuery Mobile快速打造Web APP, 搭配HTML5的WebStorage及Web Database API學習數據存取, 制作Web App版記事本程序。
序
隨著智能手機的普及，大多數用戶的生活已經與其密不可分。通過手機搜索和查找網站，甚至直接通過手機上網消費的比例也逐漸增加，無論是公司的官方網站還是個人博客，對移動設備版本網頁的需求度越來越高。
為了能讓網頁在各種不同尺寸的移動設備都能有很好的視覺體驗，EthanMarcotte設計師在2010年提出了響應式網頁設計（ResponsiveWebDesign，RWD）的概念。他運用CSS3的流動布局（fluidgrid）、媒體查詢（mediaquery）和按百分比縮放圖像（scalableimage）等技術制作出能夠在不同分辨率下彈性排版的網頁，無論是用手機還是平板電腦的瀏覽者都能輕松愉快地瀏覽網站。
在響應式設計的潮流中，jQuery、jQueryMobile以及bootstrap技術最受人矚目，通過jQuery能輕松駕馭困難的JavaScript技術，搭配bootstrap插件短時間內就能完成相當專業的響應式網站。
為了手機版再開發一個原生應用程序（NativeApp）版本，對于大多數已有網站的商家來說費用相對昂貴許多，但是通過jQueryMobile框架稍微修改一下現有網站就能放到移動設備上瀏覽，功能和界面與一般網頁應用程序（APP）無異，甚至更加美觀，客戶普遍接受度很高，對于網頁設計者或程序開發人員來說輕輕松松就能增加收入，這也是為什么jQuery與jQueryMobile這么受歡迎的原因。
想學習jQuery與jQueryMobile框架技術，必須先從基礎HTML5開始。HTML5不僅是單純的HTML語言，而且包含JavaScript、CSS3技術。HTML5還新增了一些網頁應用程序API，例如LocalStorage（本地存儲）、WebDataBase（網頁數據庫）等，這些都必須搭配JavaScript使用。學習這些技術之前必須熟悉基本的HTML語言，這樣才能達到事半功倍的效果。
本書以讓缺乏程序設計基礎的網頁設計師能夠輕松上手為目標，先打好HTML5、CSS3和JavaScript基礎，再學習使用jQuery和jQueryMobile制作網頁以及網頁應用程序（WebApp），并搭配bootstrap插件打造響應式網頁，從基礎到熟練循序漸進。同時讓讀者能夠通過范例進行練習與實踐，例如第5章實際制作“網頁益智游戲——數字快快點”、第10章實現“瀑布流照片展示網頁”以及第14章搭配HTML5WebDataBase實現“記事本WebApp”。
本書范例代碼的下載地址為：http://pan.baidu.com/s/1mhPaV1m（注意區分數字和英文字母大小寫）。如果下載有問題，請發送電子郵件至booksaga@126.com，郵件主題設置為“求jQuery+jQueryMobile跨設備網頁設計下載資源”。
衷心期待本書成為讀者學習制作網頁的最佳幫手。本書內容雖經再三核對，力求謹慎、正確，但疏落恐難避免，還望各位讀者予以指正，再次感謝。
2017年4月
陳婉凌
目 錄
第一篇 基礎知識
第1章 必學HTML語言 3
1-1 什么是HTML 4
1-2 學習HTML前的準備工作 4
1-2-1 建立HTML文件 4
1-2-2 預覽HTML網頁 6
1-3 HTML語言結構 7
1-3-1 HTML的標簽類型 7
1-3-2 HTML的組成 7
1-3-3 標簽屬性的運用 8
1-4 HTML5文件結構與語義標簽 8
1-4-1 結構化的語義標簽 8
1-4-2 HTML5聲明與編碼設置 12
1-4-3 meta標簽與SEO優化的關系 13
1-5 HTML常用段落標簽 14
1-5-1 設置段落樣式的標簽 14
1-5-2 設置段落標題 16
1-5-3 項目符號與編號——使用列表標簽 16
1-5-4 HTML注釋 19
1-5-5 使用特殊符號 20
1-5-6 div標簽與span標簽 21
1-6 網頁圖像的應用 23
1-6-1 圖像的尺寸與分辨率 23
1-6-2 嵌入圖像 23
1-6-3 路徑的表示法 24
1-7 表格與窗體 26
1-7-1 制作基本表格 26
1-7-2 表格的基本結構 26
1-7-3 制作窗體 28
1-8 加入超鏈接 31
第2章 必學CSS基礎 33
2-1 建立CSS樣式表單 34
2-1-1 CSS基本格式 34
2-1-2 套用CSS樣式表單 35
2-2 CSS選擇器 39
2-2-1 認識HTML DOM 39
2-2-2 認識CSS選擇器 40
第3章 必學JavaScript基礎 45
3-1 認識JavaScript 46
3-1-1 JavaScript結構 46
3-1-2 鏈接外部JS文件 49
3-2 變量與基本數據類型 51
3-2-1 JavaScript變量、常數與數據類型 51
3-2-2 基本數據類型 53
3-2-3 對象 55
3-2-4 函數 57
3-2-5 數組 58
3-2-6 日期 60
3-2-7 數學 61
3-2-8 null和undefined的差異 64
3-3 JavaScript 與 DOM 64
3-3-1 文檔對象模型 64
3-3-2 JavaScript事件處理 66
3-4 JavaScript流程控制 68
3-4-1 運算符 68
3-4-2 if…else條件判斷語句 70
3-4-3 for循環 71
第4章 必學jQuery基礎 72
4-1 認識jQuery 73
4-1-1 jQuery的優點 73
4-1-2 引用jQuery函數庫 74
4-2 jQuery的基礎知識 75
4-2-1 jQuery的基本語句 75
4-2-2 jQuery選擇器 76
4-2-3 jQuery調試 78
4-2-4 使用jQuery存取組件內容 80
第二篇 jQuery實用技術
第5章 jQuery基本功——網頁益智游戲 85
5-1 組件的設計與制作 86
5-1-1 界面和程序功能概述 86
5-1-2 游戲界面的HTML 87
5-2 善用CSS表現視覺效果 88
5-2-1 游戲界面的CSS 88
5-2-2 控制文字樣式 89
5-2-3 網頁組件定位的CSS語句 91
5-2-4 調整邊界、留白的CSS語句 94
5-2-5 加入陰影及圓角的CSS語句 98
5-2-6 為組件設置背景和漸層 100
5-3 jQuery程序解析 104
5-3-1 動態產生數字組件 104
5-3-2 隨機排列數字 105
5-3-3 數字按鈕的事件處理程序 108
5-3-4 計時開始與結束 110
5-3-5 函數的多重用法與限制 112
第6章 自制專屬的jQuery Plugin 118
6-1 jQuery Plugin初探 119
6-1-1 jQuery Plugin的命名 119
6-1-2 JavaScript的prototype對象 119
6-1-3 第一個jQuery Plugin 122
6-1-4 避免插件沖突 125
6-2 實現jQuery Plugin——圖像展示器 127
6-2-1 前置準備工作 127
6-2-2 HTML組件設置和插件套用 128
6-2-3 套用CSS語句 129
6-2-4 編寫jQuery Plugin程序 130
第7章 使用jQuery 打造完美圖表 137
7-1 表格排序套件——tablesorter 138
7-1-1 下載與套用 138
7-1-2 高級應用 141
7-2 日歷插件——FullCalendar 143
7-2-1 下載與套用 143
7-2-2 高級應用 144
第8章 RWD響應式網頁設計 151
8-1 何謂響應式網頁設計 152
8-1-1 響應式設計的基礎 152
8-1-2 創建響應式網頁 153
8-2 認識Bootstrap插件 161
8-2-1 Bootstrap下載 161
8-2-2 Bootstrap基本結構 162
8-2-3 認識Grid System 163
8-2-4 創建表格 165
8-2-5 創建響應式圖像 168
第9章 Web Storage網頁存儲 170
9-1 認識Web Storage 171
9-1-1 Web Storage的概念 171
9-1-2 檢測瀏覽器是否支持Web Storage 171
9-2 localStorage和sessionStorage 172
9-2-1 存取localStorage 172
9-2-2 清除localStorage 175
9-2-3 存取sessionStorage 177
9-3 Web Storage實例練習 177
9-3-1 登錄/注銷和計數器 177
9-3-2 購物車 181
第10章 綜合實踐——瀑布流照片展示網頁 191
10-1 實現成品預覽 192
10-2 創建頁標題和頁尾 193
10-2-1 前置準備工作 194
10-2-2 使用Bootstrap打造導航條 194
10-2-3 為菜單加上符號圖標 196
10-2-4 打造右側折疊式菜單 197
10-3 添加照片瀑布流展示的效果 198
10-3-1 Masonry插件的下載 198
10-3-2 Masonry插件的使用 199
10-3-3 檢測圖像是否加載完成 200
10-4 單擊照片縮略圖放大顯示照片 201
10-4-1 下載Colorbox插件 202
10-4-2 Colorbox插件的使用 202
第三篇 使用jQuery Mobile 快速打造移動設備網頁
第11章 認識jQuery Mobile 209
11-1 認識jQuery Mobile 210
11-1-1 jQuery Mobile的優點 210
11-1-2 jQuery Mobile的工作流程 210
11-1-3 移動設備仿真器 211
11-1-4 第一個jQuery Mobile網頁 212
11-2 套用UI組件 217
11-2-1 認識UI組件 217
11-2-2 按鈕 219
11-2-3 分組的按鈕 224
11-2-4 列表視圖 224
11-3 網頁導向與主題 227
11-3-1 jQuery Mobile網頁導向 227
11-3-2 ThemeRoller快速套用主題 230
第12章 jQuery Mobile事件 236
12-1 頁面事件 237
12-1-1 初始化事件 237
12-1-2 外部頁面載入事件 240
12-1-3 頁面切換事件 241
12-2 觸摸事件 244
12-2-1 單擊事件 244
12-2-2 滑動事件 246
12-2-3 滾動事件 248
12-2-4 屏幕方向改變事件 249
第13章 嵌入百度地圖和谷歌地圖 252
13-1 百度地圖API和谷歌地圖API 253
13-1-1 簡易的百度地圖和谷歌地圖 253
13-1-2 地圖控件 261
13-2 按地址顯示地圖 263
13-2-1 地址定位 263
13-2-2 圖標標記 266
第14章 綜合實踐——記事本Web App的實現（含HTML5 Web DataBase） 271
14-1 認識Web SQL 272
14-1-1 Web SQL基本操作 272
14-1-2 創建數據表 274
14-1-3 添加、修改及刪除數據 276
14-2 記事本應用程序的結構 281
14-3 添加記事 282
14-4 刪除記事 284
14-5 記事列表 286
新書資訊