吴裕雄--天生自然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>

 

猜你喜欢

转载自www.cnblogs.com/tszr/p/11997210.html