网页制作07-html,css,javascript初认识のhtml添加多媒体

在网页中，，除了可以添加文本和图像之外还可以插入动画声音视频等媒体元素，如滚动效果、 Flash、 Active x以及midi声音文件等

一、设置滚动效果

1、滚动标记marquee

1)简介:使用marquee标记不仅可以滚动文字，也可以移动图片表格等

2)语法:

<marquee>……</marquee>

2、滚动方向direction

滚动方向有4个取值：up,down,left,right

<marquee direction="方向">

3、滚动方式behaviour

1)、循环滚动默认效果：scroll

2)、只滚动一次就停止:slide

3)、来回交替进行滚动:alternate

<marquee behavior="方式">

4、滚动速度scrollamount

滚动的速度实际上是设置每次滚动时移动的长度以像素为单位

<marquee scrollamount="像素单位">

1-4演示：

1-4代码示例：

<marquee>how are you CSDN,&emsp;have a good day~</marquee>
	<p><marquee direction="down" scrolldelay="200">how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~how are you CSDN,&emsp;have a good day~</marquee></p>
<marquee behavior="alternate">how are you CSDN,&emsp;have a good day~</marquee>
<marquee scrollamount="3">how are you CSDN,&emsp;have a good day~</marquee>

5、滚动延迟scrolldelay

设置滚动的时间间隔,单位是毫秒

6、滚动循环loop

默认情况下的滚动是无限循环,如果想设置滚动次数则用loop

7、滚动范围width、height

默认的情况下水平滚动的文字背景与文字同高与浏览器窗口同宽，宽度和高度参数可以调整其水平和垂直的范围

8、滚动背景颜色bgcolor

为了突出滚动某部分内容，可以使用bg color设置滚动背景颜色

9、空白空间hspace、vspace

默认情况下滚动对象周围的文字和图像是与滚动背景紧密连接的，使用空白空间可以设置他们之间的空白空间

5-9演示：

 5-9代码示例：

<hr>
1、<marquee scrolldelay="200">how are you CSDN,&emsp;——这是滚动延迟_scrolldelay——&emsp;have a good day~</marquee>
2、<marquee scrollamount="50" loop="2">how are you CSDN,&emsp;——这是循环2次_loop——&emsp;have a good day~</marquee>
3、<marquee width="300" height="100" direction="up" bgcolor="#E197F0">how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~</marquee><br>
4、<marquee height="100" direction="up" bgcolor="#E197F0" hspace="50" vspace="50">how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~how are you CSDN,&emsp;——这是限定宽度和高度——&emsp;have a good day~</marquee>

二、插入多媒体文件

1、插入flash动画

 Flash是一种动画技术，它可以实现一些较为复杂的动态效果

<embed src="小院灯光.swf" width="200"></embed>

 兼容会出现左侧动画，不兼容出现右侧提示，

2、插入音频和视频文件

<embed src="落叶.mp3"width="200"></embed>
<embed src="QQ2025223-144356.mp4" width="200"></embed>

 运行结果：

三、设置背景音乐

<bgsound src="落叶.mp3" loop="2"></bgsound>

 tips：正常的代码应该如上，但是现在大多数浏览器已经不兼容了.

但是<embed标签的音乐不能循环播放，所以我们可以采取以下方法：在head中插入以下代码

<audio id="music" controls="controls" autoplay="autoplay" loop="loop"> 
  <source src="落叶.mp3" type="audio/mpeg"> 
    </audio>