第1章
初識(shí)HTML5 1
1.1 HTML5概述 1
1.1.1 HTML5的發(fā)展歷程 1
1.1.2 HTML5的優(yōu)勢(shì) 2
1.1.3 HTML5瀏覽器支持情況 3
1.1.4 創(chuàng)建個(gè)HTML5頁(yè)面 4
1.2 HTML5基礎(chǔ) 6
1.2.1 HTML5文檔的基本格式 6
1.2.2 HTML5語(yǔ)法 7
1.2.3 HTML5的標(biāo)記 8
1.2.4 標(biāo)記的屬性 9
1.2.5 HTML5文檔頭部相關(guān)
標(biāo)記 11
1.3 文本控制標(biāo)記 14
1.3.1 標(biāo)題和段落相關(guān)標(biāo)記 14
1.3.2 文本格式化標(biāo)記 18
1.3.3 特殊字符標(biāo)記 19
1.4 圖像標(biāo)記 20
1.4.1 常用圖像格式 20
1.4.2 圖像標(biāo)記 20
1.4.3 路徑和相對(duì)路徑 24
1.5 超鏈接標(biāo)記 25
1.5.1 創(chuàng)建超鏈接 25
1.5.2 錨點(diǎn)鏈接 26
1.6 階段案例制作HTML5百科
頁(yè)面 28
1.6.1 分析效果圖 28
1.6.2 制作頁(yè)面 29
1.6.3 制作頁(yè)面鏈接 32
本章小結(jié) 33
動(dòng)手實(shí)踐 33
第2章
HTML5的元素及屬性 34
2.1 列表元素 34
2.1.1 ul元素 34
2.1.2 ol元素 35
2.1.3 dl元素 36
2.1.4 列表的嵌套應(yīng)用 37
2.2 結(jié)構(gòu)元素 38
2.2.1 header元素 38
2.2.2 nav元素 39
2.2.3 article元素 40
2.2.4 aside元素 41
2.2.5 section元素 42
2.2.6 footer元素 43
2.3 分組元素 44
2.3.1 figure元素和figcaption
元素 44
2.3.2 hgroup元素 45
2.4 頁(yè)面交互元素 46
2.4.1 details元素和summary
元素 47
2.4.2 progress元素 47
2.4.3 meter元素 48
2.5 文本層次語(yǔ)義元素 49
2.5.1 time元素 49
2.5.2 mark元素 50
2.5.3 cite元素 51
2.6 全局屬性 52
2.6.1 draggable屬性 52
2.6.2 hidden屬性 53
2.6.3 spellcheck屬性 53
2.6.4 contenteditable屬性 54
2.7 階段案例制作電影影評(píng)網(wǎng) 54
2.7.1 分析效果圖 55
2.7.2 制作頁(yè)面結(jié)構(gòu) 56
本章小結(jié) 61
動(dòng)手實(shí)踐 61
第3章
CSS3入門 62
3.1 CSS簡(jiǎn)介 62
3.1.1 CSS概述 62
3.1.2 CSS的發(fā)展歷史 63
3.1.3 CSS3瀏覽器支持情況 63
3.2 CSS核心基礎(chǔ) 64
3.2.1 CSS樣式規(guī)則 64
3.2.2 引入CSS樣式表 65
3.2.3 CSS基礎(chǔ)選擇器 70
3.3 文本樣式屬性 75
3.3.1 字體樣式屬性 75
3.3.2 文本外觀屬性 79
3.4 CSS高級(jí)特性 88
3.4.1 CSS的層疊性和繼承性 88
3.4.2 CSS的優(yōu)先級(jí) 90
3.5 階段案例制作服裝推廣軟文 93
3.5.1 分析效果圖 93
3.5.2 制作頁(yè)面結(jié)構(gòu) 93
3.5.3 定義CSS樣式 94
本章小結(jié) 95
動(dòng)手實(shí)踐 96
第4章
CSS3選擇器 97
4.1 屬性選擇器 97
4.1.1 E[att^=value]屬性選擇器 97
4.1.2 E[att$=value]屬性選擇器 99
4.1.3 E[att*=value]屬性選擇器 100
4.2 關(guān)系選擇器 101
4.2.1 子代選擇器(>) 101
4.2.2 兄弟選擇器( 、~) 102
4.3 結(jié)構(gòu)化偽類選擇器 104
4.3.1 :root選擇器 104
4.3.2 :not選擇器 105
4.3.3 :only-child?選擇器 106
4.3.4 :first-child和:last-child
選擇器 107
4.3.5 :nth-child(n)和:nth-last-
child(n)選擇器 108
4.3.6 :nth-of-type(n)和:nth-
last-of-type(n)選擇器 109
4.3.7 :empty選擇器 110
4.3.8 :target選擇器 112
4.4 偽元素選擇器 112
4.4.1 :before選擇器 113
4.4.2 :after選擇器 114
4.5 鏈接偽類 114
4.6 階段案例制作網(wǎng)頁(yè)設(shè)計(jì)軟件
列表 116
4.6.1 分析效果圖 117
4.6.2 制作頁(yè)面結(jié)構(gòu) 117
4.6.3 定義CSS樣式 119
本章小結(jié) 121
動(dòng)手實(shí)踐 121
第5章
CSS盒子模型 123
5.1 盒子模型概述 123
5.1.1 認(rèn)識(shí)盒子模型 123
5.1.2
標(biāo)記 125
5.1.3 盒子模型的寬與高 126
5.2 盒子模型相關(guān)屬性 127
5.2.1 邊框?qū)傩?127
5.2.2 邊距屬性 136
5.2.3 box-shadow屬性 139
5.2.4 box-sizing 屬性 140
5.3 背景屬性 141
5.3.1 設(shè)置背景顏色 142
5.3.2 設(shè)置背景圖像 142
5.3.3 背景與圖像不透明度的
設(shè)置 143
5.3.4 設(shè)置背景圖像平鋪 144
5.3.5 設(shè)置背景圖像的位置 145
5.3.6 設(shè)置背景圖像固定 147
5.3.7 設(shè)置背景圖像的大小 147
5.3.8 設(shè)置背景的顯示區(qū)域 149
5.3.9 設(shè)置背景圖像的裁剪區(qū)域 150
5.3.10 設(shè)置多重背景圖像 151
5.3.11 背景復(fù)合屬性 153
5.4 漸變屬性 155
5.4.1 線性漸變 155
5.4.2 徑向漸變 156
5.4.3 重復(fù)漸變 158
5.5 階段案例制作音樂
排行榜 160
5.5.1 分析效果圖 160
5.5.2 制作頁(yè)面結(jié)構(gòu) 161
5.5.3 定義CSS樣式 162
本章小結(jié) 163
動(dòng)手實(shí)踐 164
第6章
浮動(dòng)與定位 165
6.1 元素的浮動(dòng) 165
6.1.1 元素的浮動(dòng)屬性float 165
6.1.2 清除浮動(dòng) 168
6.2 overflow屬性 174
6.3 元素的定位 176
6.3.1 元素的定位屬性 176
6.3.2 靜態(tài)定位static 177
6.3.3 相對(duì)定位relative 177
6.3.4 定位absolute 178
6.3.5 固定定位fixed 181
6.3.6 z-index層疊等級(jí)屬性 181
6.4 元素的類型與轉(zhuǎn)換 181
6.4.1 元素的類型 181
6.4.2 標(biāo)記 184
6.4.3 元素的轉(zhuǎn)換 185
6.5 階段案例制作網(wǎng)頁(yè)
焦點(diǎn)圖 187
6.5.1 分析效果圖 187
6.5.2 制作頁(yè)面結(jié)構(gòu) 188
6.5.3 定義CSS樣式 189
本章小結(jié) 191
動(dòng)手實(shí)踐 191
第7章
表單 193
7.1 認(rèn)識(shí)表單 193
7.1.1 表單的構(gòu)成 193
7.1.2 創(chuàng)建表單 194
7.2 表單的屬性 195
7.3 input元素及屬性 197
7.3.1 input元素的type屬性 198
7.3.2 input元素的其他屬性 204
7.4 其他表單元素 211
7.4.1 textarea元素 211
7.4.2 select元素 212
7.4.3 datalist元素 216
7.4.4 keygen元素? 216
7.4.5 output元素 217
7.5 CSS設(shè)置表單樣式 218
7.6 階段案例制作信息登記表 220
7.6.1 分析效果圖 221
7.6.2 制作頁(yè)面結(jié)構(gòu) 221
7.6.3 定義CSS樣式 223
本章小結(jié) 226
動(dòng)手實(shí)踐 226
第8章
多媒體技術(shù) 227
8.1 HTML5多媒體的特性 227
8.2 多媒體的支持條件 227
8.2.1 視頻和音頻編解碼器 228
8.2.2 多媒體的格式 228
8.2.3 支持HTML5視頻和音頻的
瀏覽器 229
8.3 嵌入視頻和音頻 230
8.3.1 在HTML5中嵌入視頻 230
8.3.2 在HTML5中嵌入音頻 232
8.3.3 音、視頻中的source
元素 233
8.3.4 調(diào)用網(wǎng)頁(yè)多媒體文件 234
8.4 設(shè)置視頻的寬和高 235
8.5 HTML5音、視頻的方法和
事件 237
8.6 HTML5音、視頻的發(fā)展
趨勢(shì) 238
8.7 階段案例制作音樂播放
界面 238
8.7.1 分析效果圖 239
8.7.2 制作頁(yè)面結(jié)構(gòu) 239
8.7.3 定義CSS樣式 240
本章小結(jié) 243
動(dòng)手實(shí)踐 243
第9章
CSS3高級(jí)應(yīng)用 245
9.1 過渡 245
9.1.1 transition-property
屬性 245
9.1.2 transition-duration
屬性 247
9.1.3 transition-timing-function
屬性 248
9.1.4 transition-delay屬性 249
9.1.5 transition屬性 250
9.2 變形 250
9.2.1 transform屬性 250
9.2.2 2D變形 251
9.2.3 3D變形 257
9.3 動(dòng)畫 262
9.3.1 @keyframes屬性 262
9.3.2 animation-name
屬性 263
9.3.3 animation-duration
屬性 263
9.3.4 animation-timing-function
屬性 264
9.3.5 animation-delay屬性 266
9.3.6 animation-iteration-count
屬性 266
9.3.7 animation-direction
屬性 266
9.3.8 animation屬性 268
9.4 階段案例制作工作日天氣
預(yù)報(bào) 268
9.4.1 分析效果圖 269
9.4.2 制作頁(yè)面結(jié)構(gòu) 270
9.4.3 定義CSS樣式 271
9.4.4 制作CSS3動(dòng)畫 274
本章小結(jié) 280
動(dòng)手實(shí)踐 280
第10章
實(shí)戰(zhàn)開發(fā)制作電商網(wǎng)站
首頁(yè) 281
10.1 準(zhǔn)備工作 282
10.2 首頁(yè)詳細(xì)制作 286
本章小結(jié) 311
動(dòng)手實(shí)踐 311