HTML 字幕标签-html教程-PHP中文网

HTML 字幕标签

王林

发布： 2024-09-04 16:23:04

原创

1086 人浏览过

HTML中的Marquee标签用于在网页中的文本或图像上创建滚动，它允许所有类型的滚动，例如从左到右，从右到左，从上到下和从下到上。 HTML 中该标签的语法为

这是文本的滚动…，其中“marquee”标签用于描述所需滚动的属性。其他一些常用的选取框属性有behavior、hspace、scrollamount、scrolldelay、truespeed、vspace 等

语法：

选取框可以通过使用来使用元素。语法可以写成如下所示：

<html>
<body>
<marquee direction="up" height="150" width="250" bgcolor="white">This is scrolling of the text...</marquee>
</body>
</html>

登录后复制

HTML Marquee 标签的属性

以下是支持的属性标签。

behavior：滚动文本的动作，可以是其中一个值，包括alternate、scroll、slide。
bgcolor:它提供背景颜色。
direction: 指定文本滚动的方向，有左、右、上、下值。默认方向值为左。
高度：它定义了选取框的高度。
hspace: 此属性提供选取框元素周围的水平空间。
loop: 它定义文本可以滚动多少次。如果默认值为-1，选取框将连续循环。
scrollmount: 指定每个间隔的滚动量。如果没有定义scrollamount，则默认值为6。
scrolldelay: 它给出滚动延迟（以毫秒为单位）。如果没有定义scrollamount，则默认值为6。
truespeed:用于表示scrolldelay值为60。
vspace: 此属性提供选取框元素周围的垂直空间。
宽度：它定义选取框的宽度。

HTML Marquee 标签示例

以下是 HTML marquee 标签的示例：

示例 #1 – 选框左侧

这种类型的选取框可用于从左侧移动内容。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Left Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "left" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登录后复制

输出：

将以上代码保存在扩展名为.html的文件中
在浏览器中运行 HTML 文件，您将得到如下图所示的输出

HTML 字幕标签

示例 #2 – 右侧选框

这种类型的选取框可用于将内容移动到右侧。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Right Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "right" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登录后复制

输出：

HTML 字幕标签

示例 #3 – 选框向上

这种类型的选取框可用于将内容移至上方。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Up Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "up" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登录后复制

输出：

HTML 字幕标签

示例 #4 – 字幕向下

这种类型的选取框可用于将内容移至下方。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Down Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "down" loop="" >
<div class="txt">Welcome to EDUCBA...</div>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登录后复制

输出：

HTML 字幕标签

示例 #5 – 嵌套选取框

这种类型的选取框可用于嵌套内容。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
.txt {
font-size:30px;
font-weight:italic;
color:white;
padding-bottom:10px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1" bgcolor = "grey" direction = "down" behavior="alternate" height="150" >
<marquee behavior="alternate"><div class="txt">Welcome to EDUCBA...</div></marquee>
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登录后复制

输出：

HTML 字幕标签

示例 #6 – Marquee 的速度比较

marquee元素的速度可以通过使用scrolldelay属性来指定。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Nested Marquee</title>
<style>
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<marquee class="marq_class1" bgcolor = "grey" direction = "down" behavior="alternate" height="150" >
<marquee scrolldelay="80" scrollamount="7">Welcome to EDUCBA...(normal speed)</marquee>
<marquee scrolldelay="60" scrollamount="12" truespeed>Welcome to EDUCBA...(This is very speed)</marquee>
<marquee scrolldelay="250" scrollamount="4">Welcome to EDUCBA...(This is very slow)</marquee>
</marquee>
</body>
</html>

登录后复制

输出：

HTML 字幕标签

示例 #7 – Marque 背景颜色和空间

这种类型的选取框可用于设置选取框元素的背景颜色和空间。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Marquee Background and Space</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>
</head>
<body>
<div class = "mrq_class">
<marquee class="marq_class1"  bgcolor="#d9d9ff" hspace="50" vspace="20">
<div>EDUCBA is a leading global provider of skill based education addressing the needs 500,000+ members across 40+ Countries.</div>
</marquee>
</div>
</body>
</html>

登录后复制

输出：

HTML 字幕标签