HTML5煉成記：Web前端開發(fā)12堂必修課（HTML5+CSS3+JavaScript）

Chapter 01一起來學HTML 5 Warming Up    HTML 5能做什么 Section 01         更強大的元素       01 一起來畫圖 02 一個實用的表單 03 路癡的救星 04 讓圖片可以拖拽 Section 02         更精美的樣式       01 漂亮的文字 02 炫酷的圖片 03 設置動畫效果 04 自適應網頁 Section 03         更炫酷的特效       01 banner是怎樣制作的 02 消息的提示框 Test 課后作業(yè)          Chapter 02網頁繪圖如此有趣 Warming Up    強大的canvas       Section 01         潛心修行canvas  01 圓形表盤 Try it 制作圓形表盤       02 分針、時針和秒針 Try it 制作表針       03 時間刻度線 Try it 制作時間刻度線  04 看看幾點了 Try it 計時開始       Section 02         圖像好看的樣式  01 讓圖片更加高級 Try it 修飾圖片       02 觀看圖片的局部 Try it 圖片的局部顯示  03 給圖片添加“蒙版” Try it 微信聊天框效果  04 圖片的立體顯示 Try it 圖片的陰影效果  Try it 文字、邊框、圖片的陰影效果  Section 03         圖形的各種效果  01 螺旋形旋轉 Try it 螺旋旋轉圖形       02 兩種漸變設置 Try it 圖形的漸變設置  03 當圖形重疊時 Try it 組合圖形的繪制  Test 課后作業(yè)          Chapter 03生成漂亮的表單 Warming Up    怎樣讓表單變漂亮       Section 01         一起制作表單       01 改變傳統(tǒng)登錄方式 Try it 制作一個登錄表單       02 注冊簡潔大方型表單 Try it 制作簡潔的注冊型表單       Section 02         多姿多彩的表單  01 年月日的出現(xiàn) Warming Up    怎樣讓表單變漂亮       Section 01         一起制作表單       01 改變傳統(tǒng)登錄方式 Try it 制作一個登錄表單       02 注冊簡潔大方型表單 Try it 制作簡潔的注冊型表單       Section 02         多姿多彩的表單  01 年月日的出現(xiàn)   Chapter 04播放器的打開姿勢 Warming Up    網頁播放器  Section 01         看視頻聽音樂之前       01 了解瀏覽器支持情況 02 測試瀏覽器 Try it 親測瀏覽器是否支持  Try it 嵌入插件作為備選解決不支持  Section 02         享受視聽盛宴       01 沉浸在音樂的海洋 Try it 制作音樂播放器  02 打開視頻的正確方式 Try it 制作視頻播放器  03 了解播放器中的方法 Test 課后作業(yè)          Chapter 05定位自己的位置 Warming Up    一起學習定位知識       Section 01         有導航不迷路       01 學習經緯度知識 02 IP地址定位數(shù)據(jù) 03 GPS地理定位 Section 02         開始定位       01 獲取地理位置 Try it 獲取當前的地理位置  02 瀏覽器的支持情況 Try it 測試瀏覽器支持情況  Section 03         找到自己       01 保護用戶的隱私 02 調用地圖接口 Try it 調用谷歌地圖       03 顯示你的位置 Try it 定位自己的位置  Test 課后作業(yè)          Chapter 06 實用的上傳方式   Warming Up    拖拽上傳的應用  Section 01         調整圖片位置       01 實現(xiàn)拖放的步驟 02 實現(xiàn)拖拽的方法 Section 02         拖放操作       01 拖放應用 Try it 簡單的拖放操作       02 拖放列表 Try it 制作拖放列表       03 拖拽上傳文件 Try it 附件的拖拽上傳  Section 03         離線知識       01 支持離線行為 Try it 演示網頁是否在線       02 檢測瀏覽器支持與否 Try it 檢測瀏覽器是否支持  03 Web Workers的簡單應用 Test 課后作業(yè)          Chapter 07開啟樣式的大門 Warming Up    讓網頁多姿多彩  Section 01         給樣式作修飾       01 選擇元素進行樣式設置 Try it 需要重點標注的句子  02 設置一類元素的樣式 Try it 給所有元素設置相同樣式  Try it 使用什么方法能制作出相同的效 03 屬性也可以設置樣式 Try it 設置其中一張圖片的屬性  Section 02         選擇性地修飾       01 新版本與舊版本的比較 02 讓設計更高級 Try it 單擊鏈接發(fā)生顏色變化       Try it 設置多彩的輸入框       Try it 單擊時按鈕顏色發(fā)生變化  03 結構性偽類的用法 Try it 變化的字體顏色  04 偽類選擇器 Try it 給句詩添加背景顏色  Try it 設置首字母的大小寫  Try it 運用其他方法做出圖片效果       Test 課后作業(yè)          Chapter 08網頁中的“動畫片” Warming Up    怎樣讓元素動起來       Section 01         過渡知識       01 與用戶的互動 Try it 讓元素不再呆板  02 變化出更多樣式 Try it 多種變化效果       03 模擬DOCK的縮放特效 Try it 制作一個有導航的電腦桌面       Section 02         實現(xiàn)動畫       01 動起來的關鍵 Try it 一起蕩秋千  02 制作旋轉的圈圈 Try it 制作loading圖標 Try it 制作loading進度條     03 使用放大鏡查看 Try it 使用放大鏡查看圖片  Test 課后作業(yè)          Chapter 09讓瀏覽更輕松 Warming Up    三站合一       Section 01         自適應效果  01 多媒體查詢能做什么 02 窗口大小控制顏色 Try it 網頁背景隨瀏覽器大小改變而改變  03 自適應導航欄 Try it 制作流行的網頁導航欄       Section 02         與用戶的互動       01 制作一張電子報紙 Try it 多列布局的用法  02 Photoshop中的濾鏡效果 Try it ps一張美女圖片   03 修飾圖片 Try it 修飾圖片的輪廓  04 開關按鈕樣式 Try it 用簡單的方法制作按鈕  Test 課后作業(yè)          Chapter 10重要的網頁元素 Warming Up    變花樣的文字和邊框  Section 01         文字讓網頁更突出       01 文字的陰影效果 Try it 讓文字顯得立體  Try it 用陰影增加前景色與背景色的對比 02 更多的文字效果 Try it 制作更多文字效果       03 文本溢出的設置 Try it 制作文本的溢出效果  04 英文單詞的換行 Try it 長單詞的換行       Try it 拆分單詞       Section 02         顏色讓網頁更好看       01 多變的顏色 Try it 制作顏色漸變       Try it 制作一顆閃閃的星星  02 色彩的模式 Try it 制作一個HsL顏色模式表   03 擴展的色彩模式 Try it 制作顏色的不透明度  Section 03 動作讓網頁更高級      01 圖片的3D旋轉 Try it 制作圖片的3D旋轉    02 高級圖標 Try it 制作扁平化的圖標       Test 課后作業(yè)          Chapter11特效是用什么做的 Warming Up    Javascript怎樣嵌入      Section 01         流行的網頁樣式  01 JavaScript的作用 02 JavaScript的特點 03 JavaScript的應用 Try it 單擊按鈕出現(xiàn)文字       Section 02         炫酷特效的前提  01 掌握一些類型 02 了解一些語句 Try it 單擊按鈕出現(xiàn)問候語  Try it 用時間點來設置問候語       Try it 讓代碼循環(huán)計算5次   Try it 一直循環(huán)代碼 03 應用哪些事件 04 事件的句柄 05 怎樣處理事件 Test 課后作業(yè)          Chapter12炫酷效果應用方向 Warming Up    怎樣制作滾動banner  Section 01         這個函數(shù)不一樣  01 函數(shù)定義 Try it 單擊按鈕顯示“你好”       Try it 單擊按鈕出現(xiàn)歡迎詞  Try it 制作一個計算器  02 函數(shù)參數(shù) Try it 給參數(shù)設置默認值       Try it 設置查找值的函數(shù)       03 函數(shù)調用 Section 02         表單中的應用 01 按鈕對象 Try it 設置表單的按鈕對象  02 復選框對象 Try it 可以全選的復選框       03 列表框對象 Try it 設置列表框對象  04 增加列表框 Try it 與用戶的互動效果       05 表單中的時間 Try it 調用時間       Section 03 網頁中的應用      01 輪播圖效果 Try it 制作一個網頁的輪播圖       02 字體閃爍效果 Try it 制作文字的閃爍效果  03 鼠標滑過效果 Try it 制作鼠標滑過圖片的震動效果  Section 04         網頁中的特效       01 顯示網頁停留時間 Try it 顯示所在網頁停留的時間  02 制作定時關閉窗口 Try it 讓窗口在設定好的時間自動關閉       Test 課后作業(yè)