Web前端——HTML内联框架

最新推荐文章于 2024-04-10 20:23:08 发布

巧克力code

最新推荐文章于 2024-04-10 20:23:08 发布

阅读量770

点赞数

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/qq_44853882/article/details/107116774

版权

Web前端专栏收录该内容

15 篇文章 5 订阅

订阅专栏

一. 内联框架

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

1. iframe语法

iframe标签可以在html页面上，打开一个小窗口，去加载一个单独的页面

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe标签.html</title>
</head>
<body>
    我是一个单独的完整的页面<br/><br>
	<iframe src="0-标签语法.html" width="300" height="400"></iframe>
</body>
</html>

在这里插入图片描述

2. Iframe设置高度与宽度

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

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

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

设置属性值为 “0” 移除iframe的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        内联框架，用于向当前页面中引入一个其他页面
            src 指定要引入的网页的路径
            frameborder 指定内联框架的边框
     -->
     <iframe src="https://www.qq.com" width="800" height="600" frameborder="3">		     
     </iframe>

</body>
</html>

结果：
在这里插入图片描述

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

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

目标链接的属性必须使用iframe的属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>框架</title>
</head>

<body>

    <iframe src="https://www.qq.com" name="iframe_a"></iframe>
    <p>
        <a href="https://blog.csdn.net/qq_44853882/category_10144385.html" target="iframe_a">RUNOOB.COM</a>
    </p>

</body>

</html>

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

在这里插入图片描述

巧克力code

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端——HTML内联框架

内联框架<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 内联框架，用于向当前页面中引入一个其他页面 src 指定要引入的网页的路径 frame
复制链接

扫一扫