HTML 什么是Marquee标签以及怎么应用

在HTML中，标签用于在网页上插入一个滚动区域以显示文本。它是一种特效，用于水平、垂直、向上、向下、弹跳等方向的内容滚动。但这一特性已不再推荐使用。不过，一些浏览器可能仍然支持它。

语法

下面是HTML 标签的语法−

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text messages or image
</marquee>

属性

我们可以通过属性来控制文本的滚动效果。下面是可以与<marquee>标签一起使用的重要属性列表。

序号	属性和描述
1	width（宽度）此属性指定跑马灯的宽度。可以是像10或20%等的值。
2	height（高度）此属性指定跑马灯的高度。可以是像10或20%等的值。
3	direction（滚动方向）此属性指定跑马灯的滚动方向。可以是up（向上），down（向下），left（向左）或right（向右）等值。
4	behavior（滚动类型）此属性指定跑马灯的滚动类型。可以是scroll（滚动），slide（滑动）或alternate（交替）等值。
5	scrolldelay（滚动延迟）此属性指定每次跳转之间的延迟时间。可以是像10等的值。
6	scrollamount（滚动速度）此属性指定跑马灯文本的速度。可以是像10等的值。此属性的默认值为85。
7	loop（循环次数）此属性指定循环的次数。默认值是INFINITE（无限次循环）。
8	bgcolor（背景颜色）此属性以颜色名称或颜色十六进制值指定背景颜色。
9	hspace（水平间距）此属性指定跑马灯周围的水平间距。可以是像10或20%等的值。
10	vspace（垂直间距）此属性指定跑马灯周围的垂直间距。可以是像10或20%等的值。

以下是几个例子，以演示使用HTML的滚动标签。

示例

以下是使用HTML的<marquee>标签的用法。

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee>Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

示例

在下面的示例中，我们使用direction属性将文本从左到右滚动。

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee direction="left">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
   <marquee direction="right">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

示例

在这里，我们使用了direction属性来使文本上下滚动 –

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee direction="up" height="250px">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
   <marquee direction="down" height="250px">Tutorialspoint, Simply Easy Learning at your fingertips...</marquee>
</body>
</html>

示例

在下面的示例中，我们创建了一个弹跳滚动效果行为属性。

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee
      direction="up"
      width="200px"
      height="100px"
      behavior="alternate"
      style="border:solid 1px">
      <marquee behavior="alternate">Tutorialspoint</marquee>
   </marquee>
</body>
</html>

例子

在下面的例子中，我们使用了behavior、direction和scrollamount属性来指定滚动时间延迟。

<!DOCTYPE html>
<html>
<head>
   <title>Marquee tag in HTML</title>
</head>
<body>
   <marquee behavior="scroll" direction="left" scrollamount="10">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="20">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="30">Tutorialspoint</marquee>
   <marquee behavior="scroll" direction="left" scrollamount="40">Tutorialspoint</marquee>
</body>
</html>