在网页开发中，滚动文字、公告通知是极为常见的需求，而 HTML 自带的 <marquee> 标签，正是实现滚动效果最快捷、最简单的方式之一。尽管在最新的 HTML 规范中，该标签已被标记为非标准标签、不推荐正式规范使用，但得益于其极简的用法、全浏览器兼容的特性，至今仍被广泛用于快速开发场景、后台系统、简易公告栏等需求中。
本文将系统梳理 <marquee> 标签的所有核心用法，从基础滚动、方向控制，到速度调节、鼠标交互，帮你一篇掌握这个标签的全部实用技巧。
一、基础用法：默认滚动效果
最基础的 <marquee> 标签无需任何额外属性，只需包裹需要滚动的内容，即可实现默认的横向滚动效果，也是我们最常用的入门写法。
<marquee>这是最基础的默认滚动文字效果</marquee>
效果说明：默认情况下，内容会从右向左无限循环滚动，也就是我们常说的“跑马灯”效果。
二、核心行为控制：behavior 属性
behavior 属性用于定义滚动的核心行为模式，是决定滚动动画类型的关键属性，共有 4 个核心可选值，对应不同的滚动效果。
1. 预设循环滚动（scroll，默认值）
scroll 是 <marquee> 标签的默认行为，即使不写该属性，也会默认启用。内容会从容器一端滚动到另一端，循环往复，无间断重复。
<marquee behavior="scroll">这是预设的循环滚动效果（标签默认行为）</marquee>
2. 单次滑动效果（slide）
slide 滑动模式下，内容会从起始端滑动到容器的另一端，到达边界后立即停止滚动，不会循环播放。
<marquee behavior="slide">这是单次滑动效果，到达边界后自动停止</marquee>
3. 来回往返滚动（alternate）
alternate 是反弹往返效果，内容滚动到容器边界后，会自动反向弹回，实现来回往复的滚动，类似“撞墙反弹”的动画效果。
<marquee behavior="alternate">这是来回往返的反弹滚动效果</marquee>
三、滚动方向控制：direction 属性
direction 属性用于控制内容滚动的方向，支持 4 个方向值，可灵活实现横向、纵向的全方向滚动。
1. 向左滚动（left，默认值）
标签的默认滚动方向，内容从右向左滚动，也是网站公告最常用的滚动方向。
<marquee direction="left">内容从右向左滚动（标签默认方向）</marquee>
2. 向右滚动（right）
与默认方向相反，内容从左向右滚动。
<marquee direction="right">内容从左向右滚动</marquee>
3. 向上滚动（up）
纵向滚动模式，内容从下向上滚动，常用于竖向公告、滚动列表等场景。
<marquee direction="up" height="60">内容从下向上滚动<br>第二行滚动内容</marquee>
4. 向下滚动（down）
纵向滚动模式，内容从上向下滚动。
<marquee direction="down" height="60">内容从上向下滚动</marquee>
注意：使用纵向滚动（up/down）时，建议给标签设置固定的
height高度，否则容器会被内容完全撑开，可能无法看到预期的滚动效果。
四、循环次数控制：loop 属性
loop 属性用于设置滚动的循环次数，标签默认值为 -1，代表无限循环滚动。
<marquee loop="2">这段内容只会滚动2次，完成后自动停止</marquee>
五、容器尺寸控制：width 与 height 属性
width 和 height 属性分别用于设置滚动容器的宽度和高度，支持像素值、百分比等单位，标签默认宽度为 100%（撑满父容器），高度为内容的原生高度。
<!-- 设定宽度180px，高度30px的滚动容器 -->
<marquee width="180" height="30" bgcolor="#f5f5f5">固定尺寸的滚动容器</marquee>
提示：属性值的单位可省略，默认单位为像素（px）；也可使用百分比适配，比如
width="50%"代表宽度为父容器的 50%。
六、背景颜色设置：bgcolor 属性
bgcolor 属性用于快速设置滚动容器的背景颜色，支持十六进制颜色码、RGB 值、标准颜色名等多种写法。
<!-- 红色背景滚动容器，注意十六进制颜色码需加#前缀 -->
<marquee bgcolor="#FF0000" color="#ffffff">红色背景的滚动文字</marquee>
避坑提示：十六进制颜色码必须加
#前缀（如#FF0000），否则部分浏览器无法正确识别颜色。
七、滚动速度精细控制：scrollamount 与 scrolldelay 属性
想要精准调整滚动的快慢与流畅度，就需要用到 scrollamount 和 scrolldelay 这两个属性，二者配合可实现任意速度的滚动效果。
1. scrollamount：滚动步长，核心控制滚动速度
scrollamount 属性定义了滚动动画每一次移动的像素距离，数值越大，单次滚动距离越长，整体滚动速度越快，标签默认值为 6。
<!-- 快速滚动，每次移动30px -->
<marquee scrollamount="30">超快速滚动效果</marquee>
<!-- 慢速滚动，每次移动2px -->
<marquee scrollamount="2">超慢速滚动效果</marquee>
2. scrolldelay：滚动间隔，控制滚动流畅度
scrolldelay 属性定义了两次滚动之间的时间间隔，单位为毫秒（ms），数值越大，滚动间隔越长、整体速度越慢，标签默认值为 85。
<!-- 每300毫秒滚动一次，实现卡顿式步进滚动 -->
<marquee scrolldelay="300">间隔步进滚动效果</marquee>
实用技巧：日常开发中，优先调整
scrollamount控制速度即可，scrolldelay保持默认值就能获得流畅的滚动效果。
八、鼠标交互事件：悬停停止、离开继续
这是 <marquee> 标签最实用的进阶用法，通过内置的 start() 和 stop() 方法，配合鼠标事件，可实现“鼠标悬停停止滚动，鼠标离开继续滚动”的效果，极大提升用户的阅读体验。
1. 鼠标经过时停止滚动
<marquee onmouseover="this.stop()">鼠标移到我上面，滚动就会停止</marquee>
2. 鼠标离开时开始滚动
<marquee onmouseout="this.start()">鼠标离开我，就会启动滚动</marquee>
3. 【最常用】组合用法：悬停停止，离开继续
这是实际开发中 90%的场景都会用到的标准写法，兼顾展示效果和用户阅读体验，可直接复制使用：
<marquee
onmouseover="this.stop()"
onmouseout="this.start()"
scrollamount="3"
>
【公告】鼠标悬停即可暂停滚动，方便阅读完整内容，鼠标离开后自动继续滚动
</marquee>
九、综合实战示例
下面提供一个可直接复制使用的完整网站公告栏示例，整合了所有常用属性，适配绝大多数常规滚动场景：
<!-- 网站公告栏完整示例 -->
<marquee
behavior="scroll"
direction="left"
width="100%"
height="40"
bgcolor="#fef6e4"
scrollamount="4"
loop="-1"
onmouseover="this.stop()"
onmouseout="this.start()"
>
【重要通知】本站将于2024年XX月XX日00:00-06:00进行系统维护，维护期间部分功能可能无法正常使用，敬请谅解！
</marquee>
十、注意事项与替代方案
- 兼容性：
<marquee>标签在 Chrome、Firefox、Safari、Edge 等所有主流浏览器，甚至老旧 IE 浏览器中都有完美的兼容性，无需额外处理兼容问题。 - 标准性：该标签并非 HTML 官方标准标签，W3C 规范已不推荐使用，大型商业项目、对代码规范有严格要求的项目，建议使用 CSS
@keyframes动画实现滚动效果。 - 局限性：
<marquee>仅能实现基础的滚动效果，复杂的自定义缓动、多内容轮播、分段动画等需求，仍需通过 CSS 或 JavaScript 实现。
