Tag Bingkai dalam HTML

Teg bingkai HTML digunakan untuk memaparkan berbilang tapak pada satu halaman web dalam bentuk bahagian. Teg ini membolehkan mereka bentuk halaman web supaya berbilang halaman web dengan kandungan yang berbeza boleh digabungkan dan dipaparkan secara individu pada satu halaman web. Ini dicapai dengan membahagikan halaman web tunggal kepada bahagian yang berbeza, yang boleh dipanggil bingkai. Bingkai individu boleh dimuatkan secara berasingan. Teg bingkai digunakan bersama-sama dengan teg set bingkai, yang mana teg set bingkai boleh dianggap sebagai bekas dan berbilang teg bingkai di dalamnya akan mewakili berbilang tapak.

Sintaks:

Sintaks asas teg bingkai adalah seperti di bawah,

<frame src="URL">

Atribut src menentukan sumber fail. tag menyokong beberapa atribut lain, tetapi src ialah atribut utama.

Seperti yang dinyatakan, teg digunakan dengan tag. Frameset boleh dianggap sebagai koleksi berbilang bingkai di mana setiap bingkai akan mewakili tapak individu untuk dimuatkan pada halaman yang sama. Tag bingkai akan digunakan bersama dengan tag set bingkai seperti di bawah,

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

Perhatikan bahawa teg set bingkai mempunyai teg akhir, tetapi teg bingkai tidak mempunyai teg.

Contoh Teg Bingkai dalam HTML

Contoh teg bingkai dalam html diberikan di bawah:

Contoh #1 – Jajarkan bingkai Secara Mendatar

Terdapat tiga fail frame1, frame2 dan utama.

Bingkai1.html

Kod:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 1 </h1>
</div>

Bingkai2.html

Kod:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 2 </h1>
</div>

Utama.html

Kod:

<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>

Output: Di sini, kami telah menggunakan atribut cols untuk menentukannya sebagai lajur dan lebar setiap bingkai telah ditetapkan kepada 50%.

Contoh #2 – Jajarkan bingkai Menegak

Terdapat Empat fail frame1, frame2,frame3 dan utama.

Bingkai1.html

Kod:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 1 </h1>
</div>

Bingkai2.html

Kod:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 2 </h1>
</div>

Frame3.html

Kod:

<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>

<div class="results">
<h2 id="frame-tag-in-HTML"> frame tag in HTML </h2>
<h1 id="Frame"> Frame 3 </h1>
</div>

Utama.html

Kod:

<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>

Output: Di sini, kami telah menggunakan atribut cols pada teg set bingkai untuk membahagikan bingkai secara mendatar dan ketinggian telah disebut dalam peratusan.

Contoh #3 – Menavigasi bingkai berbeza menggunakan pautan

Untuk contoh ini, tiga fail, frame1.html, frame2.html dan frame3.html, adalah sama.

Kami akan menggunakan atribut nama dengan tag bingkai.

Utama.html

Kod:

<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>

menu.html

Kod:

<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>

<div class="results">
<h2 id="Menu"> Menu </h2>
<a href="frame1.html" target="frame"> Frame 1 </a>  
<a href="frame2.html" target="frame"> Frame 2 </a>  
<a href="frame3.html" target="frame"> Frame 3 </a>
</div>

Di sini Dalam teg frameset, kami telah membahagikan dua bingkai kepada lebar 30% untuk bingkai pertama dan baki semua lebar untuk bingkai kedua. Bingkai pertama akan menyenaraikan menu dalam bentuk hiperpautan. Untuk bingkai kedua, kami telah menetapkan nama untuknya, dan dalam menu.html, kami telah menetapkan sasaran sebagai nama bingkai untuk setiap pautan. Jadi, pautan ini akan mengarahkan bingkai, dan kandungan akan dipaparkan pada bingkai yang sama.

Output:

Nota: teg tidak disokong dalam HTML5, sebaliknya

Atas ialah kandungan terperinci Tag Bingkai dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!