HTML学习笔记之多媒体网页效果

来源：互联网发布：淘宝店招分层素材编辑：程序博客网时间：2024/05/21 18:22

一.滚动字幕

使用<marquee>标签，可以实现滚动字幕，以增加网页的动感，让网页显得更有生气，达到动感十足的视觉效果。

<marquee>是一个成对出现的标签，它有deirection,behavior,loop,scrollamount, scrolldelay,align,bgcolor,height,width,hspace,vspace等属性，其语法格式如下：

<marquee direction = 参数值 behavior = 参数值 loop=循环次数 scrollamount = 数值 scrolldelay = 数值 align = 参数值 bgcolor = "#" height = 数值 width = 数值 hspace=数值 vspace = 数值>要滚动的文字</marquee>

（1）direction属性用于设置滚动文字的移动方向，使文字具有更多的变化。它的属性值为left、right、up和down。其中，left表示从右向左移动，这是默认方式。right表示从左向右移动，up表示从下往上移动，down表示从上往下滚动。

（2）behavior属性用于设置滚动文字的移动效果。它的取值为scorll，slide，alternate。scroll表示循环往复滚动；slide表示滚动到一方后停止滚动，只滚动一次；alternate表示滚动到另一方后向相反方向滚动，交替进行滚动。

（3）loop属性用于设置文字滚动的循环次数，若未指定或选取为infinite时，则循环不止。

（4）scrollamount属性用于调整文字的滚动的速度。

（5）scrolldelay属性用于设置文字每一次滚动的间隔之间的延迟时间，以毫秒为单位。

（6）align属性用于设置文字的对齐方式。它的取值为top，middle，bottom。

（7）bgcolor属性用于设置滚动文字的背景色。

（8）height和width属性用于滚动文字的宽度和高度，单位为像素或者占浏览器窗口的百分比。

（9）hspace和vspace属性设置滚动文字四周的水平空间和垂直空间，单位为像素或占浏览器窗口的百分比。

示例：

<html><head><title>设置滚动字幕及其属性</title></head><body><center><marquee direction="up" behavior="slide"scrolldelay="150" align="bottom" bgcolor="black" height="50" width="525"><center><font size=5 color="white" >滚动文字可以增加网页的生动性</font></center></marquee></center></body></html>

运行结果：

此外，还可以为滚动字幕添加超级链接，其语法格式如下：

<a href= "链接位置" target= "链接窗口名称"><marquee>滚动文字</marquee></a>

示例：

<html><head><title>设置滚动字幕及其属性</title></head><body><center><a href="http://keyof.net"><marquee direction="up" behavior="slide"scrolldelay="150" align="bottom" bgcolor="black" height="50" width="525"><center><font size=5 color="white" >欢迎进入KOF.net</font></center></a></marquee></center></body></html>

运行结果：

二、嵌入多媒体文件

WEB页面是多媒体的，网页内除了可以插入各种美观的图片，及其他变化的文字样式外，还可以在网页内播放音乐及电影，或者插入flash动画等其他多媒体文件。

使用<embed>标签可以将多媒体文件插入到网页中。当访问者用鼠标单击多媒体对象时，该类多媒体文件所关联的应用软件将被激活，用户就可以欣赏有多媒体文件的网页了。

<embed src="多媒体文件的名称" width=宽度 height=高度 loop=播放次数>

src属性用于指导多媒体文件的地址，该属性是必须的。

height和width属性用于设置多媒体对象的高度和宽度，单位为像素。

loop属性用于设置播放的次数。若设为true，则无限次播放循环，直到退出该网页或单击播放网页中的停止按钮；若设置no，则仅播放一次，其默认方式为no。

1.插入音频

1）,嵌入mp3

在网页中嵌入MP3的语法格式为：

<embed src="mp3文件的名称" width=宽度 height=高度 loop=播放次数>
2）.设置背景音乐

若浏览者设置希望在浏览器的同时欣赏到背景音乐，可以通过如下语法设置:

<bgsound src=背景音乐的位置 loop=循环次数>

一般来说，背景音乐可以是mp3、midi或wav格式。

2.插入视频

在网页中插入avi视频文件的语法格式为：

<embed src="avi视频文件的名称" width=宽度 height=高度 loop=播放次数>

3.插入Flash动画

在网页中插入Flash动画文件的语法格式如下：

<embed src="flash动画文件的名称“ width=宽度 height=高度>

示例:
Flash.html

<html><head><title>嵌入多媒体文件</title></head><frameset rows ="40%,60%"><frame src="mp3.html"><frameset cols = "50%,*"><frame src="avi.html"><frame src="flash1.html"></frameset></frameset>></html>

mp3.html

<html><head><title>插入MP3文件</title></head><body><h4 align="center">网页中的多媒体</h4><hr><bgsound src="回音哥 - 你的配角.mp3" loop=3></bgsound><embed src="李易峰 - 再见再见.mp3" height="150" width=150 loop=3></embed></body></html>

avi.html

<html><head><title>在网页中插入AVI视频文件</title></head><body><h4 align="center">网页中的视频文件将播放三次</h4><hr><embed src=1.avi width=150 height="150" loop=3></embed></body></html>

flash1.html

<html><head><title>在网页中插入Flash</title></head><body><center><embed src=2.gif height="200" width="200"></embed></center></body></html>

运行结果：

火狐居然不支持embed标签，顿时郁闷了，找了好久的插件，没一个能用的，最后还是用了老IE=.=.

1 0