第八章 添加多媒体
在网页中还可以插入动画、声音、视频等媒体元素，如滚动效果、Flash、Applets、ActiveX及Midi声音文件等。
8.1 设置滚动效果
网页的多媒体元素一般包括动态文字、动态图像、声音以及动画等，最简单的就是添加一些滚动效果
8.1.1 滚动标记marquee
使用marquee标签不仅可以移动文字，也可以移动图片表格等。
语法：<marquee>......</marquee>
说明：在标记之间添加要进行滚动的内容，并可以在标记之间设置文字或图像的属性。
eg:
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
<marquee>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。
</marquee>
</body>
</html>
运行结果：
eg:滚动图片
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
<marquee>
<img src="image/yth.bmp" width="800" height="600">
</marquee>
</body>
</html>运行结果：
8.1.2 滚动方向 direction
默认从右往左滚，可以通过diretion来设置不同的滚动方向
语法: <marquee direction="滚动方向">......</marquee>
说明: 滚动方向取值:left，right,up,down。其中left和默认效果相同
eg：
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
<marquee direction="down">
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!
</marquee>
<br><br><br><br><br>
<marquee direction="left">
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。
</marquee>
<br><br><br><br><br>
<marquee direction="right">
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。脸色不好，就乐一乐。腿脚发麻，就站一站。心情不顺，就唱一唱。
</marquee>
<br><br><br><br><br>
<marquee direction="up">
轻轻伸起你的手掌，舒张着五指，微微闭上双眼，<br>
聆听着清晨鸟儿的呼唤，遐想着蓝天的梦，<br>
在心中悄悄地画下一个太阳，让阳光充满你的内心，<br>
让力量再次回归等等。希望对你有所帮助。
</marquee>
</body>
</html>
运行结果：
8.1.3 滚动方式 behavior
设置滚动方式，循环滚动，只滚动一次，来回交替滚动
语法:<marquee behavior="滚动方式">......</marquee>
说明:
| behavior的取值 | 滚动效果 |
| scroll | 循环滚动，默认效果 |
| slide | 只滚动一次就停止 |
| alternate | 来回交替滚动 |
eg:
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
<marquee direction="down" behavior="scroll">
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!
</marquee>
<br><br><br><br><br>
<marquee direction="left" behavior="slide">
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。
</marquee>
<br><br><br><br><br>
<marquee direction="right" behavior="alternate">
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</marquee>
</body>
</html>运行结果：
8.1.4 滚动速度 scrollamount
语法:<marquee scrollamount="滚动速度">......</marquee>
说明:滚动的速度实际上是设置每次滚动时移动的长度，以像素为单位
eg:
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
<marquee direction="up" behavior="scroll" scrollamount="3">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<center>
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</center>
</marquee>
</body>
</html>运行结果：
8.1.5 滚动延迟 scrolldelay
scrolldelay设置滚动的时间间隔
语法: <marquee scrolldalay="时间间隔">......</marquee>
说明:时间间隔单位是毫秒，设置时间较长，会产生走走停停的效果
eg:
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
<marquee direction="up" scrollamount="5" scrolldelay="200">
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</marquee>
<marquee direction="left" scrollamount="5" scrolldelay="400">
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</marquee>
</body>
</html>运行结果：
8.1.6 滚动循环 loop
默认情况下滚动会不断地循环下去，如果希望滚动几次后停止，可以使用loop设置滚动次数
语法:<marquee loop="循环次数">......</marquee>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
<marquee direction="left" scrollamount="50" loop="2"> <!--速度很快 但只循环两次-->
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</marquee>
</body>
</html>
运行结果:
8.1.7 滚动范围 width,height
若不设置滚动背景面积，默认情况下，水平滚动的文字背景与文字同高、与浏览器同宽，使用width和height参数可以调整其水平和垂直的范围。
语法: <marquee width="背景宽度" height="背景高度">......</marquee>
说明:宽度高度单位均为像素
eg:
<html>
<head>
<meta charset="UTF-8">
<title>滚动范围</title>
</head>
<body>
<marquee direction="up" scrollamount="3" width="1920" height="950"> <!--设置滚动范围为整个窗口 然后center属性 表示在规定范围中央 才达到在窗口中央片尾的效果--><!--高度故意设置小一点，不然开始后等几秒才出来-->
<center>
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。<br>
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</center>
</marquee>
</body>
</html>
运行结果:
8.1.8 滚动背景颜色 bgcolor
语法:<marquee bgcolor="背景颜色">......</marquee>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>滚动范围</title>
</head>
<body>
<marquee direction="up" scrollamount="3" width="500" height="300" bgcolor="gray">
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。<br>
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</marquee>
</body>
</html>
运行结果:
8.1.9 空白空间 hspace、vspace
设置滚动对象周围文字或图片与滚动背景之间的空白空间
语法: <marquee hspace="水平范围" vspace="垂直范围">......</marquee>
说明:水平范围和垂直范围的单位均为像素
eg:
<html>
<head>
<meta charset="UTF-8">
<title>滚动范围</title>
</head>
<body>
温馨语录:<br>
<marquee direction="up" scrollamount="3" width="500" height="300" bgcolor="gray" hspace="50" vspace="40">
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。<br>
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</marquee>
</body>
</html>
运行结果:
8.2 插入多媒体文件
在网页中加入音乐或视频文件
8.2.1 插入Flash动画
Flash是一种动画技术，在网页制作中常常会用到Flash,他可以实现一些较为复杂的动态效果，让网页的画面更加生动
语法： <embed src="多媒体文件地址" width="多媒体的宽度" height="多媒体的高度"></embed>
eg：
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
在网页中插入Flash动画效果<br>
<embed src="flash/小红帽.swf" width="780" height="400"></embed>
</body>
</html>
运行结果：
在网络上，最常见的多媒体格式就是Flash动画，Flash不仅占用空间小，而且还能美化页面
8.2.2 插入音频和视频文件
语法： <embed src="多媒体文件地址" width="播放界面宽度" height="播放界面高度"></embed>
eg:
<html>
<head>
<meta charset="UTF-8">
<title>插入音视频</title>
</head>
<body>
在网页中插入音频文件<br>
<embed src="flash/ml.mp3" width="300" height="100"></embed>
<br><br>在网页中插入视频频文件<br>
<embed src="flash/ps.mp4" width="600" height="300"></embed>
</body>
</html>
运行结果:
8.3 设置背景音乐
在网页中加入一段背景音乐，有时也可以达到意想不到的效果，这只要用bgsound标签就可实现
8.3.1 背景音乐 bgsound
语法: <bgsound src="背景音乐地址">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>背景音乐</title>
</head>
<body bgcolor="black">
<bgsound src="flash/ml.mp3" loop="-1"> <!--背景音乐，页面上不显示什么，但是会有音乐播放-->
<marquee direction="up" scrollamount="3" width="1920" height="950"> <!--设置滚动范围为整个窗口 然后center属性 表示在规定范围中央 才达到在窗口中央片尾的效果--><!--高度故意设置小一点，不然开始后等几秒才出来-->
<center>
<font color="white" size="20">
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。<br>
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</font>
</center>
</marquee>
</body>
</html>运行结果:
然而并没有音乐声
百度一波发现是bgsound的兼容性问题，参考这篇博客
解决方案，插入音频，width和height都设为0，可达相同效果
eg:
<html>
<head>
<meta charset="UTF-8">
<title>等效背景音乐 解决兼容问题</title>
</head>
<body bgcolor="black">
<embed src="flash/ml.mp3" width=“0” height="0"> <!--背景音乐，页面上不显示什么，但是会有音乐播放-->
<marquee direction="up" scrollamount="3" width="1920" height="950"> <!--设置滚动范围为整个窗口 然后center属性 表示在规定范围中央 才达到在窗口中央片尾的效果--><!--高度故意设置小一点，不然开始后等几秒才出来-->
<center>
<font color="white" size="20">
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。<br>
我以痴心，静待你芳心，海枯石烂我不会死心，别叫我伤心<br>
你是我甜心,这代表我真心，希望赢得你的心，祝欢心，别没良心!<br>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。<br>
心情不好，就静一静。运气不好，就等一等。身体不好，就养一养。
</font>
</center>
</marquee>
</body>
</html>
运行结果:
有字幕，有声音，成功！
8.3.2 循环次数loop
设置背景音乐循环播放的次数
语法:<bgsound src="背景音乐地址" loop="播放次数">
说明:无限次播放背景音乐，将播放次数设置为true
8.4 插入 Java Applet
JAVA小应用程序，现已过时
语法:
<applet code="java.class" width="宽度" height="高度">
<param name="文件夹名称" value="图片名称">
</applet>第八章总结
8.1 设置滚动效果
<html>
<head>
<meta charset="UTF-8">
<title>设置滚动效果</title>
</head>
<body>
<!--滚动方向:up/down/left/right-->
<!--滚动方式:scroll/slide/alternate-->
<marquee diretion="滚动方向" behavior="滚动方式" scrollamount="滚动速度" loop="具体指定循环滚动次数" width="滚动背景宽度" height="滚动背景高度" bgcolor="滚动背景颜色" hspace="水平空白范围" vspace=”垂直空白范围“>
一辈子的朋友就是：理解你的过去，相信你的未来，并包容你的现在的人。
</marquee>
</body>
</html>8.2 插入多媒体文件
<html>
<head>
<meta charset="UTF-8">
<title>插入多媒体</title>
</head>
<body>
<embed src="swf/mp3/mp4等文件地址" width="播放界面宽度" height="播放界面高度"></embed>
</body>
</html>
8.3 插入背景音乐
<html>
<head>
<meta charset="UTF-8">
<title>插入多媒体</title>
</head>
<body>
<bgsound src="音乐文件地址" loop="循环次数(true表示无限循环)"></bgsound>
</body>
</html>