HUAWEI TECHNOLOGIES CO., LTD.
Huawei Confidential
Security Level:
英文标题:40-47pt
副标题:26-30pt
字体颜色:反白
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:35-47pt
字体:黑体
副标题:24-28pt
字体颜色:反白
字体:细黑体
2022/9/3
HTML5基础培训
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
目录
一 什么是HTML5
二 HTML5新特性和那些效果
三 HTML5目前存在的应用局限
四 开放讨论：HTML5适合应用于我们哪些项目？
Page 2
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
一 什么是HTML5
Page 3
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
1 HTML历史
Page 4
今天
1991年 1994年
1997年1995年
2009年
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
2 什么是HTML5
官方概念：HTML5草案的前身名为Web Applications ，是
HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的
标准、语义化、图像表达能力和交互效果。
广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，
浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：
HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等
后面我们描述的HTML5就是基于广义来讲述
Page 5
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
二 HTML5新特性和应用
Page 6
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
HTML5新特性（顺序待调整）
媒体支持：Video和Audio
画布元素-Canvas以及WebGL视频加速
增强的表单Form
更炫的平面动画-CSS3页面渲染及 CSS3 3D
矢量支持-SVG
HTML5的图形机制比较-SVG vs Canvas
离线应用
原生的拖拽
其他HTML5特性..
Page 7
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
媒体支持
VIDEO/AUDIO/WEBRTC
Page 8
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
当前应用场景
Page 9
视频点播直播-优酷HTML5版本 视频聊天- Google html5视频聊天功能
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
Audio Video & WebRTC
<video> 标签定义视频，比如电影片段或其他视频流。
<audio> 标签定义声音，比如音乐或其他音频流。
WebRTC（Web Real-Time Communication） 是应用在视频会议、
实时广播、多方会谈、点对点应用程序等等的新的协议与 API（用
启动用户计算机的摄影机，用
PeerConnection 进行点对点传输等等）
Page 10
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示：
Page 11
Video播放视频
:82/html5/audio%20-%20js创建声音l5/audio - js创建声音
Audio播放声音
:82/html5/audio%2520-%2520js%E5%88%9B%E5%BB%BA%E5%A3%B0%E9%9F%B3
:82/html5/audio%2520-%2520js%E5%88%9B%E5%BB%BA%E5%A3%B0%E9%9F%B3
:82/html5/audio%2520-%2520js%E5%88%9B%E5%BB%BA%E5%A3%B0%E9%9F%B3
:82/html5/audio%2520-%2520js%E5%88%9B%E5%BB%BA%E5%A3%B0%E9%9F%B3
:82/html5/audio%2520-%2520js%E5%88%9B%E5%BB%BA%E5%A3%B0%E9%9F%B3
:82/html5/audio%2520-%2520js%E5%88%9B%E5%BB%BA%E5%A3%B0%E9%9F%B3
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
画布元素-CANVAS以及WEBGL
视频加速
Page 12
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
应用场景
流程图-我司某运营产品 构建3D虚拟拓扑图-某3D网管
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
Canvas API
canvas ，HTML5最期待元素之一，可以通过脚本可以任意创建图形，
编辑图形，导入图片，导出图片。其中分2D与3D：
2D context API：基本线条、路径、插入图像、像素级操作、文字、
阴影、颜色渐变等提供图形绘制功能。
3D context API（WebGL）： WebGl 定义了一套API, 能够允许在
网页中使用类似于Open GL，实际上是一套基于OpenGL ES 的
3d图形API。这些API是通过HTML 5的canvas标签来使用的。
Page 14
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示：
Page 15
构造一个简单的Canvas 3D物体
Canvas基本作图API之画板
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
增强的表单FORM
Page 16
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
应用场景
Page 17
配置页面-增加配置的流畅性和容错性 注册-增加注册的流畅性和无障碍浏览
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
新的Form元素
HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代
码更为易用、简洁和高效。这些新的东西包括：
1 新元素：Email、Number、Range，color picker等
2 新属性：placeholder、pattern、required、autofocus 、multiple等
特性
3 新样式：新的伪类样式，比如:focus,:required,:valid等
4 新的输入方式-语音输入： x-webkit-speech可以让标签接受语音并
转化为数字
Page 18
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示：新特性全集
Page 19
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
更丰富的样式支持- CSS3
Page 20
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
应用场景
Page 21
通讯录管理-图片墙 首页portal
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
CSS3新特性
选择器
RGBA和透明度
多栏布局：弹性布局（水平布局、垂直布局）
多背景图
Word Wrap
文字阴影
@font-face属性
盒阴影：阴影，文本阴影
盒模型：，多背景，圆角(边框半径)，边框图片
2D：旋转，缩放，倾斜，请参考：CSS基础变换
3D：透视，transform 3D，等等
媒体查询
语音
basic CSS3
basic CSS3
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示
Page 23
CSS3
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示：CSS3 2D
Page 24
灰太狼 华为Logo
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示：CSS3 3D
Google 3D box
旋转的立方体
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
SVG 矢量图形
Page 26
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
应用场景
Page 27
矢量地图-某产品 构建多样的矢量图形-SmartUE图表项目
\SVG\
\SVG\
E:/webservice/SVG/
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
SVG
SVG（Scalable Vector Graphics）：可缩放矢量图形，使用
XML 来描述二维图形和绘图程序的语言。可以在浏览器中构造 矩
形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效
果，和动画等
Page 28
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示：
Page 29
简单的图形元素
复合图表
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
HTML5的图形机制比较:
SVG VS CANVAS
Page 30
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
相同点
均是HTML5规范的一部分
均能实现图形和动画
均可以通过脚本编程控制显示
Page 31
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
不同点
Page 32
SVG Canvas
DOM 是！ 非！最大的区别！
Everything is pixel
是否矢量 矢量，放大不失真 像素操作，放大失真
图形内存模式 保留模式 即发即弃。直接向它的位图呈现它的图形，
然后对所绘制的形状没有任何认知，只会
得到最终的位图。
基本图形种类 丰富（线，圆，矩形，多边形，路径等） 除了矩形，只有路径
原生动画支持 支持 不支持。需要js去模拟，即刷屏
3D 不支持 支持
交互 支持Dom事件 只能用js根据坐标进行编程
可访问性 好。Xml结构易于分析 差。程序无法感知内容，除非图像识别或
专门做canvas内容映射
最终实现的代码特征 Svg标签+css，少量依赖js 基本上是完全依赖js
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
小结
互有所长，均适用不同应用场景：
SVG更适合规则图形的绘制和动画，更好管理。
典型场景：图表，流程图等高保真度矢量文档。
Canvas更适合不规则或涉及像素级的变化场景，更高效。
典型场景：图片编辑和图形数据分析，位图动画，2D游戏，3D虚
拟空间等像素操作。
Page 33
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
离线应用
Page 34
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
应用场景
Page 35
频道缓存，海报缓存，减低服务器负载，提升用户开机体验
-IPTV Webkit 机顶盒
离线保存桌面和通讯录数据，定时和服务器同步
-UC web版
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
离线应用：让网络应用变为桌面应用
离线存储使得你的web应用可以在用户离线的状况下进行访问。离线
存储的两个特性：
1 离线资源缓存
2 本地数据存储 local storage
离线存储技术技术显然至少有三个好处：
1 最直接的好处就是用户可以离线访问你的web应用
2 因为文件被缓存在本地使得web页面加载速度提升许多
3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服
务器造成的负载压力
Page 36
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示
Page 37
:82/SmartUEV2/
(使用chrome15+观看)
如何离线存储资源 如何使用local storage 存储数据
:82/SmartUEV2/
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
拖拽
Page 38
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
应用场景
Page 39
拖放文件实现上传和预览
拖拽操作页面上的UI组件和数据
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
Drag&Drop简介
HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了
元素是否能被拖拽，或只能选择元素的文本。同时HTML5使用
dataTransfer接口用来支持拖拽数据存储。三个重要特性：
draggable 属性：就是标签元素要设置draggable=true，否则不会
有效果，例如：<div title="拖拽我" draggable="true">列表1</div>
DataTransfer 对象：退拽对象用来传递的媒介，使用一般为
。
Drag事件：ondragstart 、ondragenter、ondragover、ondrop 、
ondragend
Page 40
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
演示
Page 41
如何实现本地文件拖拽至网页网页内拖拽事件演示
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
其他HTML5特性…
Page 42
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
@font-face使网页自由引入新的字体
ml
页面预渲染及可见性 rel=“prerender”，提升
页面打开速度
。。。
Page 43
web workers：不影响用户主要任务的情况下，
浏览器运行多个后台运行程序
Web Sockets：Web和服务器全双工通信，收发
信息不再有延迟
Geolocation：允许Web应用感知位置，显示你地理
位置附近的内容
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
三 HTML5目前存在的应用局限
Page 44
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
HTML5目前的局限
各浏览器支持程度不同。如目前支持较好的有 Opera，Chrome，
Safari
国内存在高比例旧款浏览器
兼容性不同，如视频格式
开发工具不健全
规范未正式发布
浏览器效率未到达理想
Page 45
英文目录标题:35-40pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文目录标题:35-40pt
颜色: R153 G0 B0
字体:黑体
英文目录正文:28-30pt
子目录 (2-5级) :20-30pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文目录正文:28-30pt
子目录(2-5级):20-30pt
颜色:黑色
字体:细黑体
三 开放讨论
HTML5适合于哪些项目？
Page 46
HUAWEI TECHNOLOGIES CO., LTD. Huawei Confidential
英文标题:32-35pt
颜色: R153 G0 B0
内部使用字体 :
FrutigerNext LT Medium
外部使用字体 : Arial
中文标题:30-32pt
颜色: R153 G0 B0
字体:黑体
英文正文:20-22pt
子目录 (2-5级) :18pt
颜色:黑色
内部使用字体 :
FrutigerNext LT Regular
外部使用字体 : Arial
中文正文:18-20pt
子目录(2-5级):18pt
颜色:黑色
字体:细黑体
配色参考方案：
建议同一页面
内不超过四种
颜色，以下是
13组配色方案，
同一页面内只
选择一组使用。
（仅供参考）
客户或者合作
伙伴的标志放
在右上角.
其他一些例子
Canvas放大镜：
ml
Page 47
Thank you
Thank you
