社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 html教學 frameset標籤、frame標籤、iframe標籤的使用分析

frameset標籤、frame標籤、iframe標籤的使用分析

巴扎黑
巴扎黑
Jun 27, 2017 am 09:59 AM
frame iframe 標籤


frame，是網頁開發必須掌握的知識。例如後台架構、局部刷新，頁面分割，都是frame的用途表現，尤其是後台頁面製作，使用frame會給用戶帶來非常舒適的使用感受。

frame知識點包括（frameset標籤、frame標籤、iframe標籤）。

 

#一、frameset

1. 屬性

①border

#設定框架的邊框粗細。

②bordercolor

#設定框架的邊框顏色。

③frameborder

#設定是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框。

④cols

#縱向分割頁面。其數值表示方法有三種：「30%、30（或30px）、*」；數值的個數代表分成的視窗數目且數值之間以「,」隔開。 「30%」表示該框架區域佔全部瀏覽器頁面區域的30%；「30」表示該區域橫向寬度為30像素；「*」表示該區域佔用餘下頁面空間。例如：cols="25%,200,*" 表示將頁面分為三個部分，左面部分佔頁面30%，中間橫向寬度為200像素，頁面餘下的作為右面部分。

⑤rows

#橫向分割頁。數值表示方法與意義與cols相同。


⑥framespacing

設定框架與框架間的保留的空白距離。

2. 案例

#

注意1：

#cols與rows兩個屬性盡量不要同在一個標籤中使用。若要實作下圖架構，程式碼正確寫法為：


< frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0">

  < frame src="???" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>

#  < ;frameset cols="213,*" frameborder="no" border="0" framespacing="0">

##    

#    

#【即，若想即使用cols又使用rows，可利用frameset嵌套實作】

#注意2：

意思是：第一個框架佔整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個框架。


意思是：瀏覽器視窗等分成四個部分。

 

#二、frame

1. 屬性


①name

設定框架名稱。此為必須設定的屬性。

②src

#設定此框架要顯示的網頁名稱或路徑。此為必須設定的屬性。


③scrolling

設定是否要顯示捲軸。設定值為auto, yes, no。

④bordercolor


設定框架的邊框顏色。

⑤frameborder


設定是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框。

⑥noresize


設定框架大小是否能手動調節。

⑦marginwidth

#設定框架邊界和其中內容之間的寬度。

⑧marginhight

#設定框架邊界和其中內容之間的高度。

⑨width

#設定框架寬度。

⑩height

#設定框架高度。

2. 使用案例

# 

#三、iframe

##是浮動的框架（frame），其常用屬性與frame類似，其他的主要有以下（相同的就不列舉了） ##1. 屬性

##################①align#################設定垂直或水平對齊方式##################②allowTransparency##################設定或取得###物件## #是否可為透明。 ########################2. 案例###############

注意：

#iframe標籤與frameset、frame標籤的驗證方法不同，是XHTML 1.0 Transitional。且iframe是放在body標籤之內，而frameset、frame是放在body標籤之外。

 

#四、綜合範例

#

綜合範例

##

##

<span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p>##<body> <p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p><p>對不起，您的瀏覽器不支援「框架」！ </p><p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p></body><p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p></noframes&gt ;<p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p></frameset><p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p></html><p style="text-indent:2em"> <span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p>【說明】<p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></span></span></p>#<noframes>標誌對也放在標誌對之間，用來在那些不支援框架的瀏覽器中顯示文字或圖像資訊。在此標誌對之間先緊接標誌對，然後才可以使用我們熟悉的任何標誌。

 

# 

## 

#####最後要說明一點：################

如果將程式碼按照我以上所寫寫到VS中報錯的話，例如：


#或


##解決方法如下：

工具→選項→文字編輯器→HTML→驗證→Internet Explorer 6.0

 

##########好了，透過以上內容，大家再多加練習，就會慢慢熟悉frame的相關知識了，用好了的話你會發現真的挺好。至於frame系列標籤的###事件###方法，一般用的不是非常多，需要的話，大家自己再查吧。 【呵呵，其實本人還沒用過】#########

以上是frameset標籤、frame標籤、iframe標籤的使用分析的詳細內容。更多資訊請關注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

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

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
4 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前 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)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7862
15
Java教學
1649
14
CakePHP 教程
1404
52
Laravel 教程
1300
25
PHP教程
1242
29
顯示更多
Related knowledge
我該如何裁剪HTML中的IFrame？ 我該如何裁剪HTML中的IFrame？ Aug 29, 2023 pm 04:33 PM

內嵌框架在HTML中稱為iframe。標籤指定內容中的一個矩形區域，瀏覽器可以在其中顯示帶有捲軸和邊框的不同文件。若要在目前HTML文檔中嵌入另一個文檔，請使用內嵌框架。可以使用HTMLiframe名稱屬性指定元素的參考。在JavaScript中，對元素的參考也是使用name屬性進行的。 iframe本質上用於在目前顯示的網頁中顯示網頁。包含iframe的文件的URL使用「src」屬性指定。語法以下是HTML的語法<iframesrc="URL"title="d

iframe為什麼加載慢 iframe為什麼加載慢 Aug 24, 2023 pm 05:51 PM

iframe載入慢的原因主要包括網路延遲、資源載入時間長、載入順序、快取機制以及安全性策略等。詳細介紹：1、網路延遲，當瀏覽器載入一個包含iframe的網頁時，需要發送請求到伺服器取得iframe中的內容，若網路延遲較高，那麼取得內容的時間就會增加，從而導致iframe載入慢；2.資源載入時間長，資源的大小較大或伺服器回應時間較長時，載入速度會更明顯變慢；3、載入順序等等。

iframe中的data-id是什麼意思 iframe中的data-id是什麼意思 Aug 28, 2023 pm 02:25 PM

iframe中的data-id是指在HTML標籤中使用的自訂屬性，用於儲存特定元素的識別碼。透過使用data-id屬性，可以為iframe元素新增一個唯一的標識符，以便在JavaScript中對其進行操作和存取。 data-id屬性的命名可以根據特定的需求進行自定義，但通常會遵循一些命名規範，以確保其唯一性和易讀性。 data-id屬性也可以用來識別和操作特定的iframe。

iframe有哪些載入事件 iframe有哪些載入事件 Aug 28, 2023 pm 01:55 PM

iframe的載入事件有onload事件、onreadystatechange事件、onbeforeunload事件、onerror事件、onabort事件等。詳細說明：1、onload事件，指定載入iframe完成後要執行的JavaScript程式碼；2、onreadystatechange事件，指定當iframe狀態變更時要執行的JavaScript程式碼等等。

如何在Chrome和Edge的所有選項卡中搜尋文本 如何在Chrome和Edge的所有選項卡中搜尋文本 Feb 19, 2024 am 11:30 AM

本教學向您展示如何在Windows的Chrome或Edge中找到所有開啟的標籤頁上的特定文字或短語。有沒有辦法在Chrome中所有開啟的標籤頁上進行文字搜尋？是的，您可以使用Chrome中的免費外部Web擴充功能在所有開啟的標籤上執行文字搜索，而無需手動切換標籤。一些擴充功能如TabSearch和Ctrl-FPlus可以幫助您輕鬆實現這項功能。如何在GoogleChrome的所有選項卡中搜尋文字？ Ctrl-FPlus是一個免費的擴展，它方便用戶在瀏覽器視窗的所有標籤中搜尋特定的單字、短語或文字。這個擴

iframe中的危險在哪裡 iframe中的危險在哪裡 Sep 08, 2023 pm 03:14 PM

iframe中的危險主要有：1、安全漏洞，惡意的網頁可以透過iframe載入其他網頁，並進行一些攻擊行為；2、同源策略突破，透過在iframe中載入其他網域下的網頁，能突破同源策略，實現跨域通信，這可能會被惡意攻擊；3、程式碼執行問題，在iframe中載入的網頁可以執行JS程式碼，這可能導致一些安全性問題；4、SEO問題，搜尋引擎可能無法正確解析和索引透過iframe載入的內容等等。

Python中iframe是什麼意思 Python中iframe是什麼意思 Aug 25, 2023 pm 03:24 PM

Python中iframe是一種HTML標籤，用於在網頁中嵌入另一個網頁或文件。在Python中，可以使用各種函式庫和框架來處理和操作iframe，其中最常用的是BeautifulSoup函式庫，可以輕鬆地從一個網頁中提取iframe的內容，並對其進行操作和處理。掌握如何處理和操作iframe對於Web開發和資料抓取都是非常有用的。

監控iframe的滾動行為 監控iframe的滾動行為 Feb 18, 2024 pm 08:40 PM

如何監聽一個iframe的滾動，需要具體程式碼範例當我們在網頁中使用iframe標籤嵌入其他網頁時，有時需要對iframe中的內容進行一些特定的操作。其中一個常見的需求是監聽iframe的捲動事件，以便在捲動發生時執行對應的程式碼。以下將介紹如何使用JavaScript來監聽一個iframe的捲動，並提供具體的程式碼範例供參考。在取得iframe元素首先，我們需要

See all articles