YianNotes

:has() 是 CSS 的 父选择器，能够让父元素根据子元素的状态（如 hover）来改变自身样式。 基本用法123.parent:has(.child:hover) { background-color: gold; /* 父元素的背景变为金色 */} .parent：父元素类名； .child：子元素类名； 当 .child 被 hover 时，.parent 会变为金色。 特点 CSS 父选择器：这是一个让父元素根据子元素状态变化的原生方法。 简洁：相比 JavaScript，纯 CSS 代码实现，易于理解和维护。 链式选择：不仅支持 hover，还可以配合其他状态（如 :focus、:checked 等）。 支持情况 Chrome：从 105 版本开始支持； Safari：从 15.4 版本开始支持； Edge：从 105 版本开始支持； Firefox：暂时不支持，计划未来支持。 优点 简洁：用 CSS 解决问题，无需 JavaScript。 性能：CSS 性能优于 JavaScript，且无需额外的事件监听。 语义清晰：代码更简洁、...

🔧 核心技术关键词前端/浏览器技术123456789101112// 代码编辑和执行- CodeMirror- Monaco Editor (VS Code 内核)- Ace Editor- Prism.js (代码高亮)// 执行环境- IFrame sandbox- Web Workers- Service Workers- WebAssembly (WASM)- Shadow DOM 代码执行引擎123456- Code Sandbox- Code Execution Engine- REPL (Read-Eval-Print Loop)- Jupyter Kernel- Node.js VM module- Pyodide (Python in Browser) 🛡️ 安全隔离关键词1234567- Sandboxed Execution- Code Isolation- Capability-based Security- Resource Quotas- Docker Containerization- Kubernetes Pods- Firecr...

Web Storage API 提供了在浏览器端存储数据的功能，分为两种存储方式：localStorage 和 sessionStorage。它们各自有不同的特点和应用场景，下面是详细总结： 1. localStorage：持久化存储 持久性：数据会永久存储，直到显式删除。即使浏览器关闭，数据依然存在。 作用范围：同源（同协议、同域名、同端口）的多个页面之间都能访问。 存储大小：通常约 5MB，具体大小依赖于浏览器。 API 操作： 存储数据：localStorage.setItem('key', 'value') 读取数据：localStorage.getItem('key') 删除数据：localStorage.removeItem('key') 清空所有数据：localStorage.clear() 适用场景： 用户偏好设置（如语言、主题、布局等） 存储长期的用户数据（如用户名、登录信息等） 避免重复请求数据，减少网络开销 示例：123456789// 存储数据localStorage.setI...

wget下载网络数据 示例用法 下载整个网站 1wget -r -np -k -p https://example.com 该命令将递归下载网站并保留页面中所有的资源（图片、样式表、脚本等），确保你能够离线查看该网站。 Let’s Encrypt ｜ Certbot 生成 ssl 证书 Consul 服务注册 服务发现 Corepack JavaScript 包管理器的管理器 管理项目中的包管理器的版本

css描边有很多种实现方式，svg是我用过比较好用的效果，其次是叠起来的形式，上层卡片压住下层卡片 下层卡片设置上渐变 就有渐变卡片的效果了有时间完善的写上几个实例

1. Grid 到底解决什么问题在网页里，布局工具大致有三类思路： 普通文档流：元素从上往下排 Flex：一维布局，主要处理“一行”或者“一列” Grid：二维布局，同时处理“多行 + 多列” ([MDN Web Docs][1]) 所以一句话记住： Flex 适合排一条线，Grid 适合排一张网。 例如： 导航栏一排按钮：Flex 更顺手 整个页面分头部、侧边栏、主内容、底部：Grid 更合适 商品卡片九宫格：Grid 更合适 仪表盘模块布局：Grid 更合适 2. Grid 的核心思维Grid 的本质就两步： 先把父元素定义成网格容器 再定义列、行，以及子元素怎么摆进去 最基础的写法： 123.container { display: grid;} 只要写了这个，.container 就成了 grid container，它的直接子元素就变成 grid items。Grid 是通过 display: grid 启用的。 3. 最小可运行示例先看最简单的例子： 123456<div class="container&quo...

Concept list 获取Selection Selection 对象 Document execCommand 已废弃 Range 对象 Lib Slate tiptap prosemirror Quill lexical Selecion 和 Range 1️⃣ 基本概念 概念 说明 Selection 表示用户当前“选中了什么”的对象，是浏览器提供的接口。通过 window.getSelection() 获取。 Range 描述“从哪到哪”的精确范围对象，是底层数据结构。用于实际操作 DOM。 2️⃣ 核心关系 🔗 Selection 持有 Range，Range 定义选区内容 Selection 是“容器”或“视图” → 用户看到的高亮 Range 是“数据”或“工具” → 程序用来操作的内容 一个 Selection 可以包含多个 Range（但大多数浏览器只支持一个） 💡 不是 Selection 创建 Range，而是： 用户操作 → 浏览器创建 Range → 放入 Selection 程序创建 Range → ...

1. 什么是 SPA？ SPA（Single Page Application） 是一种 Web 应用架构，整个应用只有一个 HTML 页面（通常是 index.html），所有页面内容通过 JavaScript 动态加载和更新，无需重新加载整个页面。 2. SPA 的核心思想 页面跳转 = JavaScript 执行 + DOM 更新 不通过传统方式请求新 HTML 文件 所有“页面变化”由 JS 控制，体验像原生 App 3. SPA vs 传统多页应用（MPA） 对比项 SPA（单页应用） MPA（多页应用） 页面数量 1 个 HTML 多个 HTML 文件 页面跳转 JS 动态更新内容，不刷新 请求新 HTML，页面刷新 首次加载 较慢（需下载 JS） 较快（直接显示） 后续交互 极快（无刷新） 每次都刷新 SEO 较差（需 SSR/SSG 优化） 较好 适用场景 后台系统、Web App 博客、文档、简单网站 4. SPA 的工作流程12345671. 用户访问 / → 服务器返回 index.html2....

状态机的核心思想状态机的核心思想就是 将行为的判断集中控制，并且通过明确的状态和状态之间的转换来管理系统的行为。 在传统的编程中，尤其是有多个状态的系统，往往会在代码中出现很多条件判断（如 if-else 或 switch）来决定当前状态下应该执行什么操作。而使用状态机的方式，我们将这些条件判断集中管理，通常通过一种结构化、明确的方式来定义每个状态及其可能的行为和转换规则。 核心概念 状态：系统可以处于的不同状态（例如，Pending、Paid、Shipped、Delivered）。 状态转换：从一个状态到另一个状态的转移（例如，从 Pending 到 Paid，从 Paid 到 Shipped）。 行为：当系统处于某个状态时，它执行的操作或行为（例如，当订单状态是 Paid 时，系统可以触发发货操作）。 状态机的作用：通过控制和管理状态之间的转换规则和行为，使得状态管理变得清晰、统一、可扩展。 为什么状态机有效？ 集中控制行为： 所有的状态和行为都被集中管理，你不再需要在程序中到处写 if-else 或 switch 语句来判断当前状态。 每个状态下的行为都被明确地定义在状...

方括号[] 动态属性访问 obj[key] 表达式计算键名 数组访问 arr[0] 索引本质是字符串 计算属性名{ [key]: value }动态生成属性名（ES6） 解构赋值 const [a] = [1] 提取数组或对象的值 正则表达式字符集合/[aeiou]/匹配一组字符 类数组操作arguments[0] 类似数组的访问方式 SymbolSymbol 是 ES6 引入的一种 ​​ 基本数据类型，用于表示 ​​ 唯一的、不可变的值 ​​。 同步循环阻塞微队列：无限循环问题分析问题代码12345678910111213141516171819202122function* generator() { const value = yield Promise.resolve(1); const value2 = yield Promise.resolve(value); const value3 = yield Promise.resolve(value2); return value3;}function run(generator) {...