Web 前端開發實例教程 — HTML5 + CSS3 + JavaScript + jQuery, 2/e

張兵義，主要研究方向：網站規劃與網頁製作、動態網站、程序設計。承擔的主要課程：網站規劃與網頁製作、動態網站ASP.NET程序設計、多媒體技術基礎、JSP程序設計。出版教材：《多媒體電腦組裝與維護短訓教程》《Delphi數據庫程序設計教程》《網頁設計與製作教程》《ASP動態網站開發畢業設計指導及實例》《網站規劃與網頁設計》《Dreamweaver 8網頁製作短訓教程》。

1章 HTML5基礎 1
1.1 Web的基本概念 1
1.1.1 WWW 1
1.1.2 Browser 1
1.1.3 URL 1
1.1.4 HTML 2
1.1.5 HTTP 2
1.2 網站與網頁 3
1.2.1 網站、網頁和主頁 3
1.2.2 靜態網頁和動態網頁 3
1.3 Web標準 4
1.3.1 Web標準簡介 4
1.3.2 建立Web標準的優點 5
1.3.3 網頁的表現和結構相分離 5
1.4 認識HTML5+CSS3+JavaScript技術組合 6
1.4.1 HTML5簡介 6
1.4.2 CSS3簡介 7
1.4.3 JavaScript簡介 8
1.5 HTML5語法基礎 9
1.5.1 HTML5語法結構 9
1.5.2 HTML5文件結構 11
1.5.3 HTML5開發人員編碼規範 13
1.6 元素的分類 14
1.6.1 元信息元素 14
1.6.2 語義元素 15
1.6.3 無語義元素 17
1.7 HTML的顏色表示和字符實體 17
1.7.1 HTML的顏色表示 17
1.7.2 字符實體 18
1.8 編輯HTML文件 18
1.8.1 常見的網頁編輯工具 18
1.8.2 HTML文件的創建 19
1.9 註釋 22
1.10 案例—製作鮮品園頁面摘要和版權信息 22
習題1 23
2章 編輯網頁元素 24
2.1 文本元素 24
2.1.1 字體樣式元素 24
2.1.2 短語元素 25
2.2 文本層次語義元素 26
2.2.1 mark元素 26
2.2.2 cite元素 27
2.2.3 time元素 27
2.3 基本排版元素 28
2.3.1 標題元素hl～h6 28
2.3.2 段落元素p和換行元素br 28
2.3.3 縮排元素blockquote 29
2.3.4 水平線元素hr 30
2.3.5 案例—製作鮮品園服務指南頁面 30
2.4 圖像元素img 31
2.5 鏈接元素a 32
2.5.1 a元素 32
2.5.2 指向其他頁面的鏈接 33
2.5.3 指向書籤的鏈接 33
2.5.4 指向下載文件的鏈接 34
2.5.5 指向電子郵件的鏈接 34
2.5.6 JavaScript鏈接 34
2.5.7 用圖像作為鏈接熱點 34
2.5.8 空鏈接 35
2.5.9 案例—製作鮮品園資料下載頁面 35
2.6 列表元素 37
2.6.1 無序列表 37
2.6.2 有序列表 38
2.6.3 定義列表 38
2.6.4 嵌套列表 39
2.6.5 案例—製作鮮品園公司名片頁面 40
2.7 多媒體元素 41
2.7.1 audio元素 42
2.7.2 video元素 42
習題2 43
3章 網頁的佈局與交互 45
3.1 表格元素table 45
3.1.1 表格的結構 45
3.1.2 基本表格 45
3.1.3 跨行跨列表格 46
3.1.4 表格數據的分組 47
3.1.5 調整列的格式 48
3.1.6 案例—使用表格佈局鮮品園產品展示頁面 49
3.2 使用結構元素構建網頁佈局 50
3.2.1 section元素 51
3.2.2 nav元素 51
3.2.3 header元素 51
3.2.4 footer元素 51
3.2.5 article元素 51
3.2.6 aside元素 52
3.2.7 分組元素 53
3.2.8 案例—製作鮮品園新品發布頁面 54
3.3 頁面交互元素 56
3.3.1 details元素和summary元素 56
3.3.2 progress元素 56
3.4 分區元素div 57
3.5 範圍元素span 58
3.6 表單 59
3.6.1 表單元素form 59
3.6.2 輸入元素input 59
3.6.3 標籤元素label 61
3.6.4 選擇欄元素select 62
3.6.5 按鈕元素button 63
3.6.6 多行文本元素tetarea 64
3.6.7 表單分組 65
3.6.8 使用表格佈局表單 66
習題3 67
4章 CSS3基礎 69
4.1 CSS3概述 69
4.1.1 CSS3的編寫規範 69
4.1.2 CSS3的工作環境 70
4.2 在網頁中引用CSS的方法 71
4.2.1 行內樣式 71
4.2.2 內部樣式表 72
4.2.3 鏈入外部樣式表 73
4.2.4 導入外部樣式表 74
4.2.5 案例—製作鮮品園業務簡介頁面 75
4.3 CSS的主要特性 77
4.3.1 繼承 77
4.3.2 層疊 78
4.3.3 優先級 79
4.4 CSS的基本語法 80
4.4.1 基本語法 80
4.4.2 注意事項 80
4.5 CSS的選擇器 81
4.5.1 元素選擇器 81
4.5.2 通配符選擇器 82
4.5.3 派生選擇器 82
4.5.4 兄弟選擇器 85
4.5.5 id選擇器 86
4.5.6 類選擇器 87
4.5.7 偽類選擇器 87
4.5.8 偽元素選擇器 89
4.6 CSS屬性值的寫法和單位 91
4.6.1 長度、百分比單位 91
4.6.2 色彩單位 92
4.7 文件結構與元素類型 93
4.7.1 文件結構的基本概念 93
4.7.2 元素類型 94
4.8 案例—製作鮮品園行業資訊頁面 95
習題4 98
5章 CSS3的屬性 100
5.1 CSS字體屬性 100
5.1.1 字體類型屬性font-family 100
5.1.2 字體尺寸屬性font-size 100
5.1.3 字體傾斜屬性font-style 101
5.1.4 小寫字體屬性font-variant 101
5.1.5 字體粗細font-weight 101
5.2 CSS文本屬性 102
5.2.1 文本顏色屬性color 102
5.2.2 行高屬性line-height 102
5.2.3 文本水平對齊方式屬性tet-align 103
5.2.4 為文本添加修飾屬性tet-decoration 103
5.2.5 段落首行縮進屬性tet-indent 103
5.2.6 文本的影屬性tet-shadow 104
5.2.7 元素內部的空白屬性white-space 104
5.2.8 文本的截斷效果屬性tet-overflow 104
5.3 CSS背景屬性 106
5.3.1 背景顏色屬性background-color 106
5.3.2 背景圖像屬性background-image 107
5.3.3 重複背景圖像屬性background-repeat 108
5.3.4 固定背景圖像屬性background-attachment 108
5.3.5 背景圖像位置屬性background-position 109
5.3.6 背景圖像大小屬性background-size 109
5.3.7 背景屬性background 110
5.3.8 背景圖像起點屬性background-origin 110
5.4 CSS尺寸屬性 111
5.4.1 寬度屬性width 112
5.4.2 高度屬性height 112
5.4.3 小寬度屬性min-width 112
5.4.4 大寬度屬性ma-width 113
5.4.5 小高度屬性min-height 113
5.4.6 大高度屬性ma-height 113
5.5 CSS列表屬性 114
5.5.1 圖像作為列表項的標記屬性list-style-image 114
5.5.2 列表項標記的位置屬性list-style-position 115
5.5.3 標記的類型屬性list-style-type 115
5.5.4 列表簡寫屬性list-style 116
5.6 CSS表格屬性 118
5.6.1 合併邊框屬性border-collapse 118
5.6.2 邊框間隔屬性border-spacing 118
5.6.3 標題位置屬性caption-side 118
5.6.4 單元格無內容顯示方式屬性empty-cells 119
5.6.5 案例—使用斑馬線表格製作暢銷商品銷量排行榜 120
5.7 CSS屬性的應用 121
5.7.1 設置圖像樣式 122
5.7.2 設置表單樣式 125
5.7.3 設置鏈接 127
5.7.4 創建導航菜單 128
5.8 綜合案例—製作鮮品園夢想社區頁面 131
5.8.1 頁面佈局規劃 131
5.8.2 頁面的製作過程 132
習題5 137
6章 盒模型與頁面佈局 138
6.1 CSS盒模型的組成和大小 138
6.1.1 盒子的組成 138
6.1.2 盒子的大小 139
6.1.3 塊級元素與行級元素的寬度和高度 141
6.2 CSS盒模型的屬性 141
6.2.1 CSS內邊距屬性padding 141
6.2.2 CSS外邊距屬性margin 144
6.2.3 CSS邊框屬性border 146
6.2.4 圓角邊框屬性border-radius 149
6.2.5 盒模型的影屬性bo-shadow 150
6.2.6 調整大小屬性resize 151
6.3 CSS佈局屬性 152
6.3.1 元素的佈局方式概述 152
6.3.2 CSS浮動屬性float 154
6.3.3 清除浮動屬性clear 155
6.3.4 裁剪屬性clip 156
6.3.5 元素顯示方式屬性display 157
6.3.6 元素可見性屬性visibility 158
6.4 CSS盒子定位屬性 159
6.4.1 定位位置屬性、right、bottom、left 159
6.4.2 定位方式屬性position 160
6.4.3 層疊順序屬性z-inde 165
6.5 CSS3多列屬性 166
6.5.1 列數屬性column-count 166
6.5.2 列寬屬性column-width 166
6.5.3 列寬屬性column 166
6.5.4 列與列的間隔屬性column-gap 167
6.5.5 是否橫跨所有列屬性column-span 167
6.5.6 列與列的間隔樣式屬性column-rule-style 167
6.5.7 列與列的間隔顏色屬性column-rule-color 167
6.5.8 列與列的寬度屬性column-rule-width 167
6.5.9 列與列的間隔所有屬性column-rule 168
6.6 CSS基本佈局樣式 169
6.6.1 CSS佈局類型 169
6.6.2 CSS佈局樣式 170
6.7 綜合案例—製作鮮品園商務安全中心頁面 172
練習6 177
7章 JavaScript編程基礎 179
7.1 JavaScript概述 179
7.2 在HTML文件中使用JavaScript 179
7.2.1 在HTML文件中嵌入腳本程序 180
7.2.2 鏈接腳本文件 180
7.2.3 在HTML標籤內添加腳本 181
7.3 數據類型 182
7.3.1 數據類型的分類 182
7.3.2 基本數據類型 182
7.3.3 數據類型的判斷 183
7.3.4 數據類型的轉換 184
7.4 常量、變量、運算符和表達式 185
7.4.1 常量 185
7.4.2 變量 186
7.4.3 運算符和表達式 186
7.5 流程控制語句 188
7.5.1 順序結構語句 188
7.5.2 條件選擇結構語句 191
7.5.3 循環結構語句 194
7.6 函數 196
7.6.1 函數的聲明 196
7.6.2 函數的調用 197
7.6.3 變量的作用域 198
7.6.4 系統函數 199
7.7 對象 199
7.7.1 對象的概念 199
7.7.2 類 200
7.7.3 對象的實例化 200
7.7.4對象的屬性 201
7.7.5 對象的方法 202
7.7.6 對象的事件 203
7.8 JavaScript的內置對象 203
7.8.1 數組對象 204
7.8.2 字符串對象 206
7.8.3 日期對象 207
習題7 209
8章 對像模型及事件處理 210
8.1 BOM和DOM 210
8.1.1 BOM 210
8.1.2 DOM 211
8.2 window對象 211
8.2.1 window對象的屬性 211
8.2.2 window對象的方法 212
8.3 document對象 213
8.3.1 document對象的屬性 213
8.3.2 document對象的方法 213
8.4 location對象 215
8.4.1 location對象的屬性 215
8.4.2 location對象的方法 215
8.5 history對象 215
8.6 navigator對象 216
8.7 screen對象 217
8.8 form對象 217
8.8.1 form對象的屬性 217
8.8.2 form對象的方法 218
8.9 DOM節點 218
8.9.1 de對象 218
8.9.2 Element對象 219
8.9.3 deList對象 219
8.10 JavaScript的對象事件處理程序 221
8.10.1 對象的事件 221
8.10.2 常用的事件及處理 221
8.10.3 表單對象與交互性 225
8.11 綜合案例—鮮品園商品複選框全選效果 229
習題8 230
9章 CSS3變形、過渡和動畫屬性 232
9.1 變形 232
9.1.1 CSS的坐標系統 232
9.1.2 transform屬性 233
9.1.3 transform-origin屬性 238
9.1.4 transform-style屬性 239
9.1.5 perspective屬性和perspective-origin屬性 240
9.1.6 backface-visibility屬性 241
9.2 過渡 241
9.2.1 過渡屬性 241
9.2.2 過渡事件 243
9.3 動畫 244
9.3.1 動畫屬性 244
9.3.2 動畫事件 248
習題9 249
10章 HTML5的API應用 251
10.1 拖放API 251
10.1.1 draggable屬性 251
10.1.2 拖放事件 251
10.1.3 數據傳遞對象dataTransfer 252
10.2 繪圖API 254
10.2.1 創建canvas元素 254
10.2.2 構建繪圖環境 254
10.2.3 繪製圖形的步驟 255
10.2.4 繪製圖形 256
習題10 264
11章 jQuery基礎 265
11.1 jQuery簡介 265
11.2 編寫jQuery程序 265
11.2.1 下載與配置jQuery 265
11.2.2 編寫一個簡單的jQuery程序 266
11.3 DOM對象和jQuery對象 266
11.3.1 DOM對象和jQuery對像簡介 267
11.3.2 jQuery對象和DOM對象的相互轉換 268
11.4 jQuery插件 268
11.4.1 下載jQuery插件 269
11.4.2 引用jQuery插件的方法 269
11.5 jQuery選擇器簡介 269
11.5.1 jQuery的工廠函數 269
11.5.2 什麼是jQuery選擇器 270
11.6 基礎選擇器 270
11.6.1 id選擇器 270
11.6.2 元素選擇器 271
11.6.3 類名選擇器 271
11.6.4 複合選擇器 271
11.6.5 通配符選擇器 271
11.7 層次選擇器 272
11.7.1 ancestor descendant（祖先 後代）選擇器 272
11.7.2 parent＞child（父＞子）選擇器 272
11.7.3 prev+net（前+後）選擇器 272
11.7.4 prev～siblings（前～兄弟）選擇器 273
11.8 過濾選擇器 273
11.8.1 簡單過濾器 273
11.8.2 內容過濾器 273
11.8.3 可見性過濾器 274
11.8.4 子元素過濾器 274
11.9 表單選擇器 274
習題11 276
12章 jQuery動畫與UI插件 278
12.1 jQuery的動畫方法簡介 278
12.2 顯示與隱藏效果 278
12.2.1 隱藏元素的方法 278
12.2.2 顯示元素的方法 279
12.3 淡入淡出效果 281
12.3.1 淡入效果 281
12.3.2 淡出效果 281
12.3.3 元素的不透明效果 282
12.3.4 交替淡入淡出效果 282
12.4 滑動效果 283
12.4.1 向下展開效果 283
12.4.2 向上收縮效果 283
12.4.3 交替伸縮效果 283
12.5 jQuery UI簡介 285
12.5.1 jQuery UI概述 285
12.5.2 jQuery UI的下載 285
12.5.3 jQuery UI的使用 286
12.5.4 jQuery UI的工作原理 286
12.6 jQuery UI的常用插件 288
12.6.1 折疊面板 288
12.6.2 自動完成 291
12.6.3 標籤頁 293
習題12 295
13章 鮮品園綜合案例網站 297
13.1 網站的開發流程 297
13.2 網站結構 298
13.2.1 站點的目錄結構 298
13.2.2 頁面的組成 298
13.3 網站技術分析 299
13.4 製作首頁 300
13.4.1 頁面結構代碼 301
13.4.2 頁面樣式設計 306
13.4.3 頁面交互與網頁特效的實現 311
13.5 製作新資訊頁 313
13.5.1 頁面結構代碼 314
13.5.2 頁面樣式設計 315
13.6 網站的整合與維護 316
習題13 316
參考文獻 318