YianNotes

“property”（属性）和“attribute”（特性/属性）这两个术语经常被使用，有时可以互换，但在不同语境下有明确的区别 Attribute vs Property 完整总结核心概念 Attribute（特性）: HTML 标签上的属性 Property（属性）: DOM 对象上的属性 根本区别 特性 Attribute Property 归属 HTML 标签 DOM 对象 值类型 总是字符串 任意 JS 类型 大小写 不敏感 敏感 操作方式 getAttribute()/setAttribute() 点符号操作 布尔属性 存在即为真 true/false 操作示例1<input id="myInput" type="text" value="初始值" checked custom-attr="自定义" /> 12345678// Attribute 操作element.getAttribute("value"); /...

tsc 作用是 检查类型 和 编译成 js . 为了更好地控制编译行为（比如目标 JS 版本、是否严格检查类型等），建议创建一个配置文件。 target 作用： 指定编译后的 JavaScript 目标版本。 常见值： “ES3”（最老，兼容性最好，但功能少） “ES5”（经典，兼容所有浏览器） “ES2015” 或 “ES6”（现代浏览器支持） “ES2016”、”ES2017”、”ES2020”、”ESNext”（最新语法） module 作用： 指定模块系统的代码生成格式。 常见值： “commonjs” → 用于 Node.js（使用 require / module.exports） “es2015” / “esnext” → 用于浏览器（使用 import / export） “amd”、”umd” → 用于老项目或库打包 strict: true 作用： 开启所有严格类型检查模式 outDir 作用： 指定编译后生成的 .js 文件输出到哪个文件夹 rootDir: “./src” 作用： 指定源码结构的根...

display: contents 是 CSS Display Module Level 3 中引入的一个比较特殊且强大的值。它的作用是：让一个元素本身不产生任何盒模型（即不渲染），但它的子元素会像直接继承了该元素的父元素一样正常渲染。 简单来说：这个元素“消失”了，但它的孩子“冒出来”代替它参与布局。 🔍 一、基本语法123.element { display: contents;} 🧩 二、核心特性 特性 说明 不渲染自身 元素本身不生成任何视觉框（box），即没有背景、边框、大小、定位等。 子元素“提升” 子元素直接参与父元素的布局，仿佛父元素不存在。 保留语义和 DOM 结构 DOM 节点仍然存在，JavaScript 和 CSS 选择器仍可访问它。 不影响可访问性（需注意） 屏幕阅读器仍能读取内容，但布局上“跳过”了该层。 ✅ 三、实际例子示例 1：display: contents 的效果123456<div class="parent"> <div class=&qu...

1. 浏览器真正关心的是数据，而不是流程不要记： 12345678910DOM↓Layout↓Paint↓Composite 应该记： 12345678910DOM Node │ ▼LayoutObject │ ▼PaintArtifact │ ▼CompositorFrame 每一步都是： 输入 → 计算 → 输出新的数据。 2. 每个阶段负责什么① DOM Node职责： 保存 HTML 结构 父子关系 属性(Attribute) 例如： 1<div>Hello</div> 对应： 12Node(div)└──Node(text) DOM 不负责： x y width height 绘制 ② Style（Computed Style）职责： 保存元素最终样式。 例如： 1234background:red;color:white;width:100px;font-size:16px; 这里只负责： 元素应该长什么样。 不负责： 放在哪里。...

Github workflow 语法 适用场景：CI/CD 自动化构建、测试、部署等文件位置：.github/workflows/xxx.yml语法格式：YAML（注意缩进，通常为 2 空格） 一、基本结构123456789101112131415name: 工作流名称（可选）on: [触发事件] # 必需jobs: job1: runs-on: 运行环境 steps: - step1 - step2 job2: needs: job1 runs-on: ubuntu-latest steps: - step3 二、核心字段详解1. name（可选） 定义工作流在 GitHub Actions 面板中显示的名称。 示例： 1name: CI Pipeline 2. on（必需） 定义触发工作流的事件。 常见事件： push：代码推送 pull_request：PR 创建/更新 schedule：定时任务（cron） workflow_dispatch：手动触发 示例123...

一、三大核心属性 属性 作用 是否必须 类比 perspective 设置观察者距离，开启 3D 视觉空间 ✅ 必须（父容器） 摄像机离场景多远 transform-style: preserve-3d 让子元素的子元素进入 3D 空间，不被压扁 ✅ 嵌套 3D 时必须 打开“3D 结界” backface-visibility: hidden 元素背面朝你时自动隐藏 ✅ 翻转/立方体时必须 纸牌转过去就消失 二、核心概念解析1. perspective（透视） 作用：决定透视的强烈程度 perspective: 200px → 近，透视强（夸张） perspective: 1000px → 远，透视弱（平缓） 必须加在父容器上，不能加在变换元素自身 123.scene { perspective: 800px;} 2. transform-style: preserve-3d 默认是 flat → 子元素被压扁到父平面,换言之就是子元素应用 3d 效果看不出来，比如 translateZ 就和 scale 看不出区别...

简述 通过 dockerfile 构造镜像 通过镜像文件构造容器 运行 docker 容器 常用命令🧰 一、镜像相关（Images） 命令 说明 docker images 查看本地所有镜像 docker pull 镜像名:标签 从仓库下载镜像（如 docker pull nginx:alpine） docker build -t 镜像名:标签 . 用当前目录的 Dockerfile 构建镜像 docker rmi 镜像名或ID 删除镜像（-f 强制删除） docker image ls 同 docker images docker image rm 同 docker rmi 示例1234docker pull ubuntu:20.04docker build -t my-app:v1 .docker imagesdocker rmi my-app:v1 📦 二、容器相关（Containers） 命令 说明 docker run [选项] 镜像名 [命令] 创建并启动一个容器（最常用！） docker start 容器名/...

场景在 mac 上打包 docker 镜像导出到 liunx 的主机上运行报错架构不同的问题 原因默认情况下，Docker 会根据当前主机的架构构建镜像。也就是说，如果你在一个 x86_64 架构的机器上构建镜像，那么 Docker 会生成适用于 x86_64 架构的镜像；如果你在一个 arm64 架构的机器上构建镜像，Docker 会生成适用于 arm64 架构的镜像。 不过，你可以显式地指定要为其他平台构建镜像，使用 --platform 选项。例如： 构建特定平台的镜像：12docker build --platform linux/amd64 -t myimage .docker build --platform linux/arm64 -t myimage . 使用 docker buildx 构建多平台镜像：docker buildx 是 Docker 提供的一个扩展命令，支持多平台构建。你可以用它来为多个平台构建镜像，同时也支持将镜像推送到 Docker Hub 或其他容器镜像仓库。 首先，确保启用了 buildx，可以通过以下命令查看： 1docker buil...

一、Git 的核心概念Git 是一个分布式版本控制系统，它通过记录文件的快照（snapshot） 而不是差异，来管理代码的历史变化。 1. 四大核心对象 对象 作用 特点 Blob 存储文件内容（不包含文件名） 内容相同 → 哈希相同 Tree 存储目录结构（文件名 + 指向 blob 或子 tree） 目录的“快照” Commit 代表一次提交，指向一个 tree，记录作者、时间、消息和父提交 历史的“节点” Tag 指向某个 commit 的固定引用，用于标记版本（如 v1.0） 不会移动 ✅ 所有对象都通过 SHA-1 哈希唯一标识。 二、暂存（add） git add 的作用 核心功能：将工作目录中的文件变更添加到暂存区（index） ，为下一次提交准备内容。 本质操作： 读取文件内容 → 生成 Blob 对象 → 更新 .git/index 文件。 结果：暂存区记录了“下一次提交”的快照。 暂存区（index） 存放的目录是最新的 commit 的 tree 目录和 add 的 三、提交（Commit）与快照 每次 git co...

模态和非模态模态对话框（Modal Dialog） 阻止背景交互：当模态对话框打开时，它会阻止用户与对话框之外的应用程序其他部分进行交互，直到对话框被关闭。 强制用户响应：通常用于需要用户必须完成或取消某个操作才能继续的情况，比如确认删除、填写重要信息等。 示例：浏览器中的 alert()、confirm()、prompt() 都是模态的。 非模态对话框（Non-modal Dialog） 允许背景交互：非模态对话框打开时，用户仍然可以与应用程序的其他部分进行交互，对话框不会阻止用户操作其他部分。 不强制立即响应：通常用于提供辅助信息或工具，用户可以不理会它而继续其他工作，比如查找/替换对话框、调色板等。 属性closedby any closerequset none 一种是轻量级关闭用户操作 ，即当用户点击或轻触对话框外部时， 会自动关闭一种是平台特定的用户操作 ，例如在桌面平台上按下 Esc 键，或在移动平台上执行“返回”或“关闭”手势。一种是开发者指定的机制，通过 JavaScript 调用 close() 方法，或者通过 form 的提交 any: 任...