zoukankan      html  css  js  c++  java
  • 吴裕雄--天生自然HTML学习笔记:HTML 框架

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
    iframe语法:
    
    <iframe src="URL"></iframe>
    该URL指向不同的网页。
    
    Iframe - 设置高度与宽度
    height 和 width 属性用来定义iframe标签的高度与宽度。
    
    属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。
    
    实例
    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head> 
    <body>
    
    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>
    
    <p>一些旧的浏览器不支持 iframe。</p>
    <p>如果浏览器不支持 iframes 则不会显示。</p>
    
    
    </body>
    </html>

    Iframe - 移除边框
    frameborder 属性用于定义iframe表示是否显示边框。
    
    设置属性值为 "0" 移除iframe的边框:
    
    实例
    <iframe src="demo_iframe.htm" frameborder="0"></iframe>
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head> 
    <body>
    
    <iframe src="demo_iframe.htm" width="200" height="200" frameborder="0">
     <p>您的浏览器不支持  iframe 标签。</p>
    </iframe>
    
    </body>
    </html>

    使用iframe来显示目标链接页面
    iframe可以显示一个目标链接的页面
    
    目标链接的属性必须使用iframe的属性,如下实例:
    
    实例
    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    </head> 
    <body>
    
    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
    
    <p><b>注意:</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。</p>
    
    </body>
    </html>

     

  • 相关阅读:
    20160813上午训练记录
    [bzoj 2159]Crash的文明世界
    【娱乐】高端小游戏Manufactoria
    【教程】如何正确的写一个Lemon/Cena的SPJ(special judge)
    [CF]codeforces round#366(div2)滚粗记
    洛谷 [P3265] 装备购买
    POJ 1830 开关问题
    洛谷 [P4035] 球形空间生成器
    BZOJ 2973 入门OJ4798 石头游戏
    洛谷 [P1939] 矩阵加速数列
  • 原文地址:https://www.cnblogs.com/tszr/p/11997210.html
Copyright © 2011-2022 走看看