第5章 网页图像和多媒体信息组织
学前必读：
图像是网页上最常用的对象之一，制作精美的图像可以大大增强网页的视觉效果，使网页更加生动。在网页中恰当地使用图像，能够吸引浏览者的眼球。因此，利用好图像，也是网页设计的关键。
在网页中，除了之前讲到的可以插入文本和图像外，还可以插入动画、声音、视频等媒体元素。通过对本章的学习，读者可以学习到图像和多媒体文件的使用，从而制作出丰富多彩的网页，吸引浏览者的注意。
本章重点：
● 图像元素
● 使用背景音乐
● 滚动标签
● 多媒体标签
5.1 图像元素<img>
在网页上使用图片，从视觉效果而言，能使网页充满生机，并且直观巧妙地表达出网页的主题，这是仅靠文字难以达到的效果。
5.1.1 图像元素的路径属性src
在HTML文档中，显示图片所用的标记是img，src属性是图像必不可少的属性，用来指定图像源文件所在的路径。
基本语法：
<img src="url">
语法介绍：
（1）ing是插入图片的标记，其常用属性如表5.1所示，其中scr是其必需的属性。
（2）scr属性用来指定图像源，即图像的URL路径。该路径可以是相对路径，也可以是绝对路径。
表5.1 <ing>的属性及其功能说明
案例代码：
<!Doctpye html Public "-//w3c//dtd xhtml 1.0 Transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<img src="5.1.1.jpg" width="683" height="665" />
</body>
</html>
代码分析：
代码中加粗部分的标记是使用src插入图像文件5.1.1.jpg，在浏览器中预览，可以看到插入的图像，如图5.1所示。
图5.1 插入图像文件效果
提示：图像的地址可以使用文件和http://url关键字作为图像的地址，并且能够用于在网页上载入图像。
5.1.2 代替图片的文本属性alt
由于一些原因，图像无法正常显示，比如网络速度过慢、浏览器版本过低等，因此应该为图像设置一个替换文本，用于图像无法显示的时候告诉浏览者该图片的内容。
基本语法：
<img src="url" alt="提示文字的内容" >
语法介绍：
（1）图片的alt属性用于对图片信息进行描述。在浏览器中，当图片无法正常显示时，在图片位置显示该描述信息。当图片可以正常显示时，鼠标放在上面时才显示该描述信息。
（2）alt属性可以在Web浏览器不支持图像显示或用户关闭图像下载功能时，告诉用户该处是一幅什么样的图像。
在该语法中，提示文字的内容可以是中文，也可以是英文。
案例代码：
<!Doctpye html Public "-//w3c//dtd xhtml 1.0 Transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置图像的替代文字</title>
</head>
<body>
<img src="5.1.2.jpg" alt="点击进入" width="950" height="466" />
</body>
</html>
代码分析：
在代码中，加粗部分的标记是添加图像的提示文字“点击进入”，在浏览器中预览可以看到添加的提示文字“点击进入”，如图5.2所示。
图5.2 图片的替代文本
提示：随着互联网的发展，alt属性有了新的作用，Google和百度等搜索引擎收录页面的时候，会通过alt属性的内容来分析网页的内容。因此为图像添加替换文本可以帮助搜索引擎更好地理解内容，从而有利于搜索引擎的优化。
5.1.3 图像元素的宽度、高度属性width、height
在HTML文档中，可以设定图像的显示大小，通常情况下如果<img>元素不定义高度和宽度，图片就会按照它的原始尺寸显示。
基本语法：
<img src="url" width="图像的宽度" height="图像的高度">
语法介绍：
（1）width和height属性用来定义图片的高度和宽度，单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。
（2）在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致，显示的图像会相对于原图变形或失真。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<img src="5.1.3.jpg" />
<img src="5.1.3.jpg" width="224" height="243" />
</body>
</html>
代码分析：
在代码中，加粗的第1行标记是没有调整的图像宽度和高度，第2行标记是调整后图像的宽度为224像素、高度为243像素，在浏览器中预览，可以看到调整图像宽度和高度后的效果，如图5.3所示。
图5.3 设置图像高度和宽度
5.1.4 图像元素的边框属性border
默认情况下，图像是没有边框的，通过border属性可以为图像添加边框线。可以设置边框的宽度，但边框的颜色是不可以设置的。当图像上没有添加链接的时候，边框的颜色为黑色；当图像上添加了链接时，边框的颜色和链接文字颜色一致，默认为深蓝色。
基本语法：
<img src="url" border="图像边框的宽度">
语法介绍：
（1）border的值用数字表示，默认单位为px。
（2）默认情况下图片没有边框，即border=0。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<img src="5.1.4.jpg" width="400" height="386" />
<img src="5.1.4.jpg" width="400" height="386" border="10"/>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是使用border="10"为图像添加边框的，在浏览器中预览，可以看到添加的边框效果为10像素，如图5.4所示。
图5.4 添加边框
5.1.5 图像元素的对齐属性align
图像和文字之间的对齐是通过align属性来设定的，align的对齐方式有两种：即绝对对齐和相对对齐。绝对对齐方式的效果和文字一样，只有3种：居中（middle）、居左（left）、居右（right）。相对对齐方式是指图像与一行文字的相对位置。
基本语法：
<img src="url" align="文字的对齐方式">
语法介绍：
（1）与其他元素不同的是图像的align属性既包括水平对齐方式，又包括垂直对齐方式。
（2）align的默认值为bottom。
在该语法中，align的取值如表5.2所示。
表5.2 align属性的属性值定义
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<p><img src="5.1.5.jpg" width="290" height="206" align="left" />本公司从事空调行业已达10余年，主要经营空调技术领域技术服务，家用和商用空调售后维修、空调清洗、空调加氟（充氟、加氟利昂、加制冷剂）、空调移机、空调安装、空调配遥控器、空调回收一条龙服务。本公司技术力量雄厚，拥有一支具有实际经验设计、安装和维修保养的服务队伍，有多年家用和商用空调专业维修经验。我们熟悉各种空调设备的性能、维护与管理，具有优良的专业技能和服务常识，并且接受专业课程的培训，确保各项服务质量。公司规模完善，覆盖整个临沂。专业承接：格力、海尔、春兰、美的、海信、松下、LG、新科、现代、奥克斯、格兰仕、华宝、东芝、澳柯玛、志高、三菱重工等国内外品牌空调的移机、维修、保养、加氟、安装，以质求量，薄利多销，价格收费标准全城最低，是您空调维修安装时明智的选择。空调安装与空调维修业务是我们多年潜心研究最专业的空调服务项目。在临沂各地区都有网点，无节假日，24小时服务。时刻提供优质的空调维修，空调安装，空调移机，空调加氟，空调清洗服务。技术过硬，实力雄厚。从客户的角度出发，为客户提供质量高、价格低、及时快捷的服务。<br />
</p>
<div align="center"></div>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是设置对齐方式，设置图像左对齐，在浏览器中预览效果，可以看出图像是左对齐，如图5.5所示。
图5.5 设置对齐方式
5.1.6 图像元素的垂直边距属性vspace
垂直边距vspace用来调整图像与文字的垂直边距。
基本语法：
<img src="url" vspace="垂直边距">
语法介绍：
在该语法中，vspace属性的单位是像素。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
莽莽林海，随季节变化，呈，呈<img src="5.1.6.jpg" width="204" height="151" vspace="20"align="right" />现出瑰丽色彩。初春山山丛林，红、黄、紫、白各色杜鹃点缀其间，其后，山桃花、野梨花相继吐艳，夹杂着嫩绿的树木新叶，整个林海繁花似锦。盛夏是绿色的海洋，新绿、翠绿、浓绿、黛绿，绿得那样青翠，显出旺盛的生命力。深秋，深橙色的黄栌，浅黄色的椴叶，绛红色的枫叶，殷红色的野果，深浅相间，错落有致，万山红遍，层林尽染，似一幅独具匠心的巨幅油画。在暖色调的衬托下，湖水更蓝。蓝天、白云、雪峰、彩林倒映于湖中，呈现出光怪陆离的水景。入冬，白雪皑皑，冰瀑、冰幔晶莹洁白；莽莽林海，似玉树琼花。银装素裹的九寨沟显得洁白、高雅，像置于白色瓷盘中的蓝宝石，更加璀璨。
</body>
</html>
代码分析：
在代码中，加粗部分的标记是为图像添加垂直边距为20像素，在浏览器中预览，效果如图5.6所示。
图5.6 垂直边距
5.1.7 图像元素的水平边距属性hspace
图像与文字之间的水平距离可以通过hspace参数进行调整。通过调整图像的边距，可以使文字和图像的排列显得紧凑，看上去更加协调。
基本语法：
<img src="url" hspace="水平边距">
语法介绍：
在该语法中，水平边距hspace属性的单位是像素。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
莽莽林海，随季节变化，呈<img src="5.1.6.jpg" width="204" height="151" hspace="20"align="right" />现出瑰丽色彩。初春山山丛林，红、黄、紫、白各色杜鹃点缀其间，其后，山桃花、野梨花相继吐艳，夹杂着嫩绿的树木新叶，整个林海繁花似锦。盛夏是绿色的海洋，新绿、翠绿、浓绿、黛绿，绿得那样青翠，显出旺盛的生命力。深秋，深橙色的黄栌，浅黄色的椴叶，绛红色的枫叶，殷红色的野果，深浅相间，错落有致，万山红遍，层林尽染，似一幅独具匠心的巨幅油画。在暖色调的衬托下，湖水更蓝。蓝天、白云、雪峰、彩林倒映于湖中，呈现出光怪陆离的水景。入冬，白雪皑皑，冰瀑、冰幔晶莹洁白；莽莽林海，似玉树琼花。银装素裹的九寨沟显得洁白、高雅，像置于白色瓷盘中的蓝宝石，更加璀璨。
</body>
</html>
代码分析：
在代码中，加粗部分的标记是为图像添加水平边距，在浏览器中预览，可以看到设置的水平边距为20像素，如图5.7所示。
图5.7 水平边距
5.2 使用背景音乐
除了可以使用图像外，也可以使用音频、视频、Flash等为浏览者创造氛围，使他们喜欢上你的网站。背景音乐是其中的一种，该设置在网页中不显示播放软件界面。设置背景音乐的标记是<bgsound>，可播放的声音文件格式包括WAV、MIDI、MP3等。
5.2.1 背景音乐的路径属性src
在网页中，除了可以嵌入普通的声音文件外，还可以为某个网页设置背景音乐。
基本语法：
<bgsound src="url">
语法介绍：
scr指定声音文件的URL来源，即其路径，为必选属性。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<bgsound src="yinyue.mp3">
<img src="5.2.1.jpg" width="500" height="374" />
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是插入背景音乐“yinyue.mp3”，在浏览器中预览可以听到音乐效果，如图5.8所示。
图5.8 插入背景音乐效果
提示：在网页中加入一段背景音乐，有时也可以达到意想不到的效果，这只要用bgsound标记就可以实现。
5.2.2 背景音乐的重复属性loop
通常情况下，背景音乐需要不断地播放，可以通过设置loop属性来实现循环次数的控制。
基本语法：
<bgsound src="ur" loop="播放次数">
语法介绍：
loop指定声音文件的循环播放次数，其值为正整数n，值为−1或infinite时指定循环播放无限次。如果希望无限次地循环播放背景音乐，可将循环次数设置为true。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<bgsound src="沂蒙山小调.mp3" loop="5">
人人(那个)都说(哎)<br />
沂蒙山好<br />
沂蒙(那个)山上(哎)<br />
好风光<br />
青山(那个)绿水(哎)<br />
多好看<br />
风吹(那个)草低(哎)<br />
见牛羊<br />
(转段音乐)<br />
高梁(那个)红来(哎)<br />
稻花(那个)香<br />
满担(那个)果蛋(哎)<br />
堆满仓
<br />
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是插入背景音乐，在浏览器中预览可以听到背景音乐循环播放5次后，自动停止播放的效果，如图5.9所示。
图5.9 插入背景音乐效果
5.3 滚动标签marquee
网页的多媒体元素一般包括动态文字、动态图像、声音以及动画等，其中最简单的就是添加一些滚动效果。
5.3.1 滚动标记marquee
使用marquee标记不仅可以移动文字，也可以移动图片、表格等。在标记之间添加要进行滚动的内容，并可以在标记之间设置文字或图像的属性。
基本语法：
<marquee>…</marquee>
语法介绍：
（1）将要添加效果的内容放到<marquee>标记之间，同时也可以设置文字的字体、大小和颜色。
（2）默认情况下滚动背景的面积和文字等高，和浏览器等宽。设置绝对大小时默认单位为px。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<marquee>
轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。</marquee>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是设置滚动的标记，在浏览器中预览可以看到滚动效果，如图5.10所示。
图5.10 滚动效果
5.3.2 滚动方向direction
默认情况下只能从右向左滚动，可以通过direction来设置不同的滚动方向。
基本语法：
<marquee direction="滚动方向">…</marquee>
语法介绍：
滚动方向包含4个取值，分别为up、down、left和right，它们分别表示向上、向下、向左和向右滚动，其中向左滚动left的效果与默认效果相同。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<marquee direction="down"><p>日照香炉生紫烟</p>
<p>遥看瀑布挂前川</p></marquee>
<marquee direction="up"><p>飞流直下三千尺</p>
<p>疑是银河落九天</p></marquee>
<p> </p>
</body>
</html>
<body>
代码分析：
在代码中，加粗部分的代码标记是设置文字滚动的方向，在浏览器中预览效果，第一段文字是向下滚动的，第2段文字是向上滚动的，如图5.11所示。
图5.11 滚动文字效果
5.3.3 滚动方式behavior
除了可以设置滚动方向外，还可以通过behavior属性来设置滚动方式，如循环运动等。
基本语法：
<marquee behavior="滚动方式">…</marquee>
语法介绍：
滚动方式behavior的取值如表5.3所示。
表5.3 滚动方式的设置
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<marquee direction="down" behavior="scroll">和风细雨下，万物开始复苏，小草们破土而出，努力地探出了毛茸茸的脑袋，睡眼惺忪地打量着眼前这个全新的世界。河堤边、广场里的垂柳们，也在光秃秃的枝丫上，吐出了点点新蕊，眼见着那一点点新蕊，从圆圆的米粒样开始，一天天慢慢地变大，一天天慢慢地舒展开来，一天天慢慢地由嫩绿色变成了浅绿色，再一天天慢慢地随风摇曳婀娜的身姿，也一天天慢慢地带给我满心的欢喜。</marquee><br />
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是设置滚动的方式，在浏览器中预览循环滚动效果，如图5.12所示。
图5.12 循环滚动效果
5.3.4 滚动次数loop
默认情况下会不断地循环下去，如果希望滚动几次停止，可以使用loop设置滚动次数。
基本语法：
<marquee loop="循环次数">…</marquee>
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><marquee direction="up" loop="5">
很欣喜的，我看到了花儿们的美丽，感受到了它们的勃勃生机，更听到了它们对春天的深情呼唤。</marquee>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是设置滚动文字的循环次数，在浏览器中预览循环5次的效果，如图5.13所示。
图5.13 设置循环的次数
5.3.5 滚动速度scrollamount
可使用scrollamount设置滚动的快慢。
基本语法：
<marquee scrollamount="滚动速度">…</marquee>
语法介绍：
滚动的速度实际上是设置滚动每次移动的长度，以像素为单位。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><marquee direction="up" behavior="scroll" scrollamount="5">
那些美丽的花儿，浓郁灿烂，为春天奉献了爱，为世间奉献了自己。它们，热烈地开在自己的世界里，开在明媚的春光里，开在袭人的寒气里，也永远开在我驱走寒冬，迎来希望的温和静谧的心里。</marquee>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是设置滚动的速度，在浏览器中预览将scrollamount设置为5的效果，如图5.14所示。
图5.14 滚动的速度效果
5.3.6 滚动延迟scrolldelay
可以使用scrolldelay设置滚动的时间间隔。
基本语法：
<marquee scrolldelay="时间间隔">…</marquee>
语法介绍：
scrolldelay的时间间隔单位是毫秒。如果设置的时间比较长，会产生走走停停的效果。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<marquee direction="up" scrollamount="5"scrolldelay="100">
<p>碧玉妆成一树高</p>
<p>万条垂下绿丝绦</p></marquee>
<marquee direction="left" scrollamount="5"scrolldelay="200">
<p>不知细叶谁裁出</p>
<p>二月春风似剪刀</p></marquee>
</body>
</html>
代码分析：
在代码中，加粗部分的标记是设置滚动的延迟时间，在浏览器中预览，上面的一段将延迟时间设置为100毫秒，下面的一段设置为200毫秒，效果如图5.15所示。
图5.15 延迟的效果
5.3.7 滚动区域的背景颜色bgcolor
在网页中，为了突出某部分内容，常常使用不同的背景色来显示。可以使用bgcolor设置滚动背景颜色。
基本语法：
<marquee bgcolor="背景颜色">…</marquee>
语法介绍：
滚动背景颜色设置为十六进制值的颜色。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><marquee direction="up" scrollamount="3" bgcolor="#889966">
壮志雄略握心中，芳名千古年少梦。三年五载始争雄，志大才盛方为赢。辗转泥泞夜难眠，心酸孤意常相伴。乘风破浪终有时，青春虽逝业辉煌。</marquee>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记设置了滚动文字的背景，在浏览器中预览，滚动文字后面的背景呈绿色，如图5.16所示。
图5.16 滚动背景颜色效果
5.3.8 滚动背景宽度width和高度height
如果不设置滚动背景的面积，默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽，使用width和height参数可以调整其水平和垂直的范围。
基本语法：
<marquee width="背景宽度" height ="背景高度">…</marquee>
语法介绍：
此处设置的宽度和高度的单位均为像素。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><marquee direction="up" scrollamount="3" width="200" height="300">
我把阳光还给阳光，让骄傲的骄傲，今夜琴子只属于她自己。一切都在生长。今夜我只有美丽的月光，静静，哥哥，今夜我不关心人类，我只想你。</marquee>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是设置滚动效果的宽度和高度，在浏览器中预览，可以看到将宽度设置为200像素、高度设置为300像素的效果，如图5.17所示。
图5.17 滚动文字的范围
5.3.9 设置空白空间hspace、vspace
默认情况下，滚动对象周围的文字或图像是与滚动背景紧密连接的，使用hspace和vspace可以设置它们之间的空白空间。
基本语法：
<marquee hspace="水平范围" vspace="垂直范围">…</marquee>
语法介绍：
该语法中水平和垂直范围的单位均为像素。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<marquee direction="up" scrollamount="3" bgcolor="#fff666"
hspace="50" vspace="40">
走出大学校门，踏入工作岗位。英雄不问出处，为青</span>春而战，也许是真诚感动了上苍，催生了理想的嫩芽。我很敬仰这里的人们，辛勤的汗水，敏锐的目光。
</marquee>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记中设置了空白空间效果，在浏览器中预览，如图5.18所示。
图5.18 空白空间效果
5.4 多媒体标签
embed可以用来插入各种多媒体，格式可以是MIDI、WAV、AIFF、AU、MP3等，Netscape及新版的IE都支持。embed标签用于播放一个多媒体对象。
基本语法：
<embed src="url" loop="true | false" autostart="true | false" width="多媒体的宽度"height="多媒体的高度"></embed>
语法介绍：
（1）scr指定多媒体文件的URL来源，即其路径，可以是相对路径或绝对路径。为必选属性。
（2）loop指定声音文件的循环播放次数，值为true表示可循环播放无限次，值为false表示只播放一次，false为默认值。
（3）autostart指定多媒体文件在下载后是否自动播放。
案例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<embed src="flash.swf" width="780" height="400"></embed>
</body>
</html>
代码分析：
在代码中，加粗部分的代码标记是插入多媒体，在浏览器中预览插入的Flash动画效果，如图5.19所示。
图5.19 插入Flash动画效果
提示：考虑到网速问题，一般多媒体文件不能太大。
5.5 课后习题
1.填空题
（1）默认情况下，图像是没有边框的，通过______属性可以为图像添加边框线。可以设置边框的宽度，但边框的颜色是不可以设置的。
（2）在网页中，为了突出某部分内容，常常使用不同的背景色来显示。可以使用______设置滚动背景颜色。
2.操作题
插入图像并添加背景音乐，效果如图5-20所示。
图5-20 插入图像并添加背景音乐效果