当前位置： 首页 > news >正文

编程笔记 html5cssjs 011 HTML内连框架

news 2026/2/7 16:15:02

编程笔记 html5&css&js 011 HTML内连框架

  • 一、内连框架
    • （一）意义
    • （二）属性
  • 二、操作
  • 注意

接下来要看一下网页内的划分。通过内连框架在当前页面嵌入一个特定内容，是一种特定需要。

一、内连框架

HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

（一）意义

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。
警告： 页面上的每个<iframe>都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<iframe>，但是你最好还是先看看这么做会不会导致某些性能问题。

（二）属性

该元素包含全局属性。
allow
用于为<iframe>指定其特征策略.
allowfullscreen
设置为true时，可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。
备注： 这是一个历史遗留属性，已经被重新定义为 allow=“fullscreen”。
allowpaymentrequest
设置为true时，跨域的 <iframe> 就可以调用 Payment Request API。
备注： 这是一个历史遗留属性，已经被重新定义为 allow=“payment”.
height
以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值为150。
importance 实验性
表示 <iframe> 的 src 属性指定的资源的加载优先级。允许的值有：
auto (default)
不指定优先级。浏览器根据自身情况决定资源的加载顺序
high
资源的加载优先级较高
low
资源的加载优先级较低
name
用于定位嵌入的浏览上下文的名称。该名称可以用作 <a> 标签与 <form> 标签的 target 属性值，也可以用作 <input> 标签和 <button> 标签的 formtarget 属性值，还可以用作 window.open() 方法的 windowName 参数值。
src
被嵌套的页面的 URL 地址。使用 about:blank 值可以嵌入一个遵从同源策略的空白页。
srcdoc
该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容。
width
以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是300。

二、操作

<!DOCTYPE html>
<html lang="zh-cn">
<head><title>编程笔记 html5&css&js HTML内链框架</title><meta charset="utf-8"><style>body {color: cyan;background-color: teal;}iframe {display: block;margin: 0 auto;}</style>
</head>
<body><h1 align="center">这是一个内连框架</h1><iframe title="你看是不是我的第一个页面？" width="500" height="400" src="page004_第一个页面.html"></iframe><iframe title="这个是京东好像不让被抓进小黑屋？" width="500" height="400" src="https://www.jd.com/"></iframe>
</body>
</html>

注意

在现时流行的布局中，较少使用框架。接下来不再详细探讨。很少使用。

相关文章：

编程笔记 html5cssjs 011 HTML内连框架

编程笔记 html5&css&js 011 HTML内连框架 一、内连框架&#xff08;一&#xff09;意义&#xff08;二&#xff09;属性 二、操作注意 接下来要看一下网页内的划分。通过内连框架在当前页面嵌入一个特定内容&#xff0c;是一种特定需要。 一、内连框架 HTML 内联框架元…...

编程日记 2024/1/5 13:54:56

Stable Diffusion 系列教程 - 5 ControlNet

ControlNet和LORA的定位都是对大模型做微调的额外网络。作为入门SD的最后一块拼图是必须要去了解和开发的。为什么ControlNet的影响力如此的大&#xff1f;在它之前&#xff0c;基于扩散模型的AIGC是非常难以控制的&#xff0c;扩散整张图像的过程充满了随机性。这种随机性并不…...

编程日记 2024/1/5 13:52:55

【导出与导入Virtualbox虚拟机和启动连接openGauss数据库】

【导出与导入Virtualbox虚拟机和启动连接openGauss数据库】 一、导出虚拟机二、导入虚拟机三、启动数据库四、使用Data Studio连接数据库 一、导出虚拟机 选择关机状态的虚拟机 -> 管理菜单 -> 导出虚拟电脑 点击完成后&#xff0c;需要等待一小段时间&#xff0c;如…...

编程日记 2024/1/5 13:51:54

“华为杯”杭州电子科技大学2023新生编程大赛---树

题目链接 Problem Description 给定一棵包含 n 个节点的带边权的树&#xff0c;树是一个无环的无向联通图。定义 xordist(u,v) 为节点 u 到 v 的简单路径上所有边权值的异或和。 有 q 次询问&#xff0c;每次给出 l r x&#xff0c;求 ∑rilxordist(i,x) 的值。 Input 测试…...

编程日记 2024/1/5 13:50:53

使用pnnx将Torch模型转换为ncnn

1. 引言 以往我们将Torch模型转换为ncnn模型&#xff0c;通常需经过Torch–>onnx&#xff0c;onnx–>ncnn两个过程。但经常会出现某些算子不支持的问题。 ncnn作者针对该问题&#xff0c;直接开发一个Torch直接转换ncnn模型的工具 (PNNX)&#xff0c;以下为相关介绍及使…...

编程日记 2024/1/5 13:48:51

linux卸载小皮面板phpstudy教程

千万不要直接删文件夹&#xff01; 千万不要直接删文件夹&#xff01; 千万不要直接删文件夹&#xff01; 我就是按照网上搜索的教程&#xff0c;直接删了&#xff0c;然后 系统就不停的崩溃 生成这种文件&#xff1a; -rw------- 1 root root 223M Dec 28 22:36…...

编程日记 2024/1/5 13:47:51

【萤火虫系列教程】1/5-Adobe Firefly 注册账号

001-Adobe Firefly 注册账号 AI时代如火如荼&#xff0c;Adobe也不甘落后&#xff0c;于今年3月份发布AI创意生成工具Firefly&#xff08;中文翻译&#xff1a;萤火虫&#xff09; Adobe Firefly简介 Adobe Firefly的官方介绍为&#xff1a;Firefly是Adobe产品中新的创意生成…...

编程日记 2024/1/5 13:46:49

【docker】Dockerfile 指令详解

一、Dockerfile 指令详解 Dockerfile是一个用于编写docker镜像生成过程的文件&#xff0c;其有特定的语法。Dockerfile的基本指令有十三个&#xff0c;分别是&#xff1a;FROM、MAINTAINER、RUN、CMD、EXPOSE、ENV、ADD、COPY、ENTRYPOINT、VOLUME、USER、WORKDIR、ONBUILD。 …...

编程日记 2024/1/5 13:41:44

内存管理机制

内存管理机制与内存映射相关。 一、C与C 之所以将C与C放在一起是因为C是C的超集&#xff1b; 但是C是面向过程语言&#xff0c;C是面向对象的语言&#xff1b; C与C都可以使用malloc、calloc、realloc来申请内存空间&#xff1b; 其中void* malloc(size_t size)是在内存的动态…...

编程日记 2024/1/5 13:39:43

Jenkins工具使用

学习目录&#xff1a; 1、jenkins的安装 2、junkins的常规使用 3、jenkins在接口自动化测试实践 具体内容&#xff1a; 1、jenkins的安装 安装包下载&#xff1a;推荐Index of /jenkins/war/latest/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror&#xff0c;…...

编程日记 2024/1/5 13:30:35

SpringBoot从配置文件中获取属性的方法

方式一&#xff1a;Value 基本类型属性注入&#xff0c;直接在字段上添加Value("${xxx.xxx}")即可&#xff0e;注意这里用的是$&#xff0c;而不是#&#xff0c;Value注入的属性&#xff0c;一般其他属性没有关联关系。 配置文件 user:name: Manaphyage: 19sex: m…...

编程日记 2024/1/5 13:29:34

oracle物化视图

物化视图定义 视图是一个虚拟表&#xff08;也可以认为是一条语句&#xff09;&#xff0c;基于它创建时指定的查询语句返回的结果集&#xff0c;每次访问它都会导致这个查询语句被执行一次&#xff0c;为了避免每次访问都执行这个查询&#xff0c;可以将这个查询结果集存储到…...

编程日记 2024/1/5 13:26:31

基于ssm校园线上订餐系统的设计与实现论文

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…...

编程日记 2024/1/5 13:25:30

鸿蒙南向开发—OpenHarmony技术编译构建框架

概述 OpenHarmony编译子系统是以GN和Ninja构建为基座&#xff0c;对构建和配置粒度进行部件化抽象、对内建模块进行功能增强、对业务模块进行功能扩展的系统&#xff0c;该系统提供以下基本功能&#xff1a; 以部件为最小粒度拼装产品和独立编译。支持轻量、小型、标准三种系…...

编程日记 2024/1/5 13:23:28

Android Jetpack学习系列——Navigation

写在前面 Google在2018年就推出了Jetpack组件库&#xff0c;但是直到今天我才给重视起来&#xff0c;这真的不得不说是一件让人遗憾的事。过去几年的空闲时间里&#xff0c;我一直在尝试做一套自己的组件库&#xff0c;帮助自己快速开发&#xff0c;虽然也听说过Jetpack&#…...

编程日记 2024/1/5 13:22:27

编程语言的新趋势

随着科技的飞速发展&#xff0c;IT行业经历了巨大的变革&#xff0c;其中编程语言作为技术生态的核心要素&#xff0c;其演变趋势对整个行业影响深远。从过去到现在&#xff0c;再到未来&#xff0c;编程语言的发展都呈现出明显的时代特征。本文将探讨当前IT行业的现状&#xf…...

编程日记 2024/1/5 13:20:26

C++：类和对象(2)

目录 1.strcut和class的区别 2.将成员属性设置为私有 3.对象的初始化和清理 3.1 构造函数和析构函数 3.1.1 构造函数语法 3.1.2 析构函数语法 3.1.3 检验 3.2 构造函数的分类和调用 3.3 拷贝构造函数调用 1.strcut和class的区别 struct和class的唯一区别在于默认的访问…...

编程日记 2024/1/5 13:17:21

【React系列】网络框架axios库的使用

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. axios库的基本使用 1.1. 网络请求的选择 目前前端中发送网络请求的方式有很多种&#xff1a; 选择一:传统的Aj…...

编程日记 2024/1/5 13:16:20

pygame学习(二)——绘制线条、圆、矩形等图案

导语 pygame是一个跨平台Python库(pygame news)&#xff0c;专门用来开发游戏。pygame主要为开发、设计2D电子游戏而生&#xff0c;提供图像模块&#xff08;image&#xff09;、声音模块&#xff08;mixer&#xff09;、输入/输出&#xff08;鼠标、键盘、显示屏&#xff09;模…...

编程日记 2024/1/5 13:14:18

TCL学习笔记(持续更新)

前言&#xff1a; TCL&#xff08;tool common language&#xff09;是一种通用工具语言&#xff0c;很多eda tool都支持tcl&#xff0c;学习了解一些tcl基本语法还是很有必要的。 1&#xff1a;基础概念 解释器&#xff1a; #!/usr/bin/tclsh 打印&#xff1a; puts -> p…...

编程日记 2024/1/5 13:13:17

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/5 10:34:36

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2026/1/24 13:26:57

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/11/19 18:06:51