如何理解HTML5內(nèi)聯(lián)框架iFrame

發(fā)布時間：2021-09-15 14:37:35 來源：億速云閱讀：187 作者：柒染欄目：web開發(fā)

本篇文章為大家展示了如何理解HTML5內(nèi)聯(lián)框架iFrame，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

由于現(xiàn)在frame和frameset很少使用，已經(jīng)過時了，已經(jīng)被div+CSS代替了，所以，這里只是舉例說明一下，當(dāng)下還在使用的內(nèi)聯(lián)框架iFrame

所謂的iFrame內(nèi)聯(lián)框架，我的理解就是在網(wǎng)頁內(nèi)部嵌套一個網(wǎng)頁，并且可以一級一級地嵌套下去。

示例如下：

示例由index.html和iframe1.html、iframe2.html、iframe3.html組成

先上一張效果圖，圖片后面是完整代碼。

如何理解HTML5內(nèi)聯(lián)框架iFrame

點擊后

如何理解HTML5內(nèi)聯(lián)框架iFrame

完整代碼如下

index.html

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>index</title>  
</head>  
<!--注意，這里沒有body元素-->  
index   
<a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>  
<br/>  
<iframe src="iframe1.html" frameborder="1" width="800px" height="800px"></iframe>  
</html>

iframe1.html

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>iframe1</title>  
</head>  
<body bgcolor="red">  
iFrame1   
<a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>  
<br/>  
<iframe src="iframe2.html" frameborder="0" width="600px" height="600px"></iframe>  
</body>  
</html>

iframe2.html

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>iframe2</title>  
</head>  
<body bgcolor="green">  
iFrame2   
<a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>  
<br />  
<iframe src="iframe3.html" frameborder="0" width="400px" height="400px"></iframe>  
</body>  
</html>

iframe3.html

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>iframe3</title>  
</head>  
<body bgcolor="yellow">  
iFrame3   
<a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a></body>  
</html>

貌似各主流網(wǎng)站沒有采用這種布局的，應(yīng)用范圍也比較少了。

上述內(nèi)容就是如何理解HTML5內(nèi)聯(lián)框架iFrame，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

如何理解HTML5內(nèi)聯(lián)框架iFrame

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽