html5零基础菜鸟入门教程_包含css3、canvas、ajax等实战课程

什么是HTML5?

HTML5就是HTML最新标准,是现在Web程序开发的核心、标准通用标记语言下的一个应用HTML的第五次重大修改,这是一项推荐标准。虽然CSS3和HTML5是两个语言,但通常说HTML5也都泛指包括CSS3,因为它们两个常在一起配合使用的。当然还不指这些,从技术本身分析来看,现在完成一些页面制作、WebAPP、微网站开发以及网页游戏等,现在都是使用HTML5标准完成的。虽然开发这类的应用其实是以JS为主,但因为HTML5这个概念很流行,所以微网站开发、WebAPP或是微网站等应用,很多人都会说使用HTML5开发。因此本教程大纲包括css3、canvas、ajax、jquery等等实用课程。本html5培训大纲入门教程来自兄弟连整理,兄弟连由于种种原因在疫情期间解散,本博客之前还整理过php培训大纲教程 , 请参考 http://www.99xq.cn/php/193.html

本html5零基础菜鸟入门教程共分为八个章节:

  1. 阶段一 Web页面制作基础
  2. 阶段二 UI网站设计
  3. 阶段三 编程基础技术
  4. 阶段四 后端开发技术
  5. 阶段五 移动互联网应用
  6. 阶段六 特效开发高级实战
  7. 阶段七 企业级应用开发
  8. 阶段八 网页游戏开发

下面是每个章节的详细课程,用table表格给出具体教程详情:

  • 阶段一 Web页面制作基础
    课程内容培训目标项目实战
    HTML5基础知识入门
    HTML应用
    CSS应用
    DIV+CSS标准化
    页面布局

    1. 前端开发的发展历史和现状

    2. 就业趋势与行业未来展望

    3. HTML5是什么

    4. HTML5在开发中的应用

    5. HTML5的标准

    6. HTML5末来中的移动应用生态

    7. HTML5末来应用的地位

    8. 真实HTML5行业现状

    9. 后APP时代的HTML5新玩法

    10. IE6\7\8\9,FF,Chrome,Safari,Opera等软件的安装与操作技巧

    11. Web的工作原理

    12. App的工作原理

    13. 游戏的制作原理

    1. 掌握HTML语法基础及特性

    2. HTML主体结构

    3. HTML文档头部元素

    4. 创建图像和链接

    5. 使用HTMl表格

    6. HTML框架结构

    7. HTML表单设计

    8. HTML5初级实战

    9. 图片处理技巧

    10. 嵌套合理化

    1. CSS的概念

    2. 在HTML中CSS的引入方式

    3. CSS选择器与优先级

    4. CSS常见的样式属性和值

    1. DIV+CSS对页面布局的优势

    2. 无意义的HTML元素

    3. W3C盒子模型

    4. 和页面布局有关的CSS属性

    5. 盒子区块的定位

    6. 使用盒子模型的浮动布局

    7. DIV+CSS的兼容性问题

    掌握前端做什么,掌握HTML5的应用
    熟练掌握HTML应用
    掌握CSS在开发中的使用
    学会页面标准化布局技术

    1. 各种浏览器的安装与使用

    2.常用开发工具的安装与使用

    1. 静态网页综合开发

    2. 使用表格制作个人简历

    3. 使用表单制作注册页面

    4. 使用框架制作后台管理界面

    5. 页面SEO设置方案

    1. CSS的各种选择器的应用

    2. CSS的常见属性演示

    1. 布局网站首页面

    2. 布局登录和注册页面

    3. 布局后面管理页面

    阶段项目
    阶段目标
    高仿大型网站的模板:门户网站主要模板(新浪)/商城全部模板(京东),任选其一
    掌握传统PC端网页布局和制作
  • 阶段二 UI网站设计
    课程内容培训目标项目实战
    Ui软件基础
    Ui页面设计

    1. Photoshop使用

    2. Axure原型图设计

    1. Axure原型设计

    2. 网页界面UI设计的配色

    3. Web界面设计

    4. 多风格类型的Web界面设计

    熟练掌握软件应用
    掌握标准化布局中的各项技术,能够独立设计出具有创意、符合需求的Web界面,能够独立设计出手机移动网站

    1. 图片制作

    2. 切图

    3. 原型图制作

    1. 网站首页设计

    2. 移动端界面设计

    阶段项目
    阶段目标
    独立完成一个大型网站的全站模板设计(Web页面和移动界面各一套),包括静态图片和原型图
    掌握页面设计和原型图制作
  • 阶段三 编程基础技术
    课程内容培训目标项目实战
    JavaScript入门与实践
    DOM编程
    BOM编程

    JavaScript的发展史以及未来

    JS的引入方式

    JavaScript的基本数据类型、常量变量

    JavaScript的基本运算符

    JavaScript的赋值运算,表达式

    JavaScript的中的语句

    函数的基本概念

    数组的基本知识

    字符串的基本知识

    面向对象的编程

    this关键字的用法

    不同数据类型数据的操作方法

    构造函数的基本知识

    闭包、面向对象

    作用域的基本知识、原型与原型链

    Math对象的基本知识

    Date对象的知识与应用

    DOM及DHTML的应用介绍

    各种事件及事件处理程序的应用

    DOM文档对象模型的基本知识和效果开发

    BOM浏览器对象模型

    浏览器事件机制及详解

    计时器的原理与应用

    窗口window对象的属性和方法

    文档document对象的应用

    其location、body、form、screen等对象的使用

    掌握JS基本语法与流程控制相关操作,能够区分不同的数据类型及其特色,同时了解面向对象编程的思想。使用JS结合HTML实现代表性的JS特效制作。了解特效制作原理
    学会页面中DOM的灵活应用、事件处理,还有各种DOM对象的属性和方法,并可以独立完成网页中常见特效的编写、以及第三方特效插件的使用
    掌握常用浏览器对象的使用

    1. 刷新改背景

    2. 自定义菜单

    3. 获取和设置时间

    4. 从URL中获取文件名

    5. 用数组设置游戏地图

    6. 简单的计算器

    1. 滚动类效果

    2. 碰壁反弹效果

    3. 拖拽效果

    4. 淘宝商品的放大效果

    5. 小游戏制作

    1. 登录注册验证

    2. 首页多特效合成

    3. 后台效果制作

    阶段项目
    阶段目标
    超炫班级点名系统和抽奖系统,选其一完成
    使用JS完成一些常见网页特效开发
  • 阶段四 后端开发技术
    课程内容培训目标项目实战
    Web服务器
    NodeJS
    MongoDB
    PHP+MySQL
    PHPCMS二次开发

    1. 了解Web服务器工作原理

    2. 掌握HTTP协议

    3. 了解Web服务器和APP的关系

    1. NodeJS与浏览器JS的区别

    2. 使用NodeJS搭建Web服务器

    3. 使用NodeJS搭建Socket服务器

    4. Express框架快速构建Web应用程序

    1. 环境搭建

    2. 基本使用

    1. 了解PHP的语法

    2. 了解PHP的常用操作

    3. 掌握数据库的基本操作

    4. 用PHP从数据库中获取动态数据

    了解二次开发现在的应用

    使用PHPCMS产品搭建网站

    掌握PHPCMS模板开发

    掌握Web服务器的原理及应用
    掌握HTTP与Web工作原理,掌握Socket长连接实时网络通信技术
    掌握NoSQL中的MongoDB的应用
    了解PHP语法,了解MySQL数据库的基本操作
    掌握一款二次开发产品的应用,快速创建网站

    搭建集成的Web服务器环境

    使用Nodejs搭建应用程序的服务端

    使用MogoDB管理数据

    PHP操作MySQL数据库

    编写一套网站模板

    阶段项目
    阶段目标
    完成指定企业门户网站的服务器端搭建,并借助二次开发写一套网站前端模板。(即完成包括前后台的整个企业网站)
    了解Web服务器工作原理,并可以简单的搭建自己的应用程序服务器端
  • 阶段五 移动互联网应用
    课程内容培训目标项目实战
    HTML5的应用
    HTML5初级实战,静态网页综合开发
    HTML5相关知识扩展
    CSS3应用
    LESS用法
    SASS使用
    响应式页面布局
    微网站的制作

    1. HTML5桌面平台开发用到的标签

    2. 标签语义化及标签的默认属性特点

    3. 标签的常用用法

    4. 新增的智能表单的应用

    5. 音频和视频标签的应用

    6. 制作属于自己的视频播放器

    1. HTML5初级实战

    2. 静态网页综合开发

    3. 背景图合并技术

    4. 图片处理技巧

    5. 框架的基本知识

    6. 嵌套合理化

    1. 浏览器兼容问题及解决方案

    2. SEO基本知识、关键词选择、白帽与黑帽优化技巧

    3. 代码优化的基本方法

    4. 行业需求技术分析

    5. 模型模板项目开发

    1. CSS3的发展现状、CSS3中的新增选择器

    2. CSS3边框效果的讲解与应用

    3. CSS3阴影效果的讲解与应用

    4. CSS3透明度效果

    5. CSS3渐变效果、CSS3中对背景的相关操作

    6. CSS3中倒影效果的讲解与应用

    7. CSS3中的二维平面变形效果的讲解与应用

    8. CSS3过渡与动画效果的开发

    1. LESS和SASS的应用介绍

    2. 开发环境搭建

    3. LESS的基本语法

    4. SASS的基本语法

    5. 编译与部署

    1. 响应式布局介绍

    2. Media Query的使用方法

    3. 在移动设备上设置原始大小显示

    4. 响应式网站的内容设计

    5. 响应式网站的设计流程

    1. 微网站介绍

    2. 微网站与Web页面开发区别

    3. 微网站开发流程

    4. 微网站的开发技术

    掌握HTML5新增的智能表单的使用,熟悉音视频标签的使用方式及API操作,制作属于自己的播放器
    可以熟练掌握图像标签的使用及对图片素材的优化方式,同时能够使用框架进行页面布局
    该阶段主要对搜索引擎优化进行讲解,掌握优化的各种方式,能够使网站在搜索引擎排行考前面的页面出现
    了解和掌握CSS新增选择器和边框阴影等新特效的使用方式,使用CSS3过渡和变换和渐变效果
    了解LESS和SASS应用
    掌握响应式页面布局技术
    掌握微网站的开发过程

    1. 使用HTMl5语义标记布局页面

    2. 使用HTMl5制作手机网站的注册单页

    3. 定制视频播放器

    1. 开发一个以图片为主的Web页面

    1. 解决兼容问题

    2. 基本网页优化

    1. 制作圆角边框

    2. 制作动画

    3. 制作渐变和倒影

    4. 使用多列属性布局

    5. 使用服务器端字体

    1. 使用LESS制作动态CSS程序

    2. 使用SASS制作动态CSS程序

    1. 制作一个可以兼容多个终端设置的网页

    1. 按特定需要开发一个微网站

    阶段项目
    阶段目标
    静态网站类项目的开发(商城、微博、论坛等),并独立进行完整的HTML5指定微网站制作
    掌握现在主流的页面制作技术,可以完微网站的制作,并可以做到多设备兼容
  • 阶段六 特效开发高级实战
    课程内容培训目标项目实战
    Ajax详解
    jQuery框架详解
    jQuery Mobile
    Bootstrap
    AngularJS

    1. Ajax的基本原理讲解

    2. XHR对象的基本知识

    3. JSON与XML的辨析

    4. 同步加载与异步加载

    5. Ajax在不同浏览器中的兼容问题

    6. 原生Ajax实例讲解与应用、加载方式

    7. 自定义Ajax实例使用

    1. jQuery的基本语法

    2. jQuery中的常用选择器

    3. jQuery对于事件的处理

    4. jQuery中的动画知识与应用

    5. jQuery的文档操作

    6. jQuery对属性,CSS的修改和设置

    7. jQuery的核心与原理

    8. 运用jQuery进行效果的开发

    1. jQuery Mobile页面基本控制

    2. jQuery Mobile对话框应用

    3. jQuery Mobile表单控制

    4. jQuery Mobile主题定制

    5. jQuery Mobile网格布局与页面创建、加载、跳转

    6. jQuery Mobile动态内容整合

    7. jQuery Mobile插件应用

    1. Bootstrap配置

    2. 使用Bootstrap布局页面

    3. Bootstrap全局样式

    4. Bootstrap各种常用组件

    5. Bootstrap常用插件应用

    1. AngularJS应用介绍

    2. AngularJS核心概念与基本用法

    3. AngularJS核心原理解析

    4. AngularJS企业应用方案

    了解Ajax的运行原理,区分同步加载和异步加载机制的不同之处
    掌握jQuery框架的使用方式,能够利用jQuery框架进行js特效开发,提高工作效率
    掌握jQuery Mobile的应用开发移动应用程序
    掌握Bootstrap的使用
    掌握AngularJS框架应用

    1. 唯一校验

    2. 简单留言板

    3. Ajax分页制作

    1. 可以编辑的表格

    2. 选项卡开发

    3. 幻灯播放

    4. 特效菜单

    5. 瀑布流

    1. 制作移动网站特效

    1. 使用Bootstrap制作响应式网站

    1. 使用AngularJS实现购物车

    阶段项目
    阶段目标
    通过多个实例达到熟练掌握前端JS框架的应用,同时练习JS类库开发的方式
    通过实际项目开发,熟练前端常用框架的实际应用及问题解决,以及常见特效开发、前后台交互开发
  • 阶段七 企业级应用开发
    课程内容培训目标项目实战
    HTML5地理位置应用
    HTML5离线应用
    HTML5 webworker多线程实现
    HTML5 websocket(通信协议)
    跨平台开发技术
    webAPP开发技术

    地理位置信息获取

    地球间两点距离计算方法

    地图API调用

    HTML5离线缓存

    HTML5本地存储

    HTML5本地数据库

    浏览器多线程应用原理

    多线用户程体验优化

    Socket连接原理

    数据实时通讯实例

    网页聊天室技术实现

    XCode与Eclipse工具的安装与使用

    PhoneGap的安装与使用、开发iPhone、iPad、Android应用程序的常用设置、开发环境配置

    PhoneGap的基本API

    硬件设备的调用

    PhoneGap封装跨平台应用

    兼容的触屏事件与手势事件

    webAPP的新增meta属性

    CSS3多列布局属性

    各平台实用私有属性

    使用Web制作LBS应用程序
    制作在没有网络的条件下依然能运行的应用程序
    在应用中使用多线程技术完成UI交互与数据处理并行
    掌握长连接技术,实现服务器与客户端的双向实时通信
    了解和掌握PhoneGap的安装和操作,能够使用PhoneGap进行封装,实现跨平台的应用
    了解和掌握触屏和手势相关的事件使用方式,能够通过媒体查询和多列布局属性实现屏幕自适应,实现响应式布局

    获取经纬度坐标完成地图标记

    改造Web应用程序实现离线可用

    优化用户体验

    多人实时聊天室

    实现Web应用程序的打包与发布

    打造符合移动端用户交互体验的Web应用程序

    阶段项目
    阶段目标
    美团、饿了吗、滴滴打车,或指导学员实现自主APP创作
    能够独立使用HTML5完成APP开发制作
  • 阶段八 网页游戏开发
    课程内容培训目标项目实战
    CAVANS开发网页游戏动画
    Cocos2d-js游戏开发

    1. CAVANS API详解与实例

    2. CANVAS的绘制操作

    3. 使用CANVAS制作音视频特效

    4. 2D游戏绘图原理

    5. 使用CANVAS制作2D游戏

    6. 使用CANVAS开发游戏绘图引擎

    7. WEBGL扩展

    1. Cocos2d核心类应用

    2. Cocos2d动画

    3. 用户交互

    4. 物理引擎

    了解和掌握CAVANS运行机制,了解游戏运行原理,通过CAVANS实现制作网页游戏
    使用Cocos2d-js制作平台游戏

    1. 画时钟

    2. 画雪花

    3. 画爱心

    4. 画贴图

    5. 构建矩阵地图

    1. 游戏场景布局

    2. 游戏角色制作

    3. 游戏角色控制

    4. 碰撞检测与物理效果

    阶段项目
    阶段目标
    《射击月亮》、《像素鸟》、《三国杀》、《找你妹》、《捕鱼达人》,或指导学员实现自主游戏创作
    使用HTML5制2D网页游戏

发表评论

电子邮件地址不会被公开。 必填项已用*标注