課程簡介
HTML5代表了Web發(fā)展的方向，是開發(fā)者的未來，是新一代Web技術(shù)的標(biāo)準(zhǔn)。它在最大程度上完成了富Web應(yīng)用的本地化，消除瀏覽器對(duì)插件的依賴；優(yōu)秀的錯(cuò)誤處理系統(tǒng)，使頁面捕獲錯(cuò)誤更加靈活與高效；對(duì)本地離線存儲(chǔ)的更好支持，使開發(fā)Web離線應(yīng)用程序更加方便與快捷；眾多新增的頁面標(biāo)記，將給用戶的視角與交互帶來煥然一新的體驗(yàn)。
本課程以HTML5基礎(chǔ)為主線，先從新增特征講起，然后，通過實(shí)例與理論相結(jié)合的方式，并結(jié)合最新最前沿的框架，深入淺出地介紹了關(guān)于HTML5在Web開發(fā)中方方面面的功能和性能優(yōu)化的技巧。
目標(biāo)收益
? 學(xué)習(xí)HTML5全部的新功能。
? 學(xué)會(huì)如何在Web頁面開發(fā)中運(yùn)用HTML5標(biāo)簽開發(fā)頁面。
? 掌握在頁面中使用HTML5新增的API進(jìn)行功能開發(fā)。
? 了解通過HTML5中的Canvas基本使用功能。
? 理解HTML5中本地?cái)?shù)據(jù)存儲(chǔ)的方法與技巧。
? 掌握最新前沿前端框架的基礎(chǔ)知識(shí)和開發(fā)技巧。
? 了解node和mocha框架的構(gòu)建和應(yīng)用。
培訓(xùn)對(duì)象
1. 正在從事傳統(tǒng)PC端Web頁面的技術(shù)開發(fā)人員
2. 希望從事移動(dòng)端WebApp應(yīng)用開發(fā)的技術(shù)人員
3. 對(duì)前端技術(shù)感興趣，希望從事這方面工作的人員
4. 擁有前端的基礎(chǔ)，希望進(jìn)一步提升技能的開發(fā)人員
課程大綱
| 1. Html5概念與特征 |
1.1 Html5的標(biāo)準(zhǔn)和優(yōu)勢(shì) 1.2 移動(dòng)設(shè)備的支持上更突出 1.3 常見的HTML5新標(biāo)簽與屬性 1.4 新增的表單元素功能解析 |
| 2. 響應(yīng)式設(shè)計(jì)功能與實(shí)戰(zhàn) |
2.1 響應(yīng)式設(shè)計(jì)優(yōu)勢(shì)和功能 2.2 響應(yīng)樣式的兼容性與優(yōu)劣比較 2.3 響應(yīng)樣式實(shí)現(xiàn)的方案 2.4 HTML 5頁中實(shí)現(xiàn)響應(yīng)效果 |
| 3. CSS 3動(dòng)畫與3D特效 |
3.1 文本陰影與圓角邊框 3.2 圖片遮罩效果 3.3 圖片遮罩形成探照燈 3.4 2d基本效果 3.5 3d動(dòng)畫基本效果 3.6 制作過渡動(dòng)畫效果 3.7 過濾動(dòng)畫效果的各種狀態(tài) 3.8 制作3d翻頁效果 |
| 4. SASS 功能與應(yīng)用 |
4.1 什么是SASS 4.2 安裝和使用 4.3 基本用法定義變量、語句 4.4 代碼復(fù)用完成繼承功能 4.5 高級(jí)用法實(shí)現(xiàn)循環(huán)、條件、函數(shù) |
| 5. 本地存儲(chǔ)和數(shù)據(jù)持久方案 |
5.1 Localstorage與SessionStorage 5.2 存儲(chǔ)形式和API調(diào)用 5.3 使用方式和跟蹤用戶行為 5.4 持久快速響應(yīng)數(shù)據(jù)方案 5.5 數(shù)據(jù)離線API功能實(shí)現(xiàn) |
| 6. 地理定位與重力感應(yīng) |
6.1 地理定位功能與API 6.2 找出地圖中的商家信息 6.3 重力感應(yīng)功能與API 6.4 實(shí)現(xiàn)搖一搖和切屏換圖效果 |
| 7. canvas畫布案例實(shí)戰(zhàn) |
7.1 畫布功能和API 7.2 案例——亮視點(diǎn)找不同 7.3 案例——涂抹水漆效果 7.4 案例——圖片合成功能 |
| 8. 前端代碼性能優(yōu)化方案 |
8.1 頁面面臨問題分析 8.2 找到性能解決方案 8.3 頁面加載結(jié)構(gòu)解析 8.4 Sprites圖片技術(shù) 8.5 壓縮與合并文件 8.6 代碼模塊化分級(jí) 8.7 接口請(qǐng)求性能優(yōu)化 |
| 9. node基礎(chǔ)與核心模塊 |
9.1 環(huán)璄構(gòu)建和REPL解析器 9.2 異步調(diào)用 9.3 回調(diào)函數(shù) 9.4 模塊系統(tǒng) |
| 10. socket通訊和聊天室 |
10.1 Socket.IO的功能與使用 10.2 node環(huán)璄下架構(gòu)構(gòu)建服務(wù)端接口 10.3 開發(fā)前端聊天室頁面 10.4 使用socket與服務(wù)器實(shí)現(xiàn)通訊 |
| 11. Angular 8 框架應(yīng)用開發(fā) |
11.1 Angular的簡介 11.2 組件開發(fā)流程 11.3 與服務(wù)端交互 11.4 注意事項(xiàng)與技巧 11.5 案例——電影信息管理網(wǎng)站 |
| 12. React 框架開發(fā)應(yīng)用 |
12.1 環(huán)境搭建方法 12.2 開發(fā)語言介紹 12.3 組件API使用 12.4 與服務(wù)端異步交互 12.5 案例——餐廳點(diǎn)評(píng)信息管理 |
| 13. Vue框架基礎(chǔ)應(yīng)用 |
13.1 腳手架開發(fā)項(xiàng)目 13.2 組件傳值方法 13.3 路由與指令 13.4 與服務(wù)端交互技巧 13.5 開發(fā)注意事項(xiàng) 13.6 案例——小米商城購物網(wǎng)站 |
| 14. 應(yīng)用打包與發(fā)布 |
14.1 webpack 框架介紹 14.2 單頁應(yīng)用打包 14.3 配置文件的編寫 14.4 熱更新和動(dòng)態(tài)導(dǎo)入 |
| 15. 正確理解單元測(cè)試 |
15.1 mocha基礎(chǔ)知識(shí) 15.2 使用語法 15.3 異步測(cè)試 15.4 瀏覽器測(cè)試 |
|
1. Html5概念與特征 1.1 Html5的標(biāo)準(zhǔn)和優(yōu)勢(shì) 1.2 移動(dòng)設(shè)備的支持上更突出 1.3 常見的HTML5新標(biāo)簽與屬性 1.4 新增的表單元素功能解析 |
|
2. 響應(yīng)式設(shè)計(jì)功能與實(shí)戰(zhàn) 2.1 響應(yīng)式設(shè)計(jì)優(yōu)勢(shì)和功能 2.2 響應(yīng)樣式的兼容性與優(yōu)劣比較 2.3 響應(yīng)樣式實(shí)現(xiàn)的方案 2.4 HTML 5頁中實(shí)現(xiàn)響應(yīng)效果 |
|
3. CSS 3動(dòng)畫與3D特效 3.1 文本陰影與圓角邊框 3.2 圖片遮罩效果 3.3 圖片遮罩形成探照燈 3.4 2d基本效果 3.5 3d動(dòng)畫基本效果 3.6 制作過渡動(dòng)畫效果 3.7 過濾動(dòng)畫效果的各種狀態(tài) 3.8 制作3d翻頁效果 |
|
4. SASS 功能與應(yīng)用 4.1 什么是SASS 4.2 安裝和使用 4.3 基本用法定義變量、語句 4.4 代碼復(fù)用完成繼承功能 4.5 高級(jí)用法實(shí)現(xiàn)循環(huán)、條件、函數(shù) |
|
5. 本地存儲(chǔ)和數(shù)據(jù)持久方案 5.1 Localstorage與SessionStorage 5.2 存儲(chǔ)形式和API調(diào)用 5.3 使用方式和跟蹤用戶行為 5.4 持久快速響應(yīng)數(shù)據(jù)方案 5.5 數(shù)據(jù)離線API功能實(shí)現(xiàn) |
|
6. 地理定位與重力感應(yīng) 6.1 地理定位功能與API 6.2 找出地圖中的商家信息 6.3 重力感應(yīng)功能與API 6.4 實(shí)現(xiàn)搖一搖和切屏換圖效果 |
|
7. canvas畫布案例實(shí)戰(zhàn) 7.1 畫布功能和API 7.2 案例——亮視點(diǎn)找不同 7.3 案例——涂抹水漆效果 7.4 案例——圖片合成功能 |
|
8. 前端代碼性能優(yōu)化方案 8.1 頁面面臨問題分析 8.2 找到性能解決方案 8.3 頁面加載結(jié)構(gòu)解析 8.4 Sprites圖片技術(shù) 8.5 壓縮與合并文件 8.6 代碼模塊化分級(jí) 8.7 接口請(qǐng)求性能優(yōu)化 |
|
9. node基礎(chǔ)與核心模塊 9.1 環(huán)璄構(gòu)建和REPL解析器 9.2 異步調(diào)用 9.3 回調(diào)函數(shù) 9.4 模塊系統(tǒng) |
|
10. socket通訊和聊天室 10.1 Socket.IO的功能與使用 10.2 node環(huán)璄下架構(gòu)構(gòu)建服務(wù)端接口 10.3 開發(fā)前端聊天室頁面 10.4 使用socket與服務(wù)器實(shí)現(xiàn)通訊 |
|
11. Angular 8 框架應(yīng)用開發(fā) 11.1 Angular的簡介 11.2 組件開發(fā)流程 11.3 與服務(wù)端交互 11.4 注意事項(xiàng)與技巧 11.5 案例——電影信息管理網(wǎng)站 |
|
12. React 框架開發(fā)應(yīng)用 12.1 環(huán)境搭建方法 12.2 開發(fā)語言介紹 12.3 組件API使用 12.4 與服務(wù)端異步交互 12.5 案例——餐廳點(diǎn)評(píng)信息管理 |
|
13. Vue框架基礎(chǔ)應(yīng)用 13.1 腳手架開發(fā)項(xiàng)目 13.2 組件傳值方法 13.3 路由與指令 13.4 與服務(wù)端交互技巧 13.5 開發(fā)注意事項(xiàng) 13.6 案例——小米商城購物網(wǎng)站 |
|
14. 應(yīng)用打包與發(fā)布 14.1 webpack 框架介紹 14.2 單頁應(yīng)用打包 14.3 配置文件的編寫 14.4 熱更新和動(dòng)態(tài)導(dǎo)入 |
|
15. 正確理解單元測(cè)試 15.1 mocha基礎(chǔ)知識(shí) 15.2 使用語法 15.3 異步測(cè)試 15.4 瀏覽器測(cè)試 |
近期公開課推薦
