HTML5基础培训
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2012-2-28
Security Level:
HTML5基础培训
www.huawei.com
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
目录
什么是HTML5 一 什么是 二 HTML5新特性和那些效果 新特性和那些效果 三 HTML5目前存在的应用局限 目前存在的应用局限 开放讨论： 适合应用于我们哪些项目？ 四 开放讨论：HTML5适合应用于我们哪些项目？ 适合应用于我们哪些项目
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 28
演示：
复合图表 简单的图形元素
http://10.138.51.50/SVG/rect2.svg
http://10.138.51.50/SmartUEV2/UI/api/complexChart.html
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 11
画布元素-CANVAS以及WEBGL 视频加速
Page 12
应用场景
构建3D虚拟拓扑图-某3D网管 流程图-我司某运营产品
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 18
演示：新特性全集
http://10.138.51.50/html5/form2.0/all.html
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential Page 19
更丰富的样式支持更丰富的样式支持 CSS3
Page 20
应用场景
通讯录管理-图片墙 首页portal
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 21
CSS3新特性
选择器 RGBA和透明度 多栏布局：弹性布局（水平布局、垂直布局） 多背景图 Word Wrap 文字阴影 @font-face属性 盒阴影：阴影，文本阴影 盒模型：，多背景，圆角(边框半径)，边框图片 2D：旋转，缩放，倾斜，请参考：CSS基础变换 3D：透视，transform 3D，等等 媒体查询 语音
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 7
媒体支持 VIDEO/AUDIO/WEBRTC
Page 8
当前应用场景
视频点播直播-优酷HTML5版本 视频聊天- Google html5视频聊天功能
HUAWEI TECHNOLOGIES CO., LTD.
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 14
演示：
构造一个简单的Canvas 3D物体
Canvas基本作图API之画板
http://10.138.51.50/html5/Canvas Painter/
http://10.138.51.50/html5/webgl/cube.html
Canvas API
canvas ，HTML5最期待元素之一，可以通过脚本可以任意创建图形， 编辑图形，导入图片，导出图片。其中分2D与3D： 2D context API：基本线条、路径、插入图像、像素级操作、文字、 阴影、颜色渐变等提供图形绘制功能。 3D context API（WebGL）： WebGl 定义了一套API, 能够允许在 网页中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的 3d图形API。这些API是通过HTML 5的canvas标签来使用的。
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
演示
CSS3 Explorer.html
http://10.138.51.50/html5/css3Explorer.html
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
丰富（线，圆，矩形，多边形，路径等） 支持 不支持 支持Dom事件 好。Xml结构易于分析 Svg标签+css，少量依赖js
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 32
小结
互有所长，均适用不同应用场景： 互有所长，均适用不同应用场景： SVG更适合规则图形的绘制和动画，更好管理。 典型场景：图表，流程图等高保真度矢量文档。 Canvas更适合不规则或涉及像素级的变化场景，更高效。 典型场景：图片编辑和图形数据分析，位图动画，2D游戏，3D虚 拟空间等像素操作。
Huawei Confidential
Page 9
Audio Video & WebRTC
<video> 标签定义视频，比如电影片段或其他视频流。 <audio> 标签定义声音，比如音乐或其他音频流。 WebRTC（Web Real-Time Communication） 是应用在视频会议、 实时广播、多方会谈、点对点应用程序等等的新的协议与 API（用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进行点对点传输等等）
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 2
一 什么是HTML5
Page 3
1 HTML历史
1991年
1994年 1995年 1997年
2009年 今天
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 33
离线应用
Page 34
应用场景
频道缓存，海报缓存，减低服务器负载，提升用户开机体验 -IPTV Webkit 机顶盒 离线保存桌面和通讯录数据，定时和服务器同步 -UC web版
HUAWEI TECHNOLOGIES CO., LTD.
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 10
演示：
Video播放视频 Audio播放声音
http://10.138.51.50/html5/video/
http://10.138.51.50:82/html5/audio - js创建声音
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 15
增强的表单FORM 增强的表单
Pຫໍສະໝຸດ Baiduge 16
应用场景
配置页面-增加配置的流畅性和容错性 注册-增加注册的流畅性和无障碍浏览
http://10.138.51.50/html5/form2.0/demo1.html
Page 23
演示：CSS3 2D
灰太狼 华为Logo
http://10.138.51.50/html5/bigbigwolf.html
http://10.138.51.50/html5/huaweilogo
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 24
演示：CSS3 3D
Google 3D box
旋转的立方体
http://10.138.51.50/html5/google 3d box
http://10.138.51.50/html5/Morphing power cuber/
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
SVG 矢量图形
Page 26
应用场景
构建多样的矢量图形-SmartUE图表项目 矢量地图-某产品
http://10.138.51.50\SVG\chinaMap.svg
http://10.138.51.50/SmartUEV2
HUAWEI TECHNOLOGIES CO., LTD.
Page 4
2 什么是HTML5
官方概念：HTML5草案的前身名为Web Applications 1.0，是 HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的 标准、语义化、图像表达能力和交互效果。 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段， 浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括： HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等
后面我们描述的HTML5就是基于广义来讲述
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential Page 5
二 HTML5新特性和应用
Page 6
HTML5新特性（顺序待调整）
媒体支持：Video和Audio 画布元素-Canvas以及WebGL视频加速 增强的表单Form 更炫的平面动画-CSS3页面渲染及 CSS3 3D 矢量支持-SVG HTML5的图形机制比较-SVG vs Canvas 离线应用 原生的拖拽 其他HTML5特性..
Huawei Confidential
Page 35
离线应用：让网络应用变为桌面应用
离线存储使得你的web应用可以在用户离线的状况下进行访问。离线 应用可以在用户离线的状况下进行访问。 离线存储使得你的 应用可以在用户离线的状况下进行访问 存储的两个特性： 存储的两个特性： 1 离线资源缓存 2 本地数据存储 local storage 离线存储技术技术显然至少有三个好处： 离线存储技术技术显然至少有三个好处： 1 最直接的好处就是用户可以离线访问你的web应用 2 因为文件被缓存在本地使得web页面加载速度提升许多 3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服 务器造成的负载压力
Huawei Confidential
Page 27
SVG
SVG（Scalable Vector Graphics）：可缩放矢量图形，使用 （ ） 可缩放矢量图形， XML 来描述二维图形和绘图程序的语言。可以在浏览器中构造 矩 来描述二维图形和绘图程序的语言。 形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效 圆形、椭圆、线条、多边形、折线、路径、滤镜效果、 果，和动画等
Huawei Confidential
Page 31
不同点
SVG DOM 是否矢量 图形内存模式 基本图形种类 原生动画支持 3D 交互 可访问性 最终实现的代码特征
是！ 矢量，放大不失真 保留模式
Canvas
非！最大的区别！ Everything is pixel 像素操作，放大失真 即发即弃。直接向它的位图呈现它的图形， 然后对所绘制的形状没有任何认知，只会 得到最终的位图。 除了矩形，只有路径 不支持。需要js去模拟，即刷屏 支持 只能用js根据坐标进行编程 差。程序无法感知内容，除非图像识别或 专门做canvas内容映射 基本上是完全依赖js
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential Page 17
新的Form元素
HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代 码更为易用、简洁和高效。这些新的东西包括： 1 新元素：Email、Number、Range，color picker等 新元素： 2 新属性：placeholder、pattern、required、autofocus 、multiple等 新属性： 特性 3 新样式 新样式：新的伪类样式，比如:focus,:required,:valid等 4 新的输入方式-语音输入： x-webkit-speech可以让标签接受语音并 转化为数字
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 29
HTML5的图形机制比较: SVG VS CANVAS
Page 30
相同点
均是HTML5规范的一部分 规范的一部分 均是 均能实现图形和动画 均可以通过脚本编程控制显示
HUAWEI TECHNOLOGIES CO., LTD.
Security Level:
HTML5基础培训
www.huawei.com
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
目录
什么是HTML5 一 什么是 二 HTML5新特性和那些效果 新特性和那些效果 三 HTML5目前存在的应用局限 目前存在的应用局限 开放讨论： 适合应用于我们哪些项目？ 四 开放讨论：HTML5适合应用于我们哪些项目？ 适合应用于我们哪些项目
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 28
演示：
复合图表 简单的图形元素
http://10.138.51.50/SVG/rect2.svg
http://10.138.51.50/SmartUEV2/UI/api/complexChart.html
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 11
画布元素-CANVAS以及WEBGL 视频加速
Page 12
应用场景
构建3D虚拟拓扑图-某3D网管 流程图-我司某运营产品
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 18
演示：新特性全集
http://10.138.51.50/html5/form2.0/all.html
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential Page 19
更丰富的样式支持更丰富的样式支持 CSS3
Page 20
应用场景
通讯录管理-图片墙 首页portal
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 21
CSS3新特性
选择器 RGBA和透明度 多栏布局：弹性布局（水平布局、垂直布局） 多背景图 Word Wrap 文字阴影 @font-face属性 盒阴影：阴影，文本阴影 盒模型：，多背景，圆角(边框半径)，边框图片 2D：旋转，缩放，倾斜，请参考：CSS基础变换 3D：透视，transform 3D，等等 媒体查询 语音
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 7
媒体支持 VIDEO/AUDIO/WEBRTC
Page 8
当前应用场景
视频点播直播-优酷HTML5版本 视频聊天- Google html5视频聊天功能
HUAWEI TECHNOLOGIES CO., LTD.
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 14
演示：
构造一个简单的Canvas 3D物体
Canvas基本作图API之画板
http://10.138.51.50/html5/Canvas Painter/
http://10.138.51.50/html5/webgl/cube.html
Canvas API
canvas ，HTML5最期待元素之一，可以通过脚本可以任意创建图形， 编辑图形，导入图片，导出图片。其中分2D与3D： 2D context API：基本线条、路径、插入图像、像素级操作、文字、 阴影、颜色渐变等提供图形绘制功能。 3D context API（WebGL）： WebGl 定义了一套API, 能够允许在 网页中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的 3d图形API。这些API是通过HTML 5的canvas标签来使用的。
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
演示
CSS3 Explorer.html
http://10.138.51.50/html5/css3Explorer.html
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
丰富（线，圆，矩形，多边形，路径等） 支持 不支持 支持Dom事件 好。Xml结构易于分析 Svg标签+css，少量依赖js
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 32
小结
互有所长，均适用不同应用场景： 互有所长，均适用不同应用场景： SVG更适合规则图形的绘制和动画，更好管理。 典型场景：图表，流程图等高保真度矢量文档。 Canvas更适合不规则或涉及像素级的变化场景，更高效。 典型场景：图片编辑和图形数据分析，位图动画，2D游戏，3D虚 拟空间等像素操作。
Huawei Confidential
Page 9
Audio Video & WebRTC
<video> 标签定义视频，比如电影片段或其他视频流。 <audio> 标签定义声音，比如音乐或其他音频流。 WebRTC（Web Real-Time Communication） 是应用在视频会议、 实时广播、多方会谈、点对点应用程序等等的新的协议与 API（用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进行点对点传输等等）
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 2
一 什么是HTML5
Page 3
1 HTML历史
1991年
1994年 1995年 1997年
2009年 今天
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 33
离线应用
Page 34
应用场景
频道缓存，海报缓存，减低服务器负载，提升用户开机体验 -IPTV Webkit 机顶盒 离线保存桌面和通讯录数据，定时和服务器同步 -UC web版
HUAWEI TECHNOLOGIES CO., LTD.
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 10
演示：
Video播放视频 Audio播放声音
http://10.138.51.50/html5/video/
http://10.138.51.50:82/html5/audio - js创建声音
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 15
增强的表单FORM 增强的表单
Pຫໍສະໝຸດ Baiduge 16
应用场景
配置页面-增加配置的流畅性和容错性 注册-增加注册的流畅性和无障碍浏览
http://10.138.51.50/html5/form2.0/demo1.html
Page 23
演示：CSS3 2D
灰太狼 华为Logo
http://10.138.51.50/html5/bigbigwolf.html
http://10.138.51.50/html5/huaweilogo
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 24
演示：CSS3 3D
Google 3D box
旋转的立方体
http://10.138.51.50/html5/google 3d box
http://10.138.51.50/html5/Morphing power cuber/
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
SVG 矢量图形
Page 26
应用场景
构建多样的矢量图形-SmartUE图表项目 矢量地图-某产品
http://10.138.51.50\SVG\chinaMap.svg
http://10.138.51.50/SmartUEV2
HUAWEI TECHNOLOGIES CO., LTD.
Page 4
2 什么是HTML5
官方概念：HTML5草案的前身名为Web Applications 1.0，是 HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的 标准、语义化、图像表达能力和交互效果。 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段， 浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括： HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等
后面我们描述的HTML5就是基于广义来讲述
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential Page 5
二 HTML5新特性和应用
Page 6
HTML5新特性（顺序待调整）
媒体支持：Video和Audio 画布元素-Canvas以及WebGL视频加速 增强的表单Form 更炫的平面动画-CSS3页面渲染及 CSS3 3D 矢量支持-SVG HTML5的图形机制比较-SVG vs Canvas 离线应用 原生的拖拽 其他HTML5特性..
Huawei Confidential
Page 35
离线应用：让网络应用变为桌面应用
离线存储使得你的web应用可以在用户离线的状况下进行访问。离线 应用可以在用户离线的状况下进行访问。 离线存储使得你的 应用可以在用户离线的状况下进行访问 存储的两个特性： 存储的两个特性： 1 离线资源缓存 2 本地数据存储 local storage 离线存储技术技术显然至少有三个好处： 离线存储技术技术显然至少有三个好处： 1 最直接的好处就是用户可以离线访问你的web应用 2 因为文件被缓存在本地使得web页面加载速度提升许多 3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服 务器造成的负载压力
Huawei Confidential
Page 27
SVG
SVG（Scalable Vector Graphics）：可缩放矢量图形，使用 （ ） 可缩放矢量图形， XML 来描述二维图形和绘图程序的语言。可以在浏览器中构造 矩 来描述二维图形和绘图程序的语言。 形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效 圆形、椭圆、线条、多边形、折线、路径、滤镜效果、 果，和动画等
Huawei Confidential
Page 31
不同点
SVG DOM 是否矢量 图形内存模式 基本图形种类 原生动画支持 3D 交互 可访问性 最终实现的代码特征
是！ 矢量，放大不失真 保留模式
Canvas
非！最大的区别！ Everything is pixel 像素操作，放大失真 即发即弃。直接向它的位图呈现它的图形， 然后对所绘制的形状没有任何认知，只会 得到最终的位图。 除了矩形，只有路径 不支持。需要js去模拟，即刷屏 支持 只能用js根据坐标进行编程 差。程序无法感知内容，除非图像识别或 专门做canvas内容映射 基本上是完全依赖js
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential Page 17
新的Form元素
HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代 码更为易用、简洁和高效。这些新的东西包括： 1 新元素：Email、Number、Range，color picker等 新元素： 2 新属性：placeholder、pattern、required、autofocus 、multiple等 新属性： 特性 3 新样式 新样式：新的伪类样式，比如:focus,:required,:valid等 4 新的输入方式-语音输入： x-webkit-speech可以让标签接受语音并 转化为数字
HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Page 29
HTML5的图形机制比较: SVG VS CANVAS
Page 30
相同点
均是HTML5规范的一部分 规范的一部分 均是 均能实现图形和动画 均可以通过脚本编程控制显示
HUAWEI TECHNOLOGIES CO., LTD.