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>
相关推荐
前端Hardy几秒前
第8课:JavaScript实战-简易计算器——入门阶段成果验收
前端·javascript
前端Hardy2 分钟前
第7课:JavaScript事件处理——JS的“感官系统”
前端·javascript
独立开阀者_FwtCoder4 分钟前
Trae + 设计 MCP :实现 UI 到网页自动化
前端·javascript·人工智能
拖孩10 分钟前
【Nova UI】十二、打造组件库之按钮组件(上):迈向功能构建的关键一步
前端·javascript·vue.js
独立开阀者_FwtCoder12 分钟前
用 pnpm + workspace + changesets 打造monorepo工程,【前端er必看!】
前端·javascript·面试
想回家的一天26 分钟前
雪花算法生成int64,在前端js的精度问题
开发语言·前端·javascript
Python私教30 分钟前
CentOS 7 基于 Nginx 的 HTML 部署全流程指南
nginx·centos·html
yinzhiqing39 分钟前
ubuntu24设置拼音输入法,解决chrome不能输入中文
前端·数据库·chrome
杨超越luckly1 小时前
HTML应用指南:利用GET请求获取微博签到位置信息
大数据·信息可视化·数据分析·html·html5
PythonPioneer1 小时前
每日Html 4.24
前端·html