有了之前的文章铺垫，这篇文章开始，我们聊聊如何折腾 AI 工作流，把不 AI 的应用，“AI 起来”。...能够调用“外部工具”的模型功能 我计划将工作流相关的事情拆分为两篇来聊，过程中不太想切换模型，所以就选择了支持 “Function Call” 的它。...准备工作 我将本文用到的 Dify 和 WordPress 的 Docker “一键启动”配置相关文件开源在了 soulteary/dify-with-wordpress[11]，如果你感兴趣一些使用和配置上不同于官方的小的优化...使用方法非常简单： docker pull soulteary/wp-api:6.5.2-sqlite 使用上面的命令完成 Docker 镜像的下载，然后使用类似下面的配置，可以快速启动这个镜像中的 WordPress...最后 好啦，这篇文章就先聊到这里，后面的文章里，我们继续聊聊如何构建 “AI 工作流”，让你的不 AI 的应用，能够 AI 化。
有了之前的文章铺垫，这篇文章开始，我们聊聊如何折腾 AI 工作流，把不 AI 的应用，“AI 起来”。...我计划将工作流相关的事情拆分为两篇来聊，过程中不太想切换模型，所以就选择了支持 “Function Call” 的它。...准备工作我将本文用到的 Dify 和 WordPress 的 Docker “一键启动”配置相关文件开源在了 soulteary/dify-with-wordpress，如果你感兴趣一些使用和配置上不同于官方的小的优化...最后好啦，这篇文章就先聊到这里，后面的文章里，我们继续聊聊如何构建 “AI 工作流”，让你的不 AI 的应用，能够 AI 化。...「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。
这是在 HTML 中使用 CSS 和在 SVG 中使用 CSS 的一个区别：属性名称。我们在 HTML 文档中使用的许多 CSS 属性与 SVG 不兼容，反之亦然。我们将在本章后面回到这一点。...这样做不会影响您使用绘图应用程序编辑图像的能力，但如果您使用图像软件编辑文件，应用程序可能会重写或删除您的 CSS。...如果您想对 SVG 图像使用链接 CSS，则需要执行以下两项操作之一： 使用SVG 文档中的元素将 CSS 内联放置 使用or元素（见下面的注释） 注意：Craig...SVG 和 HTML 之间的差异 虽然 SVG 和 HTML 都是标记语言，但它们之间有两个显着差异会影响它们如何使用 CSS： SVG 不遵循 CSS 盒模型 SVG 缺乏定位方案 SVG 不遵循 CSS...动画和转换 SVG CSS 属性 当我们将过渡和动画添加到混合中时，将 CSS 与 SVG 结合使用会变得更加有趣。该过程就像使用 CSS 为 HTML 元素设置动画一样，但具有 SVG 特定的属性。
二、✍️网站描述 ️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。...页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。...页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。 页面清爽、美观、大方，不雷同。 。 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。...网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。...在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识 第三、学到了就要用到 有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。
尽管在使用的过程中，我们也遇到了一些问题，但这些问题往往源于我们对框架实现的不熟悉。我们深入研究了无界技术的源码，并将在本文中与大家分享。本文将重点探讨无界微前端如何渲染子应用的。...style 标签，并写入 CSS 。...当我们在 iframe 中，使用 document.querySelector查找 #app 的 DOM 时，它只能在 iframe 中查找（副作用留在 iframe 中），但 UI 是渲染到 webComponent...style = document.createElement('style') style.type = 'text/css' style.styleSheet.cssText = css...head.appendChild(style) } 在 iframe 中使用 document.head，需要用 Object.defineProperty 挟持 document 的 head 属性，
经过我们团队的调研，我们选择了无界作为微前端的技术栈。目前的使用效果非常好，不仅性能表现出色，而且使用体验也不错。尽管在使用的过程中，我们也遇到了一些问题，但这些问题往往源于我们对框架实现的不熟悉。...当我们在 iframe 中，使用 document.querySelector查找 #app 的 DOM 时，它只能在 iframe 中查找（副作用留在 iframe 中），但 UI 是渲染到 webComponent...但这是有方法解决的。...style = document.createElement('style') style.type = 'text/css' style.styleSheet.cssText = css head.appendChild...(style)}在 iframe 中使用 document.head，需要用 Object.defineProperty 挟持 document 的 head 属性，将其重定向到 shadowRoot
说实话接到这个需求心中一惊，感叹这个想法真是大胆呀，但作为打工人，秉承着只要思想不滑坡，办法总比困难多的打工魂，即使是刀山也得上呀，历经几日的摸索调研，发现其实 VUE 一早就支持了这么做，只不过时过境迁...渐进式其实指的在一个已存在的但并未使用 vue 的项目上接入 vue，使用 vue，直到所有的 HTML 渐渐替换为通过 vue 渲染完成，渐进开发，渐进迁移，这种方式在 vue 刚出现那几年比较多，现在或许在一些古老的项目也会出现...另外一点也需要注意，这种方式也是无法在容器组件中使用 template 定义渲染模板的，因为如果在 template 中写 style 标签会出现以下编译错误，但 style 标签是必须的，需要为自定义组件提供...iframe 是否跨域由 iframe 的 src 的值决定，设置同域的 src 或不设置 src 均符合同域策略，否则是跨域。...为了使 css 变化后也引发重绘，在计算属性component中也绑定了 css 的值，但这对于新建 vm 实例这个字段是无用的，也可以通过 watch css 的方式实现 接下来考虑错误处理，对于 iframe
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型...9、HTML5的离线储存怎么使用，工作原理能不能解释一下？ 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。...: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: //offline.html...sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。...使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以绕开以上两个问题。 13、Label的作用是什么？
也就是说，远程帧中不包含对应帧在渲染过程中需要任何有用信息。 与之相反，本地帧Local Frame包含了对应frame的「所有数据」(DOM树和样式数据)转化为可以渲染和显示的东西所需的所有信息。...元素的一部分」 ❞ 通常情况下，每个元素只有一个片段，但如果在渲染管道中绘制Paint阶段被分割Split到不同的页面，则会有更多的片段。...我们可以通过尽可能多地「重复使用」以前的树的部分来实现这一点。 内联Lnline片段信息 「内联内容」使用一个稍微不同的表示方法。我们使用一个扁平化flat的「列表」来表示内联内容。...」 行内文本:drawTextBlob命令在(8,8)处绘制Hello world文本信息 在上面的例子中，绿色 div 在 「DOM 顺序」中位于蓝色 div 之前，但 「CSS 绘制顺序」要求负 z-index...「渲染通道不包含任何像素信息」；相反，它有关于在哪里以及如何绘制每个quad所需像素输出的指示。
根据 Winter 老师比较喜欢学习的办法：“学习一样新知识时，先找一个线索”，凡是对于编程语言，都会先从它的语法去了解它。 所以 CSS 也不例外，它也有自己的一套语法体系。...但是总体来讲是一个不错的起点，让我们可以先开始认识 CSS 的语法基础。 这里的语法是使用 “产生式” 来表达的。...CSS3 标准来表述它 就是 css page 3 它主要是给我们需要打印的页面所使用的 理论上这个叫做分页媒体，其实主要的分页媒体就是打印机 我们的页面是不会有分页的 @counter-style:...所以现在基本上不推荐使用 support 来检查 CSS 兼容性 因为我们检查的那个属性，比我们 support 这个规则兼容性要更好，所以根本检查不了 估计可能 4～5年后，CSS 新出来的新特性我们再用...但是我们发现整个的 CSS 标准是散落在几份标准当中的，为了我们更好的阅读标准，我们想拿到一份比较完整的标准列表是需要我们做一些工作的。很多时候我们都是需要在零散的标准里面，去搜集一些共性的内容。
[endif]--> 如何区分HTML5： DOCTYPE声明新增的结构元素功能元素 HTML5的离线储存怎么使用，工作原理能不能解释一下？...，操作window.applicationCache进行需求实现 CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css...，但比cookie大得多，可以达到5M或更大 有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 sessionStorage 数据在当前浏览器窗口关闭后自动删除...缺点： iframe会阻塞主页面的Onload事件 搜索引擎的检索程序无法解读这种页面，不利于SEO iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载 使用iframe...如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题 优点： 用来加载速度较慢的内容（如广告） 可以使脚本可以并行下载 可以实现跨子域通信
:hover 引起的颜色等不导致页面回流的 style 变动。...避免在 CSS 中使用运算式：学习 CSS 的时候就知道，这个应该避免，不应该加深到这一层再去了解，因为这个的后果确实非常严重，一旦存在动画性的 repaint/reflow，那么每一帧动画都会进行计算...---- HTML5 的离线储存怎么使用，工作原理能不能解释一下 ？ 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。...css/style.css NETWORK: resourse/logo.png FALLBACK: //offline.html 3、在离线状态时，操作 window.applicationCache...如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。 ---- Label 的作用是什么？是怎么用的 ？
有一些同学在写爬虫的时候，过于依赖 Selenium，觉得只要使用模拟浏览器，在不被网站屏蔽的情况下，就可以爬到任何内容。 今天我们不讨论字体反爬虫和 CSS 反爬虫这两种情况。...我们来看一段非常简单的网页。这个网页只有一个HTML 文件，不加载特殊字体，不加载 CSS 文件。 ? 这个网页的奇怪之处在哪里呢？...但不同的是，iframe被嵌入的地址需要额外再搭建一个 HTTP服务，而 shadow DOM 可以只嵌入一段 HTML 代码，所以它比 iframe 更节省资源。...' 而这个被嵌入的影子标签，就像 iframe 一样，是无法直接使用 Selenium 提取的。...我们来看一段可以正常工作的代码： shadow = driver.execute_script('return document.querySelector(".content").shadowRoot
但是在响应式网页设计中，服务器向所有设备展现的HTML代码都是相同的，仅通过使用CSS用于改变设备上页面的呈现方式。...因此，对于大于600px的界面，我们的column元素的宽度相对其父元素的50％。 虽然媒体查询对于响应式网页设计是必不可少的，但许多其他新的CSS功能也在浏览器中得到广泛采用和支持。...在响应性网页设计方面，Flexbox是这些新的重要CSS功能之一。 什么是Flexbox？ 首先，让我先告诉你“ Flexbox能做什么”。 使用CSS垂直居中的最简单方法是什么？...> 我们使用上面的代码完成了以下工作： display: flex在我们的main容器元素中建立一个...好的，了解了上面的一些内容后，想必我们已经对响应式Web设计有了一些了解了，那么我们如何测试已经完成的工作呢？
我不建议在生产中使用它，因为音频可能还会被 元素或 JavaScript 进行控制。...像这样： embed { display: none; } button:active + embed { display: block; } <button...大约一年前，我用这种技术开发了一种仅使用 HTML 和 CSS 的 CodePen 小型钢琴(https://codepen.io/alvaromontoro/pen/ejwXJm)。...浏览器支持 与许多类似的 hack 技巧一样，这个功能的支持也不是很好，并且随浏览器的不同而有很大差异。 在 Opera 和 Chrome 浏览器上，它能够工作。...总的来说，这是有趣的 CSS 技巧，不过却是一种“不要用在发布的产品中”的事情…… ? 原文：https://css-tricks.com/playing-sounds-with-css/ ?
今天我们不讨论字体反爬虫和 CSS 反爬虫这两种情况。我们来看一段非常简单的网页。这个网页只有一个HTML 文件，不加载特殊字体，不加载 CSS 文件。 这个网页的奇怪之处在哪里呢？...但不同的是，iframe被嵌入的地址需要额外再搭建一个 HTTP服务，而 shadow DOM 可以只嵌入一段 HTML 代码，所以它比 iframe 更节省资源。...' 而这个被嵌入的影子标签，就像 iframe 一样，是无法直接使用 Selenium 提取的。...我们来看一段可以正常工作的代码： shadow = driver.execute_script('return document.querySelector(".content").shadowRoot...要特别注意的是，拿到shadow-root节点以后，只能通过 CSS 选择器进一步筛选里面的内容，不能用 XPath，否则会导致报错。
已应用补丁 ## 旁路-1 客户对像iframe script. 所以获取文件内容并不像之前那么简单。 我能够使用image标签和其他使用src属性的标签在我的服务器上接收回调。...我没有选择余地，然后想起了 Nahamsec 的精彩演讲。下面的视频 在这里，Ben 谈到了style标签 (CSS) 上缺少验证。我也试过了。 我尝试使用style, import,link标签。...style我使用了下面的有效负载（标签内的 HTML ）并且它有效！...h1taginjection ## 最终修复 在又一个补丁和更多编码之后，我尝试了各种标签，但没有成功。
接下来，我们使用 标签来声明按钮，并使用 style 属性来设置按钮的样式。 接着，添加了 onClick 属性并将解构的 onClick props 传递给它。...效果如下： 添加 Iframes 我们将使用内联框架 (iframe) 来显示在编辑器中输入的代码的结果。...Iframes 如何在 React 中工作 iframe 通常与纯 HTML 一起使用。将 iframe 与 React 一起使用不需要很多更改，主要是将属性名称转换为驼峰式。...使用 iframe 时，我们可以在页面上嵌入外部网页或呈现指定的 HTML 内容。要加载和嵌入外部页面，我们将使用 src 属性。...但有一点值得注意，就是我们不希望在每次输入时都重新渲染组件，这就涉及到后续优化的地方。
接下来，我们使用 标签来声明按钮，并使用 style 属性来设置按钮的样式。 接着，添加了 onClick 属性并将解构的 onClick props 传递给它。...Iframes 如何在 React 中工作 iframe 通常与纯 HTML 一起使用。 将 iframe 与 React 一起使用不需要很多更改，主要是将属性名称转换为驼峰式。...使用 iframe 时，我们可以在页面上嵌入外部网页或呈现指定的 HTML 内容。 要加载和嵌入外部页面，我们将使用 src 属性。...在我们的例子中，我们使用它来允许脚本在我们的 iframe 中使用 allow-scripts 值运行。 因为我们正在使用 JavaScript 编辑器，所以这会很快派上用场。...但有一点值得注意，就是我们不希望在每次输入时都重新渲染组件，这就涉及到后续优化的地方。
，JavaScript原生支持 结构化克隆算法：可以打包常见的JS对象，postMessage使用的算法 二进制格式：性能很高，比如我的Zipack，但需要引入额外的包 下面介绍2种方法（可能性），可以让父页面以最大的自由度读写...，可以这样： iframe.contentDocument.querySelector('nav').style.display='none'; 想点击某个按钮（button元素）： iframe.contentDocument.querySelector...iframe暴露JS和CSS接口 如果不幸父页面和iframe不同域，那只能通过跨域的方式传序列化数据：父页面向子页面postMessage传值，子页面监听message事件。...比如希望传递一份CSS字符串，覆盖iframe中的样式： iframe.contentWindow.postMessage({ type: "css", content: `...=== 'css') { const style = document.createElement('style'); style.innerHTML = event.data.content
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
