經常進行頁面佈局的人對於HTML中的iframe標籤一定不陌生,iframe標籤是一個內聯框架,說白了就是用來在當前 HTML 頁面中嵌入另一個文檔的。剛接觸前端的小夥伴可能不知道html中iframe標籤的用法,這篇文章就結合實例給大家講解html中iframe標籤的使用用法,有一定的參考價值,有興趣的朋友可以看看。
基本語法:
height可以設定框架顯示的高度
width可以設定框架顯示的寬度
name可以定義框架的名稱
frameborder用來定義是否需要顯示邊框,取值為1表示需要邊框
scrolling用來設定框架是否需要捲軸,取值可以是yes,no,auto
src用來設定框架的位址,可以讓頁面位址,也可以是圖片位址
align用來設定元素對齊方式,取值可以是left ,right,top,middle,bottom
以上屬性可以依照需求設定。
實例講解:html中
首先新建兩個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>
然後用
<!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中
【相關教學推薦】
1. HTML教學
#2. Html5影片教學
3. bootstrap教程
以上是