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

web自动化——前端知识

news 来源：原创 2025/5/19 23:11:39

<iframe> 是 HTML 中的一个元素，用于在当前网页中嵌入另一个网页或文档。它就像一个“窗口”，可以在页面中显示其他内容。

主要特点：

嵌入外部内容：可以在网页中嵌入其他网页、视频、地图等。
独立上下文：嵌入的内容与主页面相互独立，拥有自己的 JavaScript 和 CSS 环境。
可定制：可以通过属性调整大小、边框等。

常用属性：

src：指定要嵌入内容的 URL。
width 和 height：设置 iframe 的宽度和高度。
frameborder：控制边框显示（0 为无边框，1 为有边框）。
allowfullscreen：允许内容全屏显示。
sandbox：限制 iframe 的权限，增强安全性。

示例：

<iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

这个示例嵌入了一个宽度 600px、高度 400px 的网页，且无边框并允许全屏。

注意事项：

安全性：嵌入不可信内容可能带来安全风险，建议使用 sandbox 属性限制权限。
性能：嵌入过多 iframe 可能影响页面加载速度。
SEO：搜索引擎可能不会索引 iframe 中的内容。

总结来说，<iframe> 是一个强大的工具，用于在网页中嵌入其他内容，但使用时需注意安全和性能问题。

Shadow Root 是 Web 组件技术中的一部分，用于创建封装化的 DOM 子树，与主文档的 DOM 隔离。它允许开发者创建独立的、样式和行为不受外部影响的组件。

核心概念：

Shadow DOM：Shadow Root 是 Shadow DOM 的根节点，提供了一种将组件的内部结构与外部文档隔离的机制。
封装性：Shadow DOM 内部的样式和脚本不会影响外部文档，反之亦然。
自定义元素：Shadow DOM 通常与自定义元素（Custom Elements）结合使用，用于构建可重用的 Web 组件。

主要特点：

隔离性：Shadow DOM 内部的样式和 DOM 结构不会影响外部文档。
封装性：外部文档的样式和脚本不会影响 Shadow DOM 内部。
可组合性：可以通过 <slot> 元素将外部内容插入到 Shadow DOM 中。

创建 Shadow Root：

使用 Element.attachShadow() 方法可以为某个元素创建 Shadow Root。

const hostElement = document.createElement('div');
const shadowRoot = hostElement.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>p { color: red; }</style><p>This is a shadow DOM paragraph.</p>
`;
document.body.appendChild(hostElement);

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Shadow DOM Example</title><style>p { color: blue; }</style>
</head>
<body><div id="host"></div><p>This is a normal paragraph.</p><script>const host = document.querySelector('#host');const shadowRoot = host.attachShadow({ mode: 'open' });shadowRoot.innerHTML = `<style>p { color: red; }</style><p>This is a shadow DOM paragraph.</p>`;</script>
</body>
</html>

在这个示例中，Shadow DOM 内部的段落文字颜色为红色，而外部文档中的段落文字颜色为蓝色，两者互不影响。

Shadow Root 的模式：

open：外部 JavaScript 可以通过 element.shadowRoot 访问 Shadow DOM。
closed：外部 JavaScript 无法访问 Shadow DOM，element.shadowRoot 返回 null。

使用场景：

Web 组件：创建可重用的自定义元素。
封装样式：确保组件的样式不会影响外部文档。
第三方库：防止第三方库的样式和脚本与主文档冲突。

注意事项：

兼容性：虽然现代浏览器普遍支持 Shadow DOM，但在某些旧版浏览器中可能需要 polyfill。
调试：Shadow DOM 的封装性可能增加调试难度，但浏览器开发者工具通常提供对 Shadow DOM 的支持。

总结来说，Shadow Root 是 Web 组件技术中的关键部分，提供了强大的封装和隔离能力，适合构建复杂且可重用的 UI 组件。

web自动化——前端知识

编程日记 2025/5/19 23:11:39

计算机网络一点事（22）

地址解析协议ARP ARP：查询Mac地址 ARP表（ARP缓存）：记录映射关系，一个数据结构，定期更新ARP表过程：请求分组，响应分组动态主机配置协议DHCP 分配IP地址，配置默认网关…...

编程日记 2025/5/17 19:12:29

SG算法解析

Savitzky-Golay 滤波器的核心代码主要集中在计算投影矩阵B并使用这个矩阵对输入信号进行滤波。这部分核心代码包括计算B矩阵、处理边界效应和进行实际滤波操作。以下是对核心代码的一点解释： ① 计算 Savitzky-Golay 投影矩阵B B sgolay(order, framelen, weight…...

编程日记 2025/5/19 18:50:02

Ubuntu Server连接wifi

背景家里服务器放在客厅太吵了, 准备挪到阳台, 所以买了TP wifi接收器, 因此需要配置wifi连接. 刚开始买了Tenda Ax300, 结果不支持服务器系统, 买前还是得和客服交流交流. 准备驱动安装对于windows系统来说, 这款接收器是免驱的, 但在linux上需要安装相应型号驱动安装…...

编程日记 2025/5/16 18:10:15

Linux 4.19内核中的内存管理：x86_64架构下的实现与源码解析

在现代操作系统中，内存管理是核心功能之一，它直接影响系统的性能、稳定性和多任务处理能力。Linux 内核在 x86_64 架构下，通过复杂的机制实现了高效的内存管理，涵盖了虚拟内存、分页机制、内存分配、内存映射、内存保护、缓存管理等多个方面。本文将深入探讨这些机制，并结…...

编程日记 2025/5/12 22:30:21

L30.【LeetCode笔记】设计链表

1.题目 707. 设计链表 - 力扣（LeetCode） 你可以选择使用单链表或者双链表，设计并实现自己的链表。单链表中的节点应该具备两个属性：val 和 next 。val 是当前节点的值，next 是指向下一个节点的指针/引用。如果是双向…...

编程日记 2025/5/14 21:56:14

使用Pygame制作“Flappy Bird”游戏

1. 前言 Flappy Bird 是一款“点击上浮、松手下落”的横向卷轴游戏： 场景中持续出现上下成对的管道，玩家需要让小鸟在管道之间穿行；每穿过一对管道记 1 分；若小鸟碰到管道或掉到地面，则游戏结束；一旦上手…...

编程日记 2025/5/16 8:40:30

PHP中配置 variables_order详解

variables_order 是 PHP 配置文件 php.ini 中的一项配置指令，决定了 PHP 在处理请求时，哪些类型的变量将被注册到全局变量空间（如 $GLOBALS）中，以及这些变量的顺序。理解和正确配置 variables_order 对于开发和维护安全…...

编程日记 2025/5/15 9:23:47

Go学习：运算符总结

在 Go语言中，一元运算符拥有最高的优先级，二元运算符的运算方向均是从左至右。下表列出了所有运算符以及它们的优先级，由上至下代表优先级由高到低：...

编程日记 2025/5/9 22:25:38

JS面相对象小案例：自定义安全数组

在JS中，数组不像其他语言（java、python）中那样安全，它具有动态性和弱类型性，切越界访问没有具体的报错，而是返回空，为提升数组的安全性，我们可以自行定义一个安全数组。一、增加报…...

编程日记 2025/5/14 17:28:23

将markdown文件转为word文件

通义千问等大模型生成的回答多数是markdown类型的，需要将他们转为Word文件一 pypandoc 介绍 1. 项目介绍 pypandoc 是一个用于 pandoc 的轻量级 Python 包装器。pandoc 是一个通用的文档转换工具，支持多种格式的文档转换，如 Markdown、HTM…...

编程日记 2025/5/16 12:55:26

Unet 改进：在encoder和decoder间加入TransformerBlock

目录 1. TransformerBlock 2. Unet 改进 3. 完整代码 Tips：融入模块后的网络经过测试，可以直接使用，设置好输入和输出的图片维度即可 1. TransformerBlock TransformerBlock是Transformer模型架构的基本组件，广泛应用于机器翻译、文本摘要和情感分析等自然语言处理任务…...

编程日记 2025/5/19 20:41:57

LeetCode题练习与总结：两个列表的最小索引总和--599

一、题目描述假设 Andy 和 Doris 想在晚餐时选择一家餐厅，并且他们都有一个表示最喜爱餐厅的列表，每个餐厅的名字用字符串表示。你需要帮助他们用最少的索引和找出他们共同喜爱的餐厅。如果答案不止一个，则输出所有答案并且不考虑顺序。…...

编程日记 2025/5/14 19:40:01

登录CPD环境 ${CPDM_OC_LOGIN} 安装编程助手 cpd-cli manage apply-olm \ --release${VERSION} \ --cpd_operator_ns${PROJECT_CPD_INST_OPERATORS} \ --componentswca cpd-cli manage apply-cr \ --componentswca \ --release${VERSION} \ --cpd_instance_ns${PROJECT_CPD…...

编程日记 2025/5/15 5:42:41

细说机器学习算法之ROC曲线用于模型评估

系列文章目录第一章：Pyhton机器学习算法之KNN 第二章：Pyhton机器学习算法之K—Means 第三章：Pyhton机器学习算法之随机森林第四章：Pyhton机器学习算法之线性回归第五章：Pyhton机器学习算法之有监督学习与无监督…...

编程日记 2025/5/17 2:15:26

unity学习25：用 transform 进行旋转和移动，简单的太阳地球月亮模型，以及父子级关系

目录备注内容 1游戏物体的父子级关系 1.1 父子物体 1.2 坐标关系 1.3 父子物体实际是用每个gameobject的tranform来关联的 2 获取gameObject的静态数据 2.1 具体命令 2.2 具体代码 2.3 输出结果 3 获取gameObject 的方向 3.1 游戏里默认的3个方向 3.2 获取方向代…...

编程日记 2025/5/13 8:13:22

如何利用天赋实现最大化的价值输出

这种文章，以我现在的实力很难写出来。所以需要引用一些视频。上92高校容易吗如果基于天赋努力，非常容易。如果不是这样，非常非常难。高考失败人生完蛋？复读考上交大，进入社会才发现学历只是一张纸，98…...

编程日记 2025/5/15 14:03:56

使用 postman 测试思源笔记接口

思源笔记 API 权鉴官方文档-中文：https://github.com/siyuan-note/siyuan/blob/master/API_zh_CN.md 权鉴相关介绍截图： 对应的xxx，在软件中查看如上图：在每次发送 API 请求时，需要在 Header 中添加以下键值对&a…...

编程日记 2025/5/11 7:01:03

代码随想录33

目录 leetcode738.单调递增的字符串优化过的算法： 困难模式：968.监控二叉树 leetcode738.单调递增的字符串当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时，我们称这个整数是单调递增的。给定一个整数 n ，返回小于…...

编程日记 2025/5/17 17:19:44

解决Oracle SQL语句性能问题（10.5）——常用Hint及语法（7）（其他Hint）

10.5.3. 常用hint 10.5.3.7. 其他Hint 1）cardinality：显式的指示优化器为SQL语句的某个行源指定势。该Hint具体语法如下所示。 SQL> select /*+ cardinality([@qb] [table] card ) */ ...; --注： 1）这里，第一个参数（@qb）为可选参数，指定查询语句块名；第二个参数…...

编程日记 2025/5/18 7:09:56

FFmpeg(7.1版本)的基本组成

1. 前言 FFmpeg 是一个非常流行的开源项目，它提供了处理音频、视频以及其他多媒体内容的强大工具。FFmpeg 包含了大量的库，可以用来解码、编码、转码、处理和播放几乎所有类型的多媒体文件。它广泛用于视频和音频的录制、转换、流媒体传输等领域。 2. FFmpeg的组成 1. FFmp…...

编程日记 2025/5/14 17:25:17

Hypium+python鸿蒙原生自动化安装配置

Hypiumpython自动化搭建文章目录 Python安装pip源配置HDC安装Hypium安装DevEco Testing Hypium插件安装及使用方法插件安装工程创建区域 Python安装推荐从官网获取3.10版本，其他版本可能出现兼容性问题 Python下载地址下载64/32bitwindows安装文件&am…...

编程日记 2025/5/19 10:59:41

文明的基因：在传承中破茧重生

敦煌莫高窟的壁画历经千年风雨，至今仍在向世界讲述着东方美学的密码。那些斑驳的壁画上，既有北魏时期的天竺梵音，也留存着盛唐气象的长安余韵。文明的基因从未停止生长，就像莫高窟的壁画师们在临摹前朝壁画时，总会在衣…...

编程日记 2025/5/14 6:17:48

因果推断与机器学习—用机器学习解决因果推断问题

Judea Pearl 将当前备受瞩目的机器学习研究戏谑地称为“仅限于曲线拟合”，然而，曲线拟合的实现绝非易事。机器学习模型在图像识别、语音识别、自然语言处理、蛋白质分子结构预测以及搜索推荐等多个领域均展现出显著的应用效果。在因果推断任务中，在完成因果效应识别之后，需…...

编程日记 2025/5/15 20:44:42

笔试-二进制

应用题将符合区间[l,r]内的十进制整数转换为二进制表示，请问不包含“101”的整数个数是多少？ 实现 l int(input("请输入下限l，其值大于等于1：")) r int(input("请输入上限r，其值大于等于l&#x…...

编程日记 2025/5/15 7:48:58

Day52：range()函数

在 Python 中，range() 是一个内置函数，用于生成一系列数字，通常用于循环结构中。它非常适合用于生成指定范围内的整数序列，并且支持步长控制，常用于 for 循环中。今天我们将学习如何使用 range() 函数，并…...

编程日记 2025/5/17 16:34:06

数据结构:栈篇

ps: 本文所有图均为博主亲手所画,本文所有代码基于vs2022实现系列文章目录数据结构初探: 顺序表数据结构初探:链表之单链表篇数据结构初探:链表之双向链表篇链表特别篇:链表经典算法问题文章目录系列文章目录前言一.栈的概念及其结构1.1概念1.2结构二.准备工作1.Stack…...

编程日记 2025/5/14 17:58:23

药店药品销售管理系统的设计与实现

标题:药店药品销售管理系统的设计与实现内容:1.摘要摘要：本文介绍了药店药品销售管理系统的设计与实现。该系统旨在提高药店的运营效率和管理水平，通过信息化手段实现药品销售、库存管理、财务管理等功能。本文详细阐述了系统的需求分析、设计思路、技…...

编程日记 2025/5/19 5:36:40

【AI论文】VideoAuteur：迈向长叙事视频

摘要：近期的视频生成模型在制作持续数秒的高质量视频片段方面已展现出令人鼓舞的成果。然而，这些模型在生成能传达清晰且富有信息量的长序列时面临挑战，限制了它们支持连贯叙事的能力。在本文中，我们提出了一个大规模烹饪视频数据…...

编程日记 2025/5/18 1:30:57

pytorch基于FastText实现词嵌入

FastText 是 Facebook AI Research 提出的改进版 Word2Vec，可以： ✅ 利用 n-grams 处理未登录词比 Word2Vec 更快、更准确适用于中文等形态丰富的语言完整的 PyTorch FastText 代码（基于中文语料），包含&#xff1…...

编程日记 2025/5/14 5:51:05

PyTorch API 详细中文文档，基于PyTorch2.5

PyTorch API 详细中文文档按模块分类，涵盖核心函数与用法示例目录张量操作 (Tensor Operations)数学运算 (Math Operations)自动求导 (Autograd)神经网络模块 (torch.nn)优化器 (torch.optim)数据加载与处理 (torch.utils.data)设备管理 (Device Management)模…...

编程日记 2025/5/18 17:55:28

leetcode 2300. 咒语和药水的成功对数

题目如下数据范围示例注意到n和m的长度最长达到10的5次方所以时间复杂度为n方的必然超时。因为题目要求我们返回每个位置的spell对应的有效对数所以我们只需要找到第一个有效的药水就行，这里可以先对potions排序随后使用二分查找把时间复杂度压到nlogn就不会…...

编程日记 2025/5/16 6:49:59

C# 实现 “Hello World” 教程

.NET学习资料 .NET学习资料 .NET学习资料 C# 作为一种广泛应用于.NET 开发的编程语言，以其简洁、高效和类型安全等特性，深受开发者喜爱。在踏入 C# 编程领域时，编写经典的 “Hello World” 程序是重要的起点，它能帮助我们快速熟…...

编程日记 2025/5/14 23:56:38

Elasticsearch——Elasticsearch性能优化实战

摘要本文主要介绍了 Elasticsearch 性能优化的实战方法，从硬件配置优化、索引优化设置、查询方面优化、数据结构优化以及集群架构设计等五个方面进行了详细阐述，旨在帮助读者提升 Elasticsearch 的性能表现。 1. 硬件配置优化升级硬件设备配置一直都…...

编程日记 2025/5/17 15:21:33

CentOS 7 搭建lsyncd实现文件实时同步 —— 筑梦之路

在 CentOS 7 上搭建 lsyncd（Live Syncing Daemon）以实现文件的实时同步，可以按照以下步骤进行操作。lsyncd 是一个基于 inotify 的轻量级实时同步工具，支持本地和远程同步。以下是详细的安装和配置步骤： 1. 系统准备 …...

编程日记 2025/5/15 17:50:06

pytorch实现变分自编码器

人工智能例子汇总：AI常见的算法和例子-CSDN博客变分自编码器（Variational Autoencoder, VAE）是一种生成模型，属于深度学习中的无监督学习方法。它通过学习输入数据的潜在分布（Latent Distribution）&…...

编程日记 2025/5/19 20:39:19

【数据结构】初识链表

顺序表的优缺点缺点： 中间/头部的插入删除，时间复杂度效率较低，为O(N) 空间不够的时候需要扩容。如果是异地扩容，增容需要申请新空间，拷贝数据，释放旧空间，会有不小的消耗。扩容可能会存在…...

编程日记 2025/5/16 17:16:36

【llm对话系统】大模型 Llama 源码分析之并行训练方案

1. 引言训练大型语言模型 (LLM) 需要巨大的计算资源和内存。为了高效地训练这些模型，我们需要采用各种并行策略，将计算和数据分布到多个 GPU 或设备上。Llama 作为当前最流行的开源大模型之一，其训练代码中采用了多种并行技术。本文将深入 …...

编程日记 2025/5/14 0:32:56

S4 HANA税码科目确定(OB40)

本文主要介绍在S4 HANA OP中税码科目确定(OB40)相关设置。具体请参照如下内容： 税码科目确定(OB40) 在以上界面维护“Transaction Key”的记账码。在以上界面进一步维护“Transaction Key”确定科目的规则。 Chart of Account:用于明确该规则适用于什么科目表。 …...

编程日记 2025/5/19 21:58:23

Mysql的主从复制及扩展功能

一、配置过程 1.配置master vim /etc/my.cnf [mysqld] datadir/data/mysql 指定数据库文件的存储位置 socket/data/mysql/mysql.sock symbolic-links0 log-binmysql-bin 启用二进制日志，用于记录数据库的更…...

编程日记 2025/5/19 8:16:36

C#，入门教程(10)——常量、变量与命名规则的基础知识

上一篇： C#，入门教程(09)——运算符的基础知识https://blog.csdn.net/beijinghorn/article/details/123908269 C#用于保存计算数据的元素，称为“变量”。其中一般不改变初值的变量，称为常变量，简称“常量”。无论…...

编程日记 2025/5/16 17:45:34

ideal的maven使用(两种方法)

方法一: 1.建立一个maven项目 2.像上一篇博客,重新配置一下maven即可方法二:模块和项目选项一样:...

编程日记 2025/5/12 15:13:59

doris：导入时实现数据转换

Doris 在数据导入时提供了强大的数据转换能力，可以简化部分数据处理流程，减少对额外 ETL 工具的依赖。主要支持以下四种转换方式： 列映射：将源数据列映射到目标表的不同列。列变换：使用函数和表达式对源数据进行实时…...

编程日记 2025/5/17 17:14:23

开源智慧园区管理系统对比五款主流产品探索智能运营新模式

内容概要在这个数字化迅速发展的时代，园区管理也迎来了全新的机遇和挑战。众所周知，开源智慧园区管理系统作为一种创新解决方案，正逐步打破传统管理的局限性。它的开放性不仅使得系统可以根据具体需求进行灵活调整，也为用户提供…...

编程日记 2025/5/10 9:56:51

ARM内核：嵌入式时代的核心引擎

引言在当今智能设备无处不在的时代，ARM（Advanced RISC Machines）处理器凭借其高性能、低功耗的特性，成为智能手机、物联网设备、汽车电子等领域的核心引擎。作为精简指令集（RISC）的典范，ARM核…...

编程日记 2025/5/16 16:01:30

ITS290F Human Computer Interaction

ITS290F Human Computer Interaction & User Experience Design Lab 1. Introduction to CodePen What you’ll learn in this lab: • Understanding CodePen • Creating a front-end page • Using Google form to submit your lab work CodePen is a cloud-based in…...

编程日记 2025/5/14 5:26:45

[Java]继承

1. 什么是继承？ 继承是面向对象编程的一种机制，允许一个类（叫做子类）继承另一个类（叫做父类）的属性和方法。也就是说，子类可以“继承”父类的行为（方法）和状态&#xff…...

编程日记 2025/5/16 13:25:33

DeepSeek能下围棋吗？（续）

休息了一下，接着琢磨围棋，其实前面一篇里的规则有个漏洞的，就是邻居关系定义有问题，先回顾一下游戏规则： 游戏规则定义： 1.数字对，是指两个1到9之间的整数组成的有序集合。可与记为(m,n)&…...

编程日记 2025/5/16 8:51:55

51单片机（STC89C52）开发：点亮一个小灯

软件安装： 安装开发板CH340驱动。安装KEILC51开发软件：C51V901.exe。下载软件：PZ-ISP.exe 创建项目： 新建main.c 将main.c加入至项目中： main.c:点亮一个小灯 #include "reg52.h"sbit LED1P2^0; //P2的…...

编程日记 2025/5/16 6:10:46

【数据结构】并查集

1.基本操作 void makeset(){ for(int i1;i<n;i)fa[i]i; }int findd(int x){ while(fa[x]!x)xfa[x]fa[fa[x]]; return x; }void unionn(int x,int y){ int zxfindd(x);int zyfindd(y); if(zx!zy)fa[zy]zx; }2.种类并查集 Parity Game 关押罪犯 [NOIP 2010 提高组] 关押罪…...

编程日记 2025/5/19 19:06:32

主要特点：

常用属性：

示例：

注意事项：

核心概念：

主要特点：

创建 Shadow Root：

示例：

Shadow Root 的模式：

使用场景：

注意事项：

相关文章：