如何使用纯HTML实现跑马灯的效果？

可以使用纯 HTML 的 <marquee> 标签实现跑马灯效果，虽然它已经不被推荐使用，但在某些简单的场景下仍然有效。现代前端开发更推荐使用 CSS animations 或 JavaScript 来实现更灵活和可控的跑马灯效果。

以下是使用 <marquee> 的几种方式：

<!DOCTYPE html>
<html>
<head>
<title>跑马灯示例</title>
</head>
<body>

<!-- 简单的跑马灯，从右向左滚动 -->
<marquee>这是一条简单的跑马灯文本。</marquee>

<!-- 控制方向 -->
<marquee direction="right">从左向右滚动</marquee>
<marquee direction="up">从下向上滚动</marquee>
<marquee direction="down">从上向下滚动</marquee>

<!-- 控制速度 -->
<marquee scrollamount="10">快速滚动</marquee>
<marquee scrollamount="1">慢速滚动</marquee>

<!-- 控制行为 -->
<marquee behavior="scroll">循环滚动</marquee>
<marquee behavior="slide">滚动一次后停止</marquee>
<marquee behavior="alternate">来回滚动</marquee>

<!-- 控制循环次数 -->
<marquee loop="2">滚动两次</marquee>
<marquee loop="infinite">无限循环滚动</marquee>

<!-- 设置宽度和高度 -->
<marquee width="200" height="50" bgcolor="yellow">指定宽度和高度的跑马灯</marquee>

</body>
</html>

<marquee> 标签的属性：

direction: 滚动方向。 left (默认), right, up, down。
behavior: 滚动行为。 scroll (默认, 循环滚动), slide (滚动一次后停止), alternate (来回滚动)。
loop: 循环次数。可以是数字或 infinite (无限循环)。
scrollamount: 滚动速度，值越大速度越快。
scrolldelay: 滚动延迟，单位是毫秒。
bgcolor: 背景颜色。
width: 跑马灯宽度。
height: 跑马灯高度。

为什么不推荐使用 <marquee>？

过时: <marquee> 标签在 HTML5 规范中已被废弃，不保证在未来的浏览器版本中得到支持。
可访问性差: 持续滚动的文本可能会对某些用户造成阅读困难，尤其是有阅读障碍的用户。
控制不够灵活: <marquee> 的样式和动画控制能力有限，难以实现复杂的动画效果。

更佳的替代方案：

使用 CSS animations 或 JavaScript 可以实现更灵活、更现代、可访问性更好的跑马灯效果。以下是一个简单的 CSS animation 例子：

<!DOCTYPE html>
<html>
<head>
<title>CSS 跑马灯</title>
<style>
.marquee {
  width: 200px;
  overflow: hidden;
  white-space: nowrap; /* 防止文本换行 */
}
.marquee span {
  display: inline-block;
  padding-left: 100%; /* 初始位置在容器外部 */
  animation: marquee 5s linear infinite; /* 动画持续时间、速度、循环 */
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
</style>
</head>
<body>

<div class="marquee">
  <span>使用 CSS 实现的跑马灯</span>
</div>

</body>
</html>