html框架iframe與frameset的介紹

来源:https://www.cnblogs.com/dhnblog/archive/2020/03/30/12597919.html
-Advertisement-
Play Games

<iframe>標簽規定一個內聯框架,一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔,通過使用框架,你可以在同一個瀏覽器視窗中顯示不止一個頁面。 1 <iframe src="URL"></iframe><!--iframe語法--> 該URL指向不同的網頁,將視窗內容顯示為URL地址指向 ...


<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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 什麼是HTML 顏色?它採用的是 RGB 顏色,是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的,RGB即是代表紅、綠、藍三個通道的顏色。HTML 顏色由一個十六進位符號來定義,這個符號由紅色、綠色和藍色的值組成(RGB);每種顏色的最小值是0(十六 ...
  • 非同步 1.知道哪部分代碼是非同步的; 2.必須要知道非同步程式之中的數據或者賦值的變數在哪裡可用; js:單線程語言 上面一行代碼不執行結束,下麵一行代碼不會執行; 單線程 多線程 js中存在很大需要長時間等待才會執行的代碼; 非同步 :在js中需要消耗大量時間等待某些程式執行的時候,會讓正常程式繼續執行 ...
  • 瞭解Ajax 就是js這個語言和服務端交互的手段 無刷新的頁面請求處理 區分表單提交 Ajax 即“Asynchronous Javascript And XML”(非同步 JavaScript 和 XML),是指一種創建互動式、快速動態網頁應用的網頁開發技術,無需重新載入整個網頁的情況下,能夠更新部 ...
  • IT行業作為當今發展前途最大的幾大行業之一,獲得了前所未有的廣泛關註,且隨著科技的發展,這一趨勢將更加明顯。 為了爭奪IT技術人才,很多公司都會提供更高的薪資來吸引高水準的開發人員。 對於IT行業新人來說,想要進入IT行業找到滿意的工作,首先應該選擇適合的職位。 那麼IT行業究竟有哪些職位呢?哪些崗 ...
  • 說明:轉載至自 邊城的理解 JavaScript 的 async/await async 和 await 在乾什麼 任意一個名稱都是有意義的,先從字面意思來理解。async 是“非同步”的簡寫,而 await 可以認為是 async wait 的簡寫。所以應該很好理解 async 用於申明一個 fun ...
  • JavaScript對於已經看到這篇博客的鐵子已近有了瞭解。 這篇博客寫一個效果:點擊按鈕跟換表格: 源碼下載 : https://files.cnblogs.com/files/2979100039-qq-con/jqy_example_01.zip 上一張效果圖: 點擊按鈕更換皮膚: 其他的就不 ...
  • DOM 即文檔對象模型,是操作 HTML/XML 文檔的一套方法。通過 DOM 操作節點,使頁面發生改變,是動態文檔技術的核心內容 ...
  • 記錄下引起這個報錯的原因: JSON.parse()參數應該是string類型 由於傳遞的參數是object 類型 那麼JSON.parse() 就會把object類型預設轉成string 結果為“[object object]” "["字元就當是數組去解析,然後遇到第二個字元“o” 他就蒙圈了 然 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...