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

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