內容簡介
《HTML5+CSS3 從入門到精通(微課精編版)》從初學者角度出發,通過通俗易懂的語言、豐富多彩的實例,詳細介紹了HTML5+CSS3 前端開發技術及其套用。本書共25 章,包括HTML5 基礎、HTML5 新增元素和文檔結構、HTML5 表單、HTML5 繪圖和動畫、HTML5 音頻和視頻、數據存儲、應用程式快取、多執行緒編程、位置信息、歷史記錄、檔案操作、HTML5 通信、WebRTC 視頻直播、跨視窗操作、拖放操作、異步互動、延遲處理、HTML5 其他API、CSS3 基礎、CSS3 文本樣式、CSS3 背景圖像和漸變背景、CSS3 用戶接口樣式、CSS3 伸縮盒布局、CSS3 動畫、CSS3 媒體查詢等內容。書中所有知識都結合具體實例進行介紹,代碼注釋詳盡,讀者可輕鬆掌握前端技術精髓,提升實際開發能力。
圖書目錄
第1 章 HTML5 基礎
視頻講解:31 分鐘
1.1 HTML5 概述
1.1.1 HTML 版本概覽
1.1.2 HTML5 誕生記
1.1.3 HTML5 組織
1.1.4 HTML5 開發規則
1.1.5 HTML5 特性
1.1.6 瀏覽器檢測
1.2 HTML5 設計原則
1.2.1 避免不必要的複雜性
1.2.2 支持已有內容
1.2.3 解決實際問題
1.2.4 用戶怎么使用就怎么設計規範
1.2.5 優雅地降級
1.2.6 支持的優先權
1.3 HTML5 語法特性
1.3.1 文檔和標記
1.3.2 寬鬆的約定
1.4 案例實戰
1.4.1 編寫第一個HTML5 文檔
1.4.2 比較HTML4 與HTML5文檔結構
1.4.3 設計一個較詳細的HTML5文檔模板
1.5 HTML5 API
1.5.1 新增的API
1.5.2 修改的API
1.5.3 擴展Document
1.5.4 擴展HTMLElement
1.5.5 擴展DOM HTML
1.5.6 棄用的API
1.6 線上練習
第2 章 HTML5 新增元素和文檔結構
視頻講解:82 分鐘
2.1 HTML5 元素
2.1.1 新元素分類
2.1.2 廢除的元素
2.2 設計新的文檔結構
2.2.1 article—文章塊
2.2.2 section—區塊
2.2.3 nav——導航條
2.2.4 aside——輔助欄
2.2.5 main—主要區域
2.2.6 header——標題欄
2.2.7 hgroup——標題組
2.2.8 footer——頁腳欄
2.3 設計新的語義信息
2.3.1 address——聯繫信息
2.3.2 time——顯示時間
2.3.3 figure 和figcaption——流媒體
2.3.4 details 和summary——詳細內容
2.3.5 mark——記號文本
2.3.6 progress——進度條
2.3.7 meter——度量
2.3.8 dialog——模態對話框
2.3.9 bdi——隔離文本
2.3.10 wbr——換行斷點
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——小號字型
2.4.6 iframe——浮動框架
2.4.7 script——腳本
2.5 HTML5 新的全局屬性
2.5.1 contentEditable——可編輯內容
2.5.2 contextmenu——快捷選單
2.5.3 data——自定義屬性
2.5.4 draggable——可拖動
2.5.5 dropzone——拖動數據
2.5.6 hidden——隱藏
2.5.7 spellcheck——語法檢查
2.5.8 translate——可翻譯
2.6 HTML5 文檔大綱
2.6.1 定義文檔節段
2.6.2 隱式分節
2.6.3 特殊分節
2.7 案例實戰
2.8 線上練習
第3 章 HTML5 表單
視頻講解:49 分鐘
3.1 HTML5 表單特性
3.2 新的Input 類型
3.2.1 email——Email 地址框
3.2.2 url——URL 地址框
3.2.3 number——數字框
3.2.4 range——範圍框
3.2.5 date pickers——日期選擇器
3.2.6 search——搜尋框
3.2.7 tel——電話號碼框
3.2.8 color——拾色器
3.3 新的input 屬性
3.3.1 autocomplete——自動完成
3.3.2 autofocus——自動獲取焦點
3.3.3 form——歸屬表單
3.3.4 表單重寫
3.3.5 height 和width——高和寬
3.3.6 list——列表選項
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——數據列表
3.4.2 keygen——密鑰對生成器
3.4.3 output——輸出結果
3.5 新的form 屬性
3.5.1 autocomplete——自動完成 .
3.5.2 novalidate——禁止驗證
3.6 案例實戰
3.6.1 設計HTML5 註冊表單
3.6.2 設計HTML5 驗證表單
3.7 線上練習
第4 章 HTML5 繪圖和動畫
視頻講解: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 實線
4.3.4 虛線
4.3.5 線性漸變
4.3.6 徑向漸變
4.3.7 圖案
4.3.8 陰影
4.3.9 填充規則
4.4 圖形變形
4.4.1 保存和恢復狀態
4.4.2 清除畫布
4.4.3 移動坐標
4.4.4 旋轉坐標
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 導入圖像
4.7.2 縮放圖像
4.7.3 裁切圖像
4.7.4 平鋪圖像
4.8 像素操作
4.8.1 認識ImageData 對象
4.8.2 創建圖像數據
4.8.3 將圖像數據寫入畫布
4.8.4 在畫布中複製圖像數據
4.8.5 保存圖片
4.9 Path2D 對象
4.9.1 Canvas 2D API 新功能
4.9.2 使用Path2D 對象
4.10 案例實戰
4.10.1 設計基本動畫
4.10.2 顏色選擇器
4.10.3 給圖像去色
4.10.5 設計運動動畫
4.10.6 設計地球和月球公轉動畫
4.11 線上練習
第5 章 HTML5 音頻和視頻
視頻講解:50 分鐘
5.1 使用HTML 5 音頻和視頻
5.1.1 使用<audio>
5.1.2 使用<video>
5.1.3 設定屬性
5.1.4 設定方法
5.1.5 設定事件
5.2 案例實戰
5.2.1 設計音樂播放器
5.2.2 獲取播放進度
5.2.3 設計視頻播放器
5.2.4 視頻自動截圖
5.2.5 視頻同步字幕
5.2.6 使用HTML5 Web Audio API增加聲音
5.2.7 訪問多媒體屬性、方法和事件
5.3 線上練習
第6 章 數據存儲
視頻講解:68 分鐘
6.1 Web Storage
6.1.1 使用Web Storage
6.1.2 案例:設計登錄頁
6.1.3 案例:流量統計
6.2 Web SQL Database
6.2.1 使用Web SQL Database
6.2.2 案例:設計登錄頁
6.2.3 案例:設計留言板
6.3 indexedDB
6.3.1 建立連線
6.3.2 更新版本
6.3.3 新建倉庫
6.3.4 新建索引
6.3.5 使用事務
6.3.6 保存數據
6.3.7 訪問數據
6.3.8 訪問鍵值
6.3.9 訪問屬性
6.4 案例:設計錄入表單
6.5 線上練習
第7 章 應用程式快取
視頻講解:19 分鐘
7.1 ApplicationCache API 基礎
7.1.1 認識ApplicationCache API
7.1.3 認識manifest
7.1.4 使用ApplicationCache
7.1.5 事件監聽
7.2 案例實戰
7.2.1 快取首頁
7.2.2 離線編輯
7.3 線上練習
第8 章 多執行緒編程
視頻講解:23 分鐘
8.1 Web Workers 基礎
8.1.1 認識Web Workers
8.1.2 創建Web Workers
8.1.3 Workers 通信
8.1.4 使用Web Workers
8.2 案例實戰
8.2.1 求和運算
8.2.2 過濾運算
8.2.3 並發運算
8.2.4 多運算通信
8.2.5 數列運算
8.3 線上練習
第9 章 位置信息
視頻講解:2 分鐘
9.1 Geolocation API 基礎
9.1.1 Geolocation API 套用場景 .
9.1.2 位置信息來源
9.1.3 位置信息表示方式
9.1.4 獲取位置信息
9.1.6 監測位置信息
9.1.7 停止獲取位置信息
9.1.8 保護隱私
9.1.9 處理位置信息
9.1.10 使用position
9.2 案例:設計位置地圖
9.3 線上練習
第10 章 歷史記錄
視頻講解:26 分鐘
10.1 History API 基礎
10.1.1 了解History API
10.1.2 使用History API
10.1.3 注意事項
10.2 案例實戰
10.2.1 設計導航頁面
10.2.2 設計無刷新網站
10.2.4 設計可後退畫板
10.3 線上練習
第11 章 檔案操作
視頻講解:84 分鐘
11.1 FileList
11.2 Blob
11.2.1 訪問Blob
11.2.2 創建Blob
11.2.3 截取Blob
11.2.4 保存Blob
11.3 FileReader
11.3.1 讀取檔案
11.3.2 事件監測
11.4 ArrayBuffer 和ArrayBufferView
11.4.1 使用ArrayBuffer
11.4.2 使用ArrayBufferView
11.4.3 使用DataView
11.5 FileSystem API
11.5.1 認識FileSystem API
11.5.2 訪問FileSystem
11.5.3 申請配額
11.5.4 新建檔案
11.5.5 寫入數據
11.5.6 添加數據
11.5.7 讀取數據
11.5.8 複製檔案
11.5.9 刪除檔案
11.5.10 創建
11.5.11 讀取
11.5.12 刪除
11.5.13 複製
11.5.14 重命名
11.5.15 使用filesystem:URL
11.6 案例:設計資源管理器
11.7 線上練習
第12 章 HTML5 通信
視頻講解:21 分鐘
12.1 跨文檔訊息傳遞
12.1.1 postMessage 基礎
12.1.2 案例:設計簡單的跨域通話
12.1.3 案例:設計跨域動態對話
12.1.4 案例:設計通道通信
12.2 WebSockets 通信
12.2.1 WebSocket 基礎
12.2.2 使用WebSockets API
12.2.3 在PHP 中建立socket
12.2.4 WebSockets API 開發框架
12.2.5 案例:設計簡單的“呼-應”通信
12.2.6 案例:傳送JSON 對象
12.2.7 案例:使用Workerman
框架通信
12.2.8 案例:推送信息
12.3 線上練習
第13 章 WebRTC 視頻直播
13.1 WebRTC 基礎
13.2 案例實戰
13.2.1 訪問本地設備
13.2.2 視頻截圖
13.2.3 視頻對話基礎
13.2.4 視頻對話實現
13.2.5 SDP 交換
13.2.6 ICE 交換
13.3 線上練習
第14 章 跨視窗操作
視頻講解:23 分鐘
14.1 通知API
14.1.1 Notification API 基礎
14.1.2 案例:設計桌面通知
14.1.3 案例:關閉通知
14.1.4 案例:設計多條通知
14.2 頁面可見API
14.2.1 Page Visibility 基礎
14.2.2 案例:設計視頻頁面
14.2.3 案例:設計登錄頁面
14.3 全螢幕API
14.3.1 Fullscreen API 基礎
14.3.2 案例:設計全螢幕顯示
14.3.3 案例:設計全螢幕播放
14.4 線上練習
第15 章 拖放操作
視頻講解:19 分鐘
15.1 拖放API 基礎
15.1.1 拖放功能實現
15.1.2 DataTransfer 對象
15.2 案例實戰
15.2.1 設計垃圾箱
15.2.2 設計接納箱
15.2.3 拖選對象
15.2.4 可視化刪除
15.3 線上練習
第16 章 異步互動
視頻講解:21 分鐘
16.1 XMLHttpRequest 2 基礎
16.1.1 請求時限
16.1.2 FormData 數據對象
16.1.3 上傳檔案
16.1.4 跨域訪問
16.1.5 回響不同類型數據
16.1.6 接收二進制數據
16.1.7 監測數據傳輸進度
16.2 案例實戰
16.2.1 接收ArrayBuffer 對象
16.2.2 接收Blob 對象
16.2.3 傳送字元串
16.2.4 傳送表單數據
16.2.5 傳送二進制檔案
16.2.6 傳送Blob 對象
16.2.7 跨域請求
16.2.8 設計檔案上傳進度條
16.3 線上練習
第17 章 延遲處理
視頻講解:18 分鐘
17.1 延遲處理基礎
17.1.1 從回調函式到異步佇列
17.1.2 使用promise 對象
17.2 案例實戰
17.2.1 佇列操作
17.2.2 異常處理
17.2.3 創建序列
17.2.4 並行處理
17.3 線上練習
第18 章 HTML5 其他API
視頻講解:12 分鐘
18.1 指針鎖定API
18.1.1 認識滑鼠指針鎖定API
18.1.2 案例:設計全螢幕滑鼠
指針鎖定
18.2 requestAnimationFrame
18.2.1 認識requestAnimFrame
18.2.2 案例:設計進度條
18.2.3 案例:設計旋轉的小球
18.3 Mutation Observer
18.3.1 認識Mutation Observer
18.3.2 案例:觀察DOM 元素
18.3.3 案例:觀察DOM 屬性
18.4 線上練習
第19 章 CSS3 基礎
視頻講解:33 分鐘
19.1 CSS3 概述
19.2 CSS3 選擇器概述
19.3 使用CSS3 選擇器
19.4 案例實戰
19.5 線上練習
第20 章 CSS3 文本樣式
視頻講解:74 分鐘
20.1 CSS3 文本模組
20.2 色彩模式
20.3 文本陰影
20.4 內容生成和替換
20.5 網路字型
20.6 案例實戰
20.7 線上練習
第21 章 CSS3 背景圖像和漸變背景
視頻講解:51 分鐘
21.1 設計背景圖像
21.2 設計漸變背景
21.3 案例實戰
21.4 線上練習
第22 章 CSS3 用戶接口樣式
視頻講解:36 分鐘
22.1 界面顯示
22.2 輪廓樣式
22.3 框線樣式
22.4 盒子陰影
22.5 案例實戰
22.6 線上練習
第23 章 CSS3 伸縮盒布局
視頻講解:32 分鐘
23.1 多列布局
23.2 舊版伸縮盒
23.3 新版伸縮盒
23.4 伸縮盒版本比較和兼容
23.5 線上練習
第24 章 CSS3 動畫
視頻講解:64 分鐘
24.1 CSS3 變形
24.2 過渡動畫
24.3 幀動畫
24.4 案例實戰
24.5 線上練習
第25 章 CSS3 媒體查詢
視頻講解:21 分鐘
25.1 媒體查詢基礎
25.2 案例實戰
25.3 線上練習