《HTML5+CSS3项目开发案例教程》 项目三 应用和美化图像及多媒体.pptx

应用和美化图像及多媒体项目3

图像具有形象、直观、生动、简洁等特点，在网页中适当位置插

入图像可以为浏览者提供舒适的阅读体验。此外，适当嵌入音频或视频也是增强网页可读性的有效途径。本项目将介绍在HTML5中应用图像、音频、视频等媒体文件，并使用CSS3对它们进行美化的方法。

项冒导读

◆掌握在网页中应用图像、音频、视频的方法。

◆掌握使用CSS3美化图像的方法。

◆掌握使用CSS3设置背景的方法。

◆了解使用CSS3设置渐变的方法。

学习目标

使用CSS3美化图像与背景

内容概览

任务3.2

应用HTML5中的图像及多媒体

·添加图像与图标

·添加流

·嵌入多媒体文件

3.1.1添加图像与图标

1.添加图像

在HTML5中，使用img/标签标记图像，具体格式为：

其中，src属性表示图像的引用地址，一般用相对路径表示；alt属性表示图像的代替文本，当图像元素因文件缺失、路径错误等原因无法显示时，浏览器将在原位置显示代替文本，这一属性在一些特定环境中非常重要。例如，盲人读屏软件会将

imgsrc=urlalt=代替文本I

代替文本朗读出来，帮助盲人识别图像。

提示：在网页中应用图像时，一定要注意图像路径的正确性，并将图像文件拷贝到网页所在的站点文件夹中，一般放在网站根目录文件夹下的images文件夹中。否则可能会导致图像不能正常显示。

..

img/标签中还有一些其他属性常用的有height和width,它们用于设置图像的高度和宽度，取值单位可以是

imgsrc=images/p1.jpgalt=清明上河图(局部)I

清明上河图(局部)

活明上河图，中国十大传世名画之一.为北宋风俗画，北宋画家张择端仅见的存世糖品，

属国宝级文物，现藏于北京故宫博物院。

【例3-1】img/标签的应用(部分代码),页面效果如下图3-1所示。

今c①文件|D:/云例与素材/项日3/【例3-1】html☆θ

px,也可以是百分比。

【83-1]html×+

2.添加图标

此处的图标是指网站的Logo,也称为网站图标。图标大小一般为16×16px,透明背景。网站图标一般显示在浏览器选项卡、历史记录、书签或地址栏中。在HTML5中，使用link标签添加图标，具体格式为：

其中，rel的属性值“shortcuticon”表示添加的是一个图标文件，href属性表示图标文件的地址。有时还需要添加type属性，以使更多浏览器识别，属性值为

linkrel=shortcuticonhref=图标地址I

“image/x-icon”。需要注意的是，link/标签必须写在头部标签中。

title名画赏析——清明上河图(局部)/title

linkrel=shortcuticonhref=images/favicon.ico/

图标一般使用扩展名为ico*的图像文件，但在使用link/标签

添加图标时，也可以使用其他格式的图像，姐gpng等。

【例3-2】在网页中添加图标(部分代码),页面效果如下图3-2所示。

☆

3.绝对路径与相对路径

(1)绝对路径。

指素材文件的真正地址，可以是文件在磁盘上的完整路径，也可以是文件在网络上的完整网址。

例如，例3-1中图像地址可以改写为“D:案例与素材/项目3/images/pljpg”。

制作网页时不推荐使用绝对路径，因为在网页制作完成后需将其上传至服务器，通过服务器打开的文档中，素材文件的绝对路径将会发生改变，导致文

件无法引用。

(2)相对路径。

指素材文件相对于当前文件的地址，也就是以当前文件为起点，通过层级关系描述素材文件的位置。一般有以下3种情况。

①素材文件与当前文件位于同一文件夹时，只需直接输入素材文件的名称，如

imgsrc=pl.jpg/。

②素材文件位于当前文件的下一级文件夹时，需要将文件夹名和文件名一同输

入，并将它们用“1”隔开，如imgsrc=images/pl.jpg。

③素材文件位于当前文件的上一级文件夹时，需要在文件夹名前加上“.”,每上一级即增加一个“..!”。

例如，在如下图3-3所示的“pagel.html”文档中引用pl.jpg时，使用相对路径可

文件夹1

D-

images—

文件夹2

pagel.html

pljpg

以写为imgsrc=./images/pl.jpg。

3.1.2添加流

在HTML5中，新增了流标签f