HTML中marquee标签的属性参数和用法详解

🏷️ beat365平台 📅 2026-01-20 00:18:56 👤 admin 👁️ 5605 ❤️ 744
HTML中marquee标签的属性参数和用法详解

在网页开发中， 是一个非标准但广泛支持的 HTML 标签，它允许开发者创建滚动文字、图片或内容的视觉效果。尽管 marquee 并不属于 HTML5 标准的一部分，但由于其简单易用，仍然在许多网页中被使用，尤其是在滚动公告、跑马灯新闻、广告展示等场景中。本文将详细介绍 marquee 标签的常用属性、使用方式及其典型应用，帮助开发者理解如何在网页中实现滚动动画效果，并提供多个代码示例供参考。

一、marquee 标签的基本作用 标签用于创建水平或垂直滚动的内容，它可以包裹文本、图片、链接、表格等 HTML 元素，并支持多种滚动控制参数。其核心作用是实现内容的自动滚动，常用于：

网站公告栏；

滚动新闻条；

促销信息展示；

图片轮播滚动；

自定义滚动广告条；

长文本自动滚动展示；

垂直滚动信息面板；

多方向滚动的交互式内容；

滚动日志或监控信息；

跨浏览器兼容的简单动画展示。

虽然 marquee 不属于 HTML5 标准，但在大多数现代浏览器中仍可运行，适合快速实现滚动效果。

二、marquee 标签的常用属性参数 支持丰富的属性参数，用于控制滚动方向、速度、行为等。以下是常见的属性及其作用：

behavior：定义滚动行为，支持 scroll（滚动）、slide（滑动后停止）、alternate（来回滚动）；

滚动行为

滑动行为

来回滚动direction：定义滚动方向，支持 left、right、up、down；

向左滚动

向上滚动loop：定义滚动的次数，infinite 表示无限滚动；

滚动三次

无限滚动scrollamount：控制滚动速度，数值越大滚动越快；

速度较慢

速度较快scrolldelay：定义每次滚动之间的延迟时间，单位为毫秒；

滚动延迟truespeed：定义 scrollamount 是否为像素/毫秒，若设置为 true，滚动更精确；

精确滚动width 和 height：定义滚动区域的宽高，可以是像素或百分比；

全宽滚动条bgcolor：设置滚动区域的背景颜色；

带背景色滚动onmouseover 和 onmouseout：自定义滚动行为，如鼠标悬停暂停；

悬停暂停style 和 CSS 控制：通过 CSS 控制样式，如字体、颜色、边框、过渡效果等；

带样式的滚动文字结合 JavaScript 控制滚动行为：可使用 stop() 和 start() 方法控制滚动；

滚动新闻

滚动内容嵌套：支持嵌套 HTML 元素，如 、、

、