版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JEYMING/article/details/80286307
<!--
图像与多媒体文件
图像、滚动文字、背景音乐等多媒体文件在HTML使用的方法
2018.01.06
-->
<html>
<head>
<meta charset="UTF-8" />
<title>图像与多媒体文件</title>
<style type="text/css">
img{
width:150px;
height:100px;
}
body{
text-align:center;
}
</style>
</head>
<body>
<!--
6.1.6 设置图像的间距
hspace 水平间距数值
vspace 垂直间距数值
<img src="URL" alt="" height="" weight="" hspace="" vspace="">
-->
<h3>图像的间距</h3>
<h4 align="center" >设置图像的间距</h4>
<hr color="#009933">
<table border="1" bordercolor="#6600ff" >
<tr align="center">
<td>图像的间距设置</td>
<td>图像排列效果</td>
</tr>
<tr>
<td>hspace="0"/vspace="0"</td>
<td><img src="https://www.baidu.com/img/bd_logo1.png" alt="hspace=0"><img src="https://www.baidu.com/img/bd_logo1.png" alt="vspace=0"></td>
</tr>
<tr>
<td>hspace="50"</td>
<td><img src="https://www.baidu.com/img/bd_logo1.png"><img src="https://www.baidu.com/img/bd_logo1.png" hspace="50" alt="hspace=50"></td>
</tr>
<tr>
<td>vspace="50"</td>
<td><img src="https://www.baidu.com/img/bd_logo1.png"><img src="https://www.baidu.com/img/bd_logo1.png" vspace="50" alt="vspace=50"></td>
</tr>
<tr>
<td>hspace="50"/vspace="50"</td>
<td><img src="https://www.baidu.com/img/bd_logo1.png"><img src="https://www.baidu.com/img/bd_logo1.png" hspace="50" vspace="50" alt="hspace=50/vspace=50"></td>
</tr>
</table>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
6.1.7 设置图像热区链接
<img src="URL" usemap="#映射图像名称">
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" href="URL">
</map>
usemap的属性与map标记中的name属性相关联
area标记是单标记数,定义图像映射中的区域
——3个属性：shape、coords、href；
href：定义区域的目标URL；
shape：rect 矩形区域、circle 圆形区域、ploy 多边形区域
coords:当shape=rect时，其值为x1,x2,y1,y2,代表矩形两个顶点的坐标
当shape=circle时，其值为center-x,center-y,radius,代表圆心和半径
当shape=ploy时，其值为x1,y1,x2,y2,x3,y3,...,x1,y1,代表各顶点坐标（首尾坐标相同，形成封闭图形）
-->
<h3>图像热区链接</h3>
<p>
<a><img src="https://www.baidu.com/img/bd_logo1.png" align="bottom" width="200" height="150" border="3" alt="Baidu" usemap="#BAIDU"></a>
<map name="BAIDU">
<area shape="circle" href="http://www.baidu.com" coords="50,50,30" alt="百度搜索">
</map>
</p>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
6.2 滚动文字
6.2.1 添加滚动文字
<marquee width="" height="" bgcolor="" direction="up|down|left|right" behavior="scroll|slide|alternate" hspace="" vspace="" scrollamount="" scrolldelay="" loop="" onmouseover="this.stop()" onmouseout="this.start()">滚动内容</marquee>
<marquee></marquee>成对标记
onmouseover="this.stop()" 表示当光标移动到滚动文字区域时，滚动内容将暂停移动
onmouseout="this.start()" 表示当光标移出滚动文字区域时，滚动内容将继续滚动
-->
<h3>滚动文字</h3>
<center><h4>添加滚动文字</h4></center>
<hr color="#000066">
<marquee>
<font face="隶书" size="7" color="#33cc33">该文字为滚动效果</font>
</marquee>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
6.2.2 设置滚动文字背景颜色与滚动循环
<marquee bgcolor="" loop="">滚动文字</marquee>
bgcolor:滚动文字的背景颜色
loop：滚动文字的循环次数，-1表示无限循环
-->
<h3 align="left">设置滚动文字背景颜色与滚动循环</h3>
<hr color="#330099">
<marquee bgcolor="#330099" loop="2">
<font face="隶书" size="5">设置滚动文字背景颜色与滚动循环2次</font>
</marquee>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
6.2.3 设置滚动方向与滚动方式
<marquee direction="滚动方向" behavior="滚动方式">滚动内容</marquee>
direction属性值 说明
----------------------------------
up 向上滚动
down 向下滚动
left 向左滚动（默认）
right 向右滚动
behavior属性值 说明
----------------------------------
scroll 循环往复滚动（默认）
slide 滚动一次就停止
alternate 来回交替滚动
-->
<h3 align="left">滚动方向与滚动方式设置</h3>
<hr color="#ff0066">
<marquee direction="up" behavior="alternate" bgcolor="#99ffcc" height="80px" width="100%">
<font face="隶书" size="5" color="#0033cc">此段文字由下到上、交替滚动</font>
</marquee>
<marquee behavior="alternate">
<font face="隶书" size="5" color="#ff0033">交替滚动</font>
</marquee>
<marquee behavior="slide">
<font face="隶书" size="5" color="#00ff00">滚动一次</font>
</marquee>
<marquee behavior="scroll">
<font face="隶书" size="5" color="#000099">一直向前滚动</font>
</marquee>
<marquee direction="right" behavior="scroll">
<font face="隶书" size="5" color="#000099">一直向后滚动</font>
</marquee>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
6.2.4 设置滚动速度与滚动延迟
scrollamount:滚动速度
scrolldelay:延迟时间
-->
<h3 align="left">滚动文字的滚动速度和时延设置</h3>
<hr color="#cc3399">
<marquee scrollamount="20" scrolldelay="100">
<font face="隶书" size="5">速度最快，时延100毫秒</font>
</marquee>
<marquee scrollamount="10" scrolldelay="150">
<font face="隶书" size="5">速度中等，时延150毫秒</font>
</marquee>
<marquee scrollamount="5" scrolldelay="200">
<font face="隶书" size="5">速递最慢，时延200毫秒</font>
</marquee>
<br />
<hr width="100%" size="50" color="#000" align="right" noshade />
<br />
<!--
6.2.5 设置滚动范围与滚动空白空间
<marquee hspace="" vspace="" height="">滚动文字</marquee>
-->
<h3 align="left">设置滚动文字的滚动空白空间</h3>
<hr color="#330099">
<marquee bgcolor="#99ffcc" width="400px" height="100px" hsapce="100" vspace="100" direction="up">
<font face="隶书" size="5">设置滚动空白空间就是指滚动文字背景和它周围文字及图像之间的空白空间范围。默认情况下，滚动对象周围的文字或图像是与滚动背景紧密相连，使用hsapce和vspace可以设置他们之间的空白空间。</font>
</marquee>
<!--
6.3 背景音乐与其他多媒体文件
6.3.1 添加背景音乐
<bgsound src="URL" loop="播放次数">
src:背景音乐文件的地址
loop：背景音乐播放次数，infinite和-1都是播放无限次数
6.3.2 插入音频和视频
<embed src="URL" width="界面宽度" height="界面高度" autostart="true|false" loop="true|false"></embed>
src:媒体文件的路径
width、height:整型值，单位为像素；
autostart:逻辑值，true为自动播放，false为不自动播放
loop：逻辑值，是否循环播放；
6.3.3 插入Flash动画
-->
<bgsound src="http://sc1.111ttt.cn/97301815582.mp3" loop="-1">
<p>下面嵌入多媒体文静</p>
<embed src="http://sc1.111ttt.cn/97301815582.mp3" width="300" height="100" autostart="true" loop="false"></embed>
<p>下面嵌入Flash文件</p>
<hr color="#ff00cc">
<center>
<!--<embed src="http://player.video.qiyi.com/cd9e177e72a7f8a08ead64c657baa50a/0/0/v_19rrb8g7jg.swf-albumId=653486400-tvId=653486400-isPurchase=0-cnId=6" width="600" height="450"></embed>-->
<br />
<embed src="http://player.video.qiyi.com/cd9e177e72a7f8a08ead64c657baa50a/0/0/v_19rrb8g7jg.swf-albumId=653486400-tvId=653486400-isPurchase=0-cnId=6" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
<br />
<embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=f0021sbiwt7&auto=0" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</center>
</body>
</html>