目 錄
第1章 HTML5基礎(chǔ) 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 網(wǎng)站與網(wǎng)頁 3
1.2.1 網(wǎng)站、網(wǎng)頁和主頁 3
1.2.2 靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁 3
1.3 Web標(biāo)準(zhǔn) 4
1.3.1 Web標(biāo)準(zhǔn)簡(jiǎn)介 4
1.3.2 建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn) 5
1.3.3 網(wǎng)頁的表現(xiàn)和結(jié)構(gòu)相分離 5
1.4 認(rèn)識(shí)HTML5+CSS3+JavaScript技術(shù)組合 6
1.4.1 HTML5簡(jiǎn)介 6
1.4.2 CSS3簡(jiǎn)介 7
1.4.3 JavaScript簡(jiǎn)介 8
1.5 HTML5語法基礎(chǔ) 9
1.5.1 HTML5語法結(jié)構(gòu) 9
1.5.2 HTML5文件結(jié)構(gòu) 11
1.5.3 HTML5開發(fā)人員編碼規(guī)范 13
1.6 元素的分類 14
1.6.1 元信息元素 14
1.6.2 語義元素 15
1.6.3 無語義元素 17
1.7 HTML的顏色表示和字符實(shí)體 17
1.7.1 HTML的顏色表示 17
1.7.2 字符實(shí)體 18
1.8 編輯HTML文件 18
1.8.1 常見的網(wǎng)頁編輯工具 18
1.8.2 HTML文件的創(chuàng)建 19
1.9 注釋 22
1.10 案例—制作鮮品園頁面摘要和版權(quán)信息 22
習(xí)題1 23
第2章 編輯網(wǎng)頁元素 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 標(biāo)題元素hl～h6 28
2.3.2 段落元素p和換行元素br 28
2.3.3 縮排元素blockquote 29
2.3.4 水平線元素hr 30
2.3.5 案例—制作鮮品園服務(wù)指南頁面 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 用圖像作為超鏈接熱點(diǎn) 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
習(xí)題2 43
第3章 網(wǎng)頁的布局與交互 45
3.1 表格元素table 45
3.1.1 表格的結(jié)構(gòu) 45
3.1.2 基本表格 45
3.1.3 跨行跨列表格 46
3.1.4 表格數(shù)據(jù)的分組 47
3.1.5 調(diào)整列的格式 48
3.1.6 案例—使用表格布局鮮品園產(chǎn)品展示頁面 49
3.2 使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁布局 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 案例—制作鮮品園新品發(fā)布頁面 54
3.3 頁面交互元素 56
3.3.1 details元素和summary元素 56
3.3.2 progress元素 56
3.4 分區(qū)元素div 57
3.5 范圍元素span 58
3.6 表單 59
3.6.1 表單元素form 59
3.6.2 輸入元素input 59
3.6.3 標(biāo)簽元素label 61
3.6.4 選擇欄元素select 62
3.6.5 按鈕元素button 63
3.6.6 多行文本元素textarea 64
3.6.7 表單分組 65
3.6.8 使用表格布局表單 66
習(xí)題3 67
第4章 CSS3基礎(chǔ) 69
4.1 CSS3概述 69
4.1.1 CSS3的編寫規(guī)范 69
4.1.2 CSS3的工作環(huán)境 70
4.2 在網(wǎng)頁中引用CSS的方法 71
4.2.1 行內(nèi)樣式 71
4.2.2 內(nèi)部樣式表 72
4.2.3 鏈入外部樣式表 73
4.2.4 導(dǎo)入外部樣式表 74
4.2.5 案例—制作鮮品園業(yè)務(wù)簡(jiǎn)介頁面 75
4.3 CSS的主要特性 77
4.3.1 繼承 77
4.3.2 層疊 78
4.3.3 優(yōu)先級(jí) 79
4.4 CSS的基本語法 80
4.4.1 基本語法 80
4.4.2 注意事項(xiàng) 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 長(zhǎng)度、百分比單位 91
4.6.2 色彩單位 92
4.7 文件結(jié)構(gòu)與元素類型 93
4.7.1 文件結(jié)構(gòu)的基本概念 93
4.7.2 元素類型 94
4.8 案例—制作鮮品園行業(yè)資訊頁面 95
習(xí)題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 字體粗細(xì)font-weight 101
5.2 CSS文本屬性 102
5.2.1 文本顏色屬性color 102
5.2.2 行高屬性line-height 102
5.2.3 文本水平對(duì)齊方式屬性text-align 103
5.2.4 為文本添加修飾屬性text-decoration 103
5.2.5 段落首行縮進(jìn)屬性text-indent 103
5.2.6 文本的陰影屬性text-shadow 104
5.2.7 元素內(nèi)部的空白屬性white-space 104
5.2.8 文本的截?cái)嘈Ч麑傩詔ext-overflow 104
5.3 CSS背景屬性 106
5.3.1 背景顏色屬性background-color 106
5.3.2 背景圖像屬性background-image 107
5.3.3 重復(fù)背景圖像屬性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 背景圖像起點(diǎn)屬性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 最大寬度屬性max-width 113
5.4.5 最小高度屬性min-height 113
5.4.6 最大高度屬性max-height 113
5.5 CSS列表屬性 114
5.5.1 圖像作為列表項(xiàng)的標(biāo)記屬性list-style-image 114
5.5.2 列表項(xiàng)標(biāo)記的位置屬性list-style-position 115
5.5.3 標(biāo)記的類型屬性list-style-type 115
5.5.4 列表簡(jiǎn)寫屬性list-style 116
5.6 CSS表格屬性 118
5.6.1 合并邊框?qū)傩詁order-collapse 118
5.6.2 邊框間隔屬性border-spacing 118
5.6.3 標(biāo)題位置屬性caption-side 118
5.6.4 單元格無內(nèi)容顯示方式屬性empty-cells 119
5.6.5 案例—使用斑馬線表格制作暢銷商品銷量排行榜 120
5.7 CSS屬性的應(yīng)用 121
5.7.1 設(shè)置圖像樣式 122
5.7.2 設(shè)置表單樣式 125
5.7.3 設(shè)置鏈接 127
5.7.4 創(chuàng)建導(dǎo)航菜單 128
5.8 綜合案例—制作鮮品園夢(mèng)想社區(qū)頁面 131
5.8.1 頁面布局規(guī)劃 131
5.8.2 頁面的制作過程 132
習(xí)題5 137
第6章 盒模型與頁面布局 138
6.1 CSS盒模型的組成和大小 138
6.1.1 盒子的組成 138
6.1.2 盒子的大小 139
6.1.3 塊級(jí)元素與行級(jí)元素的寬度和高度 141
6.2 CSS盒模型的屬性 141
6.2.1 CSS內(nèi)邊距屬性padding 141
6.2.2 CSS外邊距屬性margin 144
6.2.3 CSS邊框?qū)傩詁order 146
6.2.4 圓角邊框?qū)傩詁order-radius 149
6.2.5 盒模型的陰影屬性box-shadow 150
6.2.6 調(diào)整大小屬性resize 151
6.3 CSS布局屬性 152
6.3.1 元素的布局方式概述 152
6.3.2 CSS浮動(dòng)屬性float 154
6.3.3 清除浮動(dòng)屬性clear 155
6.3.4 裁剪屬性clip 156
6.3.5 元素顯示方式屬性display 157
6.3.6 元素可見性屬性visibility 158
6.4 CSS盒子定位屬性 159
6.4.1 定位位置屬性top、right、bottom、left 159
6.4.2 定位方式屬性position 160
6.4.3 層疊順序?qū)傩詚-index 165
6.5 CSS3多列屬性 166
6.5.1 列數(shù)屬性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 綜合案例—制作鮮品園商務(wù)安全中心頁面 172
練習(xí)6 177
第7章 JavaScript編程基礎(chǔ) 179
7.1 JavaScript概述 179
7.2 在HTML文件中使用JavaScript 179
7.2.1 在HTML文件中嵌入腳本程序 180
7.2.2 鏈接腳本文件 180
7.2.3 在HTML標(biāo)簽內(nèi)添加腳本 181
7.3 數(shù)據(jù)類型 182
7.3.1 數(shù)據(jù)類型的分類 182
7.3.2 基本數(shù)據(jù)類型 182
7.3.3 數(shù)據(jù)類型的判斷 183
7.3.4 數(shù)據(jù)類型的轉(zhuǎn)換 184
7.4 常量、變量、運(yùn)算符和表達(dá)式 185
7.4.1 常量 185
7.4.2 變量 186
7.4.3 運(yùn)算符和表達(dá)式 186
7.5 流程控制語句 188
7.5.1 順序結(jié)構(gòu)語句 188
7.5.2 條件選擇結(jié)構(gòu)語句 191
7.5.3 循環(huán)結(jié)構(gòu)語句 194
7.6 函數(shù) 196
7.6.1 函數(shù)的聲明 196
7.6.2 函數(shù)的調(diào)用 197
7.6.3 變量的作用域 198
7.6.4 系統(tǒng)函數(shù) 199
7.7 對(duì)象 199
7.7.1 對(duì)象的概念 199
7.7.2 類 200
7.7.3 對(duì)象的實(shí)例化 200
7.7.4 對(duì)象的屬性 201
7.7.5 對(duì)象的方法 202
7.7.6 對(duì)象的事件 203
7.8 JavaScript的內(nèi)置對(duì)象 203
7.8.1 數(shù)組對(duì)象 204
7.8.2 字符串對(duì)象 206
7.8.3 日期對(duì)象 207
習(xí)題7 209
第8章 對(duì)象模型及事件處理 210
8.1 BOM和DOM 210
8.1.1 BOM 210
8.1.2 DOM 211
8.2 window對(duì)象 211
8.2.1 window對(duì)象的屬性 211
8.2.2 window對(duì)象的方法 212
8.3 document對(duì)象 213
8.3.1 document對(duì)象的屬性 213
8.3.2 document對(duì)象的方法 213
8.4 location對(duì)象 215
8.4.1 location對(duì)象的屬性 215
8.4.2 location對(duì)象的方法 215
8.5 history對(duì)象 215
8.6 navigator對(duì)象 216
8.7 screen對(duì)象 217
8.8 form對(duì)象 217
8.8.1 form對(duì)象的屬性 217
8.8.2 form對(duì)象的方法 218
8.9 DOM節(jié)點(diǎn) 218
8.9.1 Node對(duì)象 218
8.9.2 Element對(duì)象 219
8.9.3 NodeList對(duì)象 219
8.10 JavaScript的對(duì)象事件處理程序 221
8.10.1 對(duì)象的事件 221
8.10.2 常用的事件及處理 221
8.10.3 表單對(duì)象與交互性 225
8.11 綜合案例—鮮品園商品復(fù)選框全選效果 229
習(xí)題8 230
第9章 CSS3變形、過渡和動(dòng)畫屬性 232
9.1 變形 232
9.1.1 CSS的坐標(biāo)系統(tǒng) 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 動(dòng)畫 244
9.3.1 動(dòng)畫屬性 244
9.3.2 動(dòng)畫事件 248
習(xí)題9 249
第10章 HTML5的API應(yīng)用 251
10.1 拖放API 251
10.1.1 draggable屬性 251
10.1.2 拖放事件 251
10.1.3 數(shù)據(jù)傳遞對(duì)象dataTransfer 252
10.2 繪圖API 254
10.2.1 創(chuàng)建canvas元素 254
10.2.2 構(gòu)建繪圖環(huán)境 254
10.2.3 繪制圖形的步驟 255
10.2.4 繪制圖形 256
習(xí)題10 264
第11章 jQuery基礎(chǔ) 265
11.1 jQuery簡(jiǎn)介 265
11.2 編寫jQuery程序 265
11.2.1 下載與配置jQuery 265
11.2.2 編寫一個(gè)簡(jiǎn)單的jQuery程序 266
11.3 DOM對(duì)象和jQuery對(duì)象 266
11.3.1 DOM對(duì)象和jQuery對(duì)象簡(jiǎn)介 267
11.3.2 jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換 268
11.4 jQuery插件 268
11.4.1 下載jQuery插件 269
11.4.2 引用jQuery插件的方法 269
11.5 jQuery選擇器簡(jiǎn)介 269
11.5.1 jQuery的工廠函數(shù) 269
11.5.2 什么是jQuery選擇器 270
11.6 基礎(chǔ)選擇器 270
11.6.1 id選擇器 270
11.6.2 元素選擇器 271
11.6.3 類名選擇器 271
11.6.4 復(fù)合選擇器 271
11.6.5 通配符選擇器 271
11.7 層次選擇器 272
11.7.1 ancestor descendant（祖先 后代）選擇器 272
11.7.2 parent＞child（父＞子）選擇器 272
11.7.3 prev+next（前+后）選擇器 272
11.7.4 prev～siblings（前～兄弟）選擇器 273
11.8 過濾選擇器 273
11.8.1 簡(jiǎn)單過濾器 273
11.8.2 內(nèi)容過濾器 273
11.8.3 可見性過濾器 274
11.8.4 子元素過濾器 274
11.9 表單選擇器 274
習(xí)題11 276
第12章 jQuery動(dòng)畫與UI插件 278
12.1 jQuery的動(dòng)畫方法簡(jiǎn)介 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 滑動(dòng)效果 283
12.4.1 向下展開效果 283
12.4.2 向上收縮效果 283
12.4.3 交替伸縮效果 283
12.5 jQuery UI簡(jiǎn)介 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 自動(dòng)完成 291
12.6.3 標(biāo)簽頁 293
習(xí)題12 295
第13章 鮮品園綜合案例網(wǎng)站 297
13.1 網(wǎng)站的開發(fā)流程 297
13.2 網(wǎng)站結(jié)構(gòu) 298
13.2.1 站點(diǎn)的目錄結(jié)構(gòu) 298
13.2.2 頁面的組成 298
13.3 網(wǎng)站技術(shù)分析 299
13.4 制作首頁 300
13.4.1 頁面結(jié)構(gòu)代碼 301
13.4.2 頁面樣式設(shè)計(jì) 306
13.4.3 頁面交互與網(wǎng)頁特效的實(shí)現(xiàn) 311
13.5 制作最新資訊頁 313
13.5.1 頁面結(jié)構(gòu)代碼 314
13.5.2 頁面樣式設(shè)計(jì) 315
13.6 網(wǎng)站的整合與維護(hù) 316
習(xí)題13 316
參考文獻(xiàn) 318