HTML5之内嵌框架
生活随笔
收集整理的這篇文章主要介紹了
HTML5之内嵌框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
內嵌框架是用于在網頁中嵌入一個網頁并讓它在網頁中顯示
添加內嵌框架的語法:
<iframe src=" URL "></iframe>
URL 指定獨立網頁的路徑.
案例1
<!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><!--內嵌框架-->src:默認展示頁面<iframe src="img/james.jpg" width="500px" height="500px" name="iframe_my"></iframe></body> </html>效果展示：上側導航，下側展示
案例2
書籍導航頁面
<!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>書籍展示頁面
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>書籍展示頁面</title></head><body><iframe src="書籍導航頁面.html" width="30%" height="800px"></iframe><!--內嵌框架--><!--src:默認展示頁面--><iframe name="iframe_my" width="68%" height="800px" src="img/zilv.jpg"></iframe></iframe></body> </html>展示效果：左側導航，右側展示
案例3：模擬郵箱展示
效果展示
總結
以上是生活随笔為你收集整理的HTML5之内嵌框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5之form表单
- 下一篇： CSS基本选择器（元素选择器、类选择器、