HTML5之内嵌框架
生活随笔
收集整理的這篇文章主要介紹了
HTML5之内嵌框架
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
內(nèi)嵌框架是用于在網(wǎng)頁(yè)中嵌入一個(gè)網(wǎng)頁(yè)并讓它在網(wǎng)頁(yè)中顯示
添加內(nèi)嵌框架的語(yǔ)法:
<iframe src=" URL "></iframe>
URL 指定獨(dú)立網(wǎng)頁(yè)的路徑.
案例1
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>書籍展示頁(yè)面</title></head><body><h1>我喜歡的圖書展示</h2><ol><li><a href="img/buttler.jpg" target="iframe_my">python</a></li><li><a href="img/curry.jpg" target="iframe_my">java</a></li><li><a href="img/guojia.jpg" target="iframe_my">c</a></li><li><a href="img/zhiqi.jpg" target="iframe_my">jmeter</a></li></ol><!--內(nèi)嵌框架-->src:默認(rèn)展示頁(yè)面<iframe src="img/james.jpg" width="500px" height="500px" name="iframe_my"></iframe></body> </html>效果展示：上側(cè)導(dǎo)航，下側(cè)展示
案例2
書籍導(dǎo)航頁(yè)面
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><h1>我喜歡的圖書展示</h2><ol><li><a href="img/buttler.jpg" target="iframe_my">python</a></li><li><a href="img/curry.jpg" target="iframe_my">java</a></li><li><a href="img/guojia.jpg" target="iframe_my">c</a></li><li><a href="img/zhiqi.jpg" target="iframe_my">jmeter</a></li></ol></body> </html>書籍展示頁(yè)面
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>書籍展示頁(yè)面</title></head><body><iframe src="書籍導(dǎo)航頁(yè)面.html" width="30%" height="800px"></iframe><!--內(nèi)嵌框架--><!--src:默認(rèn)展示頁(yè)面--><iframe name="iframe_my" width="68%" height="800px" src="img/zilv.jpg"></iframe></iframe></body> </html>展示效果：左側(cè)導(dǎo)航，右側(cè)展示
案例3：模擬郵箱展示
效果展示
總結(jié)
以上是生活随笔為你收集整理的HTML5之内嵌框架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5之form表单
- 下一篇： ❗HTML引入CSS的三种常用方式汇总❗