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

编程笔记 html5cssjs 011 HTML内连框架

news 2026/2/9 3:38:08

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

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2026/1/31 15:00:15

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2026/2/6 19:29:20

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

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01