<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="https://www.cnblogs.com/webaction/p/嵌套目標檔案" frameborder="0"></iframe>；而這個frame是frameset實作區域重繪的基石，沒有frame，frameset就無法實作區域重繪,同時要注意的是frameset與body不能同時出現!
參考：https://www.w3cschool.cn/html/html-iframes.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/53589.html
標籤：Html/Css