<iframe>是什么?html中iframe標簽的用法詳細說明
發表時間:2023-08-29 來源:明輝站整理相關軟件相關文章人氣:10
[摘要]經常進行頁面布局的人對于HTML中的iframe標簽一定不陌生,iframe標簽是一個內聯框架,說白了就是用來在當前 HTML 頁面中嵌入另一個文檔的。剛剛接觸前端的小伙伴可能不知道html中iframe標簽的用法,這篇文章就結合實例給大家講解html中iframe標簽的使用用法,有一定的參考價值...
經常進行頁面布局的人對于HTML中的iframe標簽一定不陌生,iframe標簽是一個內聯框架,說白了就是用來在當前 HTML 頁面中嵌入另一個文檔的。剛剛接觸前端的小伙伴可能不知道html中iframe標簽的用法,這篇文章就結合實例給大家講解html中iframe標簽的使用用法,有一定的參考價值,感興趣的朋友可以看看。
<iframe> 標簽是一個內聯框架,即用來在當前 HTML 頁面中嵌入另一個文檔的,且所有主流瀏覽器都支持iframe標簽。
基本語法:<iframe src="文件路徑"></iframe>
<iframe> 標簽常用屬性介紹:
height可以設置框架顯示的高度
width可以設置框架顯示的寬度
name可以定義框架的名稱
frameborder用來定義是否需要顯示邊框,取值為1表示需要邊框
scrolling用來設置框架是否需要滾動條,取值可以是yes,no,auto
src用于設置框架的地址,可以使頁面地址,也可以是圖片地址
align用于設置元素對齊方式,取值可以是left,right,top,middle,bottom
以上屬性可以根據需要進行設置。
實例講解:html中<iframe>標簽的使用方法
首先新建兩個HTML頁面,一個命名為iframe-content.html,另一個命名為iframe.html,在iframe-content.html中添加內容,代碼如下:
<!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中,可以根據自己的需要設置樣式,此例將frameborder設為0,不需要邊框, 將scrolling設為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>
有邊框和滾動條的效果圖:

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

當頁面中有大部分內容相同時,比如頁面的頭部和底部,我們就可以使用<iframe>標簽將重復的部分嵌入頁面中,這樣可以減少代碼的重復率,減輕代碼量,但不足之處是頁面url地址沒有改變。
以上結合實例給大家介紹了html中<iframe>標簽的使用方法,小白一定要自己動手嘗試,看看你的代碼能不能實現這樣的效果,希望這篇文章對你有所幫助!
【相關教程推薦】
1. HTML教程
2. Html5視頻教程
3. bootstrap教程
以上就是<iframe>是什么?html中iframe標簽的用法詳解的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。