飞鲤的自留地

我做第一个网站时，配色是这样的：蓝色标题、白色背景、灰色正文。 不是因为这样好看——是因为我根本不会配色。大学设计课的配色理论我全部还给老师了，唯一记住的就是”蓝色代表专业”。 后来我学会了用一些工具来辅助配色，才慢慢不再害怕”选颜色”这件事。 一句话理解： 好的网页配色不是靠天赋，是靠工具和规范——2026 年的 CSS 甚至可以直接帮你做颜色计算。 2026 年 CSS 颜色的变化OKLCH：人眼感知更均匀的颜色空间传统 RGB/HSL 有一个问题：颜色的”亮度”变化在人眼中是不均匀的。比如同样 lightness: 50%，黄色的感觉比蓝色亮得多。 OKLCH 解决了这个问题——它基于人眼感知来设计的颜色空间： 12345/* OKLCH 色彩空间 */.element { background: oklch(70% 0.15 200); /* ↑亮度 ↑彩度 ↑色相 */} color-mix()：用 CSS 混合颜色以前混合颜色需要设计师在 Figma 里调，或者用 Sass 的 mix() 函数。现在 CSS 原生支持了：...

五六年前，我还在相信”做了 SEO，流量自然就来了”这句话。 结果呢？我花了一个月研究关键词、堆砌 Meta 标签、到处发外链——最后网站每天的 IP 从 5 涨到了 8。 后来我换了一种思路：不再研究”搜索引擎喜欢什么”，而是研究”用户需要什么”。 结果呢？现在这个博客每天有稳定的自然搜索流量，而且我几乎没做过传统意义上的”SEO”。 一句话理解： 2026 年的流量获取，靠的不是”技巧”而是”价值”——你为用户创造了价值，搜索引擎自然会让更多人看到你。 最重要的三件事（按重要性排序）1. 内容质量 > 一切Google 在 2024 年推出了 SGE（Search Generative Experience），2026 年它的核心算法已经完全变了。传统的”关键词密度”、”外链数量”等排名因素权重大幅下降，取而代之的是 E-E-A-T（经验、专业、权威、信任）。 这意味着什么？ 12十年前：你写 10 篇 500 字的"优化的"文章，流量可能涨 20%2026 年：你写 1 篇 5000 字的"真正有价值"的文章，可能被 Googl...

面试前端的时候，有一个问题几乎必问——“GET 和 POST 有什么区别？” 我发现大部分人回答这个问题的时候，像在背一段写好的稿子： “GET 参数在 URL 里，POST 参数在 body 里……GET 会被缓存，POST 不会……GET 有长度限制，POST 没有……” 然后面试官追问一句：”那 HTTP 协议里 GET 和 POST 本质的区别是什么？” 对方愣住了。 一句话理解： GET 是”我去拿个东西”，POST 是”我送个东西过去并请你处理”——它们在 HTTP 协议层面的底层机制是一样的，但语义（以及随之而来的浏览器行为）完全不同。 先来涨涨知识：什么不是 GET 和 POST 的区别？网上流传的那些”区别”，大部分其实是浏览器的约定和习惯，不是 HTTP 协议本身的要求。 说法 实际情况 GET 参数在 URL，POST 在 body HTTP 协议没有禁止 GET 带 body，也没有禁止 POST 带 URL 参数 GET 有长度限制 HTTP 协议本身没有长度限制，是浏览器和服务器的实现约束 POST 更安全 参数不在 URL 上不等...

我前年帮一个朋友的电商站做安全审计，结果触目惊心： 密码用 MD5 存储（MD5 是什么水平的加密？2010 年就被破解了） 没有 CSP 头（攻击者可以直接注入任意脚本） 后台地址是 /admin（三天内被扫描到了 200 多次尝试登录） 文件上传不做类型校验（意味着上传一个 PHP 文件就能直接 getshell） 他说：”这样用了 5 年，没出过事啊。” 我说：”不是没出事，是还没有人认真地来搞你。“ 一句话理解： 网站安全不是”会不会被攻击”的问题，是”什么时候被攻击”的问题——你能做的，是让攻击者觉得搞你太麻烦，转而去找下一个目标。 OWASP Top 10：行业公认的安全清单OWASP（开放Web应用程序安全项目）每年发布一次 Top 10 安全风险列表。这是行业通用的安全参考标准。以下是 2026 年最需要关注的几类： 风险 严重程度 常见场景 注入攻击（含 SQL 注入） 🔴 高危 搜索框、登录框 认证失效 🔴 高危 弱密码、Session 固定 XSS（跨站脚本） 🔴 高危 评论区、用户输入展示 敏感数据泄露 🟡 中危 密码明...

很久以前我准备给网站上 CDN 的时候，有一个担心一直挥之不去： “用了 CDN，IP 就变了。搜索引擎会不会觉得我换了服务器？会不会影响排名？” 我在网上搜了一圈，发现有人信誓旦旦地说”千万别用 CDN，Google 会降权”，也有人反驳说”大站都在用，怎么没见降权”。 当时我选择相信了大站的那一边。事实证明——这个选择让我的网站变得更好，而不是更差。 一句话理解： CDN 不仅不影响 SEO，还会通过提升网站速度来正向影响排名——因为 Google 把网页加载速度作为排名因素已经快十年了。 CDN 到底做了什么CDN（Content Delivery Network，内容分发网络）的原理其实很简单： 把你的网站文件（图片、CSS、JS）复制到全球各地的节点服务器上，用户访问时从离他最近的节点拉文件。 12345没有 CDN：用户（上海）→ 直连你的源服务器（北京）→ 延迟 30ms有 CDN：用户（上海）→ CDN 上海节点（缓存了你的文件）→ 延迟 5ms 这个”就近访问”的机制，直接提升了 Core Web Vitals 中的 LCP（最大内容渲染）指标。 CDN 会影...

“我明明修改了 CSS，怎么刷新页面看不出来？” 这个问题，每个前端开发者至少遇到过一百次。 第一次遇到时，我以为自己没保存。确认保存了，还是没变。然后我按了个 Ctrl+F5——好了。 一句话理解： F5 是”有缓存的刷新”，Ctrl+F5 是”放弃所有缓存，全新加载”。 F5 和 Ctrl+F5 有什么区别 F5 Ctrl+F5 是否检查缓存 ✅ 是 ❌ 忽略所有缓存 资源加载 大部分返回 304（使用缓存） 全部返回 200（全新下载） 加载速度 快 慢一些 适用场景 日常刷新 调试修改后的代码 123456789F5 刷新：图片 A → 服务器返回 304 Not Modified → 浏览器使用缓存样式 B → 服务器返回 304 Not Modified → 浏览器使用缓存脚本 C → 服务器返回 304 Not Modified → 浏览器使用缓存Ctrl+F5 刷新：图片 A → 服务器返回 200 OK → 重新下载样式 B → 服务器返回 200 OK → 重新下载脚本 C → 服务器返回 200 OK → 重新下载 经验之谈：...

几年前我做了一个移动端页面，当时市面上流行的是”rem + JS 动态计算根字号”的方案。 那时我研究了一整天 rem 的计算公式，才把适配搞定。几个月后重新翻项目，发现自己写了一堆分辨率的 media query 和 JS 计算代码。 现在回头看，那些代码已经可以全部删掉了——因为 CSS 已经用新的特性覆盖了这些需求。 一句话理解： 移动端前端开发的核心就是三件事——适配不同屏幕尺寸、触控交互优化、性能与缓存。 2026 年移动端适配方案1. 视口设置1<meta name="viewport" content="width=device-width, initial-scale=1.0"> 注意：不要再加 user-scalable=no 了！ 这是 WCAG 无障碍标准的违规行为——用户需要能放大页面来看小字。 2. 用 clamp() 替代 rem 计算1234567891011121314/* ❌ 旧方案（2020 年前） */html { font-size: calc(100vw / 18);
...

我刚开始做网站的时候，被 H1 标签怎么用这个问题困扰了很久。 去网上搜，说法五花八门：”首页 H1 要放网站名”、”文章页 H1 要放文章标题”、”一个页面只能有一个 H1”、”HTML5 可以有多个 H1”…… 更让我迷惑的是——同一套说法，换个网站看，结论居然相反。 后来我才搞明白：很多人对 H1 的理解还停留在 20 年前的 HTML4 时代。HTML5 把规则改了，但大部分教程没跟着改。 一句话理解： H1 是页面内容的”标题”，告诉搜索引擎和用户”这一页在说什么”——每个页面应该有且只有一个 H1。 先纠正几个常见的错误认知错误 1：首页不应该用 H1这个说法非常普遍——“首页 H1 留给文章内容页用”、”首页用 logo 代替 H1 就行”。 但你知道吗？百度、Google 的首页都有 H1。 它们用 <h1> 包裹了”百度一下”和”Google”这个品牌标识。当然，它们不会傻到只写个 logo，而是把 h1 和 a 标签结合，既有品牌含义又对搜索引擎友好。 123456<!-- 一个合理的首页 H1 结构 --><header>...

我第一次听说”脚本语言”和”编译语言”的区别时，对方说了一句话让我彻底糊涂了： “JavaScript 是脚本语言，Java 是编译语言，但 Java 同时也可以被解释执行。” ……所以到底什么是什么？ 后来我才明白，“标记/脚本/编译”这个三分法其实很粗糙， 它更像是”一个大概的分类”，而不是一个严格的科学定义。 一句话理解： 标记语言描述”长什么样”，脚本语言和编译语言描述”怎么做”——区别在于脚本语言即写即用，编译语言需要先翻译成机器码再跑。 标记语言：给内容贴上标签标记语言的核心功能不是”做运算”，而是”描述内容的结构和展示方式”。 12<!-- HTML 是在说：这是一个段落，里面的文字加粗 --><p>这是一个<strong>加粗</strong>的文字</p> 12345<!-- XML 是在说：这是一条数据，包含名字和年龄 --><person> <name>飞鲤</name> <age>28</age>&l...

有一回面试前端，面试官问我：”你说一下 <meta> 标签有哪些用法？” 我当时心想，这还不简单——“charset、keywords、description、viewport……” 然后我说了四个之后卡住了。 面试官微微一笑：”那你知不知道 theme-color 和 color-scheme？” 我说我确实不知道。那次面试我挂了，但那之后我花了一个下午把 MDN 上关于 meta 的文档全部过了一遍，整理了一份清单。这个习惯我一直保留到现在——任何时候觉得自己”知道”，就去翻一遍 MDN，总有你没见过的 tag。 一句话理解： <meta> 是网页的”元数据层”，它告诉浏览器、搜索引擎、和各种第三方工具”这个页面是谁、该怎么对待它”。 怎么分组理解 Meta 标签Meta 标签看起来多，其实可以分成 6 组，每组 2-5 个标签。分组记忆法比死记硬背好用得多。 1. 基础元数据（每页必加）12345678<!-- 字符编码：一定要在 head 的第一行 --><meta charset="utf-8"><...