Iframes in HTML
Sep 04, 2024 pm 04:41 PMIframes in HTML sind nichts anderes als Inline-Frames, die als HTML-Dokument verwendet werden, um ein weiteres HTML-Dokument hinzuzufügen. Es wird haupts?chlich in Webseiten oder Webentwicklungsprozessen verwendet, um andere Inhalte über eine andere Quelle einzubinden, beispielsweise Werbung auf dieser Webseite.
Die meisten Webdesigner verwenden Iframe, um interaktive Anwendungen auf der Website oder Webseiten zu pr?sentieren. Dies wird durch die Verwendung von JavaScript oder dem Zielattribut in HTML erm?glicht.
Der Hauptzweck eines Iframes besteht darin, eine Webseite innerhalb einer anderen anzuzeigen. Der Inline-Frame sollte mit einem Tag namens
Syntax
- Jetzt werden wir sehen, wie genau Iframe verwendet wird:
<iframe src ="URL"></iframe>
- Hier
Beispiel:
<iframe src ="www.educba.com" ></iframe>
- Es ist auch m?glich, unserem Iframe wie folgt eine bestimmte H?he und Breite im Pixelformat zuzuweisen:
<iframe src ="URL" height="value" width="value"></iframe>
- In der obigen Syntax werden alle Dinge gleich sein; Darüber hinaus k?nnen wir H?he und Breite im Pixelformat angeben und sie als definieren
Beispiel:
<iframe src ="www.educba.com" height="300" width="300"></iframe>
- Eine weitere Methode zum Definieren der H?he und Breite des Iframes mithilfe von Werten über CSS ist in der folgenden Syntax dargestellt:
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
- Alle Dinge sind die gleichen wie oben, nur mit einer ?nderung bei der Angabe von Werten.
Beispiel:
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
- Eine weitere Funktion, die dem Iframe hinzugefügt wird, besteht darin, dass wir bereits definierte Rahmen für den Frame entfernen k?nnen, indem wir die Eigenschaft ?border none“ verwenden. Die Syntax hierfür lautet wie folgt:
<iframe src ="URL" style="border : none;"></iframe>
- Mit Hilfe von CSS ist es auch m?glich, viele Dinge mit dem Rahmen zu tun, z. B. seine Gr??e zu ?ndern, etwas Farbe auf den Rahmen anzuwenden usw.
Der Iframe kann als Ziel für einen Link verwendet werden, indem die Syntax verwendet wird:
<iframe src ="URL" name="iframe_a"></iframe>
- In der obigen Syntax ist src unsere normale URL; Hier verweist das Zielattribut des Links auf das Namensattribut in unserem Iframe-Tag.
Beispiel:
<iframe src ="www.educba.com" name="iframe_a"></iframe>
Iframes-Tag-Attribut
In Iframes werden verschiedene Attribut-Tags verwendet. Diese lauten wie folgt:
- Src: Dieses Attribut wird verwendet, um eine Datei einzufügen, die in den Frame eingefügt werden muss. Die URL gibt die Zielwebseite an, die innerhalb eines Iframes geladen werden soll.
- Name: Name ist ein Attribut, das verwendet wird, um dem Rahmen einen Identifikationsnamen zu geben. Dies ist am nützlichsten, wenn Sie einen Link erstellen, um eine andere Webseite zu ?ffnen.
- allowfullscreen: Mit diesem Attribut k?nnen Sie Ihren Rahmen im Vollbildformat anzeigen. Wir müssen also den Wert auf ?true“ setzen, damit diese Funktion ausgeführt wird.
- Frameborder: Dies ist ein hilfreiches Attribut, mit dem Sie einen Rahmen anzeigen oder nicht anzeigen k?nnen. Wert 1 soll den Rand anzeigen und 0 soll den Rand zum Rahmen nicht anzeigen.
- Randbreite: Erm?glicht Ihnen, den Abstand zwischen der linken und rechten Seite des Rahmens zu definieren.
- Randh?he: Damit k?nnen Sie den Abstand zwischen der Ober- und Unterseite des Rahmens definieren.
- Scrollen: Diese Attribute steuern, ob die Bildlaufleiste im Frame angezeigt wird oder nicht. Die enthaltenen Werte sind ?Ja“, ?Nein“ oder ?Auto“.
- H?he: Wird verwendet, um die H?he des Rahmens zu definieren. Ob in % oder Pixel
- Breite: Wird verwendet, um die Breite des Rahmens zu definieren. Ob in % oder Pixel
- Longdesc: Mit Hilfe dieses Attributs k?nnen Sie eine weitere Seite mit einer ausführlichen Beschreibung des Inhalts Ihres Frames verlinken.
Beispiele für Iframes in HTML
Hier sind einige Beispiele für Iframes in HTML, die im Folgenden erl?utert werden:
Beispiel #1
Betrachten wir ein Beispiel, in dem wir zeigen, wie man einen Iframe mit einer bestimmten H?he und Breite erstellt.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe> </body> </html>
Ausgabe:
Beispiel #2
Betrachten wir ein weiteres Beispiel, in dem wir zeigen, wie man einen Iframe mit einer bestimmten H?he und Breite erstellt. Aber in diesem Beispiel geben wir H?he und Breite über CSS an. Hier k?nnen wir sehen, dass die Bildlaufleiste je nach Inhaltsgr??e angepasst wird.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe> </body> </html>
Ausgabe:
Example #3
Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p> <iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe> </body> </html>
Output:
Example #4
Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>Iframe Demo- Target for a Link</h2> <iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html>
Output:
Target Output:
As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.
Conclusion
An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.
Das obige ist der detaillierte Inhalt vonIframes in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

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
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Das nicht angezeigte Bild wird normalerweise durch einen falschen Dateipfad, einen falschen Dateinamen oder eine falsche Erweiterung, HTML -Syntaxprobleme oder einen Browser -Cache verursacht. 1. Stellen Sie sicher, dass der SRC -Pfad mit dem tats?chlichen Speicherort der Datei übereinstimmt, und verwenden Sie den richtigen relativen Pfad. 2. überprüfen Sie, ob der Fall und die Erweiterung des Dateinamens genau übereinstimmen, und überprüfen Sie, ob das Bild durch direktes Eingeben der URL geladen werden kann. 3. überprüfen Sie, ob die IMG -Tag -Syntax korrekt ist. Stellen Sie sicher, dass es keine redundanten Zeichen gibt und der Alt -Attributwert angemessen ist. 4. Versuchen Sie, die Seite zu aktualisieren, den Cache zu l?schen oder den Inkognito -Modus zu verwenden, um Cache -Interferenzen zu beseitigen. Fehlerbehebung in dieser Reihenfolge kann die meisten Probleme mit HTML -Bildanzeigen l?sen.

?youcannotnestTagsinsideanotagbecauses's'sinvalidhtml; browsersauutomatisch -closethefirstbeerextenext, resultierendinseparateparagraphs.?instead, useInLineElements, oder

Um eine nicht ordnungsgem??e HTML -Liste zu erstellen, müssen Sie ein Tag verwenden, um einen Listencontainer zu definieren. Jedes Listenelement ist mit einem Tag verpackt, und der Browser fügt automatisch Kugeln hinzu. 1. Erstellen Sie eine Liste mit einem Tag; 2. Jedes Listenelement ist mit einem Tag definiert. 3. Der Browser generiert automatisch Standard -Punkt -Symbole. 4. Unterverschiedene k?nnen durch Verschachtelung implementiert werden. 5. Verwenden Sie das Attribut vom Typ Listenstil von CSS, um den Symbolstil wie Scheibe, Kreis, Quadrat oder keine zu ?ndern. Verwenden Sie diese Tags korrekt, um eine nicht ordnungsgem??e Standardliste zu generieren.

TheContententitableAttributemakesAnyhtmlelementedableByAddingCentabled = "true", und das Erlaubnis für die Erlaubnis, dass es, dass in der Lage ist

SemantichtmlimprovesbothseoandAccessibilityByuseing -meaningfulTagSthatConveyContentStructure.1) iTenhancesseothroughbetterContentHierarchyWithProperHeadinglevels, verbesserteIndexingviaelementSlikaND und -SupportforrichsnippetsususingStrostStrostStrostStrostStrostStrostStrostaustaustaustrota.2)

Das Schema.org -Tag hilft Suchmaschinen, das strukturierte Datenformat von Webseiteninhalten über semantische Tags (z. B. Elementumfang, Elementtyp, ElementProp) zu verstehen. Es kann verwendet werden, um benutzerdefiniertes Vokabular zu definieren. Zu den Methoden geh?ren die Erweiterung vorhandener Typen oder die Einführung neuer Typen mithilfe von zus?tzlichem Typ. In den tats?chlichen Anwendungen sind die Struktur klar, priorisieren Sie die Verwendung offizieller Attribute, die Gültigkeit des Codes und stellen sicher, dass benutzerdefinierte Typen zug?nglich sind. Zu den Vorsichtsma?nahmen geh?ren das Akzeptieren der teilweisen Unterstützung, die Vermeidung von Rechtschreibfehlern und die Auswahl eines geeigneten Formats wie JSON-LD.

UsTheelementWitHinatagTocreateEmanticSearchfield.2.IncludeaForAccessibility, settheform'Saction undMethod = "AttributestosendDatoAsearchendPointWithasharableUrl.

rel = "styleSheet" linkScssFilesforstylingThePage; 2.rel = "vorlad" HintStopreloadcriticalResourcesForperformance; 3.rel = "icon" setStheWebsit'sfavicon;
