当前位置：首页 > news >正文

Web前端开发——图像与多媒体文件（上）

news 来源：原创 2025/8/27 0:05:56

学习目标：

优秀的商业网站往往通过为页面添加大量的图像、声音、视频、动画等多媒体信息来丰富网站的内容，吸引更多网络访问者的关注。目前大型商业网站非常注重对Web前端开发技术的研究，通过组合各类前端开发技术来改善用户体验和增加用户互动环节、最大限度地获取商业利润。本章重点介绍图像、滚动文字、音频等多媒体信息在HTML文档中的使用方法。

Web前端开发工程师应知应会以下内容:
1）掌握图像img标记的语法以及属性和图像热区链接的设置方法。

2）掌握滚动文字 marquee 标记的语法及属性设置方法。

3）掌握嵌入多媒体文件embed 标记的语法及属性设置方法。

4）学会用超链接插入动画、音频、视频等多媒体信息。

图像

图像是网页中必不可少的元素，灵活地应用图像会给网页增色不少，而且图像直观明了、绚丽美观，是文字无法替代的。网页上常见的图像格式有JPEG(Joint Photographic Experts Group)、GIF(GraphicsInterchange Format)和 PNG(Portable Network Graphics)等，BMP 格式不常用。在HTML文档中使用img标记在网页上插人图像。设置它的属性可以控制图像的路径、尺寸和替换文字等。

1.1 插入图像

用户可以使用HTML的img标记将图像插入网页中，也可以使用CSS设置成某元素的背景图像，根据图像的格式不同，其适用的地方也不同。

1.1.1 基本语法

<img sre="URL"alt="代文本">

1.1.2 语法说明

img标记是单(个)标记，图像样式由img标记的属性决定。img标记有两个必选属性、分别是src、alt，其他属性为可选属性，img标记的具体属性、取值及说明如下表所示。

src指“source”。源属性的值是图像的URL地址。用户可以采用绝对路径或相对路径来表示文件的位置，例如src="D:/web/ch6/imagesl.jpg"是采用绝对路径，而src=1mages1.jpg"是采用相对路径。

属性	取值	说明
alt	text	规定图像的替代文本
src	URL	规定显示图像的 URL
name	text	规定图像的名称
height	pixels,%	定义图像的高度
width	pixels,%	设置图像的宽度
align	top\|middle\|bottom\|left\|center\|right	规定如何根据周围的文本来排列图像,分水平、垂直两个方向
border	pixels	定义图像周围的边框
hspace	pixels	定义图像左侧和右侧的空白
vspace	pixels	定义图像顶部和底部的空白
usemap	URL	将图像定义为客户器端图像映射

1.2 设置图像的替代文本

img标记的alt属性用来为图像设置替代文本。替代文本有以下两个作用:。在浏览网页时，在鼠标指针悬停在图像上的，鼠标指针旁边会出现替代文本。当图像加载失败时，在图像的位置上会显示红色的“X”，并显示替代文本。

1.2.1 基本语法

<img src="URL"alt="替代文本">

1.2.2 语法说明

替代文本既可以是中文也可以是英文。

1.3 设置图像的高度和宽度

img标记的width和height属性用来设置图像的宽度和高度。在默认情况下,，中的图像大小由图像原来的宽度和高度来决定。如果不设置图像的宽度和高度，则图像的大小和原图一样。

1.3.1 基本语法

<img src ="URL" width="value" height ="value">

1.3.2 语法说明

1）图像高度和宽度的单位可以是像素，也可以是百分比。
2）在设置图像的宽度和高度属性时，可以只设置宽度和高度属性中的一个，另一个属性将按原图的宽度、高度等比例显示。如果同时设置两个属性，图像会发生变形。

1.4 设置图像的边框

默认图像是没有边框的，通过img标记的border属性可以为图像设置边框的宽度，但边框的颜色是不可以调整的，当未设置图像链接时，边框的颜色为黑色；当设置图像链接时，边框的颜色和链接文字的颜色一致，默认为深蓝色。通过样式表可以修改边框的线型宽度和颜色。

1.4.1 基本语法

<img src = "URL" border = "value">

1.4.2 语法说明

value为边框线的宽度，用数字表示，单位为像素。

1.5 设置图像的对齐方式

图像和文字之间的对齐方式通过img标记的align属性来设置。图像对齐方式分水平对齐方式和垂直对齐方式两种，其中水平对齐方式的取值有left、center、right,垂直对齐方式的取值有 top、middle、bottom，表示图像与同行文字的相对位置。

1.5.1 基本语法

<img src ="URL" align="value">

1.5.2 语法说明

align属性的取值及说明如下表所示。

取值	说明
top	图像的顶端和当前行的文字顶端对齐,当前行的高度相应扩大
middle	图像的水平中线和当前行的文字中线对齐,当前行的高度相应扩大
bottom	图像的底端和当前行的文字底端对齐,当前行的高度相应扩大
left	图像左对齐,浮动游离于文字之外,文字环绕图像周围,文字行的高度没有任何变化
center	图像中线和当前行的文字中线对齐,当前行的高度相应扩大
right	图像右对齐,浮动游离于文字之外,文字环绕图像周围,文字行的高度没有任何变化

1.6 设置图像的间距

图像img标记的hspace 和vspace 属性用来控制图像的水平距离和垂直距离，而且两者均以px为单位。注意在编写代码时不需要给属性值加上单位px，否则不会产生效果。

1.6.1 基本语法

<img src="URL" hspace="水平间距数值""yspace-"垂直问距数值">

1.6.2 语法说明

hspace 调整图像左右两边的空白距离，vspace 调整图像上下两边的空白距离在实际应用中很少直接使用图像的对齐属性和图像的间距属性，一般都采用CSS替代所以此处不再举例。

1.7 设置图像的热区链接

除了对整幅图像设置超链接外，还可以将图像划分为若干区域，这叫作“热区”，每个区域可设置不同的超链接。此时包含热区的图像可以称为映射图像。

1.7.1 基本语法

<img src="图像地址"usemap="#映射图像名称">
<map name-"映射图像名称" id="映射图像名称"><area shape="热区形状1" coords="热区坐标1" href="URL1"><area shape="热区形状2" coords="热区坐标2" href="URL2">
</map>

1.7.2 属性语法

usemap属性将图像定义为客户端图像映射。图像映射指的是带有可单击区域的图像。usemap属性与map标记的name或id属性相关联(适应不同浏览器的需要)，usemap属性的值以“#”开始，后面紧跟“映射图像名称”，以建立<img>标记与<map></map>标记之间的关系。它指向特殊的<map>区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为，包括加载和显示另一个文档。

map标记是成对标记。name或id属性映射图像的名称，与img标记的usemap属性的值关联。

area标记是单(个)标记，定义图像映射中的区域。<area >标记总是嵌套在<map></map>标记中。该标记有3个属性，分别是shape、coords、href。href属性定义此区域的目标URL。shape和coords属性的取值及说明如下表所示。

取值	说明
rect(shape)	矩形区域
circle(shape)	圆形区域
poly（shape）	多边形区域
x1,y1,x2,y2(coords)	代表矩形的两个顶点坐标
center-x,center-y,radius(coords)	代表圆心和坐标
x1,y1,x2,y2,...,xi,yi,...,xn,yn,x1,y1(coords)	代表各顶点坐标（首、尾坐标相同，形成封闭图形）

ps：本节讲述了图像这一部分，下节我们更新滚动文字。