溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html中iframe標簽的用法案例

發(fā)布時間：2020-10-12 15:24:59 來源：億速云 閱讀：168 作者：小新 欄目：web開發(fā)

小編給大家分享一下html中iframe標簽的用法案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

<iframe> 標簽是一個內(nèi)聯(lián)框架，即用來在當前 HTML 頁面中嵌入另一個文檔的，且所有主流瀏覽器都支持iframe標簽。

基本語法：<iframe src="文件路徑"></iframe>

<iframe> 標簽常用屬性介紹:

height可以設(shè)置框架顯示的高度
width可以設(shè)置框架顯示的寬度
name可以定義框架的名稱
frameborder用來定義是否需要顯示邊框，取值為1表示需要邊框
scrolling用來設(shè)置框架是否需要滾動條，取值可以是yes,no,auto
src用于設(shè)置框架的地址，可以使頁面地址，也可以是圖片地址
align用于設(shè)置元素對齊方式，取值可以是left，right，top，middle，bottom

以上屬性可以根據(jù)需要進行設(shè)置。

實例講解：html中<iframe>標簽的使用方法

首先新建兩個HTML頁面，一個命名為iframe-content.html，另一個命名為iframe.html，在iframe-content.html中添加內(nèi)容，代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <p>蒹葭蒼蒼，白露為霜。所謂伊人，在水一方。</p>
  <p>溯洄從之，道阻且長。溯游從之，宛在水中央。</p>
  <p>蒹葭萋萋，白露未晞。所謂伊人，在水之湄。</p>
  <p>溯洄從之，道阻且躋。溯游從之，宛在水中坻。</p>
 </body>
</html>

然后用<iframe>標簽將iframe-content.html文件嵌入到iframe.html中，可以根據(jù)自己的需要設(shè)置樣式，此例將frameborder設(shè)為0，不需要邊框， 將scrolling設(shè)為no，不需要滾動條，具體代碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <iframe src="iframe-content.html" width="400px" height="150px" frameborder="0" 
scrolling="no"></iframe>
 </body>
</html>

有邊框和滾動條的效果圖：

html中iframe標簽的用法案例

沒有邊框和滾動條的效果圖：

html中iframe標簽的用法案例

當頁面中有大部分內(nèi)容相同時，比如頁面的頭部和底部，我們就可以使用<iframe>標簽將重復(fù)的部分嵌入頁面中，這樣可以減少代碼的重復(fù)率，減輕代碼量，但不足之處是頁面url地址沒有改變。

以上是html中iframe標簽的用法案例的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手