第11章 HTML5开发实战.ppt

教学内容：在过去的10年里，网页设计师使用 Flash、JavaScript 或其他复杂的软件和技术来创建网站。现在可以使用HTML5实现交互式服务、单页UI、交互式游戏、复杂业务应用。凭借对标准驱动的移动应用开发的支持，以及各种强大特性，HTML5迎来了它的黄金时代。本章就来介绍HTML5开发实战。; 教学重点 掌握HTML5 视频video 掌握HTML5 音频Audio 掌握HTML5 地理定位 掌握HTML5 画布canvas 掌握HTML5 SVG ;11.1 HTNL5视频video;HTML5中的video标签的出现将改变浏览器必须加载插件的情况，进一步改善用户Web体验，让用户在轻松愉快的情况下观看视频。HTML5使用video标签可以控制视频的播放与停止、循环播放、视频尺寸等。Video标签含有src、poster、preload、autoplay、loop、controls、width、height等属性。;以前网页中的大多数视频是通过插件来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。;Source元素用于给媒体指定多个可选择的文件地址，且只能在媒体标签没有使用src属性时使用。source?元素可以链接不同格式的视频文件。浏览器检测并使用第一个可识别的格式。;HTML5规定了一种通过audio元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。;11.2.1 Audio元素简介;在audio标记中，如果不包含controls属性，则audio播放器将不会呈现在页面上。在这种情况下，用户无法使用标准控件来启动音频播放。在不呈现audio播放器的情况下，可以启动audio元素音频播放的方法放在页面的load事件中 。;11.2.3 使用audio元素的事件;11.3 HTML5地理定位 ;11.3.1 地理定位方法;11.3.2 处理拒绝和错误;11.3.3 在地图上显示你的位置;在HTML5中Canvas元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。;11.4.1 canvas元素;11.4.2 基本的绘图操作;11.4.3 线性渐变;11.4.4 径向渐变;11.4.5 绘制精美时钟;SVG可缩放矢量图形是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图???内容，因此是一种和图像分辨率无关的矢量图形格式。;11.5.1 SVG概述;11.5.2 图形绘制;11.5.3 文本与图像;11.5.4 笔画与填充;11.5.5 动画;11.6经典习题;2. 上机操作题