HTML5+CSS3從入門到精通（微課精編版）

第1 章 HTML5 基礎(chǔ) 

視頻講解：31 分鐘

1.1 HTML5 概述 

1.1.1 HTML 版本概覽 

1.1.2 HTML5 誕生記 

1.1.3 HTML5 組織 

1.1.4 HTML5 開發(fā)規(guī)則 

1.1.5 HTML5 特性 

1.1.6 瀏覽器檢測 

1.2 HTML5 設(shè)計(jì)原則 

1.2.1 避免不必要的復(fù)雜性 

1.2.2 支持已有內(nèi)容 

1.2.3 解決實(shí)際問題 

1.2.4 用戶怎么使用就怎么設(shè)計(jì)規(guī)范

1.2.5 優(yōu)雅地降級(jí) 

1.2.6 支持的優(yōu)先級(jí) 

1.3 HTML5 語法特性 

1.3.1 文檔和標(biāo)記 

1.3.2 寬松的約定 

1.4 案例實(shí)戰(zhàn) 

1.4.1 編寫第一個(gè)HTML5 文檔 

1.4.2 比較HTML4 與HTML5文檔結(jié)構(gòu) 

1.4.3 設(shè)計(jì)一個(gè)較詳細(xì)的HTML5文檔模板 

1.5 HTML5 API 

1.5.1 新增的API 

1.5.2 修改的API 

1.5.3 擴(kuò)展Document 

1.5.4 擴(kuò)展HTMLElement 

1.5.5 擴(kuò)展DOM HTML 

1.5.6 棄用的API 

1.6 在線練習(xí) 

第2 章 HTML5 新增元素和文檔結(jié)構(gòu) 

視頻講解：82 分鐘

2.1 HTML5 元素 

2.1.1 新元素分類 

2.1.2 廢除的元素 

2.2 設(shè)計(jì)新的文檔結(jié)構(gòu) 

2.2.1 article—文章塊 

2.2.2 section—區(qū)塊 

2.2.3 nav——導(dǎo)航條 

2.2.4 aside——輔助欄 

2.2.5 main—主要區(qū)域 

2.2.6 header——標(biāo)題欄 

2.2.7 hgroup——標(biāo)題組 

2.2.8 footer——頁腳欄 

2.3 設(shè)計(jì)新的語義信息 

2.3.1 address——聯(lián)系信息 

2.3.2 time——顯示時(shí)間 

2.3.3 figure 和figcaption——流媒體

2.3.4 details 和summary——詳細(xì)內(nèi)容 

2.3.5 mark——記號(hào)文本 

2.3.6 progress——進(jìn)度條 

2.3.7 meter——度量 

2.3.8 dialog——模態(tài)對(duì)話框 

2.3.9 bdi——隔離文本 

2.3.10 wbr——換行斷點(diǎn) 

2.3.11 ruby、rt、rp——文本注釋 

2.3.12 command——菜單命令 

2.4 完善舊元素 

2.4.1 a——超鏈接 

2.4.2 ol——有序列表 

2.4.3 dl——定義列表 

2.4.4 cite——引用文本 

2.4.5 small——小號(hào)字體 

2.4.6 iframe——浮動(dòng)框架 

2.4.7 script——腳本 

2.5 HTML5 新的全局屬性 

2.5.1 contentEditable——可編輯內(nèi)容

2.5.2 contextmenu——快捷菜單 

2.5.3 data——自定義屬性 

2.5.4 draggable——可拖動(dòng) 

2.5.5 dropzone——拖動(dòng)數(shù)據(jù) 

2.5.6 hidden——隱藏 

2.5.7 spellcheck——語法檢查 

2.5.8 translate——可翻譯 

2.6 HTML5 文檔大綱 

2.6.1 定義文檔節(jié)段 

2.6.2 隱式分節(jié) 

2.6.3 特殊分節(jié) 

2.7 案例實(shí)戰(zhàn) 

2.8 在線練習(xí) 

第3 章 HTML5 表單 

視頻講解：49 分鐘

3.1 HTML5 表單特性 

3.2 新的Input 類型

3.2.1 email——Email 地址框 

3.2.2 url——URL 地址框

3.2.3 number——數(shù)字框 

3.2.4 range——范圍框 

3.2.5 date pickers——日期選擇器 

3.2.6 search——搜索框 

3.2.7 tel——電話號(hào)碼框 

3.2.8 color——拾色器 

3.3 新的input 屬性 

3.3.1 autocomplete——自動(dòng)完成 

3.3.2 autofocus——自動(dòng)獲取焦點(diǎn) 

3.3.3 form——?dú)w屬表單 

3.3.4 表單重寫 

3.3.5 height 和width——高和寬 

3.3.6 list——列表選項(xiàng) 

3.3.7 min、max 和step——最小值、最大值和步長

3.3.8 multiple——多選 

3.3.9 pattern——匹配模式 

3.3.10 placeholder——替換文本 

3.3.11 required——必填 

3.4 新的表單元素 

3.4.1 datalist——數(shù)據(jù)列表 

3.4.2 keygen——密鑰對(duì)生成器 

3.4.3 output——輸出結(jié)果 

3.5 新的form 屬性 

3.5.1 autocomplete——自動(dòng)完成 .

3.5.2 novalidate——禁止驗(yàn)證 

3.6 案例實(shí)戰(zhàn) 

3.6.1 設(shè)計(jì)HTML5 注冊(cè)表單 

3.6.2 設(shè)計(jì)HTML5 驗(yàn)證表單 

3.7 在線練習(xí) 

第4 章 HTML5 繪圖和動(dòng)畫 

視頻講解：135 分鐘

4.1 使用canvas 

4.2 繪制圖形 

4.2.1 矩形 

4.2.2 路徑 

4.2.3 直線 

4.2.4 圓弧 

4.2.5 二次方曲線 

4.2.6 三次方曲線 

4.3 定義樣式和顏色 

4.3.1 顏色 

4.3.2 不透明度 

4.3.3 實(shí)線 

4.3.4 虛線 

4.3.5 線性漸變 

4.3.6 徑向漸變 

4.3.7 圖案 

4.3.8 陰影 

4.3.9 填充規(guī)則 

4.4 圖形變形 

4.4.1 保存和恢復(fù)狀態(tài) 

4.4.2 清除畫布 

4.4.3 移動(dòng)坐標(biāo) 

4.4.4 旋轉(zhuǎn)坐標(biāo) 

4.4.5 縮放圖形 

4.4.6 變換圖形 

4.5 圖形合成 

4.5.1 合成 

4.5.2 裁切 

4.6 繪制文本 

4.6.1 填充文字 

4.6.2 輪廓文字 

4.6.3 文本樣式 

4.6.4 測量寬度 

4.7 使用圖像 

4.7.1 導(dǎo)入圖像 

4.7.2 縮放圖像 

4.7.3 裁切圖像 

4.7.4 平鋪圖像 

4.8 像素操作 

4.8.1 認(rèn)識(shí)ImageData 對(duì)象 

4.8.2 創(chuàng)建圖像數(shù)據(jù) 

4.8.3 將圖像數(shù)據(jù)寫入畫布 

4.8.4 在畫布中復(fù)制圖像數(shù)據(jù) 

4.8.5 保存圖片 

4.9 Path2D 對(duì)象 

4.9.1 Canvas 2D API 新功能 

4.9.2 使用Path2D 對(duì)象 

4.10 案例實(shí)戰(zhàn) 

4.10.1 設(shè)計(jì)基本動(dòng)畫 

4.10.2 顏色選擇器 

4.10.3 給圖像去色 

4.10.4 縮放圖像和反鋸齒處理 

4.10.5 設(shè)計(jì)運(yùn)動(dòng)動(dòng)畫 

4.10.6 設(shè)計(jì)地球和月球公轉(zhuǎn)動(dòng)畫

4.11 在線練習(xí) 

第5 章 HTML5 音頻和視頻 

視頻講解：50 分鐘

5.1 使用HTML 5 音頻和視頻 

5.1.1 使用