HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與布局經(jīng)典課堂

目錄
Chapter / 01
HTML5 輕松上手
1.1 HTML5 新增知識(shí)        2
1.1.1 HTML5 的兼容性         2
1.1.2 HTML5 的通用訪(fǎng)問(wèn)        2
1.1.3 HTML5 標(biāo)準(zhǔn)改進(jìn)         2
1.2 HTML5 語(yǔ)法        3
1.2.1 文檔類(lèi)型聲明         3
1.2.2 字符編碼         4
1.2.3 省略引號(hào)         4
1.3 HTML5 元素分類(lèi)        4
1.3.1 結(jié)構(gòu)性元素          4
1.3.2 級(jí)塊性元素          5
1.3.3 行內(nèi)語(yǔ)義性元素        5
1.3.4 交互性元素          5
1.4 HTML5 新增主體結(jié)構(gòu)元素      6
1.4.1 article 元素          6
1.4.2 section 元素         7
1.4.3 nav 元素         8
1.4.4 aside 元素          9
1.4.5 pubdate 屬性        10
1.5 HTML5 新的非主體結(jié)構(gòu)元素      12
1.5.1 header 元素        12
1.5.2 hgroup 元素        13
1.5.3 footer 元素         14
1.5.4 address 元素        16
1.6 新增的屬性       17
1.6.1 表單相關(guān)屬性        17
1.6.2 其他相關(guān)屬性        17
1.7 課堂練習(xí)        18
強(qiáng)化訓(xùn)練         20
Chapter / 02
使用canvas 繪圖
2.1 canvas 入門(mén)       22
2.1.1 什么是canvas         22
2.1.2 瀏覽器對(duì)canvas 的支持情況       23
2.1.3 CSS 和canvas        24
2.1.4 canvas 坐標(biāo)        24
2.2 怎樣使用canvas       24
2.2.1 在頁(yè)面中加入canvas        25
2.2.2 繪制矩形和三角形       27
2.3 canvas 繪制曲線(xiàn)路徑       30
2.3.1 路徑          30
2.3.2 描邊樣式         32
2.3.3 填充樣式         34
2.3.4 繪制曲線(xiàn)         35
2.4 canvas 繪制圖像       38
2.4.1 插入圖像          38
2.4.2 繪制漸變圖形         39
2.4.3 繪制變形圖形         42
2.4.4 組合多個(gè)圖形         44
2.4.5 圖形的縮放        46
2.4.6 像素處理         47
2.5 canvas 文本應(yīng)用       48
2.5.1 繪制文本          48
2.5.2 應(yīng)用陰影         49
2.6 課堂練習(xí)        50
強(qiáng)化訓(xùn)練         52
Chapter / 03
制作新型表單
3.1 認(rèn)識(shí)HTML5 form       54
3.1.1 HTML5 form 新特性       54
3.1.2 瀏覽器對(duì)HTML5 form 的支持情況     54
3.1.3 新型表單的輸入型控件        55
3.2 表單新屬性       58
3.2.1 新的表單元素        58
3.2.2 新增表單屬性         60
3.3 HTML5 中form 應(yīng)用       64
3.4 課堂練習(xí)        66
強(qiáng)化訓(xùn)練         68
Chapter / 04
多媒體的應(yīng)用
4.1 認(rèn)識(shí)audio 和video 元素     70
4.2 audio 和video 元素的應(yīng)用      70
4.2.1 檢測(cè)瀏覽器是否支持       70
4.2.2 audio 元素         71
4.2.3 使用audio 元素         72
4.2.4 video 元素         73
4.2.5 使用video 元素         74
4.3 audio 和video 屬性、方法和事件     75
4.3.1 audio 和video 相關(guān)事件       75
4.3.2 audio 和video 相關(guān)屬性       76
4.3.3 audio 和video 相關(guān)方法       76
4.4 課堂練習(xí)        77
強(qiáng)化訓(xùn)練         78
Chapter / 05
獲取地理位置
5.1 關(guān)于地理位置信息      80
5.1.1 經(jīng)度和緯度坐標(biāo)         80
5.1.2 IP 地址定位數(shù)據(jù)        80
5.1.3 GPS 地理定位數(shù)據(jù)        80
5.1.4 wi-fi 地理定位數(shù)據(jù)       81
5.1.5 用戶(hù)自定義的地理定位        81
5.2 瀏覽器對(duì)Geolocation 的支持     81
5.2.1 GeolocationAPI 必學(xué)知識(shí)       81
5.2.2 Geolocation 的瀏覽器支持情況      84
5.3 隱私處理        84
5.3.1 應(yīng)用隱私保護(hù)機(jī)制        84
5.3.2 處理位置信息         85
5.4 使用GeolocationAPI       85
5.4.1 檢測(cè)瀏覽器是否支持       85
5.4.2 位置請(qǐng)求         86
5.5 在地圖上顯示你的位置      89
5.6 課堂練習(xí)        92
強(qiáng)化訓(xùn)練         94 Contents
Chapter / 06
本地儲(chǔ)存和上傳
6.1　離線(xiàn)Web 入門(mén)       96
6.1.1 離線(xiàn)Web 介紹         96
6.1.2 離線(xiàn)Web 應(yīng)用的瀏覽器支持情況     96
6.2 使用離線(xiàn)Web        96
6.2.1 支持離線(xiàn)行為        97
6.2.2 manifest 文件介紹        98
6.2.3 applicationCache 對(duì)象        99
6.2.4 離線(xiàn)Web 的具體應(yīng)用        101
6.3 Web Workers 知識(shí)      102
6.3.1 什么是Web Workers       102
6.3.2 W eb Workers 的簡(jiǎn)單應(yīng)用       103
6.4 使用Web Workers API      105
6.4.1 檢測(cè)瀏覽器是否支持       105
6.4.2 創(chuàng)建Web Workers        106
6.4.3 多線(xiàn)程文件的加載與執(zhí)行      106
6.4.4 與Web Workers 通信        106
6.5 拖放API        108
6.5.1　實(shí)現(xiàn)拖放API 的過(guò)程       108
6.5.2 datatransfer 對(duì)象的屬性與方法      108
6.6 拖放API 的應(yīng)用       109
6.6.1 拖放應(yīng)用          109
6.6.2 拖放列表         111
6.7 課堂練習(xí)        114
強(qiáng)化訓(xùn)練         117
Chapter / 07
新增的選擇器
7.1 回顧C(jī)SS        120
7.1.1 什么是CSS         120
7.1.2 CSS 特點(diǎn)及優(yōu)點(diǎn)         120
7.1.3 CSS 的基本語(yǔ)法         120
7.2 CSS 選擇器       121
7.2.1 三大基礎(chǔ)選擇器         121
7.2.2 集體選擇器        124
7.2.3 屬性選擇器        126
7.3 CSS3 基礎(chǔ)知識(shí)        127
7.3.1 CSS3 瀏覽器的支持情況       127
7.3.2 CSS3 新增的長(zhǎng)度單位       128
7.3.3 CSS3 新增結(jié)構(gòu)性偽類(lèi)       129
7.3.4 CSS3 新增UI 元素狀態(tài)偽類(lèi)      135
7.3.5 CSS3 新增屬性        137
7.4 課堂練習(xí)        141
強(qiáng)化訓(xùn)練         143
Chapter / 08
CSS3 文本與顏色
8.1 設(shè)計(jì)文本和邊框樣式       146
8.1.1 文本陰影text-shadow        146
8.1.2 文本溢出text-overflow       155
8.1.3 文本換行word-wrap        156
8.1.4 單詞拆分word-break       157
8.1.5 圓角邊框border-radius       158
8.1.6 盒子陰影box-shadow        160
8.1.7 邊界邊框border-image       161
8.2 設(shè)計(jì)顏色樣式        163
8.2.1 使用RGBA 顏色值        163
8.2.2 使用HSL 顏色值        164
8.2.3 使用HSLA 顏色值        168
8.3 課堂練習(xí)        169
強(qiáng)化訓(xùn)練         171
Chapter / 09
顏色漸變和圖形轉(zhuǎn)換
9.1 漸變簡(jiǎn)介        174
9.1.1 瀏覽器支持         174
9.1.2 線(xiàn)性漸變          175
9.1.3 徑向漸變          178
9.2 CSS3 轉(zhuǎn)換        180
9.2.1 瀏覽器支持情況         180
9.2.2 2D 轉(zhuǎn)換          180
9.2.3 3D 轉(zhuǎn)換          187
9.3 課堂練習(xí)        192
強(qiáng)化訓(xùn)練         194
Chapter / 10
讓設(shè)計(jì)更加靈活
10.1 盒子模型       196
10.1.1 CSS 中的盒子簡(jiǎn)介       196
10.1.2 外邊距設(shè)置        196
10.1.3 外邊距合并        199 Contents
10.1.4 內(nèi)邊距設(shè)置         202
10.2 彈性盒子       202
10.2.1 彈性盒子基礎(chǔ)        203
10.2.2 瀏覽器支持情況       203
10.2.3 對(duì)父級(jí)容器的設(shè)置        203
10.2.4 對(duì)子級(jí)內(nèi)容的設(shè)置       212
10.3 課堂練習(xí)       217
強(qiáng)化訓(xùn)練         219
Chapter / 11
CSS3 設(shè)計(jì)動(dòng)畫(huà)
11.1 過(guò)渡基礎(chǔ)       222
11.1.1 過(guò)渡屬性        222
11.1.2 瀏覽器支持情況       222
11.2 實(shí)現(xiàn)過(guò)渡       223
11.2.1 單項(xiàng)屬性過(guò)渡        223
11.2.2 多項(xiàng)屬性過(guò)渡        224
11.2.3 利用過(guò)渡設(shè)計(jì)電腦桌面      226
11.3 實(shí)現(xiàn)動(dòng)畫(huà)       228
11.3.1 瀏覽器支持         228
11.3.2 動(dòng)畫(huà)屬性        229
11.3.3 實(shí)現(xiàn)動(dòng)畫(huà)效果        230
11.3.4 利用動(dòng)畫(huà)屬性制作太陽(yáng)系動(dòng)畫(huà)     233
11.4 課堂練習(xí)       236
強(qiáng)化訓(xùn)練         237
Chapter / 12
用戶(hù)交互界面
12.1 多媒體查詢(xún)        240
12.1.1 多媒體查詢(xún)能做什么       240
12.1.2 多媒體查詢(xún)語(yǔ)法       240
12.1.3 多媒體查詢(xún)方法       240
12.1.4 制作一個(gè)自適應(yīng)的導(dǎo)航欄       243
12.2 用戶(hù)界面簡(jiǎn)介       247
12.2.1 調(diào)整尺寸resizing        247
12.2.2 方框大小調(diào)整box-sizing       249
12.2.3 外形修飾outline-offset      252
12.2.4 界面的多列布局       253
12.3 課堂練習(xí)       256
強(qiáng)化訓(xùn)練         258
參考文獻(xiàn)         259