HTML之多媒体、滚动字幕和列表

在现在的网页中,只有文字和图片是完全不够的,还要有动画、声音、列表等的加入,这样整个页面才能更加吸引人。在HTML中提供了插入各种多媒体元素、滚动字幕和列表的功能。

多媒体元素

Web的最大魅力就是可以将图片、声音、动画和视频等文件插入到网页中,这些图片、声音、动画和视频统称为多媒体。

插入多媒体元素
在HTML中添加多媒体元素的标记是<EMBED>,这里的多媒体元素包括声音和动画两种。也就是说,除了设置背景音乐之外,还可以为页面添加声音和动画文件,是页面动感十足。在页面中添加多媒体文件,同样要设置源文件,SRC属性是必不可少的。另外,由于多媒体文件在播放器需要一定的空间,因此要为器设置大小。可以说,要在页面添加多媒体元素,仅使用<EMBED>标记是不够的,其语法如下所示:

<EMBED SRC="源文件地址" WIDTH="多媒体显示的宽度" HEIGHT="多媒体显示的高度"></EMBED>

一般情况下,不在标记<EMBED>和</EMBED>之间添加其他的内容

循环播放
默认情况下,多媒体文件播放一次以后就会自动停止。如果希望该文件循环播放,则需要使用LOOP属性来进行设置,其语法是:

<EMBED SRC="源文件地址" WIDTH="多媒体显示的宽度" HEIGHT="多媒体显示的高度" LOP="循环播放"></EMBED>

一般情况下,设置循环播放属性的时候,需要将AUTOSTART设置为TRUE。

自动播放
通过<EMBED>元素中的AUTOSTART属性可以来设置打开网页时背景音乐是否自动播放,其语法如下所示:

<EMBED SRC="源文件地址" width="多媒体显示的宽度" height="多媒体显示的高度" autostart=是否自动播放></EMBED>

这里,AUTOSTART属性可以取值为TRUE和FALSE,其中TRUE表示自动播放,而FALSE则表示需要手动进行播放。

隐藏多媒体元素
有时候我们希望在网页中只听到多媒体文件的播放声音,而看不见多媒体文件。这时可以使用<EMBED>元素中的HIDDEN属性来隐藏多媒体的面板,这样在播放的时候只能听到声音,而看不到画面。其语法如下所示:

<EMBED SRC="源文件地址" WIDTH="多媒体显示的宽度" HEIGHT="多媒体显示的高度" AUTOSTART=TRUE HIDDEN=隐藏值>

其中,HIDDEN的值可以取TRUE或FALSE,取TRUE则表示隐藏面板,反之则显示面板。如果设置了HIDDEN的值为TRUE,则就要将AUTOSTART的值设置为TRUE,否则用户无法播放多媒体,也就失去了添加该媒体文件的意义。

插入背景音乐

除了添加视频外,还可以通过<BGSOUND>元素为网页添加背景音乐。和图像标记一样,<BGSOUNG>元素的源文件地址属性SRC是必需的。一般情况下,背景音乐要添加在页面主体的开始位置。添加背景音乐的语法如下所示:

<BGSOUND SRC="源文件地址">

其中,作为背景音乐的可以是MP3音乐文件,也可以是其他声音文件,而在网络中应用最广泛的是MIDI声音文件。

滚动字幕

滚动字幕也可以称为一种多媒体元素,只不过这种类型的多媒体比较简单,实现的效果也比较单一。在一些时尚感要求较低的站点中,可以使用动态文字来增加页面的动感。

添加滚动字幕
滚动字幕,是指在网页中会上下活动或左右活动的字幕,可以是文字也可以是图片,可以通过<MARQUEE>标记来设置。添加滚动字幕的语法如下所示:

<MARQUEE>
要进行滚动的文字
</MARQUEE>

其中,标记<MARQUEE>和</MARQUEE>之间的文字在页面中会滚动显示,默认情况下是从右向左滚动。
滚动文字不仅可以是一行文字,还可以包括换行符<BR>以及段落标记<P>等,甚至可以包括标题文字<H>。

滚动方向
滚动方向是指文字从哪个方向开始滚动。默认情况下文字是从右向左滚动的,使用DIRECTION属性可以调整文字的滚动方向。设置文字滚动方向的语法是:

<MARQUEE DIRECTION="up/down/left/right">
要进行滚动的文字
</MARQUEE>

DIRECTION属性有四个值:left、right、up、down,分别用来设置字幕从右向左滚动、从左向右滚动、从下向上滚动、从上向下滚动,默认情况下为direction="left",即从右向左滚动。

滚动方式
文字的滚动方式主要包括循环滚动、来回滚动、以及只滚动一次就停止。设置文字的滚动方式需要使用BEHAVIOR属性,其语法是:

<MARQUEE BEHAVIOR="滚动方式">
要进行滚动的文字
</MARQUEE>

滚动方式		具体含义
scroll		循环滚动,即不停地按照设置的方向滚动
slide		只滚动一次就停止
alternate	交替滚动,即按照设置的方向和反方向来回滚动。例如设置为left,则先向左滚动,滚动到页面左端后再向右滚动

滚动字幕背景颜色
在页面中为了突出滚动文字,可以使用<MARRQUEE>元素中的BGCOLOR属性为其添加背景颜色,其语法如下所示:

<MARQUEE BGCOLOR="颜色值">
要进行滚动的文字
</MARQUEE>

滚动速度
在HTML中,可以通过<MARRQUEE>元素中的SCROLLAMOUNT属性调整文字的滚动速度,滚动速度也可以看成滚动距离,也就是没滚动一下文字向前移动的像素数。其设置的语法是:

<MARQUEE SCROLLAMOUNT="滚动速度">
要进行滚动的文字
</MARQUEE> 

滚动延迟
滚动延迟是指在每一次滚动之间设置一定的时间间隔,即滚动一次后就停止一段时间在进行下一次滚动。设置滚动延迟的语法是:

<MARQUEE SCROLLDELAY="延迟时间">
要进行滚动的文字
</MARQUEE>

滚动次数
除了可以通过BEHAVIOR设置文字的滚动方式外,还可以通过LOOP属性设置文字具体的滚动循环次数,其语法如下所示:

<MARQUEE LOOP=循环次数>
要进行滚动的文字
</MARQUEE>

在这里LOOP表示循环次数,如果设置为10,就表示文字在屏幕中滚动10个循环后结束滚动。

滚动字幕空白空间
滚动字幕空白空间是指在滚动文字区域周围的空间,默认情况下滚动区域是沿着页面的边缘滚动的。如果没有使用段落标记等将其分隔,它和页面其他元素是紧紧相连的。通过HSPACE属性和VSPACE属性可以设置文字区域的水平和垂直空间,其语法如下所示:

<MARQUEE HSPACE="水平空间" VSPACE="垂直空间">
要进行滚动的文字
</MARQUEE>

设置鼠标经过效果
ONMOUSEOVER属性是用来控制鼠标滑过滚动字幕时停止滚动的效果,ONMOUSEOUT属性是用来控制鼠标移出滚动字幕区域时字幕开始滚动的效果。这两个属性必须同时来进行定义。其语法如下所示:

<MARQUEE QNMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()">
要进行滚动的文字
</MARQUEE>

其中,ONMOUSEOUT="this.start()"是用来设置鼠标移出该区域时继续滚动,ONMOUSEOV-ER="this.stop()"是用来设置鼠标移入该区域时停止滚动。通过这两个属性的同时使用,才可以使鼠标滑过滚动字幕时停止滚动,而当鼠标移开滚动字幕时又开始滚动。

无序列表

无序列表是一个对列表项目出现次序不作要求的列表,列表项目之间是并列关系,不存在先后次序。浏览器显示无序列表时,会在列表项目前加上一个项目符号,而不是显示数字,该符号也可以由网页开发人员来指定。

无序列表结构
无序列表是以<UL>标记开始,以</UL>标记结束的。在无序列表内的列表项用

• 表示,其具体的语法如下所示;

<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>

其中,每一个列表项前面都要有一个<LI>标记,它表示一个新的列表项的开始。从上面代码可以看出,无序列表是从"<UL>"标签开始,以"</UL>"标签为结束的,也就是说,"<UL></UL>"标签之内的内容才是无序列表。每个列表可能有一个或多个列表项目,每个"<LI>"标签与"</LI>"标签之内的内容是一个列表项目。

无序列表的列表项样式
默认情况下,无序列表的列表项符号是圆点,如果希望将列表项符号更改,可以使用TYPE属性将其设置为空心圆点或者空心方块。无序列表的符号类型修改语法如下所示:

<ul type="符号取值">
<li>无序列表项</li>
<li>无序列表项</li>
<li>无序列表项</li>
<ul>

其中,TYPE的取值有3钟,其具体内容如下

TYPE的取值		设置的符号样式			设置效果
disc			圆点符号,是系统的默认值		·
circle			空心圆点					⚪
square			实心方块					□

有序列表

与无序列表相对于的是有序列表,有序列表中的列表项目通常是有先后次序的,并且不能随意更换这些次序。浏览器显示有序列表时,会在列表项目前加上一个编号,用来标识项目出现的次序。当然该编号也可以由网页开发人员来指定。

有序列表结构
有序列表是以<OL>标记开始,以<OL>标记结束的。在有序列表内的列表项也是用

• 表示,其具体的语法如下所示:

<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>

有序列表的列表项样式
默认情况下,有序列表的列表项是阿拉伯数字,而通过TYPE属性也可以修改有序列表的序号类型,其语法是:

<ol type="符号取值">
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
...
<ol>

在这里,TYPE的取值有5种,其具体内容和含义如下所示:

TYPE的取值			设置的符号样式
1					系统的默认效果,以数字1、2、3、...进行排列
a					以小写的字母a、b、c......进行排列
A					以大写的字母A、B、C......进行排列
i					以小写的罗马数字i、ii、iii、iv.......进行排列
I					以大写的罗马数字I、II、III、IV......进行排列

嵌套列表

在HTML里允许在一个列表里嵌套另一个列表,每个嵌套的列表都会再一次以缩进方式显示,但不建议对列表进行多次嵌套,这样的浏览器里的显示会有点乱。在HTML中,无序列表中除了可以嵌套无序列表,也可以嵌套有序列表,反之亦然,这种嵌套称为混合嵌套。混合嵌套往往可以比单独的嵌套看上去更漂亮直观。

定义列表

定义列表也称为字典列表,是一种包含两个层次的列表,主要用于进行名词解释或名词定义。名词是第一层,其解释或定义是第二层次。另外,这种列表不包括项目符号,每个列表项带有一段缩进的定义文字,其语法是:

<DL>
<DT>名词1</DT>
<DD>名词解释</DD>
<DT>名词2</DT>
<DD>名词解释</DD>
<DT>名词3</DT>
<DD>名词解释</DD>
</DL>

这段语法中,<DL>标记表示这是一个定义列表的开始;</DL>表示定义列表的结束;<DT>表示这是一个要被解释的名词;<DD>表示这段文字是对前面名词的解释说明。

目录列表

目录列表主要用于显示文件列表,因此与无序列表相比,目录列表里的项目里的文字数量应该比无序列表少。事实上目录列表属于无序列表中的一种,大多数浏览器都不再区分目录列表与无序列表,对这两种列表的显示形式都是一致的。只有少数浏览器还区分目录列表与无序列表。目录列表用<DIR>元素来进行设置,其语法如下所示:

<DIR TYPE="">
<LI>列表项目1</LI>
<LI>列表项目2</LI>
<LI>列表项目3</LI>
</DIR>

菜单列表

菜单列表多用于罗列菜单项目,与目录列表相似,也可以看成是无序列表中的一种特殊类型。在HTML4.01里不建议使用菜单列表,目前大多浏览器也不区分菜单列表与无序列表,对这两种列表的显示形式都是一致的。菜单列表用<MENU>元素来进行设置,其语法代码如下所示:

<MENU TYPE="类型" COMPACT>
<LI>列表项目1</LI>
<LI>列表项目2</LI>
<LI>列表项目3</LI>
......
</MENU>