在一個頁面中嵌套另外一個頁面，就要使用到框架<iframe> 標(biāo)簽。<iframe> 標(biāo)簽規(guī)定一個內(nèi)聯(lián)框架。一個內(nèi)聯(lián)框架被用來在當(dāng)前 HTML 文檔中嵌入另一個文檔。
基本語法：
<iframe src="URL"></iframe>舉例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<iframe src="https://www.qingqingblog.com"></iframe>
</body>
</html>?運行瀏覽器后得到的效果如圖
?
以上例子展示了<iframe>的用法，在瀏覽器執(zhí)行后，<iframe>有個默認(rèn)的高寬，讓整個頁面看起來不自然，還需要調(diào)整，所以接下來我們還要了解更多關(guān)于<iframe>的屬性。
常用屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| frameborder |
|
規(guī)定是否顯示框架周圍的邊框。 |
| height |
|
規(guī)定 iframe 的高度。 |
| scrolling |
|
規(guī)定是否在 iframe 中顯示滾動條。 |
| src | URL | 規(guī)定在 iframe 中顯示的文檔的 URL。 |
| width |
|
定義 iframe 的寬度。 |
1、<iframe> 標(biāo)簽的 frameborder 屬性
frameborder 屬性規(guī)定是否顯示 iframe 周圍的邊框。
舉例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<!--不顯示 iframe 周圍的邊框-->
<iframe src="https://www.qingqingblog.com" frameborder="0"></iframe>
<br /><br />
<!--顯示 iframe 周圍的邊框-->
<iframe src="https://www.qingqingblog.com" frameborder="1"></iframe>
</body>
</html>運行瀏覽器后得到的效果如圖
?
附加說明：當(dāng)frameborder="0"，表示關(guān)閉邊框；frameborder="1"，表示有邊框(默認(rèn)=1)，出于實用性方面的原因，最好不用設(shè)置該屬性，請使用 CSS 來應(yīng)用邊框樣式和顏色。
2、<iframe> 標(biāo)簽的 height 屬性
height 屬性規(guī)定 iframe 的高度。
舉例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<iframe src="https://www.qingqingblog.com" frameborder="0" height="200"></iframe>
</body>
</html>運行瀏覽器后得到的效果如圖
?
附加說明：可以是以像素計的高度值（比如 "100），也可以是以包含元素百分比計的高度值（比如 "20%"），注意設(shè)置百分比的時候，它的父元素也就是外圍必須要指定高度，否則百分比不生效。
3、<iframe> 標(biāo)簽的 scrolling 屬性
scrolling 屬性規(guī)定是否在 iframe 中顯示滾動條。
舉例：
<html lang="zh">
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<h3>iframe 中始終顯示滾動條：</h3>
<iframe src="https://www.qingqingblog.com" width="300" height="100" scrolling="yes"></iframe>
<h3>iframe 中從不顯示滾動條：</h3>
<iframe src="https://www.qingqingblog.com" width="300" height="100" scrolling="no"></iframe>
</body>
</html>運行瀏覽器后得到的效果如圖
附加說明：scrolling默認(rèn)的是auto，也就是有滾動條。如果要想隱藏iframe出現(xiàn)的滾動條，可以使用scrolling="no"隱藏滾動條。
scrolling 屬性值
| 值 | 描述 |
|---|---|
| auto | 在需要的情況下出現(xiàn)滾動條（默認(rèn)值）。 |
| yes | 始終顯示滾動條（即使不需要）。 |
| no | 從不顯示滾動條（即使需要）。 |
特別說明
iframe標(biāo)簽可以實現(xiàn)頁面嵌套頁面的功能，可以豐富我們的頁面，但是這個功能不建議使用，原因是iframe不利于當(dāng)前網(wǎng)頁的搜索引擎優(yōu)化，所以要使用iframe標(biāo)簽嵌套需要酌情考慮。文章來源：http://www.zghlxwxcb.cn/news/detail-488271.html
當(dāng)你學(xué)習(xí)到這篇教程的時候，已經(jīng)掌握了大部分的html標(biāo)簽知識了，接下來我們就可以學(xué)習(xí)CSS樣式表了，千萬不要半途而廢哦，CSS也很好玩的。文章來源地址http://www.zghlxwxcb.cn/news/detail-488271.html
到了這里，關(guān)于iframe框架一個頁面中嵌套到另外一個頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
