教案 讲授章节 第6章图像与多媒体文件 授课时数2学时 教学目的： 掌握图像常用属性及设置方法。 掌握HTML5的音频、视频设置方法！ 教学内容（讲授提纲） 6.1HTML5图像 <img> 定义图像 <map> 定义带有可单击区域的图像映射 <area 定义图像地图中的可单击区域 <figure> 定义煤介内容的分组，以及它们的标题。 <figcaption> 定义figure元素的标题。 6.1.1<img>标签 在HML5中，图像由<img>标签定义，<img>是空元素。 属性 描述 alt 必需，图像的替换文 以需，图像的1JRI height Pixels或% 可选， 图像的高度 width Pixels或%可选，图像的宽度 ● URL 将图像定义为客户器端图像映射 由于图像是独立文件存在的，如某个HML5文件包含十个图像，要正确显示这 个页面 文 ,HTTP协议需要1次求才自 加载图片是 文档内容 入图像，如果过度使用图像，用户 在浏览该页面时，会增加很多不必要的等待时间。 6.12map>标签和<area>标签 <map>和<area>标签用于创建图像地图，图像地图是指已被分为多个区域（图 像的一部分)的图像，这些区域称为热点，可以创建多个热点，热点支持超文 本连接。 <map>元素必需使用namc属性定义image-map名称，name属性与<img>标 签的usemap属性相关联，创建图像与映射之间的关系。 <map>元素包含<area>元素，定义图像映射中的可单击区域。 6.l.3<figure>标签和<figcaption>标签 6.2HM5音视频 标签 描述教 案 讲授章节 第 6 章图像与多媒体文件 授课时数 2 学时 教学目的： 掌握图像常用属性及设置方法。 掌握 HTML5 的音频、视频设置方法。 教 学 内 容（讲授提纲） 6.1 HTML5 图像 <img> 定义图像 <map> 定义带有可单击区域的图像映射 <area> 定义图像地图中的可单击区域 <figure> 定义媒介内容的分组，以及它们的标题。 <figcaption> 定义 figure 元素的标题。 6.1.1 <img>标签 在 HTML5 中，图像由<img>标签定义，<img>是空元素。 属性 值 描述 alt text 必需，图像的替换文本 src URL 必需，图像的 URL height Pixels 或% 可选，图像的高度 width Pixels 或% 可选，图像的宽度 usemap URL 将图像定义为客户器端图像映射 由于图像是独立文件存在的，如某个 HTML5 文件包含十个图像，要正确显示这 个页面，需要加载 11 个文件，HTTP 协议需要 11 次请求才能完成，加载图片是 需要时间的，所以要合理地在文档内容中加入图像，如果过度使用图像，用户 在浏览该页面时，会增加很多不必要的等待时间。 6.1.2 <map>标签和<area>标签 <map>和<area>标签用于创建图像地图，图像地图是指已被分为多个区域（图 像的一部分）的图像，这些区域称为热点，可以创建多个热点，热点支持超文 本连接。 <map>元素必需使用 name 属性定义 image-map 名称，name 属性与<img>标 签的 usemap 属性相关联，创建图像与映射之间的关系。 <map>元素包含<area>元素，定义图像映射中的可单击区域。 6.1.3 <figure>标签和<figcaption>标签 6.2 HTML5 音视频 标签 描述