Personen, die häufig Seitenlayouts erstellen, müssen mit dem iframe-Tag in HTML vertraut sein. Vereinfacht ausgedrückt wird es zum Einbetten eines anderen Dokuments in die aktuelle HTML-Seite verwendet. Freunde, die neu im Frontend sind, wissen möglicherweise nicht, wie man das Iframe-Tag in HTML verwendet. Interessierte Freunde können einen Blick darauf werfen. Das
Grundsätzliche Syntax:
height can Legen Sie die angezeigte Höhe des Rahmens fest.
width kann die Breite der Rahmenanzeige festlegen.
name kann den Namen des Rahmens definieren.
frameborder wird verwendet, um zu definieren, ob ein Rahmen angezeigt werden muss. Ein Wert von 1 gibt dies an Ein Rahmen ist erforderlich.
Scrolling wird verwendet, um festzulegen, ob der Frame vorhanden ist. Der Wert kann „Ja“ oder „Nein“ sein.
Src wird verwendet, um die Adresse des Frames festzulegen Seitenadresse oder Bildadresse.
align wird verwendet, um die Elementausrichtung festzulegen: links, rechts, oben, mitte, unten.
Die oben genannten Attribute können nach Bedarf festgelegt werden.
Erklärung mit Beispielen: So verwenden Sie das
Erstellen Sie zunächst zwei HTML-Seiten, eine mit dem Namen iframe-content.html und die andere mit dem Namen Fügen Sie für iframe.html Inhalte in iframe-content.html hinzu. Der Code lautet wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>蒹葭苍苍,白露为霜。所谓伊人,在水一方。</p> <p>溯洄从之,道阻且长。溯游从之,宛在水中央。</p> <p>蒹葭萋萋,白露未晞。所谓伊人,在水之湄。</p> <p>溯洄从之,道阻且跻。溯游从之,宛在水中坻。</p> </body> </html>
Dann verwenden Sie das
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <iframe src="iframe-content.html" width="400px" height="150px" frameborder="0" scrolling="no"></iframe> </body> </html>
Rendering mit Rahmen und Bildlaufleisten:
Rendering ohne Ränder und Bildlaufleisten:
Wenn der größte Teil des Inhalts auf der Seite derselbe ist, z. B. die Kopfzeile der Seite. Oben und unten können wir das
Das Obige führt in Kombination mit Beispielen in die Verwendung des
[Verwandte Tutorial-Empfehlungen]
1. HTML5-Video-Tutorial
3 Anleitung
Das obige ist der detaillierte Inhalt vonWas ist