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

编程笔记 html5cssjs 011 HTML内连框架

news 2026/5/12 18:00:59

编程笔记 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

异步、流式与批处理：LangChain 高性能调优

系列导读 你现在看到的是《LangChain 实战与工程化落地：从原型到生产环境的完整指南》的第 8/10 篇，当前这篇会重点解决：通过异步、流式与批处理技术，将 LangChain 应用响应速度提升 10 倍以上。 上一篇回顾：第 7 篇《RAG 实战：LangChain + 向量数据库构建知识问答系统…...

编程新知 2026/5/12 16:59:34

工程师幽默：从EE Times标题竞赛看技术文化表达与沟通艺术

1. 从“Wizard of Woz”看工程师文化的幽默表达看到“Wizard of Woz”这个标题&#xff0c;很多老电子工程师或硅谷历史爱好者大概会心一笑。这显然是在玩一个经典的双关梗——“Wizard of Oz”&#xff08;绿野仙踪&#xff09;和“Woz”&#xff08;史蒂夫沃兹尼亚克&#xf…...

编程新知 2026/5/12 15:18:29

STM32高效驱动WS2812：SPI+DMA时序精解与实战避坑

1. WS2812驱动原理与SPIDMA方案优势 第一次接触WS2812灯带时&#xff0c;我被它的单线控制方式惊艳到了——只需要一根信号线就能控制数百个RGB灯珠。但真正动手实现时才发现&#xff0c;这个看似简单的协议背后藏着不少玄机。WS2812采用归零码&#xff08;RZ&#xff09;编码方…...

编程新知 2026/5/12 15:04:54

3分钟掌握跨平台鼠标连点器：免费开源自动化工具快速上手指南

3分钟掌握跨平台鼠标连点器&#xff1a;免费开源自动化工具快速上手指南 【免费下载链接】MouseClick &#x1f5b1;️ MouseClick &#x1f5b1;️ 是一款功能强大的鼠标连点器和管理工具&#xff0c;采用 QT Widget 开发 &#xff0c;具备跨平台兼容性 。软件界面美观 &#…...

编程新知 2026/5/12 14:44:01

AI智能体构建实战：从架构设计到工程落地的关键挑战与解决方案

1. 项目概述&#xff1a;揭开AI智能体构建的隐秘面纱 “构建AI智能体”&#xff0c;这听起来像是当下最酷、最前沿的技术话题。无论是科技新闻还是行业论坛&#xff0c;你都能看到无数关于智能体如何自动化工作流、理解复杂指令、甚至自主决策的激动人心的讨论。然而&#xff0…...

编程新知 2026/5/12 12:38:09

终极游戏串流指南：5步搭建你的个人云端游戏服务器

终极游戏串流指南&#xff1a;5步搭建你的个人云端游戏服务器 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想要在任何设备上畅玩PC游戏&#xff1f;Sunshine开源游戏串流服务器…...

编程新知 2026/5/12 9:53:06

不止于下载：用Active-HDL给你的Lattice FPGA设计做个“体检”（功能仿真实战）

从功能仿真到可靠设计&#xff1a;Active-HDL在Lattice FPGA开发中的深度实践 当LED灯在你的FPGA开发板上如期闪烁时&#xff0c;那种成就感确实令人振奋。但作为经历过多次调试煎熬的工程师&#xff0c;我必须告诉你&#xff1a;能下载运行只是FPGA开发的起点&#xff0c;而非…...

编程新知 2026/5/12 9:47:02

基于Fabric.js与Next.js的浏览器端视频编辑器开发实战

1. 从零到一&#xff1a;在浏览器里造一个视频编辑器几年前&#xff0c;当我第一次尝试在网页上做视频剪辑时&#xff0c;感觉就像在用瑞士军刀盖房子——工具很多&#xff0c;但都不趁手。市面上的在线编辑器要么功能简陋&#xff0c;要么就是“黑盒”操作&#xff0c;你根本不…...

编程新知 2026/5/12 9:02:21

如何高效下载网易云音乐无损FLAC：完整指南与实战技巧

如何高效下载网易云音乐无损FLAC&#xff1a;完整指南与实战技巧 【免费下载链接】NeteaseCloudMusicFlac 根据网易云音乐的歌单, 下载flac无损音乐到本地.。 项目地址: https://gitcode.com/gh_mirrors/nete/NeteaseCloudMusicFlac 想要一键下载网易云音乐歌单中的无损…...

编程新知 2026/5/12 8:21:44

魔兽争霸3终极优化指南：WarcraftHelper 2024免费配置教程

魔兽争霸3终极优化指南&#xff1a;WarcraftHelper 2024免费配置教程 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为经典游戏《魔兽争霸3》在现…...

编程新知 2026/5/12 8:19:32