Inhaltsverzeichnis
Warum verwenden wir CSS in HTML?
Wie funktioniert das Marquee-Tag in HTML?
Beispiele zur Implementierung von beweglichem Text in HTML
Beispiel #6
Fazit
Heim Web-Frontend HTML-Tutorial Text in HTML verschieben

Text in HTML verschieben

Sep 04, 2024 pm 04:45 PM
html html5 HTML Tutorial HTML Properties HTML tags

Das Verschieben von Text in HTML wird auch als Lauftext bezeichnet. Wir können den Text in einem bestimmten Zeitintervall in alle Richtungen scrollen. Tag wird verwendet, um den nächsten Schritt auszuführen. Es gibt 4 Richtungen zum Scrollen des Textes, z. B. nach links, nach rechts, nach oben und nach unten. Verschieben Sie den Text innerhalb des geschlossenen Bereichs, indem Sie die Verhaltenseigenschaft festlegen.

Echtzeitbeispiel: Nehmen wir an, wir haben regelmäßig wichtige aktualisierte Inhalte auf unserer Website. Wenn dieser Inhalt immer stabil ist, können Benutzer sich nicht um den Inhalt kümmern. Um also die Aufmerksamkeit des Benutzers zu erregen, müssen wir ständig durch den aktualisierten Inhalt scrollen. Je nach Benutzeranforderung können wir die Richtung angeben, in die der Seiteninhalt scrollen soll. Erfüllen Sie diese Anforderung Tag wird verwendet.

Warum verwenden wir CSS in HTML?

Stellen Sie eine gemeinsame Logik für alle Seiten bereit. Anstatt in jede HTML-Seite dieselbe Stillogik zu schreiben, verwenden wir eine CSS-Datei zum Schreiben allgemeiner Logik. Und fügen Sie diese CSS-Seite mit in jede HTML-Seite ein. Tag.

Wie funktioniert das Marquee-Tag in HTML?

Inhalte können durch Anwenden von verschoben werden. Wenn wir die Richtungseigenschaft innerhalb des Marquee-Tags festlegen, bewegt sich der Inhalt des Eigenschaftswerts basierend auf der Richtung.

Syntax #1

<marquee>
//some text to move
</marquee>
Nach dem Login kopieren

Syntax #2

<marquee direction=”left or right or up or down”>
//some text to move
</marquee>
Nach dem Login kopieren

Syntax #3

<marquee behavior="alternate"> //it makes the text back direction by touching the border of the page.
//some text to move
</marquee>
Nach dem Login kopieren

Syntax #4

<marquee direction=”left” scrollamount="5">// scrollamount used to set the scrolling text speed
//some text to move
</marquee>
Nach dem Login kopieren
Hinweis: Die Standardausrichtung des Laufschriftbereichs ist richtig, wenn wir keine Richtungseigenschaft angegeben haben.

Beispiele zur Implementierung von beweglichem Text in HTML

Im Folgenden finden Sie die genannten Beispiele:

Beispiel #1

Standard-Marquee-Tag

Code:

<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: green;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee>
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
Nach dem Login kopieren

Ausgabe:

Text in HTML verschieben Text in HTML verschieben

Erklärung: Wie Sie im obigen Text sehen können, wurde er von rechts nach links verschoben, auch wenn wir keine Richtung angegeben haben, es handelt sich also um das Standard-Marquee-Tag.

Beispiel #2

Festzelt-Tag in die richtige Richtung.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="right">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
Nach dem Login kopieren

Ausgabe:

Text in HTML verschieben Text in HTML verschieben

Erklärung: Wie Sie im obigen Text sehen können, wurde die Bewegung von links nach rechts verschoben, indem die Richtungseigenschaft auf rechts gesetzt wurde.

Beispiel #3

Festzelt nach oben

Code:

<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: blue;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="up">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
Nach dem Login kopieren

Ausgabe:

Text in HTML verschieben Text in HTML verschieben

Erklärung: Wie Sie im obigen Text sehen können, wurde von unten nach oben verschoben, indem die Richtungseigenschaft auf „oben“ gesetzt wurde.

Beispiel #4

Festzelt nach unten.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: orange;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="down">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>
Nach dem Login kopieren

Ausgabe:

Text in HTML verschieben Text in HTML verschieben

Erklärung: Wie Sie im obigen Text sehen können, wurde die Richtung von oben nach unten verschoben, indem die Richtungseigenschaft auf „unten“ gesetzt wurde.

Beispiel #5

Festzelt mit Verhaltenseigenschaft.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: lightblue;
text-align: center;
color: brown;
font-family: Arial;
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee behavior="alternate">
Hi, I am an alternate proeprty
</marquee>
</body>
</html>
Nach dem Login kopieren

Ausgabe:

Text in HTML verschieben Text in HTML verschieben Text in HTML verschieben

Erklärung: Wie Sie im obigen Text sehen können, wird durch Berühren des Randes von links nach rechts und von rechts nach links verschoben, indem die Verhaltenseigenschaft auf „Alternate“ gesetzt wird.

Beispiel #6

Marquee mit Scroll-Anzahl-Eigenschaft.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: fuchsia;
text-align: center;
color: white;
font-family: Arial;
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="left" scrollamount="2">
Paramesh
</marquee>
<marquee scrollamount="4">
Amardeep
</marquee>
<marquee scrollamount="6">
Harinath-Rajitha
</marquee>
</body>
</html>
Nach dem Login kopieren

Ausgabe:

Text in HTML verschieben Text in HTML verschieben

Erklärung: Wie Sie im obigen Text sehen können, haben sie sich zu unterschiedlichen Zeitpunkten von rechts nach links bewegt, sodass sie sich alle an unterschiedlichen Positionen befinden.

Fazit

Das Verschieben von Text in HTML wird durch das Marquee-Tag erreicht. Wir können den Text je nach Anforderung nach links, rechts, oben und unten verschieben. Diese Laufschriftfunktion wird hauptsächlich von Fernsehsendern für ein regelmäßiges Update verwendet, um die Aufmerksamkeit der Benutzer zu erregen.

Das obige ist der detaillierte Inhalt vonText in HTML verschieben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1664
14
PHP-Tutorial
1269
29
C#-Tutorial
1249
24
Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles