HTML5中的图像、音频和视频.pptVIP

图4-7 多媒体页面浏览效果 第4章结束 认真总结，勤加练习 HTML5+CSS3网页设计与制作案例教程 HTML5中的图像、音频和视频 第4章 4.3 在网页中插入视频video 4.1文件路径 4.2 在页面中插入图像img 4.5使用多种来源的多媒体和备用文本source 4.4 在网页中插入音频audio 4.8综合实例——多媒体页面的设计 4.6 插入多媒体文件embed 4.7 定义媒介分组和标题figure/figcaption HTML5中的图像、音频和视频 HTML5中新增的元素改变了现有的局面，它提供了音频和视频的标准接口，在支持HTML5的浏览器中不需要安装任何插件就可以播放视频、动画和音频等多媒体元素。 本章学习目标： （1）掌握文件路径 （2）掌握图像元素的使用方法。 （3）掌握多媒体元素的常用属性及使用方法。 文件路径就是文件在电脑中的位置，表示文件路径的方式有两种，相对路径和绝对路径。 4.1 文件路径 4.1.1 绝对路径 绝对路径包含了指向目录或文件的完整信息，包括模式、主机名和路径。就路径来说，绝对路径本身与被引用文件的实际位置无关，无论是在哪个主机上的网页中，某一文件的绝对路径都是完全一样的。 例如： /index.html 89 4.1.2 相对路径 相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。 图4-1 文件结构 1、引用同一目录下的文件 例如：如图4-1所示，文件夹admin中的文件login.html要访问logout.html，相对路径为logout.html。 2、引用子目录下的文件 例如：如图4-1所示，文件夹admin中的文件login.html要访问logout.html，相对路径为logout.html。 3、引用上层目录的文件 如果要引用文件层次结构中更上层目录中的文件，那么应该使用两个句点和一个斜杠，每个../ 都表示“到当前文件的上一层”。 例如：如图4-1所示，login.html文件要访问book.html文件，相对路径为../bookstore/book.html 4、根相对路径 根路径是从网站的最底层开始起，一般的网站的根目录就是域名下对应的文件夹。 例如：如图4-1所示，cart.html文件访问foot.png，如果写成根路径为/images/foot.png 当前，Web 上用的最广泛的三种格式是GIF、PNG 和JPEG。 1.JPEG格式 JPEG 格式由一个软件开发联合会组织制定，是一种有损压缩格式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤,文件后辍名为“．jpg”或“．jpeg”。 2. GIF格式 GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。 3.PNG格式 PNG 是无损的格式，因此采用这种格式对图像进行压缩时不会造成品质的损失。GIF 只有256 种颜色，但PNG 却支持几百万种颜色。 4.2 在页面中插入图像img 4.2.2 插入图像 img src=url / 1、图像资源属性——src属性 在img元素中src属性是不能缺省的。基本语法： 2、图像替代文本——alt属性 使用alt 属性，可以为图像添加一段描述性文本，当图像不能够正常显示或鼠标指向图片并暂停在图片上时会显示的替代文本。基本语法： img src=url alt=替代文本 / 3、图像的宽高——width和height属性 基本语法： img src=url width=像素|百分比 height=像素|百分比 / !DOCTYPE html html head title图像的应用/title /head body h1风景图片/h1 img src=images/image6.jpg alt=图片不存在/ img src=images/image2.jpg alt=图片原始尺寸/ img src=images/image3.jpg alt=规定宽带，高度自动等比例变化 width=300 / img src=images/image4.jpg alt=规定宽带和高度 width=300 height=305 /? /body /html 图4-2 img图像的应用浏览效果 【例