HTML5程序設(shè)計(jì)基礎(chǔ)教程

第1章 HTML5概述
1.1 HTML基礎(chǔ)
1.1.1 什么是HTML
1.1.2 HTML的歷史
1.2 HTML4基礎(chǔ)
1.2.1 設(shè)置網(wǎng)頁背景和顏色
1.2.2 設(shè)置字體屬性
1.2.3 超級(jí)鏈接
1.2.4 圖像和動(dòng)畫
1.2.5 表格
1.2.6 使用框架
1.2.7 其他常用標(biāo)簽
1.3 HTML5的新特性
1.3.1 簡(jiǎn)化的文檔類型和字符集
1.3.2 HTML5的新結(jié)構(gòu)
1.3.3 HTML5的新增內(nèi)聯(lián)元素
1.3.4 支持動(dòng)態(tài)頁面
1.3.5 全新的表單設(shè)計(jì)
1.3.6 強(qiáng)大的繪圖和多媒體功能
1.3.7 打造桌面應(yīng)用的一系列新功能
1.3.8 獲取地理位置信息
1.3.9 支持多線程
1.3.10 廢棄的標(biāo)簽
1.4 支持HTML5的瀏覽器
練習(xí)題
第2章 JavaScript編程
2.1 在HTML中使用JavaScript語言
2.1.1 在HTML中插入JavaScript代碼
2.1.2 使用js文件
2.2 基本語法
2.2.1 數(shù)據(jù)類型
2.2.2 變量
2.2.3 注釋
2.2.4 運(yùn)算符
2.3 常用語句
2.3.1 條件分支語句
2.3.2 循環(huán)語句
2.4 函數(shù)
2.4.1 創(chuàng)建自定義函數(shù)
2.4.2 調(diào)用函數(shù)
2.4.3 變量的作用域
2.4.4 函數(shù)的返回值
2.5 面向?qū)ο蟪绦蛟O(shè)計(jì)
2.5.1 面向?qū)ο蟪绦蛟O(shè)計(jì)思想簡(jiǎn)介
2.5.2 JavaScript內(nèi)置類
2.5.3 HTML DOM
2.5.4 Window對(duì)象
2.5.5 Navigator對(duì)象
2.5.6 document對(duì)象
2.6 JavaScript事件處理
2.6.1 常用HTML事件
2.6.2 Window對(duì)象的事件處理
2.6.3 Event對(duì)象
練習(xí)題
第3章 HTML5表單及文件處理
3.1 HTML4表單
3.1.1 定義表單
3.1.2 文本框
3.1.3 文本區(qū)域
3.1.4 單選按鈕
3.1.5 復(fù)選框
3.1.6 組合框
3.1.7 按鈕
3.2 HTML5表單的新特性
3.2.1 新的input類型
3.2.2 新的表單元素
3.2.3 新的表單屬性
3.2.4 表單驗(yàn)證
3.3 文件處理
3.3.1 選擇文件的表單控件
3.3.2 檢測(cè)瀏覽器是否支持HTML5 File API
3.3.3 FileList接口
3.3.4 FileReader接口
練習(xí)題
第4章 最新版本的層疊樣式表——CSS3
4.1 CSS基礎(chǔ)
4.1.1 什么是CSS
4.1.2 在HTML文檔中應(yīng)用CSS
4.1.3 顏色與背景
4.1.4 設(shè)置字體
4.1.5 設(shè)置文本屬性
4.1.6 超鏈接
4.1.7 列表
4.1.8 表格
4.1.9 CSS 輪廓
4.1.10 浮動(dòng)元素
4.2 CSS3的新技術(shù)
4.2.1 實(shí)現(xiàn)圓角效果
4.2.2 多彩的邊框顏色
4.2.3 陰影
4.2.4 背景圖片
4.2.5 多列
4.2.6 嵌入字體
4.2.7 透明度
4.2.8 HSL和HSLA顏色表現(xiàn)方法
4.3 CSS3應(yīng)用實(shí)例
4.3.1 HTML5+CSS3設(shè)計(jì)頁面布局
4.3.2 設(shè)計(jì)漂亮的導(dǎo)航菜單
4.3.3 設(shè)計(jì)登錄頁面
練習(xí)題
第5章 HTML5拖放
5.1 概述
5.1.1 什么是拖放
5.1.2 設(shè)置元素為可拖放
5.1.3 拖放事件
5.2 傳遞拖曳數(shù)據(jù)
5.2.1 dataTransfer對(duì)象的屬性
5.2.2 dataTransfer對(duì)象的方法
5.3 HTML5拖放的實(shí)例
5.3.1 拖放HTML元素
5.3.2 拖放文件
練習(xí)題
第6章 使用Canvas API畫圖
6.1 Canvas元素
6.1.1 Canvas元素的定義語法
6.1.2 使用JavaScript獲取網(wǎng)頁中的canvas對(duì)象
6.2 坐標(biāo)與顏色
6.2.1 坐標(biāo)系統(tǒng)
6.2.2 顏色的表示方法
6.3 繪制圖形
6.3.1 繪制直線
6.3.2 繪制貝塞爾曲線
6.3.3 繪制矩形
6.3.4 繪制圓弧
6.4 描邊和填充
6.4.1 描邊
6.4.2 填充圖形內(nèi)部
6.4.3 漸變顏色
6.4.4 透明顏色
6.5 繪制圖像與文字
6.5.1 繪制圖像
6.5.2 輸出文字
6.6 圖形的操作
6.6.1 保存和恢復(fù)繪圖狀態(tài)
6.6.2 移動(dòng)
6.6.3 縮放
6.6.4 旋轉(zhuǎn)
6.6.5 變形
6.7 組合和陰影
6.7.1 組合圖形
6.7.2 繪制陰影
6.8 HTML5 Canvas應(yīng)用實(shí)例
6.8.1 繪制漂亮的警告牌
6.8.2 動(dòng)畫實(shí)例：小型太陽系模型
練習(xí)題
第7章 繪制可伸縮矢量圖形(SVG)
7.1 SVG概述
7.1.1 SVG的特性
7.1.2 XML基礎(chǔ)
7.1.3 一個(gè)SVG實(shí)例
7.1.4 SVG坐標(biāo)系統(tǒng)
7.1.5 在HTML5中使用SVG
7.2 SVG形狀
7.2.1 繪制直線
7.2.2 繪制折線
7.2.3 繪制矩形
7.2.4 繪制圓形
7.2.5 繪制橢圓
7.2.6 繪制多邊形
7.2.7 路徑
7.3 線條和填充
7.3.1 設(shè)置線條的屬性
7.3.2 填充
7.4 SVG文本與圖片
7.4.1 輸出文本
7.4.2 SVG圖片
7.5 SVG濾鏡
7.5.1 定義濾鏡
7.5.2 應(yīng)用濾鏡
7.6 漸變顏色
7.6.1 線性漸變
7.6.2 放射性漸變
7.7 變換坐標(biāo)系
7.7.1 視窗變換——viewBox屬性
7.7.2 用戶坐標(biāo)系的變換——transform屬性
練習(xí)題
第8章 播放多媒體
8.1 HTML5音頻
8.1.1 audio標(biāo)簽
8.1.2 播放背景音樂
8.1.3 設(shè)置替換音頻源
8.1.4 使用JavaScript語言訪問audio對(duì)象
8.２ HTML5視頻
8.2.1 video標(biāo)簽
8.2.2 使用JavaScript語言訪問video對(duì)象
練習(xí)題
第9章 Web通信
9.1 跨文檔消息機(jī)制
9.1.1 檢測(cè)瀏覽器對(duì)跨文檔消息機(jī)制的支持情況
9.1.2 使用postMessage API發(fā)送消息
9.1.3 監(jiān)聽和處理消息事件
9.2 XMLHttpRequest Level 2
9.2.1 創(chuàng)建XMLHttpRequest對(duì)象
9.2.2 發(fā)送HTTP請(qǐng)求
9.2.3 從服務(wù)器接收數(shù)據(jù)
9.2.4 進(jìn)行HTTP頭(HEAD)請(qǐng)求
9.2.5 超時(shí)控制
9.2.6 使用FormData對(duì)象向服務(wù)器發(fā)送數(shù)據(jù)
9.2.7 使用FormData對(duì)象上傳文件
9.3 WebSocket
9.3.1 什么是Socket
9.3.2 WebSocket API概述
9.3.3 WebSocket API編程
9.3.4 WebSocket服務(wù)器
練習(xí)題
第10章 本地存儲(chǔ)
10.1 概述
10.1.1 HTML4的本地?cái)?shù)據(jù)存儲(chǔ)方式
10.1.2 HTML5本地存儲(chǔ)技術(shù)概述
10.2 localstorage
10.2.1 瀏覽器對(duì)localstorage的支持情況
10.2.2 使用localstorage保存數(shù)據(jù)
10.2.3 獲取localstorage中的數(shù)據(jù)
10.2.4 刪除localstorage中的數(shù)據(jù)
10.2.5 storage事件
10.3 sessionstorage
10.3.1 判斷瀏覽器是否支持sessionstorage
10.3.2 使用sessionstorage保存數(shù)據(jù)
10.3.3 獲取sessionstorage中的數(shù)據(jù)
10.3.4 刪除sessionstorage中的數(shù)據(jù)
10.4 webSQL Database API
10.4.1 判斷瀏覽器是否支持webSQL Database API
10.4.2 新建數(shù)據(jù)庫(kù)
10.4.3 執(zhí)行SQL語句
10.5 IndexedDB
10.5.1 數(shù)據(jù)庫(kù)的相關(guān)概念
10.5.2 判斷瀏覽器是否支持IndexedDB
10.5.3 創(chuàng)建和打開數(shù)據(jù)庫(kù)
10.5.4 創(chuàng)建對(duì)象存儲(chǔ)空間ObjectStore
10.5.5 創(chuàng)建索引
10.5.6 事務(wù)
10.5.7 游標(biāo)
練習(xí)題
第11章 開發(fā)支持離線的Web應(yīng)用程序
11.1 HTML5離線Web應(yīng)用程序概述
11.1.1 什么是離線Web應(yīng)用程序
11.1.2 開發(fā)離線Web應(yīng)用程序需要完成的工作
11.2 開發(fā)HTML5離線Web應(yīng)用程序
11.2.1 Application Cache API
11.2.2 Cache manifest文件
11.2.3 更新緩存
11.2.4 檢測(cè)在線狀態(tài)
練習(xí)題
第12章 獲取瀏覽器的地理位置信息
12.1 概述
12.1.1 什么是瀏覽器地理位置
12.1.2 瀏覽器對(duì)獲取地理位置信息的支持情況
12.2 獲取地理位置信息
12.2.1 getCurrentPosition()方法
12.2.2 watchPosition()方法
12.2.3 clearWatch()方法
12.3 數(shù)據(jù)保護(hù)
12.3.1 在Internet Explorer 9中配置共享地理位置
12.3.2 在Chrome中配置共享地理位置
12.3.3 在Firefox中配置共享地理位置
練習(xí)題
第13章 支持多線程編程的Web Workers
13.1 概述
13.1.1 什么是線程
13.1.2 什么是HTML5 Web Workers
13.1.3 瀏覽器對(duì)Web Workers的支持情況
13.2 Web Workers編程
13.2.1 創(chuàng)建Web Workers對(duì)象
13.2.2 終止Web Workers對(duì)象
13.2.3 共享線程(Shared Worker)
練習(xí)題
第14章  jQuery程序設(shè)計(jì)
14.1 jQuery基礎(chǔ)
14.1.1 下載jQuery
14.1.2 初識(shí)jQuery
14.2 jQuery選擇器
14.2.1 基礎(chǔ)選擇器
14.2.2 層次選擇器
14.2.3 基本過濾器
14.2.4 內(nèi)容過濾器
14.2.5 可見性過濾器
14.2.6 屬性過濾器
14.2.7 子元素過濾器
14.3 設(shè)置HTML元素的屬性與CSS樣式
14.3.1 設(shè)置HTML元素的屬性
14.3.2 設(shè)置CSS樣式
14.4 表單編程
14.4.1 表單選擇器
14.4.2 表單過濾器
14.4.3 表單API
14.5 事件和Event對(duì)象
14.5.1 事件處理函數(shù)
14.5.2 Event對(duì)象
14.5.3 綁定到事件處理函數(shù)
14.5.4 鍵盤事件
14.5.5 鼠標(biāo)事件
14.5.6 文檔加載事件
14.5.7 瀏覽器事件
14.6 jQuery動(dòng)畫
14.6.1 執(zhí)行自定義的動(dòng)畫
14.6.2 顯示和隱藏HTML元素
14.6.3 淡入淡出效果
14.6.4 滑動(dòng)效果
14.6.5 動(dòng)畫隊(duì)列
練習(xí)題
 
附錄 實(shí)驗(yàn)
實(shí)驗(yàn)1 HTML4基礎(chǔ)
實(shí)驗(yàn)2 HTML5的新特性
實(shí)驗(yàn)3 JavaScript編程
實(shí)驗(yàn)4 HTML5表單及文件處理
實(shí)驗(yàn)5 使用CSS3
實(shí)驗(yàn)6 HTML5拖放
實(shí)驗(yàn)7 使用Canvas API畫圖
實(shí)驗(yàn)8 繪制可伸縮矢量圖形(SVG)
實(shí)驗(yàn)9 播放多媒體
實(shí)驗(yàn)10 Web通信
實(shí)驗(yàn)11 本地存儲(chǔ)
實(shí)驗(yàn)12 開發(fā)支持離線的Web應(yīng)用程序
實(shí)驗(yàn)13 獲取瀏覽器的地理位置信息
實(shí)驗(yàn)14 支持多線程編程的Web Workers
實(shí)驗(yàn)15 jQuery編程