HTML5入門經(jīng)典

前言
第一篇 基礎(chǔ)知識(shí)篇
第1章 HTML5開發(fā)前奏
視頻講解：21分
1.1 為什么選擇HTML5語(yǔ)言
1.2 HTML發(fā)展歷程
1.3 誰(shuí)在開發(fā)HTML
1.4 HTML5的新認(rèn)識(shí)
1.4.1 兼容性
1.4.2 實(shí)用性和用戶優(yōu)先
1.4.3 化繁為簡(jiǎn)
1.5 無(wú)插件范式
1.6 探秘——HTML5新特性
1.7 HTML的標(biāo)記構(gòu)成
1.7.1 HTML標(biāo)記的使用技巧
1.7.2 開始標(biāo)記
1.7.3 頭部標(biāo)記
1.7.4 標(biāo)題標(biāo)記
1.7.5 主體標(biāo)記
1.7.6 編寫文件時(shí)的注意事項(xiàng)
1.8 編寫第一個(gè)HTML文件
1.8.1 HTML文件的編寫方法
1.8.2 手工編寫頁(yè)面
1.8.3 使用可視化軟件制作頁(yè)面
1.8.4 使用瀏覽器瀏覽HTML文件
1.8.5 明日?qǐng)D書網(wǎng)使用HTML開發(fā)
1.9 小結(jié)
1.10 習(xí)題
第2章 HTML5帶來(lái)的標(biāo)記變化
視頻講解：43分
2.1 重中之重——頭部標(biāo)記
2.2 名稱所在——標(biāo)題
2.3 隱藏很深——元信息標(biāo)記
2.3.1 頁(yè)面關(guān)鍵字
2.3.2 頁(yè)面描述
2.3.3 編輯工具
2.3.4 作者信息設(shè)置
2.3.5 限制搜索方式
2.3.6 網(wǎng)頁(yè)文字及語(yǔ)言
2.3.7 定時(shí)跳轉(zhuǎn)頁(yè)面
2.3.8 有效期的設(shè)置
2.3.9 禁止從緩存中調(diào)用
2.3.10 刪除過(guò)期的cookie
2.3.11 強(qiáng)制打開新窗口
2.3.12 網(wǎng)頁(yè)的過(guò)渡效果設(shè)置
2.4 基底網(wǎng)址標(biāo)記
2.5 容量瓶——頁(yè)面的主體標(biāo)記
2.5.1 彩色字體——text
2.5.2 背景顏色屬性——bgcolor
2.5.3 背景圖像屬性——background
2.5.4 鏈接文字屬性——link
2.5.5 邊距——margin
2.6 程序員的備忘錄——注釋
2.7 上機(jī)實(shí)踐
2.7.1 創(chuàng)建基本的HTML網(wǎng)頁(yè)
2.7.2 設(shè)定自動(dòng)刷新
2.8 小結(jié)
2.9 習(xí)題
第3章 HTML5網(wǎng)頁(yè)的基本要素
視頻講解：28分
3.1 從小到大——標(biāo)題文字
3.1.1 標(biāo)題字標(biāo)記
3.1.2 標(biāo)題文字的對(duì)齊方式——align
3.2 變化萬(wàn)千——文字格式
3.2.1 文字字體——face
3.2.2 字號(hào)——size
3.2.3 文字顏色——color
3.2.4 粗體、斜體、下劃線——strong、em、u
3.2.5 上標(biāo)與下標(biāo)——sup、sub
3.2.6 刪除線——strike
3.2.7 等寬文字標(biāo)記——code
3.2.8 空格—— ；
3.2.9 其他特殊符號(hào)
3.3 享有獨(dú)立——段落格式
3.3.1 實(shí)現(xiàn)段落——p
3.3.2 取消文字換行標(biāo)記——nobr
3.3.3 換行標(biāo)記——br
3.3.4 保留原始排版方式標(biāo)記——pre
3.3.5 使文字水平居中——center
3.3.6 文字段落的縮進(jìn)——blockquote
3.4 從頭到尾——水平線標(biāo)記
3.4.1 添加水平線——hr
3.4.2 水平線寬度與高度屬性——width、height
3.4.3 水平線的顏色——color
3.4.4 水平線的對(duì)齊方式——align
3.4.5 去掉水平線陰影——noshade
3.5 其他文字標(biāo)記
3.5.1 文字標(biāo)注標(biāo)記——ruby
3.5.2 聲明變量標(biāo)記——var
3.5.3 忽視HTML標(biāo)簽標(biāo)記——plaintext、xmp
3.6 上機(jī)實(shí)踐
3.6.1 設(shè)置地址文字標(biāo)記
3.6.2 基字標(biāo)記
3.6.3 在文字上方標(biāo)注說(shuō)明標(biāo)記
3.7 小結(jié)
3.8 習(xí)題
第4章 讓珍珠串起來(lái)——列表
視頻講解：33分
4.1 有條不紊——列表標(biāo)記
4.2 欠缺規(guī)范——無(wú)序列表
4.2.1 無(wú)序列表標(biāo)記——ul
4.2.2 無(wú)序列表的類型——type
4.3 井井有條——有序列表
4.3.1 有序列表標(biāo)記——ol
4.3.2 有序列表的類型——type
4.3.3 有序列表的起始數(shù)值——start
4.4 定義列表標(biāo)記——dl
4.5 菜單列表標(biāo)記——menu
4.6 目錄列表——dir
4.7 一層又一層——嵌套列表
4.7.1 定義列表的嵌套
4.7.2 無(wú)序列表和有序列表的嵌套
4.8 上機(jī)實(shí)踐
4.8.1 列表之間的嵌套
4.8.2 定義列表的使用
4.8.3 ol列表的使用
4.9 小結(jié)
4.10 習(xí)題
第5章 在迷宮中尋找出口——超鏈接
視頻講解：21分
5.1 超鏈接
5.2 關(guān)于路徑
5.2.1 絕對(duì)路徑
5.2.2 相對(duì)路徑
5.2.3 根路徑
5.3 從哪里開始，到哪里結(jié)束——超鏈接
5.3.1 如何使用超鏈接標(biāo)記
5.3.2 鏈接到另一個(gè)網(wǎng)頁(yè)
5.3.3 超鏈接的目標(biāo)窗口
5.4 深層挖掘——內(nèi)部鏈接
5.5 查找方便——書簽鏈接
5.5.1 建立書簽
5.5.2 鏈接到同一頁(yè)面的書簽
5.5.3 鏈接到不同頁(yè)面的書簽
5.6 范圍廣泛——外部鏈接
5.6.1 通過(guò)HTTP
5.6.2 通過(guò)FTP
5.6.3 發(fā)送Email
5.6.4 下載文件
5.7 其他鏈接
5.7.1 腳本鏈接
5.7.2 空鏈接
5.8 上機(jī)實(shí)踐
5.8.1 顯示超鏈接的提示信息
5.8.2 設(shè)置圖片的超鏈接
5.9 小結(jié)
5.10 習(xí)題
第6章 如何顯示圖像
視頻講解：33分
6.1 必須知道的圖像格式
6.2 美麗圖像-img
6.3 了解內(nèi)在——圖像屬性
6.3.1 圖像高度——height
6.3.2 圖像寬度——width
6.3.3 圖像邊框——border
6.3.4 圖像水平間距——hspace
6.3.5 圖像垂直間距——vspace
6.3.6 圖像相對(duì)于文字基準(zhǔn)線的對(duì)齊方式——align
6.3.7 圖像的提示文字——alt
6.4 跳轉(zhuǎn)——圖像的超鏈接
6.4.1 圖像的超鏈接
6.4.2 圖像熱區(qū)鏈接
6.5 上機(jī)實(shí)踐
6.5.1 圖像中的提示文字屬性
6.5.2 水平對(duì)齊、垂直對(duì)齊和文本圍繞
6.6 小結(jié)
6.7 習(xí)題
第7章 讓程序聽話——表格的應(yīng)用
視頻講解：47分
7.1 有序顯示數(shù)據(jù)的基礎(chǔ)——表格
7.1.1 表格的基本構(gòu)成——table、tr、td
7.1.2 表格的標(biāo)題——caption
7.1.3 表格的表頭——th
7.2 里面的珍品——表格屬性
7.2.1 表格寬度——width
7.2.2 表格高度——height
7.2.3 表格對(duì)齊方式——align
7.3 圍繞一圈——表格邊框
7.3.1 表格邊框?qū)挾取猙order
7.3.2 表格邊框顏色——bordercolor
7.3.3 內(nèi)框?qū)挾取猚ellspacing
7.3.4 表格內(nèi)文字與邊框間距——cellpadding
7.4 五彩世界——表格背景
7.4.1 表格背景顏色——bgcolor
7.4.2 表格的背景圖像——background
7.5 有效位置——表格行屬性
7.5.1 行高度的設(shè)置——height
7.5.2 行的邊框顏色——bordercolor
7.5.3 行的背景顏色——bgcolor
7.5.4 行文字的水平對(duì)齊方式——align
7.5.5 行文字的垂直對(duì)齊方式——valign
7.5.6 表格標(biāo)題的垂直對(duì)齊方式——align
7.6 深入了解——單元格屬性
7.6.1 單元格大小——width、height
7.6.2 水平跨度——colspan
7.6.3 垂直跨度——rowspan
7.6.4 對(duì)齊方式——align、valign
7.6.5 單元格的背景色——bgcolor
7.6.6 單元格的邊框顏色——bordercolor
7.6.7 單元格的亮邊框——bordercolorlight
7.6.8 單元格的暗邊框——bordercolordark
7.6.9 單元格的背景圖像——background
7.7 完整的表格結(jié)構(gòu)
7.7.1 表格的表首標(biāo)記——thead
7.7.2 表格的表主體標(biāo)記——tbody
7.7.3 表格的表尾標(biāo)記——tfoot
7.8 一層又一層——表格嵌套
7.9 上機(jī)實(shí)踐
7.9.1 表格的內(nèi)部邊框樣式屬性rules
7.9.2 表格的邊框樣式屬性frame
7.10 小結(jié)
7.11 習(xí)題
第二篇 核心技術(shù)篇
第8章 更上一層樓——div標(biāo)記
視頻講解：32分
8.1 折疊在一起——層
8.1.1 層的分類
8.1.2 定義數(shù)據(jù)塊
8.2 獨(dú)占一行——標(biāo)記
8.2.1 標(biāo)記
8.2.2 標(biāo)記的屬性
8.2.3 標(biāo)記與標(biāo)記
8.3 標(biāo)記
8.3.1 標(biāo)記
8.3.2 標(biāo)記的屬性
8.4 標(biāo)記和標(biāo)記
8.4.1 層標(biāo)記的使用
8.4.2 標(biāo)記和標(biāo)記的區(qū)別
8.5 應(yīng)用標(biāo)記制作下拉菜單導(dǎo)航條
8.6 上機(jī)實(shí)踐
8.7 小結(jié)
8.8 習(xí)題
第9章 獲取數(shù)據(jù)——表單頁(yè)面
視頻講解：25分
9.1 什么是表單
9.2 處理頁(yè)面——表單標(biāo)記
9.2.1 處理程序——action
9.2.2 表單名稱——name
9.2.3 傳送方法——method
9.2.4 編碼方式——enctype
9.2.5 目標(biāo)顯示方式——target
9.3 添加控件
9.4 特定屬性——輸入標(biāo)記
9.4.1 文字字段——text
9.4.2 密碼域——password
9.4.3 單選按鈕——radio
9.4.4 復(fù)選框——checkbox
9.4.5 普通按鈕——button
9.4.6 提交按鈕——submit
9.4.7 重置按鈕——reset
9.4.8 圖像域——image
9.4.9 隱藏域——hidden
9.4.10 文件域——file
9.5 菜單列表類標(biāo)記
9.6 文本域標(biāo)記
9.7 標(biāo)記
9.8 上機(jī)實(shí)踐
9.8.1 使用enctype屬性設(shè)置文件上傳
9.8.2 使用特定屬性來(lái)提交表單
9.9 小結(jié)
9.10 習(xí)題
第10章 新穎奇特——多媒體頁(yè)面
視頻講解：18分
10.1 走來(lái)走去——文字的滾動(dòng)
10.1.1 文字滾動(dòng)——marquee
10.1.2 方向滾動(dòng)——direction
10.1.3 方式滾動(dòng)——behavior
10.1.4 速度滾動(dòng)——scrollamount
10.1.5 延遲滾動(dòng)——scrolldelay
10.1.6 循環(huán)滾動(dòng)——loop
10.1.7 范圍滾動(dòng)——width、height
10.1.8 背景顏色滾動(dòng)——bgcolor
10.1.9 空間滾動(dòng)——hspace、vspace
10.2 有聲有色——背景音樂
10.2.1 背景音樂——bgsound
10.2.2 循環(huán)播放次數(shù)——loop
10.3 影像觀看——多媒體文件
10.3.1 多媒體文件標(biāo)記——embed
10.3.2 自動(dòng)運(yùn)行——autostart
10.3.3 媒體文件的循環(huán)播放——loop
10.3.4 隱藏面板——hidden
10.4 上機(jī)實(shí)踐
10.4.1 嵌入flash動(dòng)畫
10.4.2 嵌入Mp3音樂
10.5 小結(jié)
10.6 習(xí)題
第11章 多姿多彩——繪制圖形
視頻講解：84分
11.1 canvas的基礎(chǔ)知識(shí)
11.1.1 canvas是什么
11.1.2 在頁(yè)面中放置canvas元素
11.1.3 繪制帶邊框矩形
11.2 在畫布中使用路徑
11.2.1 使用arc方法繪制圓形
11.2.2 使用moveTo與lineTo路徑繪制火柴人
11.2.3 繪制貝濟(jì)埃曲線
11.3 運(yùn)用樣式與顏色
11.3.1 fillStyle 和 strokeStyle屬性
11.3.2 透明度 globalAlpha
11.3.3 線型的屬性
11.4 繪制漸變圖形
11.4.1 繪制線性漸變
11.4.2 繪制徑向漸變
11.5 繪制變形圖形
11.5.1 坐標(biāo)的變換
11.5.2 矩陣變換
11.6 組合多個(gè)圖形
11.7 給圖形繪制陰影
11.8 應(yīng)用圖像
11.8.1 繪制圖像
11.8.2 圖像的局部放大
11.8.3 圖像平鋪
11.8.4 圖像裁剪
11.8.5 像素的處理
11.9 繪制文字
11.10 保存與恢復(fù)狀態(tài)
11.11 文件的保存
11.12 對(duì)畫布繪制實(shí)現(xiàn)動(dòng)畫
11.13 上機(jī)實(shí)踐
11.13.1 桌面時(shí)鐘
11.13.2 移動(dòng)、縮放、旋轉(zhuǎn)繪制的圖形
11.13.3 使用drawImage方法在畫布中繪制圖像
11.14 小結(jié)
11.15 習(xí)題
第12章 與眾不同——HTML5與HTML
視頻講解：50分
12.1 語(yǔ)法的改變
12.1.1 HTML5的語(yǔ)法變化
12.1.2 HTML5中的標(biāo)記方法
12.1.3 HTML5與之前HTML版本的不一致性
12.1.4 標(biāo)記示例
12.2 新增的元素和廢除的元素
12.2.1 新增的結(jié)構(gòu)元素
12.2.2 新增的塊級(jí)（block）的語(yǔ)義元素
12.2.3 新增的行內(nèi)（inline）的語(yǔ)義元素
12.2.4 新增的嵌入多媒體元素與交互性元素
12.2.5 新增的input元素的類型
12.2.6 廢除的元素
12.3 新增的屬性和廢除的屬性
12.3.1 新增的屬性
12.3.2 廢除的屬性
12.4 全局屬性
12.4.1 contentEditable屬性
12.4.2 designMode屬性
12.4.3 hidden屬性
12.4.4 spellcheck屬性
12.4.5 tabindex屬性
12.5 上機(jī)實(shí)踐
12.5.1 article元素嵌套
12.5.2 section元素
12.5.3 spellcheck屬性的使用
12.6 小結(jié)
12.7 習(xí)題
第13章 一劍封喉的武器——文件與拖放
視頻講解：40分
13.1 選擇文件
13.1.1 通過(guò)file對(duì)象選擇文件
13.1.2 使用Blob接口獲取文件的類型與大小
13.1.3 通過(guò)類型過(guò)濾選擇的文件
13.2 使用FileReader接口讀取文件
13.2.1 檢測(cè)瀏覽器對(duì)FileReader接口
13.2.2 FileReader接口的方法
13.2.3 使用 readAsDataURL方法預(yù)覽圖片
13.2.4 使用 readAsText方法讀取文本文件
13.2.5 FileReader接口中的事件
13.3 拖放API
13.3.1 實(shí)現(xiàn)拖放的步驟
13.3.2 通過(guò)拖放顯示歡迎信息
13.4 dataTransfer對(duì)象應(yīng)用詳解
13.4.1 使用effectAllowed和dropEffect屬性設(shè)置拖放效果
13.4.2 使用setDragImage方法設(shè)置拖放圖標(biāo)
13.5 上機(jī)實(shí)踐
13.5.1 使用JavaScript實(shí)現(xiàn)元素拖放
13.5.2 使用拖放API將商品拖入購(gòu)物車
13.5.3 元素在拖放過(guò)程中觸發(fā)的事件
13.6 小結(jié)
13.7 習(xí)題
第14章 另一個(gè)世界——多媒體播放
視頻講解：36分
14.1 HTML5多媒體的簡(jiǎn)述
14.1.1 HTML4中多媒體的應(yīng)用
14.1.2 HTML5頁(yè)面中的多媒體
14.2 多媒體元素基本屬性
14.3 多媒體元素常用方法
14.3.1 媒體播放時(shí)的方法
14.3.2 canPlayType方法
14.4 多媒體元素重要事件
14.4.1 事件處理方式
14.4.2 事件介紹
14.4.3 事件示例
14.5 上機(jī)實(shí)踐
14.5.1 自定義video元素控制條工具欄
14.5.2 video元素的error屬性的返回值
14.5.3 通過(guò)timeupdate事件顯示媒體文件播放時(shí)間
14.6 小結(jié)
14.7 習(xí)題
第三篇 高級(jí)應(yīng)用篇
第15章 瘋狂HTML5——表單
視頻講解：48分
15.1 新增元素與屬性
15.1.1 新增的屬性
15.1.2 增加與改良的input元素的種類
15.1.3 output元素的添加
15.1.4 應(yīng)用新增元素制作注冊(cè)表單
15.2 對(duì)表單的驗(yàn)證
15.2.1 自動(dòng)驗(yàn)證
15.2.2 checkValidity顯式驗(yàn)證法
15.2.3 避免驗(yàn)證
15.2.4 使用setCustomValidity方法自定義錯(cuò)誤信息
15.3 增加的頁(yè)面元素
15.3.1 新增的figure元素與figcaption元素
15.3.2 新增的details元素
15.3.3 新增的mark元素
15.3.4 新增的progress元素
15.3.5 新增的meter元素
15.3.6 改良的ol列表
15.3.7 改良的dl列表
15.3.8 加以嚴(yán)格限制的cite元素
15.3.9 重新定義的small元素
15.4 上機(jī)實(shí)踐
15.4.1 search搜索類型的input元素
15.4.2 range類型的input元素
15.5 小結(jié)
15.6 習(xí)題
第16章 劃時(shí)代的Web API
視頻講解：49分
16.1 初識(shí)Web Storage
16.1.1 Web Storage是什么
16.1.2 使用Web Storage中的API
16.1.3 sessionStorage和localStorage的實(shí)例——計(jì)數(shù)器
16.1.4 Web Storage綜合實(shí)例——留言本
16.1.5 JSON對(duì)象的存數(shù)實(shí)例——用戶信息卡
16.2 本地?cái)?shù)據(jù)庫(kù)
16.2.1 Web SQL數(shù)據(jù)庫(kù)簡(jiǎn)介
16.2.2 使用Web SQL Database API
16.3 跨文檔消息通信
16.3.1 使用postMessage API
16.3.2 跨域通信
16.4 上機(jī)實(shí)踐
16.5 小結(jié)
16.6 習(xí)題
第17章 齊頭并進(jìn)——Web Worker處理線程
視頻講解：21分
17.1 Web Worker概貌
17.1.1 創(chuàng)建和使用Worker
17.1.2 Web Worker應(yīng)用實(shí)例——求和運(yùn)算
17.2 在Worker內(nèi)部能做什么
17.3 多個(gè)JavaScript文件的加載與執(zhí)行
17.4 線程嵌套
17.4.1 單層嵌套
17.4.2 在多個(gè)子線程之間進(jìn)行數(shù)據(jù)的交互
17.5 上機(jī)實(shí)踐
17.5.1 使用線程傳遞JSON對(duì)象
17.5.2 使用線程嵌套交互數(shù)據(jù)
17.6 小結(jié)
17.7 習(xí)題
第18章 不勞而獲——離線應(yīng)用程序
視頻講解：13分
18.1 HTML5離線Web應(yīng)用概述
18.1.1 離線Web應(yīng)用概述
18.1.2 本地緩存與瀏覽器網(wǎng)頁(yè)緩存的區(qū)別
18.2 創(chuàng)建HTML5離線應(yīng)用
18.2.1 緩存清單（manifest）
18.2.2 配置IIS服務(wù)器
18.2.3 瀏覽manifest清單
18.3 瀏覽器與服務(wù)器的交互過(guò)程
18.4？applicationCache對(duì)象
18.4.1 swapCache方法
18.4.2 applicationCache對(duì)象的事件
18.5 上機(jī)實(shí)踐
18.5.1 簡(jiǎn)單離線應(yīng)用
18.5.2 離線留言數(shù)據(jù)交互
18.6 小結(jié)
18.7 習(xí)題
第19章 獲取地理位置信息
視頻講解：12分
19.1 Geolocation API的概述
19.1.1 使用getCurrentPosition獲取當(dāng)前地理位置
19.1.2 持續(xù)監(jiān)視當(dāng)前地理位置的信息
19.1.3 停止獲取當(dāng)前用戶的地理位置信息
19.2 position對(duì)象
19.3 在頁(yè)面上使用Google地圖
19.4 上機(jī)實(shí)踐
19.4.1 獲取地理位置定位
19.4.2 用HTML5開發(fā)地理位置定位地圖
19.5 小結(jié)
19.6 習(xí)題
第四篇 項(xiàng)目實(shí)戰(zhàn)篇
第20章 旅游信息網(wǎng)前臺(tái)頁(yè)
視頻講解：23分
20.1 需求分析
20.2 系統(tǒng)設(shè)計(jì)
20.2.1 系統(tǒng)目標(biāo)
20.2.2 網(wǎng)站預(yù)覽
20.3 系統(tǒng)開發(fā)及運(yùn)行環(huán)境
20.4 關(guān)鍵技術(shù)
20.4.1 網(wǎng)站主體結(jié)構(gòu)設(shè)計(jì)
20.4.2 HTML5結(jié)構(gòu)元素的使用
20.5 網(wǎng)站公共部分設(shè)計(jì)
20.5.1 設(shè)計(jì)網(wǎng)站公共header
20.5.2 設(shè)計(jì)網(wǎng)站公共footer
20.6 網(wǎng)站主頁(yè)設(shè)計(jì)
20.6.1 顯示網(wǎng)站介紹及相關(guān)圖片
20.6.2 主頁(yè)左側(cè)導(dǎo)航的實(shí)現(xiàn)
20.7 “留下足跡”頁(yè)設(shè)計(jì)
20.7.1 播放音樂
20.7.2 添加留言功能的實(shí)現(xiàn)
20.8 小結(jié)