HTML5培训上海ICT产教研基地

发布时间：2017-12-03 20:12:39

授课机构：上海移动互联网产教研协同基地

地址：上海市嘉定区外冈镇冈峰公路68号

网报价格：￥电询

课程原价：￥电询

咨询热线：该课程是用户免费注册发布,未实名认证！不提供联系方式和报名等咨询服务！信息仅供阅读参考！如侵权请联系我们删除！邮箱：196594267@qq.com

信息由用户发布！仅供参考！

网上报名

在线咨询

课程详情学校简介学校地址网上报名

HTML5是什么
HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及html5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。
HTML5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。HTML 5有两个重大使命：第一，弥补上一代HTML的不足；第二，实现富Web应用的本地化，使浏览器逃离Flash和Silverlight等富客户端插件的羁绊。作为下一代Web标准，HTML5致力于为互联网开发者搭建更加便捷、开放的沟通平台。业界普遍认为，在未来几年内，HTML5无疑将成为移动互联网、前端开发领域的主宰者。
为什么要学HTML5
所有互联网企业都在高薪招聘WEB前端工程师，其中，又以百度、腾讯、淘宝、京东等顶级互联网大公司为主。没错，优秀的前端工程师简直比大熊猫还稀少。每天HR群都有人在吐槽招不到前端工程师。在供不应求的前端招聘市场上，优秀的前端工程师才是有话语权的那一方。不仅在国内的互联网行业，在国外，前端工程师一样是需求旺盛、供不应求的香饽饽。
在10年之前Web的可视化设计和技术实现所需要的资源是平均分配的。随着网站的发展，网站不仅是一个登录页面，工程资源的需求越来越明显。人们开始专门学习网站专用的JS、后端技术、UX、数据库，甚至系统设计。
今天，一个像AirBnB/Facebook/Quora的Web应用，投入的工程资源比设计资源多得多。换句话说，如今，做出网页的视觉设计比技术实现要更快，所以当今的web需求要求更多的工程师供应。
现在，前端工程师终于前所未有的在Web中占有了一席之地。随着多设备、浏览器和Web标准的演变革命，前端正在成为兼顾逻辑、性能、交互、体验的综合性岗位。
课程特色
本课程让学生学习如何用HTML5的新元素和属性来撰写Web应用界面中的HTML代码。本课程从HTML5简介和历史开始，逐步介绍HTML5的新元素和属性，以及如何测试浏览器是否支持HTML5。课程还将介绍新的表单输入类型和音频视频标签，并深入了解用于动态产出与渲染图形、图表、图像和动画的Canvas元素、地理定位应用程序接口（API）、可以替代Cookies的新的本地数据存储选项和可以大幅提升Web应用程序性能的新通信应用程序接口（API）。最后您还将学习微数据、离线网络应用程序和WebSockets。
课程体系完全针对0基础学员设计知识讲授细致、练习步骤极其详细，多语言融合中有细分，阶段性项目巩固。热门技术一网打尽，融入最新实用技术。前互联网上市企业核心开发工程师多位5年以上从业经验H5大牛教学总监一线授课、组合式教学。助您成就真正一专多能的H5全栈工程师。
课程安排
阶段
天数
描述
第一阶段
Html
5
元素：HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
属性：属性为 HTML 元素提供附加信息。
标题：标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
段落：段落是通过 <p> 标签定义的。
样式：外部样式表、内部样式表、内联样式
链接：超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
图像：图像由 <img> 标签定义。
表格：表格由 <table> 标签来定义。
列表：无序列表（UL）、有序列表（OL）、
块：大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>。内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
表单：表单是一个包含表单元素的区域。
框架：Frame 标签定义了放置在每个框架中的 HTML 文档。
内联框架：iframe 用于在网页内显示网页。
背景：<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
第二阶段
jQuery
5
JQuery基础：$、选择器、获取元素、添加事件
JQuery的选择器：层级、属性、伪类等
样式和属性操作：css、attr方法、JQuery的链式操作和可选参数
鼠标事件：click、hover、toggle
JQuery特效：slideDown/slideUp、fadeIn/fadeOut
JQuery动画：animate、stop、速度控制、二级菜单
mouseleave和mouseenter事件的使用
实例：JQuery选项卡
JQuery的DOM操作：创建、添加、插入、包裹、删除
JQuery的事件操作：冒泡、默认事件、事件绑定、事件委托、事件对象
JQuery中的大小、位置：height()/width()、outerHeight()、position()、offset()
JQuery中的其他操作：each、和DOM元素的转换、class操作、html()
JQuery工具：$.browser、$.trim()
JQuery的Ajax：$.get()、$.ajax()
JQuery的各种bug
JQuery插件的使用：fancybox
编写JQuery插件：静态方法、extend()
实例：自定义JQuery插件——选项卡、自定义组件
第三阶段
js基础
5
JS入门：事件、原理、属性、样式、函数、if判断
JS入门：style和行间样式、函数传参、属性操作两种方式
字符串和变量、字面量和变量
提取行间事件、onload、byTagName、数组
循环、全选、选项卡、innerHTML、字符串连接
调试工具的使用、如何调试JS
变量类型、typeof、JS常见类型
类型转换、parseInt、NaN、隐式转换
作用域、闭包、命名规范、运算符、流程控制
变量遮蔽
JS中的随机数、随机颜色、随机范围、随机不重复
函数返回值
深入理解函数返回值
定时器：interval、timeout、时钟、QQ资料框、自动播放选项卡、京东商城侧边栏
arguments、字符串操作、数组操作、Json
循环外i的问题、函数定义和调用的区别、不变的变量
DOM操作基础：创建、添加、删除
BOM基础：窗口操作、UA、location
BOM应用：滚动、scrollTop、offset、clientHeight、浏览器类型检测
事件对象：冒泡、clientX、keyCode、ctrl/alt/shift、默认行为、拖拽
第四阶段
js中级批量设置样式：json、cssText、with
location、hash、query的处理，刷新保存页码
Date对象应用：setFullYear/Month等，时间戳、倒计时
Date高级应用
闭包的应用、封闭命名空间
ajax无刷新数据加载：创建、发送、接收、字符集和缓存
DOM应用：firstChild/lastChild、nextSibling/previousSibling
操作属性的第三种方式、自定义属性的获取、src的相对路径
offsetParent、计算元素的页面绝对位置
DOM与innerHTML、innerHTML的bug
图片预加载、Image对象的使用
Image对象批量加载
运动基础、匀速运动、运动框架、侧边栏、淡入淡出
this的用法、完美拖拽
完美封装可重用代码
完美拖拽、吸附拖拽、带框拖拽
程序思想——如何找思路，如何找规律，如何思考
碰撞检测、模拟窗口拖拽大小
窗口拖拽大小的封装和重用
自定义滚动条、鼠标滚轮
事件绑定、DOM事件流
cookie基础
ajax高级应用：用户注册和登录、表单提交
后台接口的使用、接口文档
编写AJax的基本步骤
Jsonp跨域的方法——百度下拉提示
script标签的怪异特性、callback的使用
Jsonp标签的管理
封装可重用的Jsonp方法
ajax制作简易新浪微博：后台、接口、分页、顶、页码
其他常见数据格式及用法：CSV、XML
引用、复制
JS中的异常：try...catch的使用
try的嵌套和性能问题
抛出异常、Exception对象、异常和返回值的区别及用途
JS变量生存周期、垃圾回收机制
闭包与JS垃圾回收
闭包的用法、保存i的值
JS性能优化——健壮性、维护性、性能的平衡
性能瓶颈的识别——性能检测工具的使用：Chrome profiles、YSlow等
JS阻塞加载、图片延迟加载、网络性能优化、压缩、CDN的使用
JS执行性能优化：DOM操作、循环、数组优化、局部变量、eval、parseInt、系统函数、字符串连接、正则等
正则表达式：RegExp对象、search方法、忽略大小写
match方法和全局匹配、量词的问题、replace方法
字符类、转义字符、行首行为、中文、单词边界、括号
正则应用：可重用的表单校验
自动表单校验、批量表单校验
表格操作：tBodies、tHead、tFoot、rows、cells
表格搜索、排序
自定义表单组件
DOM文本节点：创建、兼容、应用
firstChild怪异问题、childNodes的问题
domReady事件：优点、DOMContentLoaded、defer、onload
事件队列、封装ready事件函数
事件委托（事件代理）：冒泡的使用、srcElement属性、target属性、this的检测
call的使用——解决this指向问题
mouseleave事件——作用、封装，彻底解决mouseout冒泡的问题
实训
40
第五阶段
js面向对象
3
面向对象基础：什么是面向对象、对象的组成、OOP的特点、this的本质、Object对象、工厂方式构造对象
原型（prototype）、混合法构造JS对象
实例：面向对象的选项卡
第六阶段
HTML5+CSS3
3
ML5/CSS3新特性
文档头和编码声明
语义化标签，HTML5标签的兼容处理，HTML5标签SEO
新的元素选择器，HTML5中的选择器
本地存储，安全性、容量、和cookie区别
HTML5表单新特性，新的input类型，placeholder的使用和兼容，表单自动校验
FileReader和文件拖拽
geoLocation
canvas，功能和操作，图表、游戏和动画
WebGL，全3D网页浏览
video、audio
离线应用，Manifest文件编写
webSocket，优点，和Ajax的区别
webWorker，用途和优点
webSql
CSS3新特性，文本溢出，分栏模式，背景，圆角，阴影，渐变，transform，CSS3动画，rgba等
HTML5的应用范围
CSS3基础
css3与css2的区别，CSS3的兼容性，浏览器前缀，不需要前缀的样式
实例：CSS3旋转
JS设置CSS3样式，setStyle3()的封装，IE前缀的问题
实例：CSS3运动框架基础
transition基本使用，transition的参数，不同运动形式的区别
transition运用范围，transition和JS平滑结合，transition的问题
实例：纯CSS3滑动二级菜单
实例：淡入淡出幻灯片
border-radius的使用，圆角的单位，圆角大小的测量（PS中），圆角的各种参数
实例：圆角图片框
rgba的使用，rgba和opacity的区别，rgba的应用，rgba和渐变
实例：半透明遮罩文字的新写法
text-shadow的用法，各种参数，配合rgba的另类用途
实例：文字模糊效果
box-shadow的用法，内投影和外投影，扩展阴影
实例：CSS3按钮
实例：CSS3模拟PS的外发光效果
实例：文本框模糊效果
线性渐变的使用，最简形式，渐变方向的控制，多点渐变和rgba的结合
实例：CSS3进度条的绘制
圆形渐变的使用，中心点位置，形状和大小
实例：CSS3彩虹圈
CSS3变形和应用
transform的作用，旋转、缩放、位移、倾斜的使用，transform与内联元素
实例：各种变形的使用和组合
rotate的使用，deg，origin的使用，origin的各种写法，角度的换算
实例：CSS3时钟
scale的使用，等比缩放和拉伸，翻转和变形，scale和改变宽高的区别，CSS3属性和盒模型尺寸，scale的其他写法
实例：CSS3图片放大
实例：官网登录框淡入淡出
skew的使用，PS中的倾斜，倾斜模拟旋转
translate的使用，translate和left、top的区别
实例：CSS3倾斜导航条
多transform组合使用，顺序的问题
CSS3 3D变换，3D旋转，perspective的使用
3D变换的坐标系，旋转方向的分辨，perspective的两种用法
backface-visibility的使用和问题
backface-visibility的bug，translate另类解决方法
transform-style的使用，3D空间的继承
CSS3动画
纯CSS动画animate，关键帧，格式和编写
animate的调用，时间单位和重用
animate的可选属性，运动类型、延迟、重复、重置
animate和JS的配合
实例：旋转的风车
animate和transition的比较
动画结束的检测，Mozilla的问题和解决
自定义链式动画库
JS运动和CSS3动画
圆角的精确控制
CSS3多背景和背景尺寸控制
渐变高级应用，控制点、重复背景、渐变与背景结合
本地存储
本地存储和cookie的区别，localStorage和sessionStorage的区别
localStorage的支持情况，兼容性检测
添加、删除数据，删除数据
localStorage使用的注意事项
实例：基于localStorage的待办事项
localStorage的方法和属性，setItem、getItem
清空localStorage，遍历localStorage的方法
实例：基于localStorage的记事本
localStorage的事件，onstorage的兼容性写法，事件对象的各种属性：key、oldValue、newValue、url/uri
Json对象的方法，stringify、parse，parse和eval的区别
调试工具的使用
窗口间通信
地理信息
geolocation的用法，地理信息的定位精度，测试geolocation的方法
兼容性和兼容检测，getCurrentPosition()的使用
返回结果的作用：accuracy、latitude和longitude、altitude和altitudeAccuracy 、heading和speed
实例：配合百度地图显示当前位置
获取失败的处理，message、code，授权和常见错误
可选参数，高精度模式，超时处理
监听地理位置变化
HTML5特性、表单
contenteditable的作用
实例：基于ajax的简易excel
自定义数据的使用，兼容性，自定义数据配合JS，优点、缺点
HTML5表单特性，placeholder的使用，autocomplete和autofocus
新的input类型，控制手机输入法
实例：JS处理placeholder兼容问题
HTML5表单验证，required属性的使用，pattern属性的使用
下拉选择框，search和datalist
novalidate属性、multiple属性
JS配合HTML5表单校验，checkValidity()方法的使用
第七阶段
Php基础
2
PHP基础：变量、函数、传参、返回值、echo
数组、字符串、字符串连接
引号的问题、字符串中的变量、跨行字符串
常用操作：push、pop、substring等
PHP的表单操作：GET、POST、COOKIE和FILE
第八阶段
Video、Audio、canvas
3
video、audio基础，支持和兼容性
基本形式，src属性，不支持的文字提示
可选参数：controls、autoplay、loop
文件格式支持，source标签的使用
play()方法、pause()方法，stop方法的模拟，currentTime属性的使用
实例：播放、暂停和停止
duration属性，durationchange事件，DOM3事件注意事项
实例：显示和控制当前播放进度
timeupdate事件，onend事件
实例：播放结束弹出“相关推荐”弹出层
progress事件，buffer对象，end()方法
实例：显示视频加载进度
muted属性，volume属性
实例：控制播放音量
canplay、canplaythrough事件的使用，loadeddata事件
error和emptied事件的区别，加载错误处理
canPlayType()的使用
drawImage()方法绘制图片，drawImage()方法的三种形式
createPattern()方法创建平铺图案
toDataURL()方法导出canvas图像
drawImage()方法的高级应用，用精灵图实现人物行走功能
封装ZImg对象，物体的定位、碰撞检测
canvas中的事件检测，绘制线程
ZObject类，基本属性：位置、父级、子级，方法：appendChild()、removeChild()、draw()、ev()、pointIn()，事件：mousedown/mouseup/click/mousemove/mouseover/mouseout
ZRect类、ZImg类，图片裁切，设置各种样式
第九阶段
客户端缓存
5
桌面通知基础，webkitNotifications对象的使用
createNotification()方法的参数，设定通知图标，设置标题和内容
用checkPermission()检查用户授权，requestPermission()请求权限
实例：弹出桌面通知
show()、close()方法的使用
实例：通知的延时自动关闭
通知的各种事件：ondisplay、onclick、onclose、onerror
实例：点击通知后定位到指定消息
弹出HTML通知
离线应用基础，缓存离线资源，在线状态检测，本地数据存储和同步
实例：自动通知用户在线状态
manifest文件的编写，manifest文件的引入，NETWORK段、CACHE段、FALLBACK段的使用
manifest文件实例
实例：可离线使用的记事本
缓存更新的两种方法和策略，applicationCache对象的使用
UPDATEREADY状态，update()方法
navigator.onLine属性的检测
online、offline事件的使用
实例：服务器、本地缓存同步
webWorker和webSql
WebWorker基本使用，多线程的概念
创建worker，onmessage事件
通过data获取线程消息
实例：用webWorker计算菲波那切数列，与主线程分离
postMessage()方法传递数据
onerror事件
terminate()/close()方法终止线程运行
实例：用worker与服务器通信
子线程中的this
webWorker的问题
webSql基本使用
数据库的基本使用：CREATE语句、SELECT语句、INSERT语句、DELETE语句、UPDATE语句
openDatabase()方法打开数据库
transaction()方法进行事务处理，事务处理的原子性
事务上下文的使用
实例：创建数据库，并创建数据表
executeSql()方法执行Sql语句
result的属性和方法
实例：插入数据、获取数据

实例：记账管理系统

上海移动互联网产教研协同基地简介

上海移动互联网产教研协同基地又称上海ICT产教研基地，由上海市教委、上海市经信委、宝山区政府、上海市软件协会、上海市信息化教指委、大唐电信集团、思科公司、上海工商职业技术学院、幸子教育等机构共同组建，于2015年6月挂牌成立，致力于建设成为上海市移动互联网产教研创新先导区、IT高端人才培养及输出基地和服务示范区。基地位于嘉定区上海工商职业技术学院，占地面积21.87万平方米，建筑面积12.09万平方米。基地围绕移动互联网开发、终端、传输、软件、平台、应用六大重点领域，建立了ICT多功能展厅、移动通信实训室、web软件开发实训室、移动端软件开发实训室、物联网实训室等多个实验室，以培养职业化移动互联网开发IT高级人才以及人才输出就业服务为主导。

学校名称：上海移动互联网产教研协同基地

固定电话：该课程是用户免费注册发布,未实名认证！不提供联系方式和报名等咨询服务！信息仅供阅读参考！如侵权请联系我们删除！邮箱：196594267@qq.com

授课地址：上海市嘉定区外冈镇冈峰公路68号预约参观

HTML5培训上海ICT产教研基地

上海移动互联网产教研协同基地简介

友情链接

热门城市

HTML5培训 上海ICT产教研基地

上海移动互联网产教研协同基地简介

友情链接

热门城市

HTML5培训上海ICT产教研基地