HTML HTML框架 (stage1-26)

最新推荐文章于 2023-03-03 15:15:32 发布

Mac-fang

最新推荐文章于 2023-03-03 15:15:32 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/weixin_38628915/article/details/79024226

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

基础篇-HTML框架

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

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

该URL指向不同的网页。

1.Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：”80%”)。
实例:

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

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架的使用</title>
</head>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
<p>一些浏览器不支持iframe</p>
<p>如果浏览器不支持iframe，则不会显示</p>
</body>
</html>

运行结果:
这里写图片描述

2.Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 **”0” 移除**iframe的边框:
实例:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架的使用</title>
</head>
<body>
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe><!--设置无边框-->
<p>一些浏览器不支持iframe</p>
<p>如果浏览器不支持iframe，则不会显示</p>
</body>
</html>

运行结果：
这里写图片描述

3.使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面。
目标链接的属性必须使用iframe的属性，如下实例:
实例：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">百度</a></p>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示目标链接</title>
</head>
<body>
<iframe src="demo_iframe.htm" width="800" height="300" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">百度</a></p>
<p><b>注意：</b>因为a 标签的target属性的值是名为iframe_a的iframe框架，所以在点击链接时，页面会显示在iframe框架中。</p>
</body>
</html>