HTML <iframe> 标签

  • <iframe>标签定义和用法

    <iframe>标记指定内联框架。
    内联框架用于在当前HTML文档中嵌入另一个文档。
    提示:要处理不支持<iframe>的浏览器,请在开始<iframe>标记和结束</iframe>标记之间添加文本。
    提示:使用CSS设置<iframe>的样式(甚至包括滚动条)。

  • <iframe>浏览器支持

    Internet Explorer/Edge Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持
  • <iframe>标签实例

    <!DOCTYPE html>
    <html>
    <body>
    
    <iframe src="https://www.cainiaoya.com">
      <p>您的浏览器并不支援iframe</p>
    </iframe>
    
    </body>
    </html>
    
    尝试一下
  • HTML4.01和HTML5之间的差异

    HTML5添加了一些新属性,并从HTML5中删除了几个HTML4.01属性。

  • HTML和XHTML之间的差异

    在XHTML中,不推荐使用name属性,该属性将被删除。请改用全局id属性

  • <iframe>标签属性

    下面橙红色的5标识代表HTML5添加的新功能。

    属性名 属性值 描述
    align left
    right
    top
    middle
    bottom
    HTML5不支持。 指定<iframe>的对齐方式根据周围的元素
    frameborder 1
    0
    HTML5不支持。 指定是否在<iframe>周围显示边框
    height pixels 指定<iframe>的高度
    longdesc URL HTML5不支持。 指定一个页面,其中包含<iframe>内容的详细说明。
    marginheight pixels HTML5不支持。 指定<iframe>内容的顶部和底部边距。
    marginwidth pixels HTML5不支持。 指定<iframe>内容的左右边距。
    name text 指定<iframe>的名称
    sandbox5 allow-forms
    allow-pointer-lock
    allow-popups
    allow-same-origin
    allow-scripts
    allow-top-navigation
    为<iframe>中的内容启用一组额外限制
    scrolling yes
    no
    auto
    HTML5不支持。 指定是否在<iframe>中显示滚动条
    src URL 指定要在<iframe>中嵌入的文档的地址
    srcdoc5 HTML_code 指定要在<iframe>中显示的页面的HTML内容
    width pixels 指定<iframe>的宽度
    seamless5 seamless 指定<iframe>看起来像是父文档中的一部分。
  • <iframe>标签全局属性

    <iframe>标签还支持全局属性。

    查看有关全局属性的更多知识。

  • <iframe>事件属性

    <iframe>标签还支持事件属性。

    查看有关事件属性的更多知识。

  • <iframe>相关页面

    HTML教程:HTML iframe

  • <iframe>标签默认CSS设置

    iframe:focus { 
        outline: none;
    }
    
    iframe[seamless] { 
        display: block;
    }