HTML5學習路線_華清遠見教育科技集團

華清遠見HTML5課程發展史——4次技術革新

V1.0版本
V1.1版本
V2.1版本
V3.0版本

在V1.0基礎上加入了以下內容：
①第五階段：移動互聯網應用——去掉小眾移動端框架；
②第六階段：特效開發高級實戰——添加jqMobile；
③第七階段：企業級應用開發——增加Ionic、多線程；
④通過canvas和Cocos2d-js制作2D網頁游戲；
⑤企業級應用項目開發為主完成門戶網站、仿新浪、仿京東、淘寶、餓了么、滴滴打車等階段項目；
在V1.1基礎上加入了以下內容：
①第一階段：Web頁面制作基礎——精簡壓縮課程時間；
②第三階段：編程基礎技術——去除了js相關操作；
③第四階段：后端開發技術——移除PHPCMS二次開發、模板開發；增加可選內容如主流框架tinkPHP、CodeIgniter；移除小眾移動端框架；
④第七階段：企業級應用開發——加入Ionic、多線程相關內容；
⑤豐富項目實戰案例，如騰訊視頻、后臺管理系統、移動互聯網站等；
在V2.1基礎上加入了以下內容：
①優化課程順序——Web頁面制作、編程基礎技術、移動互聯網應用、特效開發高級實戰、后端開發技術、企業級應用開發；
②編程基礎技術階段——javascript增加文件操作，ECMAScript6新特性；
③移動互聯網應用階段——加入Zepto、Touch、swiper+animate、微信小程序；
④特效開發高級實戰階段——加入mui內容；
⑤企業級應用開發階段——加入Angular4、Vue、React、highcharts等；
豐富項目，如360官網、UC瀏覽器、360安全衛士、游久紫鑰官網、仿北京銀行、仿太平洋、仿微信、京東移動端、微信小程序、華清官網、Vue項目、React項目、 Angular項目、圖標項目等；
定制HTML5課程體系，共7個階段：
第一階段： Web頁面制作基礎；
第二階段： UI網站設計；
第三階段：編程基礎技術；
第四階段：后端開發技術；
第五階段：移動互聯網應用；
第六階段：特效開發高級實戰；
第七階段：企業級應用開發；

華清HTML5課程大綱重磅登場，引入時下熱門框架

階段一
階段二
階段三
階段四

01
Web頁面制作
學習目標：掌握傳統pc端網頁布局和制作

1.認識web前端和html
· web前端開發介紹
· CSS標記 · 開發工具
· CSS元素 · 開發環境介紹
· CSS屬性 · 認識CSS
· 如何深度理解CSS · CSS優點
· 如何優化布局

2.標簽及語義
· 常見標簽
· 類型選擇符 · 標簽的理解
·類型分類 · 標簽的用途
· 類型樣式初始化 · 標簽的合理使用
· 仿百度首頁 · 認識A鏈接
· 仿美團網

3.block，inline-block介紹和使用
· 什么是塊元素
· 如何正確使用 · 什么內嵌元素
· 流水式布局 · 如何理解這兩者的區別
· 瀑布式布局 · 他們各自哪些特點
· 仿淘寶主頁 · 塊和內嵌元素如何轉換
· 仿京東首頁

本階段可掌握的核心技能

掌握HTML5新增的智能表單的使用；掌握優化的各種方式；掌握響應式頁面布局技術;使用touch框架搭建移動端頁面、宣傳頁面；掌握swiper+animate框架；掌握微網站的開發過程與微信小程序開發；掌握如何開發移動端web應用;了解移動應用的流行框架 zepto并掌握移動端的手勢與觸摸事件。

本階段可開發的實訓項目

高防大型網站的模板、門戶網站主要模板（新浪）、商城全部模板（京東）
02
編程基礎技術
學習目標：JS完成一些常見網頁特效開發

1.基本運算符
· + 加
· - 減 · * 乘
· / 除 · % 求余
· ++ 累加 · -- 累減

2.面向對象的編程
· 基本概念
· 類 · 封裝
·聚合 · 繼承
· 多態 · 創建對象
· 工廠模式 · 元素、屬性和方法
· 構造器函數

3.不同數據類型數據的操作方法
· typeof操作符
· Undefined類型 · Null類型
· Boolean類型 · Number類型
· String類型 · Object類型
· Array類型 · 棧方法
· 隊列方法

本階段可掌握的核心技能

掌握JS基本語法與流程控制相關操作；使用JS結合HTML實現代表性的JS特效制作；可以獨立完成網頁中常見特效的編寫以及第三方特效插件的使用；掌握文件操作&canvas；了解ECMAScript6新特性;

本階段可開發的實訓項目

結合js實現動態頁面京東、淘寶、騰訊視頻
03
移動互聯網應用
學習目標：掌握現在主流的頁面制作技術，可以完成微網站的制作和
微信小程序開發，并可以做到多設備兼容

1.HTML5的應用
· HTML5桌面平臺開發用到的標簽
· 標簽語義化及標簽的默認屬性特點 · 標簽的常用用法
· 新增的智能表單的應用 · 音頻和視頻標簽的應用
· 視頻格式與瀏覽器的支持 · 使用 DOM 控制HTML5 video
· 音頻格式及瀏覽器支持

2.HTML5初級實戰靜態網頁綜合開發
· HTML5初級實戰
· 靜態網頁綜合開發 · 背景圖合并技術
·圖片處理技巧 · 框架的基本知識
· 嵌套合理化

3.CSS3應用
· CSS3的發展現狀、CSS3中的新增選擇器
· CSS3邊框效果的講解與應用 · CSS3陰影效果的講解與應用
· CSS3透明度效果 · CSS3漸變效果、CSS3中對背景的相關操作
· CSS3中倒影效果的講解與應用

本階段可掌握的核心技能

掌握HTML5新增的智能表單的使用；掌握優化的各種方式；掌握響應式頁面布局技術;使用touch框架搭建移動端頁面、宣傳頁面；掌握swiper+animate框架；掌握微網站的開發過程與微信小程序開發；掌握如何開發移動端web應用;了解移動應用的流行框架 zepto并掌握移動端的手勢與觸摸事件

本階段可開發的實訓項目

餓了么，華僑城仿北京銀行仿太平洋保險，仿微信，Swiper+animate項目，Zepto+touch項目，微信小程序
04
特效開發高級實戰
通過實際項目開發，精通前端常用框架的實際應用
及問題解決，以及常見特效開發、前后臺交互開發

1.AJAX詳解
· AJAX的基本原理講解
· XHR對象的基本知識 · JSON與XML的辨析
· AJAX框架的封裝 · 同步加載與異步加載
· AJAX中的緩存問題 · 數據綁定和模板技術
· JSON和跨域技術

2.jQuery框架詳解
· jQuery的基本語法
· jQuery中的常用選擇器 · jQuery對于事件的處理
·jQuery中的動畫知識與應用 · jQuery的文檔操作
· jQuery對屬性，CSS的修改和設置 · jQuery的核心與原理
· Jquery UI組件

3.Bootstrap
· Bootstrap 簡介
· Bootstrap 配置 · Bootstrap響應式概念
· 使用Bootstrap布局頁面和全局樣式 · Bootstrap網格系統及工作原理
· Bootstrap各種常用組件 · Bootstrap常用插件應用

本階段可掌握的核心技能

利用jQuery框架進行js特效開發；掌握Bootstrap的使用；了解AJAX的運行原理使用MUI庫，完成Android和IOS的移動設置應用開發

本階段可開發的實訓項目

京東商城，騰訊視頻PC端，MUI項目

PC/移動、Web前/后端，各大企業級真實案例全部get！

UC瀏覽器網站
vue項目實戰
Angular+ionic項目
北京銀行項目
Highchart項目
MUI框架項目

UC瀏覽器網站
整體目標
讓學員簡單的了解網頁的布局和常用結構，常用樣式處理等為學習后期基礎打基礎。
階段目標
1.讓學員對前端開發有一個基礎的概念。
2.讓學員簡單掌握基礎網頁的開發流程。
3.簡單掌握網頁整體架構搭建。
學習效果
了解項目開發流程，了解開發工具使用，代碼編寫方式和語法基本規范。了解項
目常用結構布局與樣式處理。
vue項目實戰
整體目標
使用框架vue 搭建大型綜合PC端項目，實現商品的添加，刪除，購買，支付，登錄注冊等功能。
階段目標
1.搭建VUE開發環境
2.掌握VUE語法結構及使用方法
3.熟練掌握vue組件的使用
4.掌握vue路由與數據請求
學習效果
熟練使用開發者工具，搭建使用VUE框架為基礎的PC端項目。掌握VUE框架，組件等
Angular+ionic項目
整體目標
使用框架angular 搭建大型綜合項目，實現商品的添加，刪除，購買，支付，登錄注冊，購物車等功能。
階段目標
1.介紹angular新特性，知識點與企業需求0對接
2.環境搭建和程序架構
3.使用angular組件開發項目架構
4.實現組件與組件之間的通信
學習效果
熟練使用開發者工具，搭建使用angular框架為基礎的項目。掌握angular框架，組件，程序架構等。
北京銀行項目
整體目標
了解簡單的切圖方式，了解移動端布局和編寫方式。練習CSS3的新屬性。吸引學員對H5的濃厚興趣。
階段目標
1.簡單運用PS切圖技術
2.了解移動端布局與編寫方式
3.新屬性效果并對新屬性的簡單運用
4.吸引學員對前端的濃厚興趣
學習效果
掌握移動端布局與編寫方式，CSS3新屬性，了解簡單的切圖方式。
Highchart項目
整體目標
使用圖表highchart框架搭建具有數據變化的時時數據更新功能的項目。
階段目標
1.使用圖表框架搭建企業需求項目
2.掌握圖表框架的使用方法
3.數據列的使用
4.與后臺數據的結合
學習效果
熟練掌握圖表開發框架的使用，了解代碼優化，培養學員興趣。
MUI框架項目
整體目標
使用MUI框架搭建移動端原型項目。
階段目標
1.掌握MUI開發技巧
2.學習代碼時時更改時時調
3.使用真機測試，調試代碼
4.打包生成手機端app
學習效果
使用移動框架快速搭建移動端界面，使界面媲美原生開發界面，大大節省了開發成本。掌握一次編寫處處使用的能力。