HTML-тег <marquee>
Элемент <marquee> — нестандартный тег для прокрутки текста или изображений по горизонтали или вертикали. Из-за проблем доступности его часто сравнивали с элементом blink в Netscape.
DANGER
<marquee> — устаревший HTML-тег. Страницы могут ломаться; в современных браузерах он ещё может отображаться, но использовать его не следует.
Альтернативы
Сегодня прокрутку делают через CSS и JavaScript. См. сниппет.
Синтаксис
Парный тег.
Пример горизонтальной прокрутки:
Пример <marquee>
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
marquee{
font-size: 30px;
font-weight: 800;
color: #8ebf42;
font-family: sans-serif;
}
</style>
</head>
<body>
<marquee>A scrolling text created with HTML Marquee element.</marquee>
</body>
</html>Атрибут direction меняет направление. Пример сверху вниз:
<marquee> с direction
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee direction="down">A scrolling text created with HTML Marquee element.</marquee>
</body>
</html>Прокрутка изображения
behavior и direction
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<marquee behavior="scroll" direction="up">
<img src="https://www.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
</marquee>
</body>
</html>TIP
Для оформления используйте CSS width и background-color.
Стилизация
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<style>
marquee {
width: 100%;
padding: 10px 0;
background-color: lightblue;
}
</style>
<marquee direction="scroll">This scrolling text is created with HTML Marquee element and styled with CSS properties.</marquee>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| behavior | scroll, slide, alternate | Тип прокрутки. |
| bgcolor | rgb, #hex, имя цвета | Цвет фона. |
| direction | up, down, left, right | Направление. |
| height | px, % | Высота. |
| hspace | px | Горизонтальные отступы. |
| loop | число | Число циклов; без значения — бесконечно. |
| scrollamount | число | Шаг прокрутки в пикселях (по умолчанию 6). |
| scrolldelay | мс | Задержка между шагами (по умолчанию 85). |
| truespeed | boolean | Равномерная скорость в браузерах. |
| vspace | px | Вертикальные отступы. |
| width | px, % | Ширина. |
Также глобальные и событийные атрибуты.
Стилизация через JSON-подсказку
json
{
"tag_name": "marquee"
}Practice
Для чего исторически использовали HTML-тег marquee?