框架(frame)能夠?qū)g覽器窗口劃分為多個獨立的窗格,每個窗格包含一個獨立的HTML頁面
一、框架基本概念
用戶可以通過框架加載或重新加載單個窗格內(nèi)容,而不需要重新加載瀏覽器窗口的所有內(nèi)容。相對框架而言,整個瀏覽器窗口對應(yīng)的框架集合稱為框架集(frameset)。
在HTML中,使用框架集標(biāo)簽<frameset>來劃分頁面的框架,使用屬性rows(或cols)說明框架的行數(shù)(或列數(shù))以及所占窗口的比例。
窗口框架的作用:
是將網(wǎng)頁分割為多個HTML頁面,即將窗口畫面分割成多個小窗口,且每個小窗口中,可以顯示不同的網(wǎng)頁,而在瀏覽器中則構(gòu)成一個完整的頁面,達(dá)到在瀏覽器中同時瀏覽不同網(wǎng)頁的效果。
框架網(wǎng)頁最大特點:
是在不改變整頁布局的情況下,可以使其中的HTML頁面之間互相鏈接, 達(dá)到不翻頁即可獲取所需內(nèi)容的目的 ,這一特點很大程度上使得其在顯示電子文檔方面具有得天獨厚的優(yōu)勢。
二、框架集標(biāo)記
基本語法:
<frameset>
<frame>
<frame>
……
</frameset>
語法解釋:框架集是在一個文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML頁面,在這個頁面中沒有<BODY>標(biāo)記??蚣芗x了在一個窗口中顯示的框架數(shù)、尺寸和載入頁面。
注意1:由<Frameset>標(biāo)記所定義的窗口框架組件 ,相當(dāng)于<BODY>標(biāo)記所定義的文件主題組件,因此<Frameset>標(biāo)記不可包含在<BODY>標(biāo)記中,否則<Frameset>標(biāo)記將無法正常使用。
注意2:<Frame>標(biāo)記用于定義子窗口,因為并沒有結(jié)束標(biāo)記,所以該標(biāo)記的使用方式,僅在于設(shè)置標(biāo)記中的各種屬性,用以控制所代表的窗口框架。
(1)左右分割窗口屬性Cols
基本語法:
<frameset cols=“value,value,……”>
<frame>
<frame>
……
</frameset>
語法解釋:Value定義各個框架的寬度值,單位可以是象素,也可以是百分比。
<html> <head> <title>dotcpp</title> </head> <frameset cols="30%,70%"> <frame> <frame> </frameset> </html>
效果如圖:
(2)上下分割窗口屬性Rows
基本語法:
<frameset rows=“value,value,……”>
<frame>
<frame>
……
</frameset>
語法解釋: Value定義各個框架的寬度值,單位可以是象素,也可以是百分比。
<html> <head> <title>dotcpp</title> </head> <frameset rows="20%,*,20%"> <frame> <frame> <frame> </frameset> </html>
效果如圖:
(3)嵌套分割窗口
基本語法:
<frameset cols=“value,value,……”>
<frame>
<frameset rows=“value,value,……”>
<frame>
<frame>
……
</frameset>
<frame>
……
</frameset>
語法解釋: 可以嵌套分割。
<html> <head> <title>嵌套分割窗口</title> </head> <frameset cols="*,*"> <frameset rows="*,*"> <frame><frame> </frameset> <frameset rows="*,*"> <frame><frame> </frameset> </frameset> </html>
效果如下:
(4)框架集邊框?qū)挾葘傩訤rameSpacing
基本語法:
<frameset FrameSpacing=“VALUE” >
語法解釋:設(shè)置框架集的邊框?qū)挾?,單位為像素?/p>
(5)框架集邊框顏色屬性Bordercolor
基本語法:
<frameset BorderColor=“COLOR_VALUE” >
語法解釋:設(shè)置框架集的邊框顏色。
三、框架標(biāo)記<Frame>:
(1)框架頁面源文件屬性SRC
基本語法:
<frame src=“FILE_NAME” >
語法解釋:每一個框架都有一個顯示的網(wǎng)頁頁面,SRC屬性設(shè)置該框架頁面的文件路徑。
(2)框架名稱屬性Name
基本語法:
<frame src=“FILE_NAME” name=“Frame_name”>
語法解釋:可以為每一個鏈接命名,該名稱用于頁面的鏈接和腳本描述,不影響頁面的顯示。
命名規(guī)則:單個單詞,可以有下劃線“_”,必須以字母開始,且區(qū)分大小寫。
(3)框架邊框顯示屬性FrameBorder
基本語法:
<frame src=“FILE_NAME” frameborder=“VALUE” >
語法解釋:VALUE取值為0則不顯示邊框,為1則顯示邊框。
注意1: Frameborder屬性可用于控制窗口框架四周,是否顯示框架。
注意2:該屬性可使用在<Frameset>標(biāo)記與 <Frame>標(biāo)記中,使用在<Frameset>標(biāo)記內(nèi)時,可控制窗口框架的所有子窗口。使用在<Frame>標(biāo)記時 ,則僅能控制該標(biāo)記所代表的子窗口。
注意3:0代表不顯示框線,1代表顯示框線,其默認(rèn)值為1。
(4)框架滾動條顯示屬性Scrolling
基本語法:
<frame src=“FILE_NAME” scrolling=“VALUE” >
語法解釋:VALUE取值為YES則顯示滾動條,為NO則不顯示滾動條,為AUTO則根據(jù)頁面長度自動判斷是否顯示滾動條。
(5)框架尺寸調(diào)整屬性NoResize
基本語法:
<frame src=“FILE_NAME” NoResize>
語法解釋:NORESIZE禁止改變框架的尺寸大小。
(6)框架邊緣寬度屬性MarginWidth
基本語法:
<frame src=“FILE_NAME”
MarginWidth=”value”>
語法解釋:MarginWidth設(shè)定框架的左右邊距。
(7)框架邊緣高度屬性MarginHeight
基本語法:
<frame src=“FILE_NAME”
MarginHeight=”value”>
語法解釋:MarginHeight設(shè)定框架的上邊距、下邊距。
四、不支持框架標(biāo)記
用于不支持框架技術(shù)的瀏覽器。
基本語法:
<frameset cols=“value,value,……”>
<frame>
<frame>
……
<Noframes>
……
</Noframes>
</frameset>
五、浮動框架
浮動框架是一種特殊的框架頁面,是在瀏覽器窗口中嵌套子窗口,再在其中顯示頁面內(nèi)容。
基本語法:<IFRAME>……</IFRAME>
屬性 | 描述 |
SRC | 顯示頁面原文件路徑 |
Width | 寬度 |
Height | 高度 |
Name | 名稱 |
Align | 排列方式 |
FrameBorder | 邊框顯示屬性 |
FrameSpacing | 邊框?qū)挾葘傩?/p> |
Scrolling | 框架滾動條屬性 |
Noresiz | 框架尺寸調(diào)整屬性 |
BorderColor | 邊框顏色屬性 |
MarginWidt | 框架邊緣寬度屬性 |
MarginHeight | 框架邊緣高度屬性 |
六、框架與鏈接
使用框架的一個重要目的就是在不同的框架中顯示不同的頁面。
主要通過鏈接的“Target”屬性來設(shè)定鏈接的頁面在哪個框架和窗口中顯示。
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競賽優(yōu)秀選手錄制的視頻教程,并配有習(xí)題和答疑,點擊了解:
一點編程也不會寫的:零基礎(chǔ)C語言學(xué)練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進(jìn)階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼?手把手帶你寫100個編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程:算法競賽課入門課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程