HTML5+CSS3從入門到精通

第1章 Web開發(fā)新時(shí)代
1.1 HTML5概述
1.1.1 HTML5新特性
1.1.2 HTML5組織
1.1.3 HTML5構(gòu)成
1.2 HTML5設(shè)計(jì)原理
1.2.1 HTML開發(fā)歷程
1.2.2 HTML5開發(fā)動(dòng)力
1.2.3 HTML5設(shè)計(jì)理念
1.3 編寫第一個(gè)HTML5頁面
1.3.1 搭建上機(jī)練習(xí)環(huán)境
1.3.2 檢測(cè)瀏覽器是否支持
1.3.3 使用HTML5編寫簡(jiǎn)單的Web頁面
1.4 HTML5頁面的特征
1.4.1 使用HTML5結(jié)構(gòu)化元素
1.4.2 使用CSS美化HTML5文檔
第2章 從HTML、XHTML到HTML5
視頻講解：2小時(shí)
2.1 HTML基礎(chǔ)
2.1.1 HTML簡(jiǎn)介
2.1.2 HTML特性
2.1.3 HTML結(jié)構(gòu)
2.1.4 HTML語法
2.1.5 HTML標(biāo)簽
2.1.6 HTML屬性
2.2 XHTML基礎(chǔ)
2.2.1 XHTML結(jié)構(gòu)
2.2.2 XHTML語法
2.2.3 XHTML類型
2.2.4 DTD解析
2.2.5 命名空間
2.3 HTML5基礎(chǔ)
2.3.1 HTML5語法
2.3.2 HTML5元素
2.3.3 HTML5增加及廢除的屬性
2.3.4 HTML5全局屬性
2.3.5 HTML5其他功能
第3章 創(chuàng)建HTML5文檔
視頻講解：1小時(shí)13分鐘
3.1 認(rèn)識(shí)HTML5文檔結(jié)構(gòu)
3.2 HTML5元素分類
3.3 構(gòu)建主體內(nèi)容
3.3.1 標(biāo)識(shí)文章
3.3.2 給內(nèi)容分段
3.3.3 設(shè)計(jì)導(dǎo)航信息
3.3.4 設(shè)計(jì)輔助信息
3.3.5 設(shè)計(jì)微格式
3.3.6 添加發(fā)布日期
3.4 添加語義模塊
3.4.1 添加標(biāo)題塊
3.4.2 給標(biāo)題分組
3.4.3 添加腳注塊
3.4.4 添加聯(lián)系信息
3.5 綜合實(shí)戰(zhàn)：使用HTML5設(shè)計(jì)博客主頁
3.5.1 設(shè)計(jì)大綱
3.5.2 設(shè)計(jì)樣式
第4章 實(shí)戰(zhàn)HTML5表單
視頻講解：1小時(shí)08分鐘
4.1 新增的input輸入類型
4.1.1 email類型的應(yīng)用
4.1.2 url類型的應(yīng)用
4.1.3 number類型的應(yīng)用
4.1.4 range類型的應(yīng)用
4.1.5 日期檢出器類型的應(yīng)用
4.1.6 search類型的應(yīng)用
4.1.7 tel類型的應(yīng)用
4.1.8 color類型的應(yīng)用
4.2 新增的input屬性
4.2.1 新增的autocomplete屬性
4.2.2 新增的autofocus屬性
4.2.3 新增的form屬性
4.2.4 新增的表單重寫屬性
4.2.5 新增的height與width屬性
4.2.6 新增的list屬性
4.2.7 新增的min、max和step屬性
4.2.8 新增的multiple屬性
4.2.9 新增的pattern屬性
4.2.10 新增的placeholder屬性
4.2.11 新增的required屬性
4.3 新增的form元素
4.3.1 新增的datalist元素
4.3.2 新增的keygen元素
4.3.3 新增的output元素
4.4 新增的form屬性
4.4.1 新增的autocomplete屬性
4.4.2 新增的novalidate屬性
第5章 實(shí)戰(zhàn)HTML5畫布
視頻講解：2小時(shí)
5.1 認(rèn)識(shí)HTML5 canvas元素
5.1.1 在頁面中添加canvas元素
5.1.2 Canvas如何繪制圖形
5.1.3 認(rèn)識(shí)Canvas坐標(biāo)
5.1.4 何時(shí)不用Canvas
5.1.5 如果瀏覽器不支持Canvas
5.1.6 檢測(cè)瀏覽器支持
5.2 繪制簡(jiǎn)單圖形
5.2.1 繪制直線
5.2.2 繪制矩形
5.2.3 繪制圓形
5.2.4 繪制三角形
5.2.5 清空畫布
5.3 繪制貝塞爾曲線
5.3.1 繪制二次方貝塞爾曲線
5.3.2 繪制三次方貝塞爾曲線
5.4 圖形的變換
5.4.1 保存與恢復(fù)Canvas狀態(tài)
5.4.2 移動(dòng)坐標(biāo)空間
5.4.3 旋轉(zhuǎn)坐標(biāo)空間
5.4.4 縮放圖形
5.4.5 矩陣變換
5.5 圖形的組合與裁切
5.5.1 圖形的組合
5.5.2 裁切路徑
5.6 更多的顏色和樣式選項(xiàng)
5.6.1 應(yīng)用不同的線型
5.6.2 繪制線性漸變
5.6.3 繪制徑向漸變
5.6.4 繪制圖案
5.6.5 設(shè)置圖形的透明度
5.6.6 創(chuàng)建陰影
5.7 繪制文字
5.7.1 繪制填充文字
5.7.2 文字相關(guān)屬性
5.7.3 繪制輪廓文字
5.7.4 測(cè)量文字寬度
5.8 操作與使用圖像
5.8.1 向Canvas中引入圖像
5.8.2 改變圖像大小
5.8.3 創(chuàng)建圖像切片
第6章 HTML5音頻與視頻
視頻講解：50分鐘
6.1 HTML5多媒體技術(shù)概述
6.1.1 關(guān)于編解碼器
6.1.2 音頻編解碼器
6.1.3 視頻編解碼器
6.2 瀏覽器支持概述
6.2.1 用JavaScript檢測(cè)音頻格式支持情況
6.2.2 用JavaScript檢測(cè)視頻格式支持情況
6.3 在HTML5中播放音頻
6.3.1 認(rèn)識(shí)audio元素
6.3.2 播放音頻
6.4 在HTML5中播放視頻
6.4.1 認(rèn)識(shí)video元素
6.4.2 播放視頻
6.5 音頻與視頻相關(guān)屬性、方法與事件
6.5.1 音頻與視頻相關(guān)屬性
6.5.2 音頻與視頻相關(guān)方法
6.5.3 音頻與視頻相關(guān)事件
6.6 綜合實(shí)戰(zhàn)
6.6.1 用腳本控制音樂播放
6.6.2 查看視頻幀畫面
第7章 Web存儲(chǔ)
視頻講解：1小時(shí)20分鐘
7.1 認(rèn)識(shí)Web Storage
7.1.1 Cookie存儲(chǔ)機(jī)制的優(yōu)缺點(diǎn)
7.1.2 為什么要用Web Storage
7.1.3 Web Storage的優(yōu)缺點(diǎn)
7.1.4 瀏覽器支持概述
7.2 使用Web Storage
7.2.1 檢查瀏覽器的支持性
7.2.2 設(shè)置和獲取數(shù)據(jù)
7.2.3 防止數(shù)據(jù)泄露
7.2.4 Web Storage的其他用法
7.2.5 Web Storage事件監(jiān)測(cè)
7.2.6 實(shí)例1：設(shè)計(jì)網(wǎng)頁皮膚
7.2.7 實(shí)例2：跟蹤localStorage數(shù)據(jù)
7.2.8 實(shí)例3：設(shè)計(jì)計(jì)數(shù)器
7.2.9 綜合應(yīng)用：Web應(yīng)用項(xiàng)目實(shí)時(shí)跟蹤
7.3 Web SQL數(shù)據(jù)庫
7.3.1 Web SQL數(shù)據(jù)庫概述
7.3.2 使用Web SQL數(shù)據(jù)庫
7.3.3 實(shí)例1：創(chuàng)建簡(jiǎn)單的本地?cái)?shù)據(jù)庫
7.3.4 實(shí)例2：批量存儲(chǔ)本地?cái)?shù)據(jù)
7.3.5 綜合應(yīng)用：Web Storage和
Web SQL混合開發(fā)
第8章 離線應(yīng)用
視頻講解：23分鐘
8.1 HTML5離線應(yīng)用概述
8.1.1 為什么要學(xué)習(xí)HTML5離線應(yīng)用
8.1.2 瀏覽器支持概述
8.2 HTML5離線應(yīng)用詳解
8.2.1 解析manifest文件
8.2.2 搭建離線應(yīng)用程序
8.2.3 檢查瀏覽器是否支持
8.2.4 離線緩存更新實(shí)現(xiàn)
8.2.5 JavaScript接口實(shí)現(xiàn)
8.2.6 離線存儲(chǔ)事件監(jiān)聽
8.3 實(shí)戰(zhàn)1：緩存首頁
8.4 實(shí)戰(zhàn)2：離線編輯內(nèi)容
8.5 實(shí)戰(zhàn)3：離線跟蹤
第9章 Workers多線程處理
視頻講解：1小時(shí)01分鐘
9.1 認(rèn)識(shí)Web Workers
9.1.1 Web Workers概述
9.1.2 瀏覽器支持概述
9.1.3 熟悉Web Workers成員
9.2 使用Web Workers
9.2.1 檢查瀏覽器支持性
9.2.2 創(chuàng)建Web Workers
9.2.3 與Web Workers通信
9.2.4 使用Web Workers上機(jī)練習(xí)
9.3 案例實(shí)戰(zhàn)
9.3.1 使用多線程實(shí)現(xiàn)后臺(tái)運(yùn)算
9.3.2 在后臺(tái)過濾值
9.3.3 多任務(wù)并發(fā)處理
9.3.4 在多線程之間通信
9.3.5 使用線程技術(shù)計(jì)算Fibonacci數(shù)列
9.3.6 使用多線程繪圖
9.4 綜合應(yīng)用：模擬退火算法
9.4.1 認(rèn)識(shí)模擬退火算法
9.4.2 編寫應(yīng)用主頁面
9.4.3 編寫worker.js
9.4.4 與Web Workers通信
第10章 Geolocation地理位置
10.1 位置信息概述
10.1.1 為什么要學(xué)習(xí)Geolocation
10.1.2 位置信息表示方式
10.1.3 位置信息來源
10.1.4 IP定位
10.1.5 GPS定位
10.1.6 Wi-Fi定位
10.1.7 手機(jī)定位
10.1.8 自定義定位
10.2 使用Geolocation API
10.2.1 檢查瀏覽器支持性
10.2.2 獲取當(dāng)前地理位置
10.2.3 監(jiān)視位置信息
10.2.4 停止獲取位置信息
10.2.5 隱私保護(hù)
10.2.6 處理位置信息
10.2.7 使用position對(duì)象
10.3 案例實(shí)戰(zhàn)
10.3.1 使用Google地圖
10.3.2 跟蹤行走速度
第11章 CSS3概述
視頻講解：1小時(shí)01分鐘
11.1 回顧C(jī)SS
11.1.1 CSS發(fā)展簡(jiǎn)史
11.1.2 CSS 1.0和CSS 2.0概述
11.1.3 CSS與DIV標(biāo)記之緣
11.1.4 CSS編碼規(guī)范
11.2 了解CSS3新增特性
11.2.1 屬性選擇器
11.2.2 RBGA 透明度
11.2.3 多欄布局
11.2.4 多背景圖片
11.2.5 字符串溢出
11.2.6 塊陰影與圓角陰影
11.2.7 圓角
11.2.8 邊框圖片
11.2.9 形變
11.3 CSS3前景展望
11.3.1 CSS3的應(yīng)用范圍
11.3.2 當(dāng)前支持CSS3的瀏覽器
11.4 案例實(shí)戰(zhàn)：設(shè)計(jì)漂亮的表單
第12章 CSS選擇器
視頻講解：34分鐘
12.1 屬性選擇器
12.1.1 認(rèn)識(shí)屬性選擇器
12.1.2 案例實(shí)戰(zhàn)
12.2 結(jié)構(gòu)偽類選擇器
12.2.1 認(rèn)識(shí)結(jié)構(gòu)偽類選擇器
12.2.2 案例實(shí)戰(zhàn)
12.3 UI偽類選擇器
12.3.1 認(rèn)識(shí)常用UI偽類選擇器
12.3.2 案例實(shí)戰(zhàn)
12.4 其他選擇器
第13章 文本、字體與顏色
視頻講解：49分鐘
13.1 設(shè)計(jì)文本陰影
13.1.1 定義text-shadow屬性
13.1.2 應(yīng)用陰影效果
13.1.3 綜合實(shí)戰(zhàn)：設(shè)計(jì)黑客網(wǎng)站首頁
13.2 定義文本樣式
13.2.1 文本樣式簡(jiǎn)介
13.2.2 溢出文本
13.2.3 文本換行
13.3 設(shè)計(jì)顏色樣式
13.3.1 使用RGBA顏色值
13.3.2 使用HSL顏色值
13.3.3 使用HSLA顏色值
13.3.4 定義opacity屬性
13.3.5 定義transparent顏色值
第14章 背景和邊框
視頻講解：1小時(shí)09分鐘
14.1 設(shè)計(jì)多色邊框
14.1.1 用法詳解
14.1.2 案例實(shí)戰(zhàn)
14.2 設(shè)計(jì)邊框背景
14.2.1 用法詳解
14.2.2 案例實(shí)戰(zhàn)
14.3 設(shè)計(jì)圓角
14.3.1 用法詳解
14.3.2 案例實(shí)戰(zhàn)：設(shè)計(jì)橢圓圖形
14.4 設(shè)計(jì)陰影
14.4.1 用法詳解
14.4.2 案例實(shí)戰(zhàn)：設(shè)計(jì)Windows7界面效果
14.5 設(shè)計(jì)背景
14.5.1 定義背景坐標(biāo)
14.5.2 定義背景裁剪區(qū)域
14.5.3 定義背景圖像大小
14.5.4 定義背景圖像循環(huán)方式
14.5.5 定義多背景圖像
第15章 2D變形
視頻講解：31分鐘
15.1 認(rèn)識(shí)transform
15.2 2D變形
15.2.1 旋轉(zhuǎn)動(dòng)畫
15.2.2 縮放動(dòng)畫
15.2.3 移動(dòng)動(dòng)畫
15.2.4 傾斜動(dòng)畫
15.2.5 變形動(dòng)畫
15.2.6 案例實(shí)戰(zhàn)：設(shè)計(jì)涂鴉墻
15.3 自定義變形
15.4 定義復(fù)雜變形
第16章 設(shè)計(jì)動(dòng)畫
視頻講解：1小時(shí)20分鐘
16.1 平滑過渡
16.1.1 定義過渡屬性
16.1.2 定義過渡時(shí)間
16.1.3 定義過渡延遲時(shí)間
16.1.4 定義過渡效果
16.1.5 案例實(shí)戰(zhàn)：設(shè)計(jì)Mac OS導(dǎo)航器
16.2 3D動(dòng)畫
16.2.1 定義動(dòng)畫名稱
16.2.2 定義動(dòng)畫時(shí)間
16.2.3 定義動(dòng)畫播放方式
16.2.4 定義動(dòng)畫延遲時(shí)間
16.2.5 定義動(dòng)畫播放次數(shù)
16.2.6 定義動(dòng)畫播放方向
16.2.7 案例實(shí)戰(zhàn)：設(shè)計(jì)圖片翻轉(zhuǎn)特效
16.3 漸變效果
16.3.1 設(shè)計(jì)Webkit漸變
16.3.2 Webkit案例實(shí)戰(zhàn)
16.3.3 設(shè)計(jì)Gecko漸變
16.3.4 Gecko案例實(shí)戰(zhàn)
16.3.5 設(shè)計(jì)IE漸變
16.3.6 設(shè)計(jì)W3C漸變
16.4 案例綜合實(shí)戰(zhàn)
16.4.1 設(shè)計(jì)禮品盒
16.4.2 設(shè)計(jì)折疊面板
16.4.3 設(shè)計(jì)易拉罐
16.4.4 設(shè)計(jì)光盤滑動(dòng)動(dòng)畫
16.4.5 設(shè)計(jì)下拉菜單
16.4.6 設(shè)計(jì)精致按鈕
第17章 網(wǎng)頁布局
視頻講解：40分鐘
17.1 設(shè)計(jì)多列布局
17.2 設(shè)置多列顯示樣式
17.2.1 定義列寬
17.2.2 定義列數(shù)
17.2.3 定義列間距
17.2.4 定義列邊框樣式
17.2.5 定義跨列顯示
17.2.6 定義列高度
17.2.7 定義打印列
17.3 設(shè)計(jì)盒布局
17.4 設(shè)置盒布局格式
17.4.1 定義自適應(yīng)寬度
17.4.2 定義列顯示順序
17.4.3 定義列排列方向
17.4.4 定義模塊大小自適應(yīng)
17.4.5 消除空白
17.4.6 定義對(duì)齊方式
17.5 綜合實(shí)戰(zhàn)：設(shè)計(jì)多列網(wǎng)頁
第18章 用戶界面
視頻講解：35分鐘
18.1 改變盒模型組成方式
18.2 調(diào)節(jié)元素尺寸
18.3 設(shè)計(jì)輪廓
18.3.1 定義輪廓線
18.3.2 定義輪廓線寬度
18.3.3 定義輪廓線樣式
18.3.4 定義輪廓線顏色
18.3.5 定義輪廓線位移
18.4 設(shè)計(jì)導(dǎo)航
18.4.1 定義導(dǎo)航順序
18.4.2 定義方向鍵控制順序
18.5 添加顯示內(nèi)容
18.6 恢復(fù)默認(rèn)樣式
18.6.1 取消元素樣式
18.6.2 慎用initial的情況
第19章 CSS3其他新特性
視頻講解：40分鐘
19.1 溢出處理
19.2 自定義字體類型
19.2.1 使用@font-face規(guī)則
19.2.2 開放字體
19.3 定義設(shè)備類型
19.3.1 認(rèn)識(shí)Media Queries模塊
19.3.2 認(rèn)識(shí)@media規(guī)則
19.3.3 使用@media規(guī)則
19.3.4 在網(wǎng)站中應(yīng)用@media規(guī)則
19.4 添加語音功能
19.5 設(shè)計(jì)倒影