<iframe>是什么？html中iframe標(biāo)簽的用法詳細(xì)說(shuō)明
發(fā)表時(shí)間：2023-08-29 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]經(jīng)常進(jìn)行頁(yè)面布局的人對(duì)于HTML中的iframe標(biāo)簽一定不陌生，iframe標(biāo)簽是一個(gè)內(nèi)聯(lián)框架，說(shuō)白了就是用來(lái)在當(dāng)前 HTML 頁(yè)面中嵌入另一個(gè)文檔的。剛剛接觸前端的小伙伴可能不知道html中iframe標(biāo)簽的用法，這篇文章就結(jié)合實(shí)例給大家講解html中iframe標(biāo)簽的使用用法，有一定的參考價(jià)值...
經(jīng)常進(jìn)行頁(yè)面布局的人對(duì)于HTML中的iframe標(biāo)簽一定不陌生，iframe標(biāo)簽是一個(gè)內(nèi)聯(lián)框架，說(shuō)白了就是用來(lái)在當(dāng)前 HTML 頁(yè)面中嵌入另一個(gè)文檔的。剛剛接觸前端的小伙伴可能不知道html中iframe標(biāo)簽的用法，這篇文章就結(jié)合實(shí)例給大家講解html中iframe標(biāo)簽的使用用法，有一定的參考價(jià)值，感興趣的朋友可以看看。
<iframe> 標(biāo)簽是一個(gè)內(nèi)聯(lián)框架，即用來(lái)在當(dāng)前 HTML 頁(yè)面中嵌入另一個(gè)文檔的，且所有主流瀏覽器都支持iframe標(biāo)簽。
基本語(yǔ)法：<iframe src="文件路徑"></iframe>
<iframe> 標(biāo)簽常用屬性介紹:
height可以設(shè)置框架顯示的高度
width可以設(shè)置框架顯示的寬度
name可以定義框架的名稱
frameborder用來(lái)定義是否需要顯示邊框，取值為1表示需要邊框
scrolling用來(lái)設(shè)置框架是否需要滾動(dòng)條，取值可以是yes,no,auto
src用于設(shè)置框架的地址，可以使頁(yè)面地址，也可以是圖片地址
align用于設(shè)置元素對(duì)齊方式，取值可以是left，right，top，middle，bottom
以上屬性可以根據(jù)需要進(jìn)行設(shè)置。
實(shí)例講解：html中<iframe>標(biāo)簽的使用方法
首先新建兩個(gè)HTML頁(yè)面，一個(gè)命名為iframe-content.html，另一個(gè)命名為iframe.html，在iframe-content.html中添加內(nèi)容，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>蒹葭蒼蒼，白露為霜。所謂伊人，在水一方。</p>
<p>溯洄從之，道阻且長(zhǎng)。溯游從之，宛在水中央。</p>
<p>蒹葭萋萋，白露未晞。所謂伊人，在水之湄。</p>
<p>溯洄從之，道阻且躋。溯游從之，宛在水中坻。</p>
</body>
</html>
然后用<iframe>標(biāo)簽將iframe-content.html文件嵌入到iframe.html中，可以根據(jù)自己的需要設(shè)置樣式，此例將frameborder設(shè)為0，不需要邊框， 將scrolling設(shè)為no，不需要滾動(dòng)條，具體代碼如下：
<!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>
有邊框和滾動(dòng)條的效果圖：
沒(méi)有邊框和滾動(dòng)條的效果圖：
當(dāng)頁(yè)面中有大部分內(nèi)容相同時(shí)，比如頁(yè)面的頭部和底部，我們就可以使用<iframe>標(biāo)簽將重復(fù)的部分嵌入頁(yè)面中，這樣可以減少代碼的重復(fù)率，減輕代碼量，但不足之處是頁(yè)面url地址沒(méi)有改變。
以上結(jié)合實(shí)例給大家介紹了html中<iframe>標(biāo)簽的使用方法，小白一定要自己動(dòng)手嘗試，看看你的代碼能不能實(shí)現(xiàn)這樣的效果，希望這篇文章對(duì)你有所幫助！
【相關(guān)教程推薦】
1. HTML教程
2. Html5視頻教程
3. bootstrap教程
以上就是<iframe>是什么？html中iframe標(biāo)簽的用法詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
