HTML教程-HTML<marquee>标签

<marquee> 是一个非标准的 HTML 元素，用于水平或垂直滚动图像或文本。

简单来说，它可以自动将图像或文本向上、向下、向左或向右滚动。

<marquee> 标签最早是在微软的 Internet Explorer 早期版本中引入的。它与 Netscape 的 blink 元素相类似。

HTML <marquee> 示例

<marquee>This is an example of html marquee</marquee>

输出：

This is an example of html marquee

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<marquee>	是	是	是	是	是

HTML <marquee> 属性

<marquee> 元素包含几个属性，用于控制和调整 marquee 的外观。

属性	描述
behavior	设置 marquee 的行为，可设置为 scroll、slide 或 alternate。
direction	定义滚动内容的方向，可以是 left、right、up 或 down。
width	定义 marquee 的宽度，可以使用像素或百分比。
height	定义 marquee 的高度，可以使用像素或百分比。
hspace	定义 marquee 周围的水平间距（以像素为单位）。
vspace	定义 marquee 周围的垂直间距（以像素为单位）。
scrolldelay	定义滚动延迟的秒数。
scrollamount	定义滚动量的数值。
loop	定义 marquee 内容的循环次数。
bgcolor	定义背景颜色。该属性现在已被弃用。

HTML 滚动式 <marquee>

这是默认属性。它用于从右到左滚动文本，并在达到左侧末端时重新开始在 marquee 的右侧显示。循环完成后，文本消失。

<marquee width="100%" behavior="scroll" bgcolor="pink">
This is an example of a scroll marquee...
</marquee>

输出：

This is an example of a scroll marquee...

HTML 滑动式 <marquee>

在滑动式 marquee 中，所有要滚动的内容将滑动整个 marquee 的长度，但在结束时停止以永久显示内容。

<marquee width="100%" behavior="slide" bgcolor="pink">
This is an example of a slide marquee...
</marquee>

输出：

This is an example of a slide marquee...

---

HTML 交替式 <marquee>

它将文本从右向左滚动，然后从左向右返回。

<marquee width="100%" behavior="alternate" bgcolor="pink">
This is an example of an alternate marquee...
</marquee>

输出：

This is an example of an alternate marquee...

HTML 中的滚动方向

此属性用于更改滚动文本的方向。以 marquee 向右滚动为例。方向可以是 left、right、up 或 down。

<marquee width="100%" direction="right">
This is an example of a right direction marquee...
</marquee>

输出：

This is an example of a right direction marquee...

嵌套的 <marquee> 示例

<marquee width="400px" height="100px" behavior="alternate" style="border:2px solid red">
<marquee behavior="alternate">
Nested marquee...
</marquee>
</marquee>

输出：

Nested marquee...

<marquee> 的缺点

1. Marquee 可能会分散注意力，因为人眼会被移动的 marquee 文本吸引。
2. 由于 Marquee 文本会移动，所以根据滚动速度，点击静态文本会更加困难。
3. 它是一个非标准的 HTML 元素。
4. 它无谓地吸引用户的注意力，使文本更难阅读。