Web前端——HTML内联框架

    技术2024-10-12  55

    一. 内联框架

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

    1. iframe语法

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

    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框架中。

    Processed: 0.014, SQL: 9