Heim >Web-Frontend >HTML-Tutorial >Frame-Tag in HTML

Frame-Tag in HTML

王林Original: 2024-09-04 16:32:031156Durchsuche

Ein HTML-Frame-Tag wird verwendet, um mehrere Websites auf einer einzelnen Webseite in Form von Abschnitten anzuzeigen. Mit diesem Tag können Sie eine Webseite so gestalten, dass mehrere Webseiten mit unterschiedlichen Inhalten kombiniert und einzeln auf einer einzigen Webseite angezeigt werden können. Dies wird erreicht, indem die einzelne Webseite in verschiedene Abschnitte unterteilt wird, die als Frame bezeichnet werden können. Die einzelnen Frames können separat geladen werden. Das Frame-Tag wird zusammen mit dem Frameset-Tag verwendet, wobei Frameset-Tags als Container betrachtet werden können und mehrere darin enthaltene Frame-Tags mehrere Websites darstellen.

Syntax:

Die grundlegende Syntax des Frame-Tags ist wie folgt:

<frame src = "URL">

Das src-Attribut gibt die Quelle einer Datei an. Der tag unterstützt einige andere Attribute, aber src ist das Hauptattribut.

Wie bereits erwähnt, ist der -Tag wird mit dem -Tag verwendet. Etikett. Das Frameset kann als eine Sammlung mehrerer Frames betrachtet werden, wobei jeder Frame eine einzelne Site darstellt, die auf derselben Seite geladen werden soll. Das Frame-Tag wird zusammen mit dem Frameset-Tag wie folgt verwendet:

<frameset>
<frame src = " ">
<frame src = " ">
.
.
<frame src = " ">
</frameset>

Beachten Sie, dass das Frameset-Tag ein End-Tag hat, das Frame-Tag jedoch nicht.

Beispiele für Frame-Tags in HTML

Beispiele für Frame-Tags in HTML sind unten aufgeführt:

Beispiel Nr. 1 – Rahmen horizontal ausrichten

Es gibt drei Dateien: Frame1, Frame2 und Main.

Frame1.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Main.html

Code:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "50%, 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</head>
<body>
</body>
</html>

Ausgabe: Hier haben wir das cols-Attribut verwendet, um sie als Spalte anzugeben, und die Breite jedes Rahmens wurde auf 50 % festgelegt.

Frame-Tag in HTML

Beispiel #2 – Rahmen vertikal ausrichten

Es gibt vier Dateien: Frame1, Frame2, Frame3 und Main.

Frame1.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 1 </h1>
</div>
</body>
</html>

Frame2.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 2 </h1>
</div>
</body>
</html>

Frame3.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> frame tag in HTML </h2>
<h1> Frame 3 </h1>
</div>
</body>
</html>

Main.html

Code:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset rows = "30%, 30%, 30%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
<frame src = "frame3.html" >
</frameset>
</head>
<body>
</body>
</html>

Ausgabe: Hier haben wir das cols-Attribut über dem Frameset-Tag verwendet, um die Frames horizontal zu unterteilen, und die Höhe wurde in Prozent angegeben.

Frame-Tag in HTML

Beispiel #3 – Navigieren durch verschiedene Frames mithilfe von Links

In diesem Beispiel sind die drei Dateien „frame1.html“, „frame2.html“ und „frame3.html“ identisch.

Wir werden ein Namensattribut mit einem Frame-Tag verwenden.

Main.html

Code:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content=
"width = device-width, initial-scale = 1.0">
<title>
frame tag in HTML
</title>
<frameset cols = "30%, * " >
<frame src = "menu.html" name = "menu" >
<frame name = "frame" >
</frameset>
</head>
<body>
</body>
</html>

menu.html

Code:

<!DOCTYPE html>
<html>
<head>
<title> Frame tag Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : center;
height : 300px;
width : 95%;
}
</style>
</head
<body>
<div class = "results">
<h2> Menu </h2>
<a href = "frame1.html" target = "frame"> Frame 1 </a> </br> </br>
<a href = "frame2.html" target = "frame"> Frame 2 </a> </br> </br>
<a href = "frame3.html" target = "frame"> Frame 3 </a>
</div>
</body>
</html>

Hier im Frameset-Tag haben wir zwei Frames in eine Breite von 30 % für den ersten Frame und die verbleibende Gesamtbreite für den zweiten Frame aufgeteilt. Im ersten Frame wird das Menü in Form von Hyperlinks aufgelistet. Für den zweiten Frame haben wir einen Namen vergeben und in der menu.html das Ziel als Frame-Namen für jeden Link festgelegt. Dieser Link führt also zum Frame und der Inhalt wird im selben Frame angezeigt.

Ausgabe:

Frame-Tag in HTML

Hinweis: -Tag wird in einem HTML5-Format nicht unterstützt, stattdessen