简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

HTML 字幕标签

王林
发布： 2024-09-04 16:23:04
原创
1108 人浏览过

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

相关标签：
html html5 HTML Tutorial HTML Properties HTML tags
来源：php
上一篇：HTML 中的地图标签 下一篇：HTML 中的页脚标记
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
PX自动转换为REM错误  <style>html {   字体大小：calc(100vw / 3.75);      }body {    字体大小：0.16rem；      }</s...
来自于 2024-04-16 09:34:16
0
0
4687
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
来自于 2024-04-06 21:58:04
0
1
800
解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页，但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%，但没有任何作...
来自于 2024-04-06 20:22:15
0
1
454
如何在 livewire 惰性占位符中使用 laravel 组件 我想在livewire3占位符内添加我的laravel组件的骨架到目前为止我已经尝试过：通过包含Laravel组件来实现Livewire类：publicfunctionplaceh...
来自于 2024-04-06 20:02:10
0
2
543
用 HTML 代码（从数组生成）替换字符串的顶级方法 给定一个像这样的字符串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何将子字符串#...
来自于 2024-04-06 17:40:41
0
2
410
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！