marquee表示：HTML 标签，已逝的网页动画之星

<marquee> 标签是一个块级元素，用于在网页上创建 marquees（通常翻译为“跑马灯”），它的基本用法非常简单：

<marquee behavior="scroll" direction="left">欢迎访问我的网站！</marquee>

behavior 属性可以设置为 scroll（滚动）、alternate（来回摆动）或 slide（滑入，然后静止），direction 属性则可以设置滚动方向为 left、right、up 或 down。

<marquee> 标签为何被废弃？

尽管 <marquee> 标签在实现简单动画方面曾经很方便，但它很快暴露了其不足之处，主要体现在以下几个方面：

1. 语义化问题： HTML 应该关注内容的结构和意义，而不是表现形式。<marquee> 标签将内容（文本）包裹在一个仅仅用于动画的标签内，破坏了内容与表现分离的原则。
2. 可访问性差： 屏幕阅读器等辅助技术通常会忽略 <marquee> 标签及其内容，或者以不友好的方式读出，这对于视障用户来说是不友好的。
3. 样式控制有限： <marquee> 内置的动画效果难以通过 CSS 进行精细控制，比如速度、循环次数、颜色等，灵活性差。
4. 跨浏览器一致性差： 不同浏览器对 <marquee> 标签的默认样式和行为可能不一致，导致网页外观在不同地方差异很大。
5. 与现代 CSS 动画冲突： 随着 CSS 动画的强大功能出现，<marquee> 提供的简单滚动效果显得过时且冗余。

HTML5 标准中完全移除了 <marquee> 标签，将其视为“废弃元素”，现代的网页开发实践中，强烈不推荐使用 <marquee>。

现代网页中的替代方案

实现类似 <marquee> 的滚动效果，现代网页开发提供了更强大、更灵活、更符合语义和可访问性的方法：

1. CSS 动画： 这是最推荐的方式，使用 @keyframes 规则定义滚动动画，然后通过 animation 属性将其应用到元素上。

   

   <style>
     .scrolling-text {
       white-space: nowrap; /* 防止文本换行 */
       overflow: hidden; /* 隐藏超出容器的内容 */
       position: relative; /* 设置相对定位，便于动画 */
       width: 100%; /* 根据需要设置宽度 */
       animation: scrollText 10s linear infinite; /* 应用动画，无限循环 */
     }
     @keyframes scrollText {
       0% { transform: translateX(100%); } /* 从右侧外开始 */
       100% { transform: translateX(-100%); } /* 滚动到左侧外 */
     }
   </style>
   <div class="scrolling-text">这是一段使用 CSS 动画实现的滚动文字效果，欢迎访问我们的网站！</div>

   这种方式提供了对动画速度、方向、循环次数、延迟等的精确控制，并且可以轻松与页面其他 CSS 样式结合。

2. JavaScript： 对于更复杂的动画逻辑或交互，可以使用 JavaScript 来动态改变元素的样式或位置，实现滚动效果，这提供了最大的灵活性，但代码量通常比 CSS 动画多。

3. Web Animation API： 这是浏览器提供的一个更现代、功能更强大的动画 API，可以替代 @keyframes 和部分 JavaScript 动画代码，提供更细粒度的控制。

<marquee> 标签作为网页历史上的一个“遗留元素”，见证了早期网页对动态效果的追求，随着 Web 技术的发展，它因其对语义化、可访问性和样式控制的负面影响而被现代标准所淘汰，开发者应转向使用 CSS 动画或 JavaScript 等现代技术来实现页面上的动态效果，这些方法不仅效果更佳，而且符合 Web 开发的最佳实践，能够创建出更语义化、更易于访问和维护的网页。

了解 <marquee> 的过去，有助于理解网页技术的演进历程，但对于新的项目或对旧代码进行维护时，应避免使用它，转而拥抱更现代、更强大的解决方案。