HTML内联框架 - 技术栈

前言：

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

标签介绍：

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

使用介绍：

基本操作框架：

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

例子（以CSDN为例）：

html 复制代码

<!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地址（路径）

例子：

html 复制代码

<!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

~指定框架的长宽

例子：

html 复制代码

<!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的名称

例子：

html 复制代码

<!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

~是否允许全屏播放

html 复制代码

<!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

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

html 复制代码

<!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"指定是否一直显示或隐藏滚动条

例子：
html 复制代码
<!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"来指定是否显示边框

例子：
html 复制代码
<!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 为框架的唯一标识
html 复制代码
<!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>