Web前端技术开发学习笔记(HTML标记语言篇)——第7章在网页中嵌入多媒体内容

最新推荐文章于 2024-04-16 15:51:10 发布

陈Nicole

最新推荐文章于 2024-04-16 15:51:10 发布

阅读量1.9k

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/chanciecarney/article/details/115441385

版权

笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

第7章在网页中嵌入多媒体内容

7.1概述
7.2 设置滚动字幕
7.3 嵌入音视频文件
7.4 嵌入Flash动画
7.5 设置背景音乐
7.6 嵌入Java Applet

7.1概述

在制作网页时，除了可以在网页中放置文本、图片外，还可以在页面中嵌入声音、视频、动画等多媒体内容，使得页面看上去更加地丰富多彩、动感十足。在网页中嵌入多媒体内容，主要使用以下标记：

标记	描述
< marquee>	设置文字等对象在页面中的滚动效果
< embed>	在页面中嵌入MP3、视频等多媒体内容
< applet>	在页面中插入java applet小程序
< bgsound>	设置页面的背景音乐
< object>	在页面中嵌入Flash动画

7.2 设置滚动字幕

在网页中要获得如字幕一般的滚动文字效果，可以使用< marquee>标记

7.2.1 设置默认效果的滚动字幕

默认情况下，使用< marquee>标记得到的滚动字幕是从右向左移动的。
基本语法

<marquee>滚动文字</marquee>

语法说明
处在< marquee>和< /marquee>之间的滚动文字将以一定的速度从右向左循环滚动。当将滚动文字换成图片时，将获得图片的滚动效果。

eg.


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>默认效果的滚动文字设置</title>
    </head>
    
    <body>
        <marquee>默认情况下，滚动文字从右向左滚动</marquee>
    </body>
</html>

在这里插入图片描述

7.2.2 设置滚动字幕的滚动方向

使用< marquee>标记的direction属性可以修改滚动字幕的滚动方向。

基本语法

<marquee direction=“滚动方向”>滚动文字</marquee>

语法说明
滚动文字将向指定的滚动方向滚动，direction属性可以取（向）上、下、左、右4个值，其中默认的滚动方向是向左。

direction的属性值	描述
up	设置文字从下往上滚动
down	设置文字从上往下滚动
left	设置文字从右往左滚动（默认滚动方向）
right	设置文字从左往右滚动

eg.


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>设置滚动字幕的滚动方向</title>
    </head>
    
    <body>
        <marquee direction="up">文字从下往上进行滚动</marquee>
    </body>
</html>

在这里插入图片描述

7.2.3 设置滚动字幕的滚动行为

默认情况下，滚动字幕循环地以一个方向向另外一个方向的方式滚动，使用< marquee>标记的behavior属性可以修改滚动字幕的滚动方式。
基本语法

<marquee behavior=“滚动行为”>滚动文字</marquee>

语法说明
滚动文字将以指定的滚动行为进行滚动，behavior属性可以取回滚、幻灯片和交替往返3个值，其中默认的滚动行为是回滚，如下表：

behavior属性值	描述
scroll	设置文字循环往复滚动（默认行为）
slide	设置文字只进行一次滚动
alternate	设置文字循环交替往返进行滚动

7.2.4 设置字幕的滚动速度和滚动延迟特性

字幕的滚动速度通过一个常量来表示，常量值越大，速度越快。在每次滚动结束后可以延迟一定的时间进行下一次滚动。滚动速度和滚动延迟特性可以分别通过属性scrollamount 和scrolldelay进行设置
基本语法

<marquee scrollamount=“滚动速度值“ scrolldelay=“延迟时间”>
  滚动文字
</marquee>

属性	描述
scrollamount	设置文字滚动速度，取值为某个数字，数字越大滚动越快，默认的速度值是6
scrolldelay	设置文字在每一次滚动后，延迟一段时间后再进行下一次滚动，所取的数值是以毫秒（ms）为单位的，数值越小越快，默认值是100ms

7.2.5 设置字幕的滚动区域及其背景颜色

默认情况下，字幕将在一个与浏览器窗口等宽的白色背景颜色的区域中进行滚动，该区域的高度跟滚动方式有关。如果是上下之间的滚动，默认高度则为200像素；如果是左右滚动，高度则大致是滚动对象的高度。通过marquee标记的属性width和height可以改变滚动区域的大小，修改滚动区域的背景颜色使用bgcolor属性。

基本语法

<marquee bgcolor=“颜色值” width=“滚动区域宽度” height=“滚动区域高度”>
滚动文字
</marquee>

语法说明

属性	描述
width	设置文字滚动区域的宽度，value可以是数字，此时单位为像素；也可以是百分比数值，此时表示相对于浏览器窗口宽度的百分比大小
height	设置文字滚动区域的高度，value可以是数字，此时单位为像素；也可以是百分比数值，此时表示相对于浏览器窗口宽度的百分比大小
bgcolor	设置文字滚动区域的背景颜色，既可以取英文颜色单词，也可以用十六进制数表示的颜色值

eg.


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>设置字幕的滚动区域及背景颜色</title>
    </head>
    
    <body>
        <marquee direction="up" bgcolor="#99CCFF" width="245" height="100">文字在一个宽为245，高为100，背景颜色为天蓝色的区域从下往上滚动</marquee>
        <marquee direction="up" bgcolor="#99CCFF" width="245">文字在一个宽为245，高为默认值，背景颜色为天蓝色的区域从下往上滚动</marquee>
    </body>
</html>

在这里插入图片描述

7.2.6 设置字幕的滚动区域与周围对象的间距

使用marquee标记的hspace和vspace属性可以分别设置滚动区域与周围对象的水平间距和垂直间距。

基本语法

<marquee hspace=“水平间距” vspace=“垂直间距“>
滚动文字
</marquee>

语法说明
水平间距和垂直间距的单位是像素，使用时直接输入某个数字。可以根据具体情况单独使用属性hspace和vspace

eg.设置滚动区域与周围对象的区域


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>设置滚动区域与周围对象的间距</title>
    </head>
    
    <body>
        <marquee hspace="30" vspace="20" direction="up" bgcolor="#99CCFF" width="245">文字在一个宽为245，高为默认值，背景颜色为天蓝色的区域从下往上滚动，滚动区域的边距分别为水平方向30像素，垂直方向20像素</marquee>
    </body>
</html>

在这里插入图片描述

7.3 嵌入音视频文件

在网页中可以使用嵌入标记< embed>嵌入MP3音乐、电影等多种多媒体内容，使网页更加生动。

基本语法

<embed src=“ file_url”> </embed>

语法说明
src属性指定多媒体文件，这是一个必设属性。多媒体文件的格式可以是midi、wav、avi、au等。
在< embed>标记中，除了必须设置src属性外，还可以设置其他属性获得所嵌入多媒体对象的不同表现效果。< embed>标记的常用属性如下表：

属性	属性值	描述
src	file_url	指定嵌入式对象的文件路径
width	value	以像素为单位定义嵌入式对象的宽度
height	value	以像素为单位定义嵌入式对象的高度
loop	true｜false	设置嵌入式对象的播放是否循环不断，取值true时循环不断，否则只播放一次，默认值是false
hidden	true｜false	设置多媒体播放软件的可视性，默认值是false

7.4 嵌入Flash动画

Flash动画是一种基于矢量图的比较小的动画，因而常常被嵌入到网页中以增强网页动感。要观看Flash动画，只需在浏览器上安装相应的插件即可。
在网页中嵌入flash动画，通常会使用< object>标记，因为该标记允许开发者为插入的对象指定数据和参数。

基本语法

<object classic=“ clsid_value” codebase=“url” width=“value” height=“value”>
<param name=“movie” value=“file_name”>
<param name=“quality” value=“high”>
<embed pluginspage=“http://www.macro media.com/go/getflashplayer” src=“file_name”
quality=“high” type=“application/x-shockwave-flash” width=“value” height=“value”>
</embed>
</object>

语法说明
< object>标记声明所嵌入的对象的位置、Flash动画的宽度和高度等属性，并分别使用两个参数设置动画文件的路径参数和控制Flash动画的质量（通常设置Flash动画的质量为high）。其中的< embed>子标记用于专门针对Netscape浏览器，声明所嵌入的对象的位置、插件的位置，以及Flash动画的宽度和高度等属性。

7.5 设置背景音乐

为了更好地体现页面主题并吸引浏览者，网页制作者常常在网页中嵌入背景音乐。使用< bgsound>标记可以将多种格式的音乐文件设置为背景音乐嵌入到网页中。

基本语法

<bgsound src=“File_url” loop=“循环次数”>

语法说明
src属性是< bgsound>标记必设的属性，用于指定嵌入的背景音乐文件。loop属性为可选属性，当取值为某个数时，表示背景音乐循环播放该数字所指定的次数；如果取值为-1，则表示背景音乐循环不断地播放；默认情况下，背景音乐播放一次。

7.6 嵌入Java Applet

Applet是用Java开发的一种小程序，不能独立运行，必须嵌入HTML文件中，并通过支持Java的浏览器来运行。
在网页中嵌入的是Applet的类文件。嵌入Java Applet时，必须指定显示Applet的区域大小。
基本语法

<applet code=“XXX.class” width=“区域宽度” height=“区域高度”></applet>

语法说明
XXX.class表示所嵌入的applet类文件，width、height属性用于设置applet文件显示区域，单位是像素。

陈Nicole

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Web前端技术开发学习笔记(HTML标记语言篇)——第7章在网页中嵌入多媒体内容

第7章在网页中嵌入多媒体内容7.1概述7.2 设置滚动字幕7.2.1 设置默认效果的滚动字幕7.2.2 设置滚动字幕的滚动方向7.2.3 设置滚动字幕的滚动行为7.2.4 设置字幕的滚动速度和滚动延迟特性7.2.5 设置字幕的滚动区域及其背景颜色7.2.6 设置字幕的滚动区域与周围对象的间距7.3 嵌入音视频文件7.4 嵌入Flash动画7.5 设置背景音乐7.6 嵌入Java Applet7.1概述在制作网页时，除了可以在网页中放置文本、图片外，还可以在页面中嵌入声音、视频、动画等多媒体内容，使得页
复制链接

扫一扫