HTML内联框架

前言:

我们有时候打开网页时会有广告窗的出现,而这些窗口并不是来自于本站的,而是来自于外部网页,只是被引用到了自己网页中而已。这一种技术可以通过内联来实现。

标签介绍:

HTML 内联框架元素 (<iframe>) 表示嵌套的。它能够将另一个 HTML 页面嵌入到当前页面中,并且它自带了一些有用的特性,如调整大小、滚动等。

使用介绍:

基本操作框架:

<iframe src="路径"></iframe>

例子(以CSDN为例):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://www.csdn.net/"></iframe>
</body>
</html>

 效果如下:

部分属性(展示部分):

1)src   

~用于指定此处的URL地址(路径)

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://www.csdn.net/"></iframe>
</body>
</html>

2)  width和height   

~指定框架的长宽

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://www.bilibili.com/" width="200" height="1000"></iframe>
</body>
</html>

3)name 

~指定iframe的名称

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe name="B站" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>

4)allowfullscreen

~是否允许全屏播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe allowfullscreen="yes" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body>
    
</html>

5)allowtransparency 

~允许内嵌框架指定透明度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe allowtrans="yes" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body>
    
</html>

6) scrolling 

~是否显示滚动条,

~决定是否显示滚动条,可以使用"auto"自动决定是否显示滚动条,或者设为"yes"和"no"指定是否一直显示或隐藏滚动条

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe scrolling = "no" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>

7)  frameborder 

~是否显示边框

~可以使用值"0"、“1"和"no”、"yes"来指定是否显示边框

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe frameborder="yes" src="https://www.bilibili.com/" width="222" height="333"></iframe>
</body>
</html>

【由于变化不是很明显,就不展示参考图了】

8) id 为框架的唯一标识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe id="B站" src="https://www.bilibili.com/" width="555" height="555"></iframe>
</body>
    
</html>

相关推荐

  1. Kotlin 函数

    2024-04-23 01:26:03       38 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-23 01:26:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-23 01:26:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-23 01:26:03       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-23 01:26:03       20 阅读

热门阅读

  1. 卸载并升级pytorch安装torcheval

    2024-04-23 01:26:03       13 阅读
  2. CV 面试指南—深度学习知识点总结(1)

    2024-04-23 01:26:03       15 阅读
  3. 前端CSS基础2(CSS基本选择器和复合选择器)

    2024-04-23 01:26:03       10 阅读
  4. 面试题

    面试题

    2024-04-23 01:26:03      16 阅读
  5. /bin/sh: 1: arm-linux-g++: not found

    2024-04-23 01:26:03       16 阅读
  6. 【Vue3源码学习】— CH3.2 VNode解析(上)

    2024-04-23 01:26:03       18 阅读
  7. leetcode 23

    2024-04-23 01:26:03       17 阅读
  8. lazarus-ide简介

    2024-04-23 01:26:03       17 阅读
  9. 安卓功耗分析

    2024-04-23 01:26:03       11 阅读
  10. Android开发——ListView

    2024-04-23 01:26:03       13 阅读
  11. mybatis和mybatis-plus的区别

    2024-04-23 01:26:03       15 阅读
  12. nginx根据二级目录转发服务以及带/和不带/的区别

    2024-04-23 01:26:03       18 阅读
  13. Rust 模式匹配中的& 和 ref

    2024-04-23 01:26:03       15 阅读