HTML教程
HTML教程
    • 请登录查看
    阅读(3666)

    HTML 框架

    最后一次修改 2017年08月01日

    HTML 框架

        

    通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

    iframe语法:

    <iframe src="URL"></iframe>

    该URL指向不同的网页。

    Iframe - 设置高度与宽度

    height 和 width 属性用来定义iframe标签的高度与宽度。

    属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程(html.cn)</title> 
</head> 
<body>

<iframe src="/statics/demosource/demo_iframe.htm" width="200" height="200"></iframe>

<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>


</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    Iframe - 移除边框

    frameborder 属性用于定义iframe表示是否显示边框。

    设置属性值为 "0" 移除iframe的边框:

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程(html.cn)</title> 
</head> 
<body>

<iframe src="/statics/demosource/demo_iframe.htm" width="200" height="200"></iframe>

<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>


</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    使用iframe来显示目录链接页面

    iframe可以显示一个目标链接的页面

    目标链接的属性必须使用iframe的属性，如下实例:

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html(html.cn)</title> 
</head> 
<body>

<iframe src="/statics/demosource/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.html.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    HTML iframe 标签

    标签 说明
    <iframe> 定义一个内联的iframe

    HTML 框架

        

    通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

    iframe语法:

    <iframe src="URL"></iframe>

    该URL指向不同的网页。

    Iframe - 设置高度与宽度

    height 和 width 属性用来定义iframe标签的高度与宽度。

    属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程(html.cn)</title> 
</head> 
<body>

<iframe src="/statics/demosource/demo_iframe.htm" width="200" height="200"></iframe>

<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>


</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    Iframe - 移除边框

    frameborder 属性用于定义iframe表示是否显示边框。

    设置属性值为 "0" 移除iframe的边框:

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html教程(html.cn)</title> 
</head> 
<body>

<iframe src="/statics/demosource/demo_iframe.htm" width="200" height="200"></iframe>

<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>


</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    使用iframe来显示目录链接页面

    iframe可以显示一个目标链接的页面

    目标链接的属性必须使用iframe的属性，如下实例:

    实例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html(html.cn)</title> 
</head> 
<body>

<iframe src="/statics/demosource/demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.html.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

<p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p>

</body>
</html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例


    HTML iframe 标签

    标签 说明
    <iframe> 定义一个内联的iframe
    ← HTML 表单
    HTML 颜色 →
    提交