HTML 字幕标签

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

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

语法：

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

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

HTML Marquee 标签的属性

以下是支持的属性标签。

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

HTML Marquee 标签示例

以下是 HTML marquee 标签的示例：

示例 #1 – 选框左侧

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

代码：

<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>


<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>

输出：

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

示例 #2 – 右侧选框

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

代码：

<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>


<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>

输出：

示例 #3 – 选框向上

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

代码：

<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>


<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>

输出：

示例 #4 – 字幕向下

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

代码：

<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>


<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>

输出：

示例 #5 – 嵌套选取框

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

代码：

<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>


<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>

输出：

示例 #6 – Marquee 的速度比较

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

代码：

<title>Nested Marquee</title>
<style>
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>


<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>

输出：

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

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

代码：

<title>Marquee Background and Space</title>
<style>
.mrq_class {
text-align:center;
}
.marq_class1 {
padding-top:25px;
padding-bottom:25px;
}
</style>


<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>

输出：

结论

到目前为止，我们已经研究了如何使用 marquee 标签在网页上创建滚动文本。用户可以轻松地在网站上创建水平或垂直滚动​​文本。该元素已被弃用，将不再使用。为了制作滚动效果，将使用 CSS 或 JavaScript。

以上是HTML 字幕标签的详细内容。更多信息请关注PHP中文网其他相关文章！