Wie verwende ich animierte Bilder in HTML-Seiten?-HTML-Tutorial-php.cn

Wie verwende ich animierte Bilder in HTML-Seiten?

PHPz

Freigeben： 2023-08-24 08:13:03

nach vorne

2705 Leute haben es durchsucht

Animierte Bilder in HTML sind Bilder, die sich auf einer Webseite bewegen. Es liegt im GIF-Format oder einer Graphics Interchange Format-Datei vor.

Wir müssen ein animiertes Bild in HTML hinzufügen, indem wir das Tag und das Attribut src verwenden. Das Attribut src fügt die URL (Dateispeicherort) des Bildes hinzu

Außerdem können wir die Höhe und Breite des Bildes mithilfe der Attribute „height“ und „width“ festlegen.

Wie verwende ich animierte Bilder in HTML-Seiten?

Grammatik

<image src=”Animated image”>

Nach dem Login kopieren

Beispiel 1

Hier ist ein Beispiel, das zeigt, wie animierte Bilder in einer HTML-Seite verwendet werden -

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p>Adding Animated Images to the web page</p>
   <img  src="https://tutorialspoint.com/images/html.gif" alt="Wie verwende ich animierte Bilder in HTML-Seiten?" >
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Übersetzt ins Chinesische:

Beispiel 2

Sie können versuchen, den folgenden Befehl auszuführen, um animierte Bilder in HTML zu verarbeiten -

<!DOCTYPE html>
<html>
<head>
   <title>Animated Image</title>
</head>
<body>
   <h1>Animated Image</h1>
   <img  src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif" alt="Wie verwende ich animierte Bilder in HTML-Seiten?" >
</body>
</html>

Nach dem Login kopieren

Beispiel 3

Wir können die Höhe und Breite animierter Bilder mithilfe von Stylesheets ändern.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <p> dding Animated Images to the web page</p>
   <img  src="https://tutorialspoint.com/images/html.gif"    style="max-width:90%"  style="max-width:90%" alt="Wie verwende ich animierte Bilder in HTML-Seiten?" >
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie verwende ich animierte Bilder in HTML-Seiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!