HTML 5+CSS 3入門經(jīng)典

前言
第一篇 HTML 5基礎篇
第1章 迎接新的Web 時代——HTML 5 的出現(xiàn)
視頻講解：16分鐘
1.1 HTML的歷史
1.1.1 HTML發(fā)展的歷史
1.1.2 HTML 5 時代即將來臨
1.2 HTML 5 的優(yōu)勢
1.2.1 使用HTML 5 的理由
1.2.2 HTML 5 的化繁為簡
1.2.3 HTML 5 的無插件范式
1.2.4 HTML 5 的新特性
1.3 HTML 5 的語法變化和標記方法
1.3.1 HTML 5 的語法變化
1.3.2 HTML 5 的標記方法
1.3.3 標記實例
1.4 小結(jié)
1.5 習題
第2章 去其糟粕，取其精華——HTML 5的元素與屬性
視頻講解：36分鐘
2.1 新增的元素和廢除的元素
2.1.1 新增的結(jié)構元素
2.1.2 新增的塊級（block）語義的元素
2.1.3 新增的行內(nèi)（inline）語義的元素
2.1.4 新增的嵌入多媒體元素與交互性元素
2.1.5 新增的input元素的類型
2.1.6 廢除的元素
2.2 新增的屬性和廢除的屬性
2.2.1 新增的屬性
2.2.2 廢除的屬性
2.3 全局屬性
2.3.1 contentEditable屬性
2.3.2 designMode屬性
2.3.3 hidden屬性
2.3.4 spellcheck屬性
2.3.5 tabindex屬性
2.4 上機實踐
2.4.1 使用hidden屬性對用戶評論內(nèi)容進行隱藏
2.4.2 使用spellcheck屬性檢查單詞的拼寫情況
2.4.3 對頁面輸出的文字進行編輯
2.5 小結(jié)
2.6 習題
第3章 你很重要——HTML 5 中的表單
視頻講解：48分鐘
3.1 新增的元素與屬性
3.1.1 新增的屬性
3.1.2 增加與改良的input元素的種類
3.1.3 output元素的添加
3.2 對表單的驗證
3.2.1 自動驗證
3.2.2 checkValidity 顯式驗證法
3.2.3 避免驗證
3.2.4 使用setCustomValidity 方法自定義錯誤信息
3.3 增加的頁面元素
3.3.1 新增的.gure元素
3.3.2 新增的details元素
3.3.3 新增的mark元素
3.3.4 新增的progress元素
3.3.5 新增的meter元素
3.3.6 改良的ol列表
3.3.7 改良的dl列表
3.3.8 加以嚴格限制的cite元素
3.3.9 重新定義的small元素
3.4 上機實踐
3.4.1 應用新增元素制作注冊表單
3.4.2 調(diào)用表單的checkValidity 方法驗證密碼格式
3.4.3 應用output元素實現(xiàn)的乘法計算器
3.5 小結(jié)
3.6 習題
第二篇 HTML 5高級應用篇
第4章 不容小視——HTML 5 中的文件
視頻講解：40分鐘
4.1 選擇文件
4.1.1 通過.le對象選擇文件
4.1.2 使用Blob接口獲取文件的類型與大小
4.1.3 通過類型過濾選擇的文件
4.2 使用FileReader接口讀取文件
4.2.1 檢測瀏覽器對FileReader接口的實現(xiàn)
4.2.2 FileReader接口的使用方法
4.2.3 使用readAsDataURL方法預覽圖片
4.2.4 使用readAsText 方法讀取文本文件
4.2.5 FileReader接口中的事件
4.3 拖放API
4.3.1 實現(xiàn)拖放的步驟
4.3.2 通過拖放顯示歡迎信息
4.4 dataTransfer 對象應用詳解
4.4.1 使用effectAllowed 和dropEffect 屬性設置拖放效果
4.4.2 使用setDragImage方法設置拖放圖標
4.5 上機實踐
4.5.1 通過accept屬性過濾上傳文件的類型
4.5.2 將圖片文件拖放到頁面中并顯示
4.6 小結(jié)
4.7 習題
第5章 夢幻的世界——繪制圖形
視頻講解：95分鐘
5.1 canvas的基礎知識
5.1.1 canvas是什么
5.1.2 在頁面中放置canvas元素
5.1.3 繪制帶邊框的矩形
5.2 在畫布中使用路徑
5.2.1 使用arc方法繪制圓形
5.2.2 使用moveTo 與lineTo 路徑繪制火柴人
5.2.3 貝塞爾和二次方曲線
5.3 運用樣式與顏色
5.3.1 .llStyle和strokeStyle屬性
5.3.2 透明度globalAlpha
5.3.3 線型
5.4 繪制漸變圖形
5.4.1 繪制線性漸變
5.4.2 繪制徑向漸變
5.5 繪制變形圖形
5.5.1 坐標的變換
5.5.2 矩陣變換
5.6 組合多個圖形
5.7 給圖形繪制陰影
5.8 應用圖像
5.8.1 繪制圖像
5.8.2 圖像的局部放大
5.8.3 圖像平鋪
5.8.4 圖像裁剪
5.8.5 像素的處理
5.9 繪制文字
5.10 保存與恢復狀態(tài)
5.11　文件的保存
5.12 對畫布繪制實現(xiàn)動畫
5.13 桌面時鐘
5.14 上機實踐
5.14.1 通過設置lineJoin屬性值來繪制不同的矩形
5.14.2 繪制五角星
5.14.3 大頭貼邊框
5.15 小結(jié)
5.16 習題
第6章 如此神奇——多媒體播放
視頻講解：36分鐘
6.1 HTML 5 多媒體簡述
6.1.1 HTML 4 中多媒體的應用
6.1.2 HTML 5 頁面中的多媒體
6.2 多媒體元素的基本屬性
6.3 多媒體元素的常用方法
6.3.1 媒體播放時的方法
6.3.2 canPlayType（type） 方法
6.4 事件以及事件的發(fā)生順序
6.4.1 事件處理方式
6.4.2 事件介紹
6.4.3 通過事件的控制來顯示視頻播放的時間
6.5 上機實踐
6.5.1 在HTML 5 文檔中播放音頻
6.5.2 在HTML 5 文檔中播放視頻
6.6 小結(jié)
6.7 習題
第7章 數(shù)據(jù)管家——HTML 5 中的數(shù)據(jù)存儲
視頻講解：50分鐘
7.1 初識Web Storage
7.1.1 Web Storage 是什么
7.1.2 使用Web Storage 中的API
7.1.3 sessionStorage和localStorage的實例——計數(shù)器
7.1.4 Web Storage 綜合實例——留言本
7.1.5 JSON對象的存儲實例——用戶信息卡
7.2 本地數(shù)據(jù)庫
7.2.1 Web SQL 數(shù)據(jù)庫簡介
7.2.2 使用Web SQL Database API
7.2.3 本地數(shù)據(jù)庫實例——用戶登錄
7.3 上機實踐
7.3.1 應用Web Storage 實現(xiàn)帶留言人的留言本
7.3.2 應用本地數(shù)據(jù)庫實現(xiàn)留言本
7.4 小結(jié)
7.5 習題
第8章 線下管家——HTML 5 中的離線應用
視頻講解：13分鐘
8.1 HTML 5 離線應用
8.1.1 HTML 5 離線應用概述
8.1.2 本地緩存與瀏覽器網(wǎng)頁緩存的區(qū)別
8.2 創(chuàng)建HTML 5 離線應用
8.2.1 緩存清單（manifest）
8.2.2 配置IIS服務器
8.2.3 瀏覽manifest清單
8.3 瀏覽器與服務器的交互過程
8.4 applicationCache對象
8.4.1 swapCache方法
8.4.2 applicationCache對象的事件
8.5 上機實踐
8.5.1 判斷在線狀態(tài)
8.5.2 檢測本地緩存是否有更新
8.6 小結(jié)
8.7 習題
第9章 齊頭并進——使用Web Worker 處理線程
視頻講解：21分鐘
9.1 Web Worker 概述
9.1.1 創(chuàng)建和使用Worker
9.1.2 Web Worker 應用實例——求和運算
9.2 在Worker 內(nèi)部能做什么
9.3 多個JavaScript文件的加載與執(zhí)行
9.4 線程的嵌套使用
9.4.1 最基本的單層嵌套
9.4.2 在多線程中進行數(shù)據(jù)的交互
9.5 上機實踐
9.5.1 通過傳遞JSON對象輸出用戶信息
9.5.2 使用多線程隨機顯示5的整數(shù)倍數(shù)的數(shù)字
9.6 小結(jié)
9.7 習題
第10章 未完待續(xù)——HTML 5 中的其他應用型API
視頻講解：12分鐘
10.1 跨文檔消息通信
10.1.1 使用postMessage API
10.1.2 跨文檔消息傳輸
10.2 Geolocation API 概述
10.2.1 使用getCurrentPosition獲取當前地理位置
10.2.2 持續(xù)監(jiān)視當前地理位置的信息
10.2.3 停止獲取當前用戶的地理位置信息
10.3 position對象
10.4 上機實踐
10.4.1 顯示當前地理位置的經(jīng)緯度
10.4.2 在Google地圖上顯示“我在這里”
10.5 小結(jié)
10.6 習題
第三篇 CSS篇
第11章 初露鋒芒——CSS 3概述
視頻講解：19分鐘
11.1　CSS 3概述
11.2　CSS 3模塊化結(jié)構
11.3　CSS 3新特性預覽
11.4　主流瀏覽器對CSS 3的支持
11.5　上機實踐
11.5.1　使用CSS 3樣式添加圖像邊框
11.5.2　應用CSS 3控制登錄頁面顯示樣式
11.6　小結(jié)
11.7　習題
第12章 如此強大——CSS 3新增的選擇器
視頻講解：78分鐘
12.1 選擇器概述
12.2 屬性選擇器
12.2.1 屬性選擇器是什么
12.2.2 CSS 3中的屬性選擇器
12.2.3 應用屬性選擇器實現(xiàn)文檔按類型顯示
12.3 CSS 3新增的結(jié)構性偽類選擇器
12.3.1 CSS中的偽類選擇器及偽元素
12.3.2 結(jié)構性偽類選擇器
12.3.3 UI元素狀態(tài)偽類選擇器
12.3.4 通用兄弟元素選擇器
12.4 上機實踐
12.4.1 隨機改變頁面的背景色
12.4.2 設計賞心悅目的數(shù)據(jù)表格
12.4.3 制作生動的列表導航
12.5 小結(jié)
12.6 習題
第13章 文字的魅力——字體與文本的相關屬性
視頻講解：60分鐘
13.1 字體的相關屬性
13.2 給文字添加陰影——text-shadow屬性
13.2.1 text-shadow屬性的使用方法
13.2.2 指定多個陰影
13.3 文本的相關屬性
13.3.1 文本自動換行：word-break
13.3.2 長單詞和URL地址換行
13.4 CSS 3新增的服務器字體
13.4.1 使用服務器字體
13.4.2 定義粗體、斜體字
13.4.3 優(yōu)先使用客戶端字體
13.5 使用font-size-adjust屬性微調(diào)字體大小
13.5.1 字體不同導致文字大小的不同
13.5.2 font-size-adjust屬性的使用方法
13.5.3 font-size-adjust屬性的使用
13.6 上機實踐
13.6.1 使用text-shadow屬性設計立體文本
13.6.2 防止表格標題行換行
13.7 小結(jié)
13.8 習題
第14章 細節(jié)修飾——背景、邊框和邊距的相關屬性
視頻講解：53分鐘
14.1 設置背景
14.1.1 設置背景顏色
14.1.2 設置背景圖片
14.1.3 CSS 3新增的與背景相關的屬性
14.2 邊框設置
14.2.1 設置邊框的線寬
14.2.2 設置邊框的樣式
14.2.3 設置邊框的顏色
14.2.4 邊框綜合屬性
14.2.5 CSS 3新增的與邊框相關的屬性
14.3 內(nèi)外邊距的相關屬性
14.3.1 設置內(nèi)邊距
14.3.2 設置外邊距
14.4 上機實踐
14.4.1 設計企業(yè)門戶網(wǎng)站首頁
14.4.2 設置最新公告列表的分隔線
14.4.3 通過CSS樣式實現(xiàn)圓角矩形欄目標頭
14.5 小結(jié)
14.6 習題
第15章 如此魔力——新增的彈性盒模型及分欄
視頻講解：53分鐘
15.1 盒的類型
15.1.1 盒的基本類型
15.1.2 inline-block盒模型
15.1.3 inline-table盒模型
15.1.4 表格相關的盒模型
15.1.5 list-item盒模型
15.1.6 run-in盒模型與compact盒模型
15.2 為盒設置陰影和倒影
15.2.1 box-shadow屬性的使用方法
15.2.2 對表格及單元格使用陰影
15.2.3 為盒設置倒影
15.3 布局的相關屬性
15.3.1 使用.oat屬性實現(xiàn)多欄布局
15.3.2 使用clear實現(xiàn)換行
15.3.3 使用clip屬性控制裁剪
15.3.4 控制組件的滾動條
15.4 CSS 3的多欄布局
15.4.1 CSS 3新增的分欄功能
15.4.2 使用盒模型實現(xiàn)多欄布局
15.5 上機實踐
15.5.1 設計多欄布局
15.5.2 為商品列表添加陰影和倒影
15.6 小結(jié)
15.7 習題
第16章 大體勾勒——尺寸和定位的相關屬性
視頻講解：46分鐘
16.1 尺寸的相關屬性
16.1.1 設置對象的寬度
16.1.2 設置對象的高度
16.1.3 CSS 3新增的與尺寸相關的屬性
16.2 定位的相關屬性
16.2.1 設置定位方式
16.2.2 設置層疊順序
16.2.3 設置與其父對象的上、下、左、右邊的距離
16.3 上機實踐
16.3.1 高度可自由調(diào)整的許愿墻背景
16.3.2 讓多個字條層疊顯示
16.4 小結(jié)
16.5 習題
第17章 增姿增色——表格和列表的相關屬性
視頻講解：43分鐘
17.1 表格的相關屬性
17.1.1 設置表格邊框線的顯示方式
17.1.2 設置單元格邊框間距
17.1.3 設置表格標題的位置
17.1.4 設置單元格無內(nèi)容時是否顯示邊框
17.1.5 設置表格的布局方式
17.2 列表的相關屬性
17.2.1 設置項目符號的種類
17.2.2 設置作為項目符號的圖片
17.2.3 設置項目符號排列的位置
17.2.4 綜合屬性——list-style
17.3 上機實踐
17.3.1 設計隔行變色的單線表格
17.3.2 應用列表實現(xiàn)橫向展示商品
17.4 小結(jié)
17.5 習題
第18章 充滿生機——CSS 3的動畫設計
視頻講解：78分鐘
18.1 2D變換
18.1.1 應用transform屬性實現(xiàn)平移
18.1.2 應用transform屬性實現(xiàn)縮放
18.1.3 應用transform屬性實現(xiàn)傾斜
18.1.4 應用transform屬性實現(xiàn)旋轉(zhuǎn)
18.1.5 更改變換的中心點
18.2 過渡效果
18.2.1 指定過渡持續(xù)的時間
18.2.2 指定參與過渡的屬性
18.2.3 指定過渡的動畫類型
18.2.4 指定過渡的延遲時間
18.3 Animation動畫
18.3.1 關鍵幀
18.3.2 動畫屬性
18.4 上機實踐
18.4.1 實現(xiàn)方形變圓形動畫效果
18.4.2 應用Animation動畫實現(xiàn)模擬進度條效果
18.5 小結(jié)
18.6 習題
第19章 錦上添花——CSS的其他重要屬性
視頻講解：24分鐘
19.1 控制鼠標指針
19.2 打印的相關屬性
19.2.1 應用@media print控制打印的內(nèi)容
19.2.2 在對象之前插入頁分隔符
19.2.3 在對象之后插入頁分隔符
19.2.4 設置是否允許在對象的內(nèi)部插入頁分隔符
19.3 Media Queries
19.3.1 Media Queries的語法
19.3.2 根據(jù)瀏覽器寬度自動調(diào)整布局
19.4 上機實踐
19.4.1 實現(xiàn)分頁打印客戶信息表格
19.4.2 設置不同的鼠標指針
19.5 小結(jié)
19.6 習題
第四篇 項目實戰(zhàn)篇
第20章 旅游信息網(wǎng)前臺頁面
視頻講解：23分鐘
20.1 需求分析
20.2 網(wǎng)站總體設計
20.2.1 網(wǎng)站功能概述
20.2.2 網(wǎng)站開發(fā)及運行環(huán)境
20.2.3 文件夾組織結(jié)構
20.3 網(wǎng)站主體結(jié)構設計
20.4 網(wǎng)站公共部分設計
20.4.1 設計網(wǎng)站公共header
20.4.2 設計網(wǎng)站公共footer
20.5 網(wǎng)站主頁設計
20.5.1 顯示網(wǎng)站介紹及相關圖片
20.5.2 主頁左側(cè)導航的實現(xiàn)
20.6 “留下足跡”頁面設計
20.6.1 播放音樂
20.6.2 添加留言功能的實現(xiàn)
20.7 小結(jié)