社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
HTML 中的框架標籤範例
範例 #1 – 水平對齊框架
Frame3.html
Main.html
範例 #2 – 垂直對齊框架
範例 #3 – 使用連結導覽不同的框架
menu.html
首頁 web前端 html教學 HTML 中的框架標籤

HTML 中的框架標籤

王林
王林
Sep 04, 2024 pm 04:32 PM
html html5 HTML Tutorial HTML Properties HTML tags

HTML 框架標籤用於以部分的形式在單一網頁上顯示多個網站。此標籤允許設計網頁，以便可以將具有不同內容的多個網頁組合起來並單獨顯示在單一網頁上。這是透過將單一網頁劃分為不同的部分（可以稱為框架）來實現的。各個幀可以單獨加載。 Frame標籤與frameset標籤一起使用，其中frameset標籤可以被視為容器，其中多個frame標籤將代表多個網站。

文法：

框架標籤的基本語法如下，

<frame src = "URL">
登入後複製

src 屬性指定檔案的來源。 tag也支援一些其他屬性，但src是主要屬性。

如前所述，標籤與

一起使用標籤。框架集可以被視為多個框架的集合，其中每個框架將代表要在同一頁上載入的單一網站。框架標籤將與框架集標籤一起使用，如下所示， 
<frameset>
<frame src = " ">
<frame src = " ">
.
.
<frame src = " ">
</frameset>
登入後複製

請注意，frameset 標籤有結束標籤，但frame 標籤沒有。

HTML 中的框架標籤範例

html 中框架標籤的範例如下：

範例 #1 – 水平對齊框架

共有三個檔案frame1、frame2和main。

Frame1.html

代碼：

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

代碼：

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

代碼：

<!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>
登入後複製

輸出：這裡，我們使用 cols 屬性將它們指定為一列，並且每個幀的寬度已設定為 50%。

HTML 中的框架標籤

範例 #2 – 垂直對齊框架

有四個檔案frame1、frame2、frame3和main。

Frame1.html

代碼：

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

代碼：

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

代碼：

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

代碼：

<!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>
登入後複製

輸出：這裡，我們使用了frameset標籤上的cols屬性來水平劃分框架，並且高度以百分比表示。

HTML 中的框架標籤

範例 #3 – 使用連結導覽不同的框架

在此範例中，三個檔案：frame1.html、frame2.html 和frame3.html 是相同的。

我們將使用帶有框架標籤的名稱屬性。

Main.html

代碼：

<!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>
登入後複製

代碼：

<!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>
登入後複製

這裡在frameset標籤中，我們將兩個框架劃分為第一個框架的30%寬度和第二個框架的剩餘所有寬度。第一格將以超連結的形式列出選單。對於第二個框架，我們為其分配了一個名稱，並且在 menu.html 中，我們將目標設定為每個連結的框架名稱。所以，這個連結將指向框架，內容將顯示在同一框架上。

輸出：

HTML 中的框架標籤

注意： HTML5 不支援標籤，而是使用

以上是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

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

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前 By DDD
<🎜>：死鐵路 - 如何馴服狼
4 週前 By DDD
R.E.P.O.的每個敵人和怪物的力量水平
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：種植花園 - 完整的突變指南
2 週前 By DDD
顯示更多

熱工具

記事本++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教學
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1230
24
顯示更多
Related knowledge
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

See all articles