iframe/frameset/frame的區別


一、iframe用法

二、frame用法

三、frameset用法

四、區別對比


 

iframe

一、iframe屬性的用法

<iframe>標簽規定一個內聯框架。內聯框架可以在當前的HTML文檔中插入框架,框架內可以鏈接另一個頁面

它是 一個圍堵標記,但圍着的字句只有在瀏覽器不支援 iframe 標記時才會顯示。

<html>
<head></head>
<body>
<iframe src="xxx.html"></iframe>
</body>
</html>

注意:所有的瀏覽器都支持iframe屬性,可以把需要的文本放置在 <iframe> 和 </iframe> 之間,這樣就可以應對無法理解 <iframe> 的瀏覽器。

要使用css來為<iframe>定義樣式

二、iframe屬性的取值

  • frameborder     規定是否顯示框架周圍的邊框,取值為1或0。(取值為1有邊框,取值為0沒有邊框)也可以是yes或no。
  • height / width   規定框架的高度和寬度(取值px或%)
  • src   規定在框架中所顯示的文檔的URL
  • scrolling    規定是否在框架中顯示滾動條(取值yes顯示,no不顯示,auto自動判斷)
  • align  規定框架的對齊方式(取值left、right、top、middle、bottom)
  • name  規定內聯框架的名稱
  • marginheight   框架頂部和底部的外邊距(取值pixel像素)
  • marginwidth    框架左側和右側的外邊距(取值pixel像素)

iframe的書寫格式

 

<iframe src="iframe.html" height="100px" width="300px" marginheight=1px marginwidth=1px name="ibox" align="middle" frameborder=1> 里面的內容只有在瀏覽器不支持iframe標記時才會顯示出來 </iframe>

iframe支持HTML全局屬性,也支持事件屬性

 


 

frameset

一、frameset的用法(框架模板)

frameset可以定義一個框架集。被用來組織多個框架,每一個框架都有着獨立的文檔。在frameset的簡單應用中,frameset使用cols或rows屬性來規定在框架中存在多少行多少列。

<html>
<head></head>
<frameset>
<frame src="">
<frame src="">
</frameset>
</html>

!注意:

  利用frameset和frame可以把網頁制作成所需要的不同大小的框架,可以用來布局。

  frameset 元素可定義一個框架集。它被用來組織多個窗口(框架)。每個框架存有獨立的文檔。frameset 元素使用cols或rows屬性規定在框架集中存在多少列或多少行。

  不能與 <frameset></frameset> 標簽一起使用 <body></body> 標簽。當需要為不支持框架的瀏覽器添加一個 <noframes> 標簽時,則必須在<noframes>中嵌套<body>標簽,那樣noframes標簽中的內容才會被顯示出來。

 

二、frameset屬性的屬性值

  cols   定義框架集中的列的數目和尺寸(取值px、% 和 *)

  rows  定義框架集中的行的數目和尺寸(取值px、% 和 *)

注意:

這兩個屬性都接受用引號括起來並用逗號分開的值列表,這些數值指定了框架的絕對(像素點)或相對(百分比或其余空間)寬度(對列而言),或者絕對或相對高度(對行而言)。這些屬性值的數目決定了瀏覽器將會在文檔窗口中顯示多少行或列的框架。

實例:

1、構建三行框架(因為rows有三個值),三行的高度分別為150px,300px,150px(三行高度為1:2:1)

<frameset rows="150,300,150">

除非瀏覽器窗口正好為600px,否則瀏覽器就會自動按照(三行高度比例1:2:1)延伸或壓縮第一個和最后一個框架,上下兩個框架占據1/4的窗口空間;

中間的框架會占據剩下1/2的空間。

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

如果設置的百分比加起來不是100%(如20%,40%,20%),瀏覽器也會按照之間的比例進行重新給出尺寸以消除差異。

2、在<frameset>標簽的cols和rows值中加入星號 * 的用法。*指示瀏覽器要在相鄰的框架放入框架集之后,剩下的空間分配給各自的行或列。

會生成有固定寬度100px的框架列,和另一個框架列,這個框架列會占據框架集中剩下的所有空間。

<frameset cols="100,*,*">

3、對多個列或行屬性值使用星號。在這樣的情況下,相應的行或列將對可用空間進行等分。

<frameset cols="*,100,*">

生成三列,中間一列固定寬度100px,左右兩側分別生成尺寸相同的兩列。等分剩下的空間。

4.如果在星號前放置一個整數值,相應的行或列就會相對地獲得更多的可用空間

<frameset rows="100,3*,*,*">

生成四行框架,第一行框架集的10%。瀏覽器把框架集剩下的空間3/5分配給第二個框架,剩下兩行各分1/5.

補充noframes標簽

當瀏覽器完全顯示不出這個框架時,頁面就會顯示出<noframes></noframes>內的內容。<noframes> 元素位於 <frameset> 元素內部。

<frameset>如果瀏覽器有能力處理框架,就不會顯示出 frameset 元素中的文本。</frameset>

如果希望在<frameset>標簽中使用<noframes>標簽,就必須要把<noframes>的內容包含在<body></body>中;

<frameset cols = "25%, 25%,*">
  <noframes>
  <body>Your browser does not handle frames!</body>
  </noframes>
  <frame src ="venus.htm" />
  <frame src   ="sun.htm" />
  <frame src ="mercur.htm"   />
</frameset>

 


 

frame

一、frame的作用

<frame>定義frameset中的一個特定的窗口。只設定某一個框架窗口的特定屬性。

注意:<frame>標簽一定要和<frameset>標簽一起合用。frame是自閉合標簽沒有結束標簽

<html>
<frameset cols="25%,50%,25%">
  <frame src="  " />
  <frame src="  " />
  <frame src="  " />
</frameset>
</html>

二、frame標簽的屬性

  • frameborder     規定是否顯示框架周圍的邊框,取值為1或0。(取值為1有邊框,取值為0沒有邊框)也可以是yes或no。
  • noresize   規定用戶無法調整框架的大小(noresize="noresize")
  • src   規定在框架中所顯示的文檔的URL
  • scrolling    規定是否在框架中顯示滾動條(取值yes顯示,no不顯示,auto自動判斷)
  • name  規定內聯框架的名稱
  • marginheight   框架頂部和底部的外邊距(取值pixel像素)
  • marginwidth    框架左側和右側的外邊距(取值pixel像素)

三、實例

1、不能調整框架的大小

設置了noresize屬性的框架不可以調整大小,當把鼠標移動到框架的表上時會發現邊框不可以移動。

<html>
<frameset>
<frame src="nav.html" noresize="noresize"/>
<frame src="main.html"/>
<frame src="content.html"/>
</frameset>
</html>

 


 

總結區別

經過上面的分析,總結iframe、frame、frameset三者之間的區別和聯系。

1、frame不能脫離frameset單獨使用,而iframe可以單獨使用

2、frameset不能放在body標簽中,frame嵌套在frameset中如果放在body中不能正常顯示。(frameset和frame只規定了框架如何划分,不會顯示任何內容,所以不需要放在body中)

3、iframe嵌套在frameset標簽中,則必須放在body標簽中,否則無法顯示。(iframe用來顯示引用的其他頁面的內容,需要被顯示,放在body)

4、frame不能調整框架的寬高,只能通過frameset間接設置;iframe可以通過width和height屬性來調整寬高,不能通過frameset控制

5、frameset不能被瀏覽器解讀的時候,如果里面設置了noframes就會顯示出來noframes標簽內的內容。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML iframe 和 frameset 的區別 html中的框架frameset和frame及iframe 【HTML】 frame和iframe的區別 關於框架iframe frame frameset的關系結合a標簽的target的應用 frame與iframe的區別及基本用法 詳解iframe與frame的區別