目 錄
第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)頁(yè) 3
1.2.1 網(wǎng)站、網(wǎng)頁(yè)和主頁(yè) 3
1.2.2 靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè) 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)頁(yè)的表現(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語(yǔ)法基礎(chǔ) 9
1.5.1 HTML5語(yǔ)法結(jié)構(gòu) 9
1.5.2 HTML5文件結(jié)構(gòu) 11
1.5.3 HTML5開(kāi)發(fā)人員編碼規(guī)范 13
1.6 元素的分類(lèi) 14
1.6.1 元信息元素 14
1.6.2 語(yǔ)義元素 15
1.6.3 無(wú)語(yǔ)義元素 17
1.7 HTML的顏色表示和字符實(shí)體 17
1.7.1 HTML的顏色表示 17
1.7.2 字符實(shí)體 18
1.8 編輯HTML文件 18
1.8.1 常見(jiàn)的網(wǎng)頁(yè)編輯工具 18
1.8.2 HTML文件的創(chuàng)建 19
1.9 注釋 22
1.10 案例—制作鮮品園頁(yè)面摘要和版權(quán)信息 22
習(xí)題1 23
第2章 編輯網(wǎng)頁(yè)元素 24
2.1 文本元素 24
2.1.1 字體樣式元素 24
2.1.2 短語(yǔ)元素 25
2.2 文本層次語(yǔ)義元素 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ù)指南頁(yè)面 30
2.4 圖像元素img 31
2.5 超鏈接元素a 32
2.5.1 a元素 32
2.5.2 指向其他頁(yè)面的鏈接 33
2.5.3 指向書(shū)簽的鏈接 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 案例—制作鮮品園資料下載頁(yè)面 35
2.6 列表元素 37
2.6.1 無(wú)序列表 37
2.6.2 有序列表 38
2.6.3 定義列表 38
2.6.4 嵌套列表 39
2.6.5 案例—制作鮮品園公司名片頁(yè)面 40
2.7 多媒體元素 41
2.7.1 audio元素 42
2.7.2 video元素 42
習(xí)題2 43
第3章 網(wǎng)頁(yè)的布局與交互 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)品展示頁(yè)面 49
3.2 使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁(yè)布局 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ā)布頁(yè)面 54
3.3 頁(yè)面交互元素 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的編寫(xiě)規(guī)范 69
4.1.2 CSS3的工作環(huán)境 70
4.2 在網(wǎng)頁(yè)中引用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)介頁(yè)面 75
4.3 CSS的主要特性 77
4.3.1 繼承 77
4.3.2 層疊 78
4.3.3 優(yōu)先級(jí) 79
4.4 CSS的基本語(yǔ)法 80
4.4.1 基本語(yǔ)法 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 類(lèi)選擇器 87
4.5.7 偽類(lèi)選擇器 87
4.5.8 偽元素選擇器 89
4.6 CSS屬性值的寫(xiě)法和單位 91
4.6.1 長(zhǎng)度、百分比單位 91
4.6.2 色彩單位 92
4.7 文件結(jié)構(gòu)與元素類(lèi)型 93
4.7.1 文件結(jié)構(gòu)的基本概念 93
4.7.2 元素類(lèi)型 94
4.8 案例—制作鮮品園行業(yè)資訊頁(yè)面 95
習(xí)題4 98
第5章 CSS3的屬性 100
5.1 CSS字體屬性 100
5.1.1 字體類(lèi)型屬性font-family 100
5.1.2 字體尺寸屬性font-size 100
5.1.3 字體傾斜屬性font-style 101
5.1.4 小寫(xiě)字體屬性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)記的類(lèi)型屬性list-style-type 115
5.5.4 列表簡(jiǎn)寫(xiě)屬性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 單元格無(wú)內(nèi)容顯示方式屬性empty-cells 119
5.6.5 案例—使用斑馬線表格制作暢銷(xiāo)商品銷(xiāo)量排行榜 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ū)頁(yè)面 131
5.8.1 頁(yè)面布局規(guī)劃 131
5.8.2 頁(yè)面的制作過(guò)程 132
習(xí)題5 137
第6章 盒模型與頁(yè)面布局 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 元素可見(jiàn)性屬性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布局類(lèi)型 169
6.6.2 CSS布局樣式 170
6.7 綜合案例—制作鮮品園商務(wù)安全中心頁(yè)面 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ù)類(lèi)型 182
7.3.1 數(shù)據(jù)類(lèi)型的分類(lèi) 182
7.3.2 基本數(shù)據(jù)類(lèi)型 182
7.3.3 數(shù)據(jù)類(lèi)型的判斷 183
7.3.4 數(shù)據(jù)類(lèi)型的轉(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 流程控制語(yǔ)句 188
7.5.1 順序結(jié)構(gòu)語(yǔ)句 188
7.5.2 條件選擇結(jié)構(gòu)語(yǔ)句 191
7.5.3 循環(huán)結(jié)構(gòu)語(yǔ)句 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 類(lèi) 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變形、過(guò)渡和動(dòng)畫(huà)屬性 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 過(guò)渡 241
9.2.1 過(guò)渡屬性 241
9.2.2 過(guò)渡事件 243
9.3 動(dòng)畫(huà) 244
9.3.1 動(dòng)畫(huà)屬性 244
9.3.2 動(dòng)畫(huà)事件 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 編寫(xiě)jQuery程序 265
11.2.1 下載與配置jQuery 265
11.2.2 編寫(xiě)一個(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 類(lèi)名選擇器 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 過(guò)濾選擇器 273
11.8.1 簡(jiǎn)單過(guò)濾器 273
11.8.2 內(nèi)容過(guò)濾器 273
11.8.3 可見(jiàn)性過(guò)濾器 274
11.8.4 子元素過(guò)濾器 274
11.9 表單選擇器 274
習(xí)題11 276
第12章 jQuery動(dòng)畫(huà)與UI插件 278
12.1 jQuery的動(dòng)畫(huà)方法簡(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 向下展開(kāi)效果 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)簽頁(yè) 293
習(xí)題12 295
第13章 鮮品園綜合案例網(wǎng)站 297
13.1 網(wǎng)站的開(kāi)發(fā)流程 297
13.2 網(wǎng)站結(jié)構(gòu) 298
13.2.1 站點(diǎn)的目錄結(jié)構(gòu) 298
13.2.2 頁(yè)面的組成 298
13.3 網(wǎng)站技術(shù)分析 299
13.4 制作首頁(yè) 300
13.4.1 頁(yè)面結(jié)構(gòu)代碼 301
13.4.2 頁(yè)面樣式設(shè)計(jì) 306
13.4.3 頁(yè)面交互與網(wǎng)頁(yè)特效的實(shí)現(xiàn) 311
13.5 制作最新資訊頁(yè) 313
13.5.1 頁(yè)面結(jié)構(gòu)代碼 314
13.5.2 頁(yè)面樣式設(shè)計(jì) 315
13.6 網(wǎng)站的整合與維護(hù) 316
習(xí)題13 316
參考文獻(xiàn) 318