HTML <marquee>-Tag
Das <marquee>-Element ist ein nicht standardisiertes HTML-Tag, das zum Erstellen von scrollendem Text oder Bildern verwendet wurde. Es ließ Text oder Bilder horizontal über oder vertikal auf der Webseite scrollen. Aufgrund seiner Usability-Probleme wurde es oft mit Netscapes blink-Element verglichen.
DANGER
Das <marquee>-Element ist ein veraltetes HTML-Tag. Wenn Sie es verwenden, können Ihre Seiten oder Apps beschädigt sein. Obwohl es veraltet ist, funktioniert das Tag in den meisten modernen Browsern noch.
Alternativen zum HTML <marquee>-Tag
Wie oben erwähnt, ist das HTML <marquee>-Tag veraltet, und Entwickler vermeiden dessen Verwendung oft. Heute können Sie dasselbe Ergebnis mit CSS und JavaScript erzielen. Lesen Sie unseren Snippet, um mehr über diese Methode zu erfahren.
Syntax
Das <marquee>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<marquee>) und dem schließenden (</marquee>) Tag geschrieben.
Beispiel zur Verwendung des HTML <marquee>-Tags:
Beispiel für das HTML <marquee>-Tag
<!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>Verwenden Sie das Attribut direction des <marquee>-Elements, um die Richtung des Textes oder Bildes zu ändern. Sehen Sie sich ein weiteres Beispiel an, bei dem der Text von oben nach unten scrollt.
Beispiel für einen scrollenden Text:
Beispiel für das <marquee>-Tag mit dem direction-Attribut
<!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>Sehen wir uns nun ein Beispiel für die Verwendung des <marquee>-Elements zur Anzeige eines scrollenden Bildes an:
Beispiel für ein scrollendes Bild:
Beispiel für das <marquee>-Tag mit den Attributen behavior und direction
<!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
Verwenden Sie die CSS-Eigenschaften width und background-color, um das <marquee>-Element zu stylen.
Beispiel zum Erstellen eines scrollenden Textes mit dem HTML <marquee>-Tag:
Beispiel zum Stylen des HTML <marquee>-Tags mit den Eigenschaften width und background-color
<!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>Attribute
Die folgenden Attribute können verwendet werden, um das Erscheinungsbild des <marquee>-Elements anzupassen.
| Attribut | Wert | Beschreibung |
|---|---|---|
| behavior | scroll, slide, alternate | Definiert den Scrolltyp. |
| bgcolor | rgb(x,x,x), #xxxxxx, colorname | Legt die Hintergrundfarbe fest. |
| direction | up, down, left, right | Legt die Richtung für den scrollenden Inhalt fest. |
| height | pixels, % | Definiert die Höhe des Marquees. |
| hspace | pixels | Definiert den horizontalen Abstand um den Marquee. |
| loop | number | Definiert, wie oft der Inhalt scrollen soll. Wenn weggelassen, scrollt der Inhalt unbegrenzt. |
| scrollamount | number | Definiert die Scrollmenge pro Intervall in Pixeln. Standardwert ist 6. |
| scrolldelay | milliseconds | Definiert die Verzögerung zwischen jedem Scrollvorgang. Der Standardwert ist 85. |
| truespeed | boolean | Aktiviert eine gleichmäßige Scrollgeschwindigkeit über verschiedene Browser hinweg. |
| vspace | pixels | Definiert den vertikalen Abstand um den Marquee. |
| width | pixels, % | Definiert die Breite des Marquees. |
Das <marquee>-Tag unterstützt auch die Globalen Attribute und Ereignisattribute.
So stylen Sie ein HTML <marquee>-Tag
{
"tag_name": "marquee"
}Praxis
Was ist der Zweck des HTML marquee-Tags, wie auf der angegebenen Webseite beschrieben?