目錄
文法
frameset標籤的屬性
實作 HTML 框架集標籤的範例
範例#3
結論
首頁 web前端 html教學 HTML 框架集標籤

HTML 框架集標籤

Sep 04, 2024 pm 04:30 PM
html html5 HTML Tutorial HTML Properties HTML tags

HTML 中的標籤組合了多個框架並將它們顯示為單一網頁。該文件將包含框架集中包含的所有框架。框架只不過類似於單一視窗或網站。框架集標籤允許我們形成多列或多行,並在它們下麵包含框架。此功能在 HTML 5 之前就可用,對於透過將各種文件組合在一起來一次顯示它們非常有用。每個框架都可以包含其內容;通常,這些是不同的網頁文件,例如 HTML 或圖像。

文法

這裡的起始標籤是

;並以結束標記作為 結束。 標籤可以包含一個或多個多幀標籤。每個幀標籤都以 開頭。標籤,屬性名稱為“src”,我們將在其中傳遞框架內容。如前所述,此內容可以是任何類似 Web 文件的內容,例如 HTML 或傳遞圖像。
<frameset cols / rows = ", , , " >
<frame src = "source file name. . . " >
. . . . . .
. . . . . .
<frame src = "source file name. . . " >
</frameset>
登入後複製

這裡,我們有一個包含屬性 cols 或 rows 的起始標籤框架集。通常,這兩個屬性將與框架集標籤一起使用,因為框架集標籤用於組合多個框架。這些標籤只不過是允許形成行或列來定位各種框架。起始標籤後面跟著一個簡單的幀標籤。若要在框架中顯示文件,請在框架標記中使用“src”屬性並將文件名稱作為其值傳遞。我們已經證明,單一幀可以使用點包含多個幀。最後,透過關閉標籤 來關閉框架集標籤。

frameset標籤的屬性

以下是框架集標籤支援的屬性清單:

1。 cols: 此屬性用於定位內部框架。 cols 屬性將框架集分成多列,垂直顯示框架。此屬性還允許設定框架集中每列的寬度。我們可以透過將值傳遞給該屬性來為每個幀設定不同的值。該值可以以百分比、像素或相對長度的形式傳遞。該屬性的預設值為 100%。

2。 rows: 此屬性也類似 cols 屬性。 rows 屬性會將框架集分成多行,框架將一一水平顯示。我們可以透過類似cols屬性的值來設定每一幀的高度。透過同時使用行和列,可以實現預期的結果。該屬性的預設值也是 100%。

3。 border: 此屬性在框架集標籤上使用,用於定義框架集中每個框架的寬度。

4。框架間距: 框架集標籤使用「框架間距」屬性來建立其中框架之間的間隙。

實作 HTML 框架集標籤的範例

下面給出的是 HTML 框架集標籤的範例:

範例#1

它包含多個 Html 文件,因為我們在一個父視窗中使用不同的文件作為框架。

代碼:

主檔:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset>
<frame src = "frame1.html" >
</frameset>
</html>
登入後複製

我們有一個名為frame 1 的來源檔案。

frame1.html:

<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.15) ;
}
</style>
</head>
<body>
<h2> Example of Frameset tag </h2>
<h1> Frame 1 </h1>
</body>
</html>
登入後複製

輸出:

由於我們只有一個文件作為一個框架包含在內,因此頁面將顯示整個frame.html的內容。框架的寬度和高度預設為100%;這就是為什麼單一框架會佔據所有區域。

HTML 框架集標籤

範例#2

讓我們在範例中再新增一個框架,並使用 cols 屬性按列劃分它並以百分比形式傳遞值。

代碼

frame2.html:

<!DOCTYPE html>
<html>
<head>
<title> Frameset Example </title>
<style>
body {
text-align: center ;
background-color: rgb(120, 120, 120, 0.30 ) ;
}
</style>
</head
<body>
<h2> Hello World..! </h2>
<h1> Frame 2 </h1>
</body>
</html>
登入後複製

主檔:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset cols = "40% , 60 %" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</html>
登入後複製

輸出:

在這裡,我們傳遞了兩個幀,並使用 cols 屬性將它們分開,傳遞的值分別為 40% 和 60%。使第一幀的寬度為 40%,第二幀的寬度為 60%。

HTML 框架集標籤

範例#3

讓我們使用 rows 屬性水平來劃分相同的幀。我們將修改相同的最後一個範例。不同之處在於 rows 屬性將取代 cols 屬性。 rows 屬性也採用與 cols 屬性類似的值。我們可以根據幀數傳遞多個值。

代碼

主檔:

<!DOCTYPE html>
<html>
<head>
<title> frameset tag in HTML </title>
<style>
</style>
</head>
<frameset rows = "50% , 50%" >
<frame src = "frame1.html" >
<frame src = "frame2.html" >
</frameset>
</html>
登入後複製

輸出:

這裡輸出將是兩個水平框架,高度相同為 50%。請注意,此高度將對應於實際的瀏覽器視窗。

HTML 框架集標籤

結論

我們已經了解了 HTML 中的框架集標籤、其用途以及如何使用它。此標籤旨在在一個顯示視窗上合併和展示多個框架。我們也可以使用可用的屬性定義框架的位置和大小。該標籤自 HTML 5 起已被棄用。

以上是HTML 框架集標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles