frame,iframe,frameset 的区别
frame,iframe,frameset 的區(qū)別
?
<FRAMESET> <FRAME>
<NOFRAMES>
<IFRAME>
欲明白本篇【HTML剖析】之標(biāo)記分類(lèi)請(qǐng)看 【標(biāo)記一覽】。
亦請(qǐng)先明白圍堵標(biāo)記與空標(biāo)記的分別請(qǐng)看 【HTML概念】。
■ 框架概念 ：
所謂框架便是網(wǎng)頁(yè)畫(huà)面分成幾個(gè)框窗，同時(shí)取得多個(gè) URL。只需要 <FRAMESET> <FRAME> 即可，而所有框架標(biāo)記需要放在一個(gè)總起的 html 檔，這個(gè)檔案只記錄了該框架 如何劃分，不會(huì)顯示任何資料，所以不必放入 <BODY> 標(biāo)記，瀏覽這框架必須讀取這檔 案而不是其它框窗的檔案。<FRAMESET> 是用以劃分框窗，每一框窗由一個(gè) <FRAME> 標(biāo) 記所標(biāo)示，<FRAME>必須在 <FRAMESET> 范圍中使用。如下例：
<frameset cols="50%,*">
<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">
</frameset>
此例中 <FRAMESET> 把畫(huà)面分成左右兩相等部分，左便是顯示 up2u.html，右邊則會(huì)顯示 me2.html 這檔案，<FRAME> 標(biāo)記所標(biāo)示的框窗永遠(yuǎn)是按由上而下、由左至右的次序。
本節(jié)與 Composer 教室的【運(yùn)用框架】大部分相同，只是本節(jié)增加了內(nèi)容及較為詳細(xì)，正 如其它篇章一樣并不會(huì)提及網(wǎng)頁(yè)制作工具，若閣下學(xué)會(huì)了 HTML 相信你亦不會(huì)選用 Composer ， FrontPage 一類(lèi)的工具了。
■ <FRAMESET> <FRAME> ： (frameset和BODY，在BODY標(biāo)簽中的FRAMESET是無(wú)法顯示框架的)
<FRAMESET> 稱(chēng)框架標(biāo)記，用以宣告HTML文件為框架模式，并設(shè)定視窗如何分割。
<FRAME> 則只是設(shè)定某一個(gè)框窗內(nèi)的參數(shù)屬性。
<FRAMESET> 參數(shù)設(shè)定：
例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">
COLS="90,*"
垂直切割畫(huà)面(如分左右兩個(gè)畫(huà)面)，接受整數(shù)值、百分?jǐn)?shù)， * 則代表占用馀下空 間。數(shù)值的個(gè)數(shù)代表分成的視窗數(shù)目且以逗號(hào)分隔。例如COLS="30,*,50%" 可以 切成叁個(gè)視窗，第一個(gè)視窗是 30 pixels 的寬度，為一絕對(duì)分割，第二個(gè)視窗是當(dāng) 分配完第一及第叁個(gè)視窗后剩下的空間，第叁個(gè)視窗則占整個(gè)畫(huà)面的 50% 寬度 為 一相對(duì)分割。您可自己調(diào)整數(shù)字。
ROWS="120,*"
就是橫向切割，將畫(huà)面上下分開(kāi)，數(shù)值設(shè)定同上。唯 COLS 與 ROWS 兩參數(shù)盡量 不要同在一個(gè) <FRAMESET> 標(biāo)記中，因 Netacape 偶然不能顯示這類(lèi)形的框架，盡 采用多重分割。
frameborder="0"
設(shè)定框架的邊框，其值只有 0 和 1 ， 0 表示不要邊框， 1 表示要顯示邊框。（避 免使用 yes 或 no ）
border="0"
設(shè)定框架的邊框厚度，以 pixels 為單位。
bordercolor="#008000"
設(shè)定框架的邊框顏色。顏色值請(qǐng)參考【調(diào)色原理】。
framespacing="5"
表示框架與框架間的保留空白的距離。
<FRAME> 參數(shù)設(shè)定：
例子：<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">
SRC="a.html"
設(shè)定此框窗中要顯示的網(wǎng)頁(yè)檔案名稱(chēng)，每個(gè)框窗一定要對(duì)應(yīng)著一個(gè)網(wǎng)頁(yè)檔案。你可 使用絕對(duì)路徑或相對(duì)路徑，有關(guān)此兩者詳見(jiàn)於【連結(jié)進(jìn)階】 。
NAME="top"
設(shè)定這個(gè)框窗的名稱(chēng)，這樣才能指定框架來(lái)作連結(jié)，必須但任意命名。
frameborder=0
設(shè)定框架的邊框，其值只有 0 和 1 ， 0 表示不要邊框， 1 表示要顯示邊框。（避 免使用 yes 或 no ）
framespacing="6"
表示框架與框架間的保留空白的距離。
bordercolor="#008000"
設(shè)定框架的邊框顏色。顏色值請(qǐng)參考【HTML 剖析】。
scrolling="Auto"
設(shè)定是否要顯示卷軸(滾動(dòng)條)，YES 表示要顯示卷軸，NO 表示無(wú)論如何都不要顯示， AUTO是視情況顯示。
noresize
設(shè)定不讓使用者可以改變這個(gè)框框的大小，亦沒(méi)有設(shè)定此參數(shù)，使用者可以很隨 意地拉動(dòng)框架，改變其大小。
marginhight=5
表示框架高度部份邊緣所保留的空間。
marginwidth=5
表示框架寬度部份邊緣所保留的空間。
以下是一些例子：（與 Composer 教室的【運(yùn)用框架】相同）
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
例子 HTML Code
<frameset rows="80,*,80">
<frame name="top" src="a.html">
<frame name="middle" src="b.html">
<frame name="bottom" src="c.html">
</frameset>
例子 HTML Code
<frameset cols="150,*">
<frameset rows="80,*">
<frame name="upper_left" src="a.html">
<frame name="lower_left" src="b.html">
</frameset>
<frame name="right" src="c.html">
</frameset>
例子 HTML Code
<frameset rows="80,*">
<frame name="top" src="a.html">
<frameset cols="150,*">
<frame name="lower_left" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
例子 HTML Code
<frameset cols="150,*">
<frame name="left" src="a.html">
<frameset rows="80,*">
<frame name="upper_right" src="b.html">
<frame name="lower_right" src="c.html">
</frameset>
</frameset>
Frameset和BODY沖突的例子
<body>
<div height="100%">
<frameset rows="80,*">
<noframes>
<body>
很抱歉，閣下使用的瀏覽器不支援框架功能，請(qǐng)轉(zhuǎn)用新的瀏覽器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
</div>
</body>
■ <NOFRAMES> ：
當(dāng)別人使用的瀏覽器太舊，不支援框架這個(gè)功能時(shí)，他看到的將會(huì)是一片空白。為了避免 這種情況，可使用 <NOFRAMES> 這個(gè)標(biāo)記，當(dāng)使用者的瀏覽器看不到框架時(shí)，他就會(huì)看到 <NOFRAMES> 與 </NOFRAMES> 之間的內(nèi)容，而不是一片空白。這些內(nèi)容可以是提醒 瀏覽轉(zhuǎn)用新的瀏覽器的字句，甚至是一個(gè)沒(méi)有框架的網(wǎng)頁(yè)或能自動(dòng)切換至沒(méi)有框架的版本 亦可。
應(yīng)用方法：
在<frameset> 標(biāo)記范圍加入 </NOFRAMES> 標(biāo)記，以下是一個(gè)例子：
<frameset rows="80,*">
<noframes>
<body>
很抱歉，閣下使用的瀏覽器不支援框架功能，請(qǐng)轉(zhuǎn)用新的瀏覽器。
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
若瀏覽器支援框架，那麼它不會(huì)理會(huì) <noframes> 中的東西，但若瀏覽器不支援框架，由 於不認(rèn)識(shí)所有框架標(biāo)記，不明的標(biāo)記會(huì)被略過(guò)，標(biāo)記包圍的東西便被解讀出來(lái)，所以放在 <noframes>范圍內(nèi)的文字會(huì)被顯示。
■ <IFRAME> ： （適用于BODY標(biāo)簽中的框架）
這標(biāo)記只適用於 IE(comet:也使用于FireFox)。 它的作用是在一頁(yè)網(wǎng)頁(yè)中間插入一個(gè)框窗以顯示另一個(gè)文件。它是 一個(gè)圍堵標(biāo)記，但圍著的字句只有在瀏覽器不支援 iframe 標(biāo)記時(shí)才會(huì)顯示，如<noframes> 一樣，可以放些提醒字句之類(lèi)。通常 iframe 配合一個(gè)辨認(rèn)瀏覽器的 JavaScript 會(huì)較好，若 JavaScript 認(rèn)出該瀏覽器并非 Internet Explorer 便會(huì)切換至另一版本。PS：一定要使用</iframe>關(guān)閉，否則后面的內(nèi)容顯示不出來(lái)。
<iframe> 的參數(shù)設(shè)定如下：
例子： <iframe src="iframe.html" name="test" align="center" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> </iframe>
src="iframe.html"
欲顯示於此框窗的文件來(lái)源除檔案名稱(chēng)，必要加上相對(duì)或絕對(duì)路徑。
name="test"
此框窗名稱(chēng)，這是連結(jié)標(biāo)記的 target 參數(shù)所需要的，
align="MIDDLE"
可選值為 left, right, top, middle, bottom，作用不大
width="300" height="100"
框窗的寬及長(zhǎng)，以 pixels 為單位。
marginwidth="1" marginheight="1"
該插入的文件與框邊所保留的空間。
frameborder="1"
使用 1 表示顯示邊框， 0 則不顯示。（可以是 yes 或 no）
scrolling="Yes"
------------------------------------------
?
frame和iframe的具體區(qū)別，總結(jié)如下：
1、frame不能脫離frameSet單獨(dú)使用，iframe可以；
2、frame不能放在body中；如下可以正常顯示：
<!--<body>-->
<frameset rows="50%,*">
?? <frame?? name="frame1"?? src="test1.htm"/>
?? <frame?? name="frame2"?? src="test2.htm"/>
</frameset>
<!--<body>-->
??? 如下不能正常顯示：
<body>
<frameset rows="50%,*">
?? <frame?? name="frame1"?? src="test1.htm"/>
?? <frame?? name="frame2"?? src="test2.htm"/>
</frameset>
<body>
3、嵌套在frameSet中的iframe必需放在body中；如下可以正常顯示：
<body>
??? <frameset>
????? <iframe?? name="frame1"?? src="test1.htm"/>
????? <iframe?? name="frame2"?? src="test2.htm"/>
??? </frameset>
</body>
如下不能正常顯示：
<!--<body>-->
??? <frameset>
????? <iframe?? name="frame1"?? src="test1.htm"/>
????? <iframe?? name="frame2"?? src="test2.htm"/>
??? </frameset>
<!--</body>-->
4、不嵌套在frameSet中的iframe可以隨意使用；
???? 如下均可以正常顯示：
<body>
?? <iframe?? name="frame1"?? src="test1.htm"/>
?? <iframe?? name="frame2"?? src="test2.htm"/>
</body>
<!--<body>-->
?? <iframe?? name="frame1"?? src="test1.htm"/>
?? <iframe?? name="frame2"?? src="test2.htm"/>
<!--</body>-->
5、frame的高度只能通過(guò)frameSet控制；iframe可以自己控制，不能通過(guò)frameSet控制，如：
<!--<body>-->
<frameset rows="50%,*">
?? <frame?? name="frame1"?? src="test1.htm"/>
?? <frame?? name="frame2"?? src="test2.htm"/>
</frameset>
<!--</body>-->
<body>
<frameset>
?? <iframe height="30%" name="frame1"?? src="test1.htm"/>
?? <iframe height="100" name="frame2"?? src="test2.htm"/>
</frameset>
</body>
6、如果在同一個(gè)頁(yè)面使用了兩個(gè)以上的iframe，在IE中可以正常顯示，在firefox中只能顯示出第一個(gè)；使用兩個(gè)以上的frame在IE和firefox中均可正常
以上代碼在IE7和firefox2.0中測(cè)試。
?
轉(zhuǎn)載于:https://www.cnblogs.com/jaryup/archive/2012/03/01/2375413.html
總結(jié)
以上是生活随笔為你收集整理的frame,iframe,frameset 的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： MySQL8.0.16主从同步
- 下一篇： 第1节 kafka消息队列：7、kafk