第1讲HTML5基础

1、Page 1 HTML5基础 Page 2 目录 l一一 什么是什么是HTML5 l二二 HTML5新特性和那些效果新特性和那些效果 l三三 HTML5目前存在的应用局限目前存在的应用局限 l四四 开放讨论：开放讨论：HTML5适合应用于我们哪些项目？适合应用于我们哪些项目？ Page 3 1 HTML历史 今天 1991年 1994年 1997年1995年 2009年 一 什么是HTML5 Page 4 2 什么是HTML5 l官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的 更新加强版本。它增加了新的标签和属性，强化了网页的标准、语 义化、图像表达

2、能力和交互效果。 l广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段， 浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括： HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等 后面我们描述的HTML5就是基于广义来讲述 Page 5 l媒体支持：Video和Audio l画布元素-Canvas以及WebGL视频加速 l增强的表单Form l更炫的平面动画-CSS3页面渲染及 CSS3 3D l矢量支持-SVG lHTML5的图形机制比较-SVG vs Canvas l离线应用 l原生的拖拽 l其他HTML5特性. 二 HTML5新特性和应用 Pag

3、e 6 媒体支持 Audio Video & WebRTC l 标签定义视频，比如电影片段或其他视频流。 l 标签定义声音，比如音乐或其他音频流。 lWebRTC（Web Real-Time Communication） 是应用在视频会议、实 时广播、多方会谈、点对点应用程序等等的新的协议与 API（用 navigator.getUserMedia 启动用户计算机的摄影机，用 PeerConnection 进行点对点传输等等） Page 7 当前应用场景 视频点播直播-优酷HTML5版本视频聊天- Google html5视频聊天功能 Page 8 演示： 0

4、/html5/video/ Video播放视频 0:82/html5/audio - js创建声音 Audio播放声音 应用场景 流程图-我司某运营产品 构建3D虚拟拓扑图-某3D网管 画布元素画布元素CanvasCanvas以及以及WebGLWebGL视频加速视频加速 Page 10 Canvas API canvas ，HTML5最期待元素之一，可以通过脚本可以任意创建图形， 编辑图形，导入图片，导出图片。其中分2D与3D： l2D context API：基本线条、路径、插入图像、像素级操作、文字、 阴影、颜色渐变等提供图形绘制功能。 l3D conte

5、xt API（WebGL）： WebGl 定义了一套API, 能够允许在网页 中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的3d图形 API。这些API是通过HTML 5的canvas标签来使用的。 Page 11 演示： 构造一个简单的Canvas 3D物体 Canvas基本作图API之画板 0/html5/Canvas Painter/0/html5/webgl/cube.html Page 12 应用场景 配置页面-增加配置的流畅性和容错性 注册-增加注册的流畅性和无障碍浏览 http:/10.

6、138.51.50/html5/form2.0/demo1.html 增强的表单增强的表单FormForm Page 13 新的Form元素 HTML5的表单定义了十几个新的元素和特性，这些新增元素可以代 码更为易用、简洁和高效。这些新的东西包括： 1 新元素：新元素：Email、Number、Range，color picker等 2 新属性：新属性：placeholder、pattern、required、autofocus 、multiple等特 性 3 新样式新样式：新的伪类样式，比如:focus,:required,:valid等 4 新的输入方式-语音输入： x-webkit-sp

7、eech可以让标签接受语音并转 化为数字 Page 14 演示：新特性全集 0/html5/form2.0/all.html Page 15 应用场景 通讯录管理-图片墙首页portal 更丰富的样式支持更丰富的样式支持- CSS3- CSS3 CSS3新特性 l选择器 lRGBA和透明度 l多栏布局：弹性布局（水平布局、垂直布局） l多背景图 lWord Wrap l文字阴影 lfont-face属性 l盒阴影：阴影，文本阴影 l盒模型：，多背景，圆角(边框半径)，边框图片 l2D：旋转，缩放，倾斜，请参考：CSS基础变换 l3D：透视，transform

8、3D，等等 l媒体查询 l语音 Page 17 演示 0/html5/css3Explorer.html CSS3 Explorer.html Page 18 演示：CSS3 2D 0/html5/bigbigwolf.html 灰太狼 演示：CSS3 3D Google 3D box 0/html5/Morphing power cuber/ 0/html5/google 3d box 旋转的立方体 Page 20 应用场景 矢量地图-某产品 构建多样的矢量

9、图形-SmartUE图表项目 0SVGchinaMap.svg0/SmartUEV2 SVG SVG 矢量图形矢量图形 Page 21 SVG lSVG（Scalable Vector Graphics）：可缩放矢量图形，使用：可缩放矢量图形，使用 XML 来描来描 述二维图形和绘图程序的语言。可以在浏览器中构造述二维图形和绘图程序的语言。可以在浏览器中构造 矩形、圆形、矩形、圆形、 椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画 等等 Page 22 演示

10、： 简单的图形元素 0/SVG/rect2.svg 复合图表 0/SmartUEV2/UI/api/complexChart.html Page 23 相同点 l均是均是HTML5规范的一部分规范的一部分 l均能实现图形和动画均能实现图形和动画 l均可以通过脚本编程控制显示均可以通过脚本编程控制显示 HTML5HTML5的图形机制比较的图形机制比较: : SVG VS CanvasSVG VS Canvas Page 24 不同点 SVGCanvas DOM 是！非！最大的区别！ Everything is pixel 是否矢

11、量 矢量，放大不失真像素操作，放大失真 图形内存模式 保留模式即发即弃。直接向它的位图呈现它的图形， 然后对所绘制的形状没有任何认知，只会 得到最终的位图。 基本图形种类 丰富（线，圆，矩形，多边形，路径等）除了矩形，只有路径 原生动画支持 支持不支持。需要js去模拟，即刷屏 3D 不支持支持 交互 支持Dom事件只能用js根据坐标进行编程 可访问性 好。Xml结构易于分析差。程序无法感知内容，除非图像识别或 专门做canvas内容映射 最终实现的代码特征 Svg标签+css，少量依赖js基本上是完全依赖js Page 25 小结 互有所长，均适用不同应用场景：互有所长，均适用不同应用场景：

12、lSVG更适合规则图形的绘制和动画，更好管理。 典型场景：图表，流程图等高保真度矢量文档。 lCanvas更适合不规则或涉及像素级的变化场景，更高效。 典型场景：图片编辑和图形数据分析，位图动画，2D游戏，3D虚拟 空间等像素操作。 Page 26 应用场景 频道缓存，海报缓存，减低服务器负载，提升用户开机体验 -IPTV Webkit 机顶盒 离线保存桌面和通讯录数据，定时和服务器同步 -UC web版 离线应用离线应用 Page 27 离线应用：让网络应用变为桌面应用 离线存储使得你的离线存储使得你的web应用可以在用户离线的状况下进行访问。离线应用可以在用户离线的状况下进行访问。离线 存

13、储的两个特性：存储的两个特性： l1 离线资源缓存 l2 本地数据存储 local storage 离线存储技术技术显然至少有三个好处：离线存储技术技术显然至少有三个好处： l1 最直接的好处就是用户可以离线访问你的web应用 l2 因为文件被缓存在本地使得web页面加载速度提升许多 l3 离线应用只加载被修改过的资源，因此大大降低了用户请求对服 务器造成的负载压力 Page 28 演示 0:82/SmartUEV2/ (使用chrome15+观看) 如何离线存储资源如何使用local storage 存储数据 0/html5

14、/localstorage/localStorage.html Page 29 应用场景 拖放文件实现上传和预览 拖拽操作页面上的UI组件和数据 拖拽拖拽 Page 30 Drag&Drop简介 HTML5为元素新增了用于拖拽的属性draggable，这个属性决定了元 素是否能被拖拽，或只能选择元素的文本。同时HTML5使用 dataTransfer接口用来支持拖拽数据存储。三个重要特性： ldraggable 属性：就是标签元素要设置draggable=true，否则不会有 效果，例如：列表1 lDataTransfer 对象：退拽对象用来传递的媒介，使用一般为 Event.dataTran

15、sfer。 lDrag事件：ondragstart 、ondragenter、ondragover、ondrop 、 ondragend Page 31 演示 如何实现本地文件拖拽至网页 网页内拖拽事件演示 0/html5/dragdrop/list.htm0/html5/dragdrop/imageview.html 其他其他HTML5特性特性 Page 33 lfont-face使网页自由引入新的字体 0/html5/font/fontFace.html l页面预渲染及可见性 rel=“prerender”，提升 页面打开速度 l。 更多观看： http:/ 5.html web workers：不影响用户主要任务的情况下， 浏览器运行多个后台运行程序 Web Sockets：Web和服务器