社群

學習

工具庫

AI工具

休閒

繁体中文

目錄

Frameset

Frame

Iframe

範例

首頁

web前端

html教學

介紹HTML框架(Frames)到底有什麼用？

介紹HTML框架(Frames)到底有什麼用？

零下一度

May 02, 2017 pm 03:16 PM

使用框架(Frame)，你可以在瀏覽器視窗同時顯示多個網頁。每個Frame裡設定一個網頁，每個Frame裡的網頁都互相獨立。

Frameset

決定如何分割Frame。有cols屬性和rows屬性。使用cols屬性，表示以列分佈Frame；使用rows屬性，表示按行分佈Frame。

Frame

用這個Tag設定網頁。裡面有src屬性，src值就是網頁的路徑和檔名。

下面的程式碼的目的是：將Frameset分成2列，第一列25%，表示第一列的寬度是視窗寬度的25%；第二列75%，表示第一列的寬度是窗口寬度的75%。第一列顯示a.html，第二列顯示b.html。

<frameset cols="25%,75%">
   <frame src="../asdocs/html_tutorials/Frame_a.html">
   <frame src="../asdocs/html_tutorials/Frame_b.html">
</frameset>

登入後複製

Iframe

Iframe是Inline Frame的意思，用可以將Frame置於一個HTML檔案內。

範例

<html>

<frameset cols="25%,50%,25%">

<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">

</frameset>

</html>

登入後複製

這個範例顯示如何在瀏覽器裡同時顯示三個網頁，三個網頁是按列分佈的。

<html>

<frameset rows="25%,50%,25%">

<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">

</frameset>

</html>

登入後複製

這個範例顯示如何在瀏覽器裡同時顯示三個網頁，三個網頁是按行分佈的。

混合Frameset

<html>

<frameset rows="50%,50%">

<frame src="../asdocs/html_tutorials/Frame_a.html">

<frameset cols="25%,75%">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">
</frameset>

</frameset>

</html>

登入後複製

這個例子既用到了cols屬性，又用到了rows屬性，將Frame進行靈活分佈。

Frameset中的noresize屬性

<html>

<frameset rows="50%,50%">

<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_a.html">

<frameset cols="25%,75%">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_b.html">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_c.html">
</frameset>

</frameset>

</html>

登入後複製

使用Noresize屬性可以確保Frame的大小。如果不使用noresize屬性，可以用滑鼠移動Frame的邊界，來改變Frame的大小，如果設定了noresize屬性，就不能移動邊界了。

Frame用於導航

<html>
<frameset cols="120,*">

<frame src="../asdocs/html_tutorials/framelist.html">
<frame src="../asdocs/html_tutorials/Frame_a.html" name="showframe">

</frameset>
</html>

登入後複製

這個範例示範如何建立一個用於導航的Frame。這個導航Frame包含一個HTML，這個HTML（程式碼如下）包含了一個網頁清單。點選網頁清單中的任何一項，就會在第二個Frame中顯示點擊中的網頁。

<HTML>
<HEAD>
<TITLE> humorlist.html </TITLE>
</HEAD>
<BODY>
<p><a href = "../asdocs/html_tutorials/Frame_a.html" target="showframe">笑话一<a></p>
<p><a href = "../asdocs/html_tutorials/Frame_b.html"  target="showframe">笑话二<a></p>
<p><a href = "../asdocs/html_tutorials/Frame_c.html"  target="showframe">笑话三<a></p>
</BODY>
</HTML>

登入後複製

Iframe的使用

<html>
<body>
<p>用 IFRAME 可以在HTML文件里显示另一个网页。</p>

<p>这个 HTML 文档中使用 IFRAME 来显示另外一个叫Frame_a.html 的网页。</p>

<iframe src="../asdocs/html_tutorials/Frame_a.html"></iframe>

</body>
</html>

登入後複製

這個例子顯示如何在一個HTML檔案裡用iframe嵌入一個網頁。

以上是介紹HTML框架(Frames)到底有什麼用？的詳細內容。更多資訊請關注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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最佳圖形設置

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信條陰影：貝殼謎語解決方案

2 週前 By DDD

R.E.P.O.如果您聽不到任何人，如何修復音頻

3 週前 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25：如何解鎖Myrise中的所有內容

4 週前 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)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

7470

15

CakePHP 教程

1377

52

steam的賬戶名稱是什麼格式

77

11

win11激活密鑰永久

48

19

NYT連接提示和答案

19

29

顯示更多

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:43 PM

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

HTML 輸入佔位符

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

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

在 HTML 中移動文字

在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕

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

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

See all articles