社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
HTML Marquee 标签的属性
HTML Marquee 标签示例
示例 #1 – 选框左侧
示例 #2 – 右侧选框
示例 #3 – 选框向上
示例 #4 – 字幕向下
示例 #5 – 嵌套选取框
示例 #6 – Marquee 的速度比较
示例 #7 – Marque 背景颜色和空间
结论
首页 web前端 html教程 HTML 字幕标签

HTML 字幕标签

王林
王林
Sep 04, 2024 pm 04:23 PM
html html5 HTML Tutorial HTML Properties HTML tags

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中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

Windows 11 KB5054979中的新功能以及如何解决更新问题
1 个月前 By DDD
如何修复KB5055523无法在Windows 11中安装？
3 周前 By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前 By DDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
蓝王子：如何到达地下室
3 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程
1653
14
CakePHP 教程
1413
52
Laravel 教程
1304
25
PHP教程
1251
29
C# 教程
1224
24
显示更多
Related knowledge
HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里，我们以 HTML 中的表格边框为例，讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里，我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里，我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里，我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

See all articles