html框架iframe與frameset的介紹


<iframe>標簽規定一個內聯框架,一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔,通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。

1 <iframe src="URL"></iframe><!--iframe語法-->

 該URL指向不同的網頁,將窗口內容顯示為URL地址指向頁面。

Iframe - 設置高度與寬度:height和width屬性用來定義iframe標簽的高度與寬度;屬性默認以像素為單位, 但是你可以指定其按比例顯示 (如:"80%").需要注意的是 一些舊的瀏覽器不支持 iframe,如果瀏覽器不支持 iframes 則不會顯示。

1 <iframe src=https://www.cnblogs.com/dhnblog/p/12301706.html" width="320" height="240"></iframe>

Iframe - 移除邊框:frameborder屬性用於定義iframe表示是否顯示邊框,設置屬性值為 "0" 移除iframe的邊框

1 <iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe來顯示目錄鏈接頁面,iframe可以顯示一個目標鏈接的頁面,目標鏈接的屬性必須使用iframe的屬性額e.g:點擊鏈接顯示是在iframe里面

1 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
2 <p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>
 1 <!DOCTYPE html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8"> 
 5 <title>W3Cschool在線教程(w3cschool.cn)</title> 
 6 </head> 
 7 <body>
 8 <iframe src="/statics/demosource/demo_iframe.htm" name="iframe_a"></iframe>
 9 <p><a href="https://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>
10 <p><b>注意:</b> 因為 a 標簽的 target 屬性是名為 iframe_a 的 iframe 框架,所以在點擊鏈接時頁面會顯示在 iframe框架中。</p>
11 </body>
12 </html>

HTML iframe 標簽/<iframe>定義一個內聯的iframe/iframe 標准屬性

  • class規定元素的類名(classname)
  • id規定元素的唯一 id
  • style規定元素的行內樣式(inline style)
  • title規定元素的額外信息(可在工具提示中顯示)

HTML <frameset>標簽 - HTML5 不支持/<frameset>標簽在一個頁面中設置一個或多個框架,用<frameset></frameset>代替了<body></body>,不能出現在body標簽里。

1 <frameset>語法:frameset- 建立框架的標記,將在其中定義各個框架。/frame src- 指示框架顯示內容URL地址。
 1 <html>
 2  <head></head>
 3 
 4  <frameset>
 5    <frame src="menu.html">
 6    <frame src="content.html">
 7  </frameset>
 8 </html>
 9 
10 <frameset> - 設置行列比例
11 <frameset>標簽中我們使用rows設置行的占頁面的百分比;cols設置列的所占百分比。
12 <html>
13   <head></head>
14     
15   <frameset rows="20%,*">
16       <frame src="title.html">
17       <frameset cols="30%,*">
18           <frame src="menu.html">
19           <frame src="content.html">
20       </frameset>
21   </frameset>
22 </html>

frameset cols- 確定每個框架列所占百分比。在前面的示例中,我們已經確定第一框架將占據所示區域的30%,並且我們使用“*”符號來指示剩余百分比。
frameset rows- 確定將顯示的每個框架行所占百分比。在前面的示例中,我們選擇第一框架為20%,剩下的剩余空間將在menu.html和content.html之間划分。


<frameset> - 設置邊框/框架有一些邊框線,大多數時候都不需要。<frameset>標簽中我們使用frameborder和framespacing屬性可以擦除它們。/注意:frameset和frameborder是相同的屬性。

 1 <html>
 2   <head></head>
 3 
 4   <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
 5       <frame src="title.html">
 6       <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
 7           <frame src="menu.html">
 8           <frame src="content.html">
 9       </frameset>
10   </frameset>
11 </html>

frameborder-設置邊框, 0值表示沒有邊框/border- 修改邊框的粗細(由Netscape瀏覽器使用)/framespacing- 修改邊框的粗細(由Internet Explorer瀏覽器使用)


<frameset> - 設置名字/<frameset>標簽中我們使用name屬性命名每個框架,而不是內容頁面。

 1 <html>
 2   <head></head>
 3 
 4   <frameset rows="20%,*">
 5       <frame name="title" src="title.html">
 6       <frameset cols="30%,*">
 7       <frame name="menu" src="menu.html">
 8       <name="content" src="content.html">    
 9       </frameset>
10   </frameset>
11 </html>

<frameset> - 設置滾動/<frameset>標簽中我們使用noresize設置禁止用戶拖拉框架大小;scrolling用於設置滾動條是否顯示。noresize- 不允許用戶更改其尺寸/scrolling- 設置滾動條是否顯示

 1 <html>
 2   <head></head>
 3     
 4   <frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
 5       <frame src="title.html" noresize scrolling="no">
 6       <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
 7           <frame src="menu.html" scrolling="auto" noresize>
 8           <frame src="content.html" scrolling="yes" noresize>
 9       </frameset>
10   </frameset>
11 </html>

拓展:網頁DIV+CSS布局與ifame傳統布局對比

概括:關於iframe與frame的區別在我看來:iframe翻譯過來是嵌套,其實就是把別的頁面嵌套到自己的頁面進來<iframe src="嵌套目標文件" frameborder="0"></iframe>;而這個frame是frameset實現局部刷新的基石,沒有frame,frameset就無法實現局部刷新,同時要注意的是frameset與body不能同時出現!

參考:https://www.w3cschool.cn/html/html-iframes.html


免責聲明!

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



猜您在找 HTML框架集之Frameset與Iframe簡單應用 html中的框架frameset和frame及iframe HTML框架(frameset框架集和iframe內嵌框架) HTML標簽天天練6--