搜索

首页 >web前端 >html教程 >HTML 字幕标签

HTML 字幕标签

王林
王林原创
2024-09-04 16:23:041150浏览

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 标签的属性

以下是支持的属性标签。

  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 – 选框左侧

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

代码：

<!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 字幕标签

结论

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

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

JavaScript css html if for using Attribute default this background
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：map Tag in HTML下一篇：Footer Tag in HTML

相关文章

查看更多