Web前端——HTML内联框架-CFANZ编程社区

Web前端——HTML内联框架

一. 内联框架

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

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>

Web前端——HTML内联框架_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>

结果：

Web前端——HTML内联框架_html页面_02

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.net/qq_44853882/category_10144385.html" target="iframe_a">RUNOOB.COM</a>
    </p>

</body>

</html>

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

Web前端——HTML内联框架_当前页_03

Web前端——HTML内联框架_html页面_04

0 条评论