多媒体元素标记

多媒体元素标记

:背景音乐标记

在网页中,除了可以嵌入普通的声音文件之外,还可以为某个网页设置背景音乐。作为背景音乐的可以是音乐文件,也可以是声音文件。其中最常用的是midi 文件。

语法:

说明:作为背景音乐的文件还可以是avi 文件、mp3文件等声音文件。 实例代码:

设置背景音乐 醉花阴
李清照



    薄雾浓云愁永画,瑞脑消金兽。
    佳节又重阳,玉枕纱厨,半夜凉初透。
    东离把酒黄昏后,有暗香盈袖。
    莫道不消魂,帘卷西风,人比黄花瘦。



运行这段代码,打开如下所示的界面,在打开界面之后就可以听到背景音乐。

设置背景音乐

loop :背景音乐的循环播放次数

通常情况下,背景音乐需要不断的播放,但有时也需要指定播放的次数,这一功能实现

起来并不难,只要设置相应的loop 参数即可。

语法:

说明:如果希望无限次循环播放背景音乐,可用将循环次数设置为True 。 实例代码:

设置背景音乐 醉花阴
李清照



    薄雾浓云愁永画,瑞脑消金兽。
    佳节又重阳,玉枕纱厨,半夜凉初透。
    东离把酒黄昏后,有暗香盈袖。
    莫道不消魂,帘卷西风,人比黄花瘦。



运行这段代码,背景音乐在循环播放3次以后停止。

说明:在该语法中,width 和height 一定要设置,单位是像素,否则无法正确显示播放多媒体文件的软件。

实例代码:

嵌入多媒体文件 下面是嵌入的多媒体文件:

运行这段代码,可以看到一个播放页面,如下所示。单击页面中的播放按钮放插入的声音文件exam01.mid 。

可以播

插入多媒体文件

autostart :设置自动运行

登录网页的时候常常会看看一些视频文件直接开时运行,不需要手动开始,特别是一些广告内容,这是通过autostart 参数来实现的。

语法:

说明:autostart 的取值有两个:一个是True ,表示自动播放;另一个是False ,表示不自动播放。

实例代码:

设置自动运行 下面的视频文件中左边的视频文件将会自动播放,而右边的视频文件则需要手动播放:

运行这段代码,可用看到两个视频文件的不同效果如下所示。

设置自动运行

loop :媒体文件的循环播放

这里的循环播放一般是在设置了自动播放的时候采用,与背景音乐的设置基本相同。 语法:

说明:在该语法中,loop 的取值不是具体的数字,而是True 或者False ,如果取值为True ,表示媒体文件将无限次的循环播放;如果取值为False ,则只播放一次。这里的loop 也可以设置为播放次数,但是用途并不广泛。

实例代码:

设置循环播放 下面的视频文件将循环播放:

运行这段代码的效果如下所示。

媒体文件不停的循环播放

hidden :隐藏面板

其实也可以将媒体文件的声音保留而隐藏图像,这样就相当于设置了背景声音。通过hidden 参数可以隐藏播放面板。

语法:

说明:在该语法中hidden 可以设置两个值:一是True ,表示隐藏面板;另一个是False ,表示显示面板,这是添加媒体文件的默认选项。如果要保留声音就要设置文件的自动播放。

实例代码:

设置隐藏面板 下面的视频文件播放面板被隐藏:

运行这段代码,看到播放控制面板已经不见了,只能听到播放的声音效果,如下所示。

隐藏播放面板

:滚动文字标记

使用marquee 标记可以将文字设置位动态滚动的效果。 语法:滚动文字 说明:只要在标记之间添加要进行滚动的文字即可。而且可以在标记之间设置这些文字的字体、颜色等。

实例代码:

设置滚动文字 你好,欢迎光临梦幻小屋! 这里有欢乐的歌声,这里有美好的景色

运行这段代码,为红色隶书的文字从浏览器的右方缓缓向左滚动,如下所示。

设置滚动文字

direction :文字滚动方向

默认情况下文字只能是从右向左滚动,而在实际应用中常常需要不同滚动方向的文字,可以通过direction 这一参数来设置。

语法:滚动文字

说明:该语法中的滚动方向可以包含4个取值,分别为up 、down 、left 和right ,他们分别表示文字向上、向下、向左和向右滚动,其中向左滚动left 的效果与默认效果相同,而向上滚动的文字则常常出现在网站的公告栏中。

实例代码:

设置滚动文字 你好,欢迎您的光临
这里是梦想小屋
让我们与您分享您的点点快乐
让我们与您分担您的片片忧伤
你好,欢迎您的光临
这里是梦想小屋
让我们与您分享您的点点快乐
让我们与您分担您的片片忧伤

运行这段代码,可以看到文字不同的滚动效果,如下所示。图中两段文字的感觉就像是从中间被拉扯开一样。

设置滚动方向 运行一段时间的效果

如图将文字方向相反设置,也就是上面一段文字的direction 设置为“down ”,下面一段设置为up ,运行结果就似乎是两组文字融合到一起一样。

behavior :设置文字的滚动方式

除了将文字设置为单方向的滚动外,还可以为文字设置滚动方式,如往复运动等。这一功能可以通过添加behavior 属性来实现。

语法:滚动文字

说明:在这里,滚动方式behavior 的取值可以设置为如下表所示的某个值,不同取值的滚动效果也不相同。

滚动方式的设置

设置滚动文字 你好,欢迎您的光临

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

运行这段代码可以看到如下所示的效果。其中第一行文字不停的循环一圈一圈的滚动;而第二行文字则在第一次到达浏览器边缘就停止了滚动;最后一行文字则在滚动到浏览器左边缘后开始反方向运动。

设置滚动方式

loop :循环设置

设置滚动文字后,在默认情况下会不断的循环下去,如果希望当文字滚动几次停止,那

么可以使用loop 参数来进行设置。

语法:滚动文字 实例代码:

设置滚动文字 你好,欢迎您的光临
这里是梦想小屋
让我们与您分享您的点点快乐
让我们与您分担您的片片忧伤

运行这段代码会发现当文字滚动三个循环之后,滚动文字将不再出现,如左图所示。但是如果设置滚动方式为交替滚动的话,那么在滚动三个循环之后,文字将停留在窗口中,如右图所示。

设置循环次数的效果 设置交替滚动的循环次数

scrollamount :滚动速度

在设置滚动文字的时候,有时候可能希望他快一些,也有时候希望他慢一点。这一功能可以使用scrollamount 参数来实现。

语法:

说明:在该语法中,滚动文字的速度实际上是设置滚动文字每次移动的长度,以像素为单位。

实例代码:

设置滚动文字 看看我走得速度怎么样?

看看我走得速度怎么样?

看看我走得速度怎么样?

运行这段代码可以看到三行文字同时开始滚动,但是速度是不一样的,设置的scrollamount 越大,速度也就越快,如下所示。

设置不同的滚动速度

scrolldelay :滚动延迟

scrolldelay 参数可以设置滚动文字滚动的时间间隔。 语法:

说明:scrolldelay 的时间间隔单位是毫秒,也就是千分之一秒。这一时间间隔设置的为滚动两步之间的时间间隔,如果设置的时间比较长会产生走走停停的效果。

如果与滚动速度scrollamount 参数结合使用,效果更明显,下面以实例说明。 实例代码:

设置滚动文字 看看我走得速度怎么样?

看看我走得速度怎么样?

看看我走得速度怎么样?

运行这段代码的效果如下所示,其中第一行文字设置的延迟小,因此走起来比较平滑;而最后一行设置的延迟比较大,看上去就像是走一步歇一会儿的感觉。

设置滚动延迟

bgcolor :滚动文字的背景设置

在网页中,为了突出某部分内容,常常使用不同背景色来显示。而滚动文字也可以单独设置背景色。

语法:滚动文字

说明:文字背景颜色设置为16位颜色码。

实例代码:

设置滚动文字

这里是梦幻小屋,欢迎光临

你好,欢迎您的光临

这里是梦想小屋

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

运行这段代码,看到在滚动文字后面设置了淡蓝色的背景,如下所示。

设置滚动文字背景

width 、height :滚动背景面积

如果不设置滚动背景的面积,那么默认情况下,水平滚动的文字背景与文字同高、与浏览器窗口同宽,使用width 和height 参数可以调整其水平和垂直的范围。

语法:滚动文字

说明:此处设置宽度和高度的单位均为像素。

实例代码:

设置滚动文字

这里是梦幻小屋,欢迎光临

这里是梦幻小屋,欢迎光临

运行这段代码,可以看到两段滚动文字的背景高度、宽度的变化,如下所示。

设置滚动文字背景的面积

hspace 、vspace :设置空白空间

默认情况下,滚动文字周围的文字或图像是与滚动背景紧密连接的,使用参数hspace 和vspace 可以设置他们之间的空白空间。

语法:滚动文字

说明:该语法中水平和垂直范围的单位均为像素。

实例代码:

设置滚动文字

不设置空白空间的效果:

这里是梦幻小屋,欢迎光临

到这里,留下你的忧伤,带走我的快乐!


设置水平为70像素、垂直为50像素的空白空间:

这里是梦幻小屋,欢迎光临

我的梦想与你同在!

运行这段代码可以看到设置空白空间的效果如下所示。

设置滚动文字周围的空白空间

多媒体元素标记

:背景音乐标记

在网页中,除了可以嵌入普通的声音文件之外,还可以为某个网页设置背景音乐。作为背景音乐的可以是音乐文件,也可以是声音文件。其中最常用的是midi 文件。

语法:

说明:作为背景音乐的文件还可以是avi 文件、mp3文件等声音文件。 实例代码:

设置背景音乐 醉花阴
李清照



    薄雾浓云愁永画,瑞脑消金兽。
    佳节又重阳,玉枕纱厨,半夜凉初透。
    东离把酒黄昏后,有暗香盈袖。
    莫道不消魂,帘卷西风,人比黄花瘦。



运行这段代码,打开如下所示的界面,在打开界面之后就可以听到背景音乐。

设置背景音乐

loop :背景音乐的循环播放次数

通常情况下,背景音乐需要不断的播放,但有时也需要指定播放的次数,这一功能实现

起来并不难,只要设置相应的loop 参数即可。

语法:

说明:如果希望无限次循环播放背景音乐,可用将循环次数设置为True 。 实例代码:

设置背景音乐 醉花阴
李清照



    薄雾浓云愁永画,瑞脑消金兽。
    佳节又重阳,玉枕纱厨,半夜凉初透。
    东离把酒黄昏后,有暗香盈袖。
    莫道不消魂,帘卷西风,人比黄花瘦。



运行这段代码,背景音乐在循环播放3次以后停止。

说明:在该语法中,width 和height 一定要设置,单位是像素,否则无法正确显示播放多媒体文件的软件。

实例代码:

嵌入多媒体文件 下面是嵌入的多媒体文件:

运行这段代码,可以看到一个播放页面,如下所示。单击页面中的播放按钮放插入的声音文件exam01.mid 。

可以播

插入多媒体文件

autostart :设置自动运行

登录网页的时候常常会看看一些视频文件直接开时运行,不需要手动开始,特别是一些广告内容,这是通过autostart 参数来实现的。

语法:

说明:autostart 的取值有两个:一个是True ,表示自动播放;另一个是False ,表示不自动播放。

实例代码:

设置自动运行 下面的视频文件中左边的视频文件将会自动播放,而右边的视频文件则需要手动播放:

运行这段代码,可用看到两个视频文件的不同效果如下所示。

设置自动运行

loop :媒体文件的循环播放

这里的循环播放一般是在设置了自动播放的时候采用,与背景音乐的设置基本相同。 语法:

说明:在该语法中,loop 的取值不是具体的数字,而是True 或者False ,如果取值为True ,表示媒体文件将无限次的循环播放;如果取值为False ,则只播放一次。这里的loop 也可以设置为播放次数,但是用途并不广泛。

实例代码:

设置循环播放 下面的视频文件将循环播放:

运行这段代码的效果如下所示。

媒体文件不停的循环播放

hidden :隐藏面板

其实也可以将媒体文件的声音保留而隐藏图像,这样就相当于设置了背景声音。通过hidden 参数可以隐藏播放面板。

语法:

说明:在该语法中hidden 可以设置两个值:一是True ,表示隐藏面板;另一个是False ,表示显示面板,这是添加媒体文件的默认选项。如果要保留声音就要设置文件的自动播放。

实例代码:

设置隐藏面板 下面的视频文件播放面板被隐藏:

运行这段代码,看到播放控制面板已经不见了,只能听到播放的声音效果,如下所示。

隐藏播放面板

:滚动文字标记

使用marquee 标记可以将文字设置位动态滚动的效果。 语法:滚动文字 说明:只要在标记之间添加要进行滚动的文字即可。而且可以在标记之间设置这些文字的字体、颜色等。

实例代码:

设置滚动文字 你好,欢迎光临梦幻小屋! 这里有欢乐的歌声,这里有美好的景色

运行这段代码,为红色隶书的文字从浏览器的右方缓缓向左滚动,如下所示。

设置滚动文字

direction :文字滚动方向

默认情况下文字只能是从右向左滚动,而在实际应用中常常需要不同滚动方向的文字,可以通过direction 这一参数来设置。

语法:滚动文字

说明:该语法中的滚动方向可以包含4个取值,分别为up 、down 、left 和right ,他们分别表示文字向上、向下、向左和向右滚动,其中向左滚动left 的效果与默认效果相同,而向上滚动的文字则常常出现在网站的公告栏中。

实例代码:

设置滚动文字 你好,欢迎您的光临
这里是梦想小屋
让我们与您分享您的点点快乐
让我们与您分担您的片片忧伤
你好,欢迎您的光临
这里是梦想小屋
让我们与您分享您的点点快乐
让我们与您分担您的片片忧伤

运行这段代码,可以看到文字不同的滚动效果,如下所示。图中两段文字的感觉就像是从中间被拉扯开一样。

设置滚动方向 运行一段时间的效果

如图将文字方向相反设置,也就是上面一段文字的direction 设置为“down ”,下面一段设置为up ,运行结果就似乎是两组文字融合到一起一样。

behavior :设置文字的滚动方式

除了将文字设置为单方向的滚动外,还可以为文字设置滚动方式,如往复运动等。这一功能可以通过添加behavior 属性来实现。

语法:滚动文字

说明:在这里,滚动方式behavior 的取值可以设置为如下表所示的某个值,不同取值的滚动效果也不相同。

滚动方式的设置

设置滚动文字 你好,欢迎您的光临

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

运行这段代码可以看到如下所示的效果。其中第一行文字不停的循环一圈一圈的滚动;而第二行文字则在第一次到达浏览器边缘就停止了滚动;最后一行文字则在滚动到浏览器左边缘后开始反方向运动。

设置滚动方式

loop :循环设置

设置滚动文字后,在默认情况下会不断的循环下去,如果希望当文字滚动几次停止,那

么可以使用loop 参数来进行设置。

语法:滚动文字 实例代码:

设置滚动文字 你好,欢迎您的光临
这里是梦想小屋
让我们与您分享您的点点快乐
让我们与您分担您的片片忧伤

运行这段代码会发现当文字滚动三个循环之后,滚动文字将不再出现,如左图所示。但是如果设置滚动方式为交替滚动的话,那么在滚动三个循环之后,文字将停留在窗口中,如右图所示。

设置循环次数的效果 设置交替滚动的循环次数

scrollamount :滚动速度

在设置滚动文字的时候,有时候可能希望他快一些,也有时候希望他慢一点。这一功能可以使用scrollamount 参数来实现。

语法:

说明:在该语法中,滚动文字的速度实际上是设置滚动文字每次移动的长度,以像素为单位。

实例代码:

设置滚动文字 看看我走得速度怎么样?

看看我走得速度怎么样?

看看我走得速度怎么样?

运行这段代码可以看到三行文字同时开始滚动,但是速度是不一样的,设置的scrollamount 越大,速度也就越快,如下所示。

设置不同的滚动速度

scrolldelay :滚动延迟

scrolldelay 参数可以设置滚动文字滚动的时间间隔。 语法:

说明:scrolldelay 的时间间隔单位是毫秒,也就是千分之一秒。这一时间间隔设置的为滚动两步之间的时间间隔,如果设置的时间比较长会产生走走停停的效果。

如果与滚动速度scrollamount 参数结合使用,效果更明显,下面以实例说明。 实例代码:

设置滚动文字 看看我走得速度怎么样?

看看我走得速度怎么样?

看看我走得速度怎么样?

运行这段代码的效果如下所示,其中第一行文字设置的延迟小,因此走起来比较平滑;而最后一行设置的延迟比较大,看上去就像是走一步歇一会儿的感觉。

设置滚动延迟

bgcolor :滚动文字的背景设置

在网页中,为了突出某部分内容,常常使用不同背景色来显示。而滚动文字也可以单独设置背景色。

语法:滚动文字

说明:文字背景颜色设置为16位颜色码。

实例代码:

设置滚动文字

这里是梦幻小屋,欢迎光临

你好,欢迎您的光临

这里是梦想小屋

让我们与您分享您的点点快乐

让我们与您分担您的片片忧伤

运行这段代码,看到在滚动文字后面设置了淡蓝色的背景,如下所示。

设置滚动文字背景

width 、height :滚动背景面积

如果不设置滚动背景的面积,那么默认情况下,水平滚动的文字背景与文字同高、与浏览器窗口同宽,使用width 和height 参数可以调整其水平和垂直的范围。

语法:滚动文字

说明:此处设置宽度和高度的单位均为像素。

实例代码:

设置滚动文字

这里是梦幻小屋,欢迎光临

这里是梦幻小屋,欢迎光临

运行这段代码,可以看到两段滚动文字的背景高度、宽度的变化,如下所示。

设置滚动文字背景的面积

hspace 、vspace :设置空白空间

默认情况下,滚动文字周围的文字或图像是与滚动背景紧密连接的,使用参数hspace 和vspace 可以设置他们之间的空白空间。

语法:滚动文字

说明:该语法中水平和垂直范围的单位均为像素。

实例代码:

设置滚动文字

不设置空白空间的效果:

这里是梦幻小屋,欢迎光临

到这里,留下你的忧伤,带走我的快乐!


设置水平为70像素、垂直为50像素的空白空间:

这里是梦幻小屋,欢迎光临

我的梦想与你同在!

运行这段代码可以看到设置空白空间的效果如下所示。

设置滚动文字周围的空白空间


相关文章

  • 网页设计师面试问答
  • 1. 用户自定义的类和ID在定义和使用时有什么区别? [解答] 定义时,类以英文形式的句点"."为起始标志,ID以"#"为起始标志;使用时,类可以在一个页面中被多个不同的元素引用,而ID在一个页面中只 ...查看


  • 超文本标记语言 1
  • 超文本标记语言 html即超文本标记语言. 超文本标记,下的一个应用. "超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.超文本标记语言的结构包括头部分(Head).和主体部分(Body),其中头部( ...查看


  • 网页设计_HTML标签
  • 网页设计·HTML标签 HTML(Hyper Text Markup Language,即超文本标记语言),用HTML编写的超文本文档称为HTML文档.它是由一系列的标记及属性组成,能独立于各种操作系统平台. HTML标签: HTML标签用 ...查看


  • 网页设计与制作课程标准
  • <网页设计与制作>课程标准 一.概述 (一)课程性质(课程性质和价值) 本课程是五年制高职计算机网络技术专业的一门主干专业课程.通过本课程的学习,要求学生掌握网页设计的基本概念,学会使用常用的网页设计工具和常用脚本语言,能够设计 ...查看


  • Flash动画的内容特征分析与图像信息提取研究*
  • [摘要]Flash动画是网络上流行的媒体,由文本.图形.图像.声音等多种媒体元素组成,文章基于Flash动画的文件结构,通过分析Flash动画的内容特征,建立内容特征提取平台,完成图像信息的提取,为Flash动画的图像特征建立索引库,是基于 ...查看


  • 静态HTML网页制作
  • 第五章 静态HTML网页制作 5.1 HTML文件编辑环境介绍 5.1.1常用名词 在学习网页制作之前,我们有必要先了解一些常用的概念. (1)WWW万维网 "万维网"(Word Wide Web)简称WWW,这是号称除 ...查看


  • 网页制作笔试试题答案
  • 一.填空题 (1) 现在网页基本可以分为_静态_和_动态_两大类网页. (2) 对于网站,我们通常又称作_站点_ (3) HTML是Hypertext Markup Language 的缩写,意思为_超文本标记语言_. (4) marque ...查看


  • 广东省信息技术初二年级(下)教案全
  • 龙城一中 八年级下册<信息技术>教案 广东省初级中学课本 信息技术教案 第二册(下) 目 录 第一章 探索计算机网络世界 ................................................... 2 ...查看


  • 信息组织课后题答案
  • 第一章 1 知识经济:建立在知识和信息的生产.分配和使用上的经济. 文献:用文字.图形.符号.图像.声频.视频信息记录知识的一切载体,或具有独立.完整含义的信息集合. 信息组织:即信息序化或信息整序,也就是利用一定的科学规则和方法,通过对信 ...查看


热门内容