第 1章 HTML5基礎(chǔ)
1.1HTML5
概述
1.1.1HTML歷史.
1.1.2HTML5
誕生.
1.1.3HTML5
組織.
1.1.4HTML5
構(gòu)成.
1.2HTML5
設(shè)計(jì)理念
1.2.1 避免不必要的復(fù)雜性
1.2.2 支持已有的內(nèi)容.
1.2.3 解決現(xiàn)實(shí)的問(wèn)題.
1.2.4 求真務(wù)實(shí).
1.2.5 平穩(wěn)退化.
1.2.6 最終用戶優(yōu)先.
1.3HTML5
新特性
1.4HTML5
API
1.4.1 新增的 API
1.4.2 修改的 API
1.4.3 擴(kuò)展 Document
1.4.4 擴(kuò)展 HTMLElement
1.4.5 其他擴(kuò)展.
1.4.6 棄用的 API
1.5案例：編寫(xiě)第一個(gè)HTML5頁(yè)面.
1.5.1 搭建測(cè)試環(huán)境.
1.5.2 檢測(cè)瀏覽器是否支持
1.5.3 使用 HTML5編寫(xiě)頁(yè)面
第 2章設(shè)計(jì) HTML5文檔
2.1HTML5
語(yǔ)法
2.1.1 標(biāo)記變化.
2.1.2 兼容性.
2.1.3 案例：設(shè)計(jì) HTML5頁(yè)面
2.2HTML5
元素
2.2.1 結(jié)構(gòu)元素
2.2.2 功能元素
2.2.3 表單元素
2.2.4 廢除的元素
2.3HTML5
屬性
2.3.1 表單屬性
2.3.2 鏈接屬性
2.3.3 其他屬性
2.3.4 廢除的屬性
2.4HTML5
全局屬性
2.4.1contentEditable屬性
2.4.2contextmenu
屬性
2.4.3data-*屬性
2.4.4draggable屬性
2.4.5dropzone
屬性
2.4.6hidden
屬性
2.4.7spellcheck
屬性
2.4.8translate屬性
2.5HTML5
事件
2.5.1window事件
2.5.2form事件
2.5.3mouse
事件
2.5.4media
事件
2.6案例：設(shè)計(jì)HTML5 頁(yè)面
2.6.1 使用 HTML5結(jié)構(gòu)化元素
2.6.2 使用 CSS美化 HTML5文檔
第 3章構(gòu)建 HTML5結(jié)構(gòu)
3.1設(shè)計(jì)主體結(jié)構(gòu)
3.1.1 定義文章塊
3.1.2 定義內(nèi)容塊
3.1.3 定義導(dǎo)航塊
3.1.4 定義側(cè)邊欄.
3.1.5 定義主要區(qū)域.
3.2設(shè)計(jì)語(yǔ)義結(jié)構(gòu)
3.2.1 定義標(biāo)題欄.
3.2.2 定義標(biāo)題組.
3.2.3 定義腳注欄.
3.2.4 定義聯(lián)系信息段
3.2.5 定義時(shí)間段.
3.2.6 定義發(fā)布日期.
3.3設(shè)計(jì)文檔大綱
3.3.1HTML4
文檔綱要.
3.3.2HTML5
文檔綱要.
3.3.3HTML5
隱式分節(jié).
3.3.4HTML5
特殊分節(jié).
3.3.5HTML5
兼容樣式.
3.4案例實(shí)戰(zhàn)
3.4.1 設(shè)計(jì)完整的HTML5文檔結(jié)構(gòu).
3.4.2 設(shè)計(jì)博客結(jié)構(gòu).
3.4.3 設(shè)計(jì)博客樣式.
第 4章增強(qiáng) HTML5表單和頁(yè)面功能
4.1HTML5
input 類型.
4.1.1email
類型
4.1.2url類型
4.1.3number
類型
4.1.4range類型
4.1.5 日期選擇器類型.
4.1.6search
類型
4.1.7tel類型
4.1.8color類型
4.2HTML5
input 屬性.
4.2.1autocomplete
屬性.
4.2.2autofocus
屬性.
4.2.3form屬性
4.2.4 表單重寫(xiě)屬性.
4.2.5height和 width屬性.
4.2.6list屬性.
4.2.7min、max和 step屬性.
4.2.8multiple屬性.
4.2.9pattern
屬性.
4.2.10placeholder
屬性
4.2.11required
屬性
4.3新表單控件
4.3.1datalist
元素
4.3.2keygen
元素
4.3.3output元素
4.4新表單屬性
4.4.1autocomplete
屬性
4.4.2novalidate
屬性
4.4.3 顯式驗(yàn)證
4.5新增頁(yè)面元素
4.5.1figure和 figcaption元素
4.5.2details
和 summary 元素
4.5.3mark
元素
4.5.4progress
元素
4.5.5meter
元素
4.5.6dialog
元素
4.6完善頁(yè)面元素
4.6.1a元素
4.6.2ol元素
4.6.3dl元素
4.6.4cite元素
4.6.5small
元素
4.6.6iframe
元素
4.6.7script元素
第 5章 HTML5繪圖
5.1HTML5
canvas 基礎(chǔ)
5.1.1 在頁(yè)面中插入 canvas元素.
5.1.2 繪制圖形的基本方法
5.1.3 使用 canvas
5.2繪制圖形
5.2.1 繪制直線
5.2.2 繪制矩形
5.2.3 繪制圓形
5.2.4 繪制多邊形
5.2.5 繪制曲線
5.2.6 繪制二次方曲線
5.2.7 繪制三次方曲線
5.3設(shè)置圖形樣式 1
5.3.1 設(shè)置線型.
5.3.2 繪制線性漸變.
5.3.3 繪制徑向漸變.
5.3.4 繪制圖案.
5.3.5 設(shè)置不透明度.
5.3.6 設(shè)置陰影.
5.4操作圖形
5.4.1 保存和恢復(fù) canvas狀態(tài)
5.4.2 清除繪圖.
5.4.3 移動(dòng)坐標(biāo).
5.4.4 旋轉(zhuǎn)坐標(biāo).
5.4.5 縮放圖形.
5.4.6 變換矩陣.
5.4.7 組合圖形.
5.4.8 裁切路徑.
5.5繪制文字
5.5.1 繪制填充文字.
5.5.2 設(shè)置文字屬性.
5.5.3 繪制輪廓文字.
5.5.4 測(cè)量寬度.
5.6繪制圖像
5.6.1 導(dǎo)入圖像.
5.6.2 變換圖像.
5.6.3 裁切圖像.
5.6.4 圖像平鋪.
5.6.5 像素處理.
5.7Path2D
對(duì)象.
5.7.1Canvas
2D API新功能
5.7.2 使用 Path2D對(duì)象
5.8案例實(shí)戰(zhàn)
5.8.1 設(shè)計(jì) canvas動(dòng)畫(huà)
5.8.2 保存繪圖.
第 6章使用 SVG
6.1SVG 基礎(chǔ).
6.1.1SVG發(fā)展歷史
6.1.2SVG特點(diǎn)
6.1.3 在 HTML中應(yīng)用 SVG.
6.1.4 案例：設(shè)計(jì)第一個(gè)SVG圖形
6.2使用 SVG.
6.2.1 矩形
6.2.2 圓形
6.2.3 橢圓
6.2.4 多邊形
6.2.5 直線
6.2.6 折線
6.2.7 路徑
6.2.8 文本
6.2.9 線框樣式
6.2.10SVG
濾鏡
6.2.11 模糊效果
6.2.12 陰影效果
6.2.13 線性漸變
6.2.14 放射漸變
6.3案例實(shí)戰(zhàn)
6.3.1 手繪簡(jiǎn)筆畫(huà)
6.3.2 描邊動(dòng)畫(huà)
6.3.3 設(shè)計(jì)特效文字
6.3.4 自定義濾鏡
第 7章使用 HTML5多媒體.
7.1HTML5
多媒體基礎(chǔ)
7.1.1 認(rèn)識(shí)編解碼器
7.1.2 瀏覽器支持
7.1.3 使用 audio 元素
7.1.4 使用 video 元素
7.1.5 設(shè)置媒體屬性
7.1.6 使用媒體方法
7.1.7 使用媒體事件
7.2案例實(shí)戰(zhàn)
7.2.1 設(shè)計(jì)音樂(lè)播放器
7.2.2 顯示播放進(jìn)度
7.2.3 查看視頻幀畫(huà)面
7.2.4 添加字幕
第 8章 本地存儲(chǔ)
8.1Web
Storage
8.1.1Web
Storage 基礎(chǔ)
8.1.2 瀏覽器支持
8.1.3 使用Web Storage2
8.1.4 案例：用戶登錄信息保存和
讀取.
8.1.5 案例：Web留言本.
8.1.6 案例：網(wǎng)頁(yè)計(jì)數(shù)器
8.2Web
SQL
8.2.1Web
SQL 基礎(chǔ)
8.2.2 使用Web SQL
8.2.3 案例：創(chuàng)建本地?cái)?shù)據(jù)庫(kù)
8.2.4 案例：批量讀寫(xiě)數(shù)據(jù)
8.2.5 案例：本地用戶登錄
8.2.6 案例：Web Storage 和Web SQL
比較應(yīng)用.
8.3indexedDB
8.3.1indexedDB基礎(chǔ)
8.3.2 連接數(shù)據(jù)庫(kù).
8.3.3 更新數(shù)據(jù)庫(kù)版本.
8.3.4 創(chuàng)建對(duì)象倉(cāng)庫(kù).
8.3.5 創(chuàng)建索引.
8.3.6 使用事務(wù).
8.3.7 保存數(shù)據(jù).
8.3.8 獲取數(shù)據(jù).
8.3.9 檢索鍵值.
8.3.10 檢索屬性值.
8.3.11 案例：留言本
8.3.12 案例：電子刊物發(fā)布
第 9章離線應(yīng)用
9.1HTML5
離線應(yīng)用基礎(chǔ)
9.1.1 認(rèn)識(shí) HTML5離線應(yīng)用
9.1.2 瀏覽器支持.
9.1.3 使用 manifest文件
9.1.4 使用離線緩存.
9.1.5 監(jiān)聽(tīng)離線存儲(chǔ).
9.2案例實(shí)戰(zhàn)
9.2.1 緩存首頁(yè).
9.2.2 離線編輯內(nèi)容.
9.2.3 離線跟蹤.
第 10章多線程處理
10.1Web
Workers 基礎(chǔ)
10.1.1 認(rèn)識(shí)Web Workers.
10.1.2 瀏覽器支持
10.1.3 創(chuàng)建Web Workers.
10.1.4Web
Workers通信
10.1.5 案例：使用Web Workers
10.2案例實(shí)戰(zhàn)
10.2.1 后臺(tái)運(yùn)算
10.2.2 數(shù)值過(guò)濾
10.2.3 并發(fā)處理
10.2.4 線程通信
10.2.5Fibonacci數(shù)列運(yùn)算
10.2.6 多線程繪圖
第 11章文件操作
11.1訪問(wèn)文件域
11.2使用 Blob 對(duì)象
11.2.1 在文件域中訪問(wèn) Blob對(duì)象
11.2.2 創(chuàng)建Blob 對(duì)象
11.2.3 截取Blob 對(duì)象
11.2.4 保存Blob 對(duì)象
11.3使用 FileReader對(duì)象
11.3.1 讀取并顯示文件
11.3.2 監(jiān)測(cè)讀取操作
11.4使用緩存對(duì)象
11.4.1使用ArrayBuffer 對(duì)象
11.4.2 使用ArrayBufferView 對(duì)象
11.4.3 使用DataView對(duì)象
11.5使用 FileSystem
11.5.1 訪問(wèn)文件系統(tǒng)
11.5.2 申請(qǐng)配額
11.5.3 創(chuàng)建文件
11.5.4 寫(xiě)入文件
11.5.5 添加數(shù)據(jù)
11.5.6 讀取文件
11.5.7 復(fù)制文件
11.5.8 刪除文件
11.5.9 創(chuàng)建目錄
11.5.10 讀取目錄
11.5.11 刪除目錄
11.5.12 復(fù)制目錄
11.5.13 移動(dòng)和重命名目錄3
11.5.14 使用 filesystem:URL.
11.6案例實(shí)戰(zhàn)
第 12章使用 History
12.1History
API 基礎(chǔ)
12.1.1History
API處理方式.
12.1.2 瀏覽器兼容和擴(kuò)展
12.1.3 操作歷史記錄.
12.2案例實(shí)戰(zhàn)
12.2.1 設(shè)計(jì)無(wú)刷新頁(yè)面導(dǎo)航
12.2.2 設(shè)計(jì)主題宣傳網(wǎng)站
12.2.3 設(shè)計(jì)圖片畫(huà)廊.
12.2.4 設(shè)計(jì)歷史恢復(fù).
第 13章
XMLHttpRequest 2
13.1XMLHttpRequest
2 基礎(chǔ)
13.1.1 使用XMLHttpRequest
對(duì)象
13.1.2XMLHttpRequest老版本
缺陷.
13.1.3XMLHttpRequest
2 版本
功能.
13.1.4HTTP請(qǐng)求時(shí)限
13.1.5 使用FormData對(duì)象.
13.1.6 上傳文件.
13.1.7 跨域訪問(wèn).
13.1.8 響應(yīng)數(shù)據(jù).
13.1.9 接收二進(jìn)制數(shù)據(jù)
13.1.10 顯示進(jìn)度信息.
13.2案例實(shí)戰(zhàn)
13.2.1 接收ArrayBuffer對(duì)象
13.2.2 接收Blob 對(duì)象
13.2.3 發(fā)送字符串.
13.2.4 發(fā)送表單數(shù)據(jù).
13.2.5 發(fā)送文件.
13.2.6 發(fā)送Blob 對(duì)象
13.2.7 跨域請(qǐng)求.
13.2.8 設(shè)計(jì)帶進(jìn)度條的文件上傳
第 14章拖放和通知
14.1拖放 API.
14.1.1 拖放API基礎(chǔ)
14.1.2 使用DataTransfer 對(duì)象
14.1.3 案例：刪除項(xiàng)目
14.1.4 案例：接納對(duì)象
14.1.5 案例：拖選照片
14.1.6 案例：扔入垃圾桶
14.1.7 案例：文件拖拽預(yù)覽
14.2通知 API
14.2.1 通知API基礎(chǔ)
14.2.2 案例：開(kāi)啟桌面通知
14.2.3 案例：使用腳本關(guān)閉通知
14.2.4 案例：顯示多條通知
第 15章地理位置
15.1位置信息基礎(chǔ)
15.1.1 為什么要學(xué)習(xí) Geolocation
15.1.2 位置信息表示方式
15.1.3 位置信息來(lái)源
15.1.4IP定位
15.1.5GPS定位
15.1.6Wi-Fi定位
15.1.7 手機(jī)定位
15.1.8 自定義定位
15.2Geolocation
API 基礎(chǔ)
15.2.1 瀏覽器支持
15.2.2 獲取當(dāng)前地理位置
15.2.3 監(jiān)視位置信息
15.2.4 停止獲取位置信息
15.2.5 隱私保護(hù)
15.2.6 處理位置信息
15.2.7 使用position 對(duì)象
15.3案例實(shí)戰(zhàn)
第 16章 HTML5 其他應(yīng)用
16.1Page
Visibility API
16.1.1Page
Visibility基礎(chǔ)
16.1.2 案例：設(shè)計(jì)視頻頁(yè)面
16.1.3 案例：設(shè)計(jì)登錄同步
16.2Fullscreen
API
16.2.1Fullscreen
API 基礎(chǔ) 4
16.2.2 案例：設(shè)計(jì)頁(yè)面全屏顯示
16.2.3 案例：設(shè)計(jì)視頻全屏播放
16.3鼠標(biāo)指針鎖定API.
16.3.1 鼠標(biāo)指針鎖定 API基礎(chǔ).
16.3.2 案例：設(shè)計(jì)全屏鼠標(biāo)指針
鎖定.
16.4requestAnimationFrame
16.4.1requestAnimFrame
基礎(chǔ)
16.4.2 案例：設(shè)計(jì)進(jìn)度條
16.4.3 案例：設(shè)計(jì)粒子動(dòng)畫(huà)
16.4.4 案例：設(shè)計(jì)旋轉(zhuǎn)的小球
16.5Mutation
Observer
16.5.1Mutation
Observer 基礎(chǔ)
16.5.2 案例：觀察DOM元素變化
16.5.3 案例：觀察DOM屬性變化
16.6JavaScript
Promise
16.6.1Promise對(duì)象基礎(chǔ).
16.6.2 創(chuàng)建promise對(duì)象
16.6.3 使用 then()方法.
16.6.4 隊(duì)列化異步操作
16.6.5 異常處理.
16.6.6 創(chuàng)建序列.
16.6.7 并行處理.
16.7Beacon
API.
第 17章 CSS3 基礎(chǔ)
17.1CSS3
概述
17.1.1CSS歷史.
17.1.2CSS3
模塊.
17.1.3CSS3
特性.
17.1.4CSS3
狀態(tài).
17.1.5 瀏覽器支持.
17.2設(shè)計(jì) CSS 頁(yè)面.
第 18章 CSS3 選擇器
18.1選擇器概述
18.1.1 了解學(xué)習(xí) CSS3選擇器
18.1.2CSS選擇器分類.
18.2組合選擇器
18.3屬性選擇器
18.4偽類選擇器
18.5案例實(shí)戰(zhàn)
18.5.1 使用屬性選擇器
18.5.2 使用動(dòng)態(tài)偽類
18.5.3 使用結(jié)構(gòu)偽類
18.5.4 使用否定偽類
18.5.5 使用狀態(tài)偽類
18.5.6 使用目標(biāo)偽類
18.5.7 設(shè)計(jì)表單樣式
18.5.8 設(shè)計(jì)超鏈接樣式
18.5.9 設(shè)計(jì)表格樣式
第 19章文本樣式
19.1CSS3
文本模塊基礎(chǔ)
19.2案例實(shí)戰(zhàn)
19.2.1 定義文本陰影
19.2.2 設(shè)計(jì)文本特效
19.2.3 設(shè)計(jì)首頁(yè)特效
19.2.4 文本溢出
19.2.5 文本換行
19.2.6 動(dòng)態(tài)內(nèi)容
19.2.7 默認(rèn)樣式
19.2.8 自定義字體
第 20章色彩和漸變樣式.
20.1顏色模式
20.1.1RGBA
模式
20.1.2HSL模式
20.1.3HSLA
模式
20.1.4 使用opacity屬性
20.1.5 設(shè)置 transparent值
20.2漸變背景
20.2.1WebKit
漸變
20.2.2Gecko漸變
20.2.3IE漸變
20.2.4 標(biāo)準(zhǔn)漸變
20.3案例實(shí)戰(zhàn)
20.3.1 設(shè)計(jì)按鈕
20.3.2 設(shè)計(jì)紋理
20.3.3 設(shè)計(jì)欄目
20.3.4 漸變應(yīng)用
第 21章背景和邊框樣式
21.1設(shè)計(jì)邊框樣式
21.1.1 多色邊框.
21.1.2 邊框背景.
21.2設(shè)計(jì)圓角
21.3設(shè)計(jì)倒影
21.4設(shè)計(jì)陰影
21.5設(shè)計(jì)背景圖像
21.5.1 定義坐標(biāo).
21.5.2 定義裁剪區(qū)域.
21.5.3 定義大小.
21.5.5 定義多背景圖像
21.6案例實(shí)戰(zhàn)
21.6.1 設(shè)計(jì)橢圓圖形.
21.6.2 設(shè)計(jì)圖標(biāo).
21.6.3 設(shè)計(jì)邊框.
21.6.4 設(shè)計(jì)窗口.
第 22章 CSS3 盒模型
22.1CSS3
盒模型基礎(chǔ)
22.1.1 定義顯示方式.
22.1.2 可控大小.
22.1.3 內(nèi)容溢出.
22.1.4 定義輪廓.
22.1.5 設(shè)置輪廓樣式.
22.2案例實(shí)戰(zhàn)
22.2.1 邊界的應(yīng)用.
22.2.2 補(bǔ)白的應(yīng)用.
22.2.3 邊框應(yīng)用.
22.2.4 設(shè)計(jì)模板頁(yè).
第 23章 CSS3 新布局模型
23.1多列布局
23.1.1 定義列寬.
23.1.2 定義列數(shù).
23.1.3 定義列間距.
23.1.4 定義列邊框.
23.1.5 定義跨列顯示.
23.1.6 定義列高度.
23.2盒布局模型
23.2.1 定義寬度
23.2.2 定義順序
23.2.3 定義方向
23.2.4 自定義自適應(yīng)
23.2.5 消除空白
23.2.6 定義對(duì)齊方式
23.3彈性盒布局
23.3.1 定義彈性盒
23.3.2 定義伸縮方向
23.3.3 定義行數(shù)
23.3.4 定義對(duì)齊方式
23.3.5 定義伸縮項(xiàng)目
23.4案例實(shí)戰(zhàn)
23.4.1 設(shè)計(jì)伸縮菜單
23.4.2 設(shè)計(jì)伸縮頁(yè)
23.4.3 設(shè)計(jì)可兼容多列模板
23.4.4 設(shè)計(jì)HTML5應(yīng)用模板
第 24章 CSS3 變形和動(dòng)畫(huà)
24.1CSS3
變形
24.1.12D旋轉(zhuǎn)
24.1.22D縮放
24.1.32D移動(dòng)
24.1.42D傾斜
24.1.52D矩陣
24.1.6 定義變形原點(diǎn)
24.1.7 認(rèn)識(shí)3D變形
24.1.83D位移
24.1.93D縮放
24.1.103D旋轉(zhuǎn)
24.2過(guò)渡樣式
24.2.1 定義過(guò)渡
24.2.2 定義過(guò)渡時(shí)間
24.2.3 定義延遲
24.2.4 定義效果
24.2.5 觸發(fā)時(shí)機(jī)
24.3關(guān)鍵幀動(dòng)畫(huà)
24.3.1 定義關(guān)鍵幀
24.3.2 定義動(dòng)畫(huà)名稱
24.3.3 定義播放時(shí)間70
24.3.4 定義播放方式.
24.3.5 定義播放延遲.
24.3.6 定義播放次數(shù).
24.3.7 定義播放方向.
24.3.8 定義播放狀態(tài).
24.3.9 定義播放外狀態(tài)
24.4案例實(shí)戰(zhàn)
24.4.1 設(shè)計(jì)圖片特效.
24.4.2 設(shè)計(jì)變形對(duì)象.
24.4.3 設(shè)計(jì)3D盒子
24.4.4 設(shè)計(jì)動(dòng)態(tài)廣告.
24.4.5 設(shè)計(jì)翻轉(zhuǎn)動(dòng)畫(huà).
24.4.6 設(shè)計(jì)運(yùn)動(dòng)動(dòng)畫(huà)
24.4.7 設(shè)計(jì)折疊面板
第 25章 CSS3 媒體查詢
25.1媒體查詢基礎(chǔ)
25.1.1 認(rèn)識(shí)Media Queries
25.1.2 使用@media 規(guī)則
25.2案例實(shí)戰(zhàn)
25.2.1 跟蹤瀏覽器窗口變化
25.2.2 設(shè)計(jì)響應(yīng)式頁(yè)面
25.2.3 設(shè)計(jì)自適應(yīng)頁(yè)面
25.2.4 智能隱藏和顯示欄目
25.2.5 設(shè)計(jì)自適應(yīng)手機(jī)網(wǎng)頁(yè)
書(shū)單推薦
