marquee标签的用法：marquee标签的用法

来源：网络作者：日期：2025-11-14 22:06:58

Marquee 标签用于在 HTML 中创建横向或纵向滚动的文本或图像，常用于显示新闻标题、通知等，需要注意的是，<marquee> 标签已被 HTML5 弃用，因此在现代网页开发中，建议使用 CSS 动画来实现类似效果。

`<marquee>` 标签的基本用法

<marquee> 标签有以下常用属性：

behavior：定义 marquees 的行为，可设置为 scroll（滚动）、alternate（来回滚动）或 slide（滑动）。
direction：定义 marquees 的滚动方向，可设置为 left、right、up 或 down。
loop：定义 marquees 滚动的次数，可以是一个数字或 infinite（无限滚动）。

示例代码：

<marquee behavior="scroll" direction="left" loop="infinite">欢迎访问我的网站！</marquee>
<marquee behavior="alternate" direction="up">最新消息</marquee>

使用 CSS 实现 Marquee 效果

由于 <marquee> 标签已被弃用，推荐使用 CSS 动画来实现滚动效果。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.marquee {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="marquee">
  欢迎访问我的网站！这是一个滚动的横幅效果。
</div>
</body>
</html>

虽然 <marquee> 标签曾经被广泛使用，但由于其缺乏语义化和样式控制能力，已被 HTML5 弃用，现代网页开发中，建议使用 CSS 动画来实现类似效果，这样不仅可以更好地控制样式,还能提高网页的可访问性和兼容性。

希望这篇文章能帮助你了解 marquee 标签的用法及其替代方案！

marquee标签的用法：marquee标签的用法