飞鲤的自留地

有一回面试前端，面试官问我：”你说一下 <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"><...

我刚开始学前端的时候，有人告诉我：”用记事本写代码，才能真正理解 HTML。” 于是我真的用记事本写了两个月的代码…… 那两个月让我明白了一个道理：工具的简陋不会让你变得更厉害，只会让你更痛苦。 一句话理解： 记事本能写代码，就像你能用勺子吃牛排——不是不行，但不是最优选择。 2026 年的编辑器选择 编辑工具 类型 特点 适合 VS Code 代码编辑器 插件生态最强，免费开源 通用首选 Cursor AI 编辑器 VS Code 分支 + 内置 AI AI 辅助编程 Windsurf AI 编辑器 原生 AI 体验 AI 深度用户 Zed 代码编辑器 Rust 编写，极速启动 性能追求者 Sublime Text 代码编辑器 轻量快速 快速编辑 WebStorm IDE 功能最全 专业前端开发者 Neovim 终端编辑器 键盘驱动 Vim 爱好者 记事本的核心问题 问题 记事本 现代编辑器 语法高亮 ❌ 没有 ✅ 支持 代码补全 ❌ 没有 ✅ IntelliSense + AI 行号 ❌ 没有 ✅ 有 Tab 缩进 ...

你有见过那种 2000 年代初的网站吗？满屏的 <table> 嵌套 <table>，像俄罗斯套娃一样，一个表格里塞一个表格，再塞一个表格…… 我刚开始学做网页的时候，用的就是 table 布局。不是因为 table 布局好，是因为那时候我只知道这一种布局方式。 后来学了 CSS，才发现以前用 table 做的很多事，CSS 只需要几行代码就能搞定，而且更灵活、更高效。 一句话理解： <table> 是用来展示表格数据的，不是用来搭页面框架的——就像你不会用筷子喝汤一样，工具要用对地方。 Table 布局的问题在哪 问题 说明 代码臃肿 Table 布局需要大量嵌套标签，比 Flexbox/Grid 多出 50-70% 的 HTML 渲染阻塞 浏览器必须等整个 <table> 加载完才能开始渲染（包括内容） 响应式困难 表格天生定宽，要适配手机非常麻烦 语义错误 用 table 做布局等于告诉搜索引擎”这是数据表格”，影响 SEO 可维护性差 改一个地方的布局，可能要动十几层嵌套的 table 结...

我以前写过怎么修改 phpMyAdmin 的配置文件来突破上传限制——改 upload_max_filesize、改 post_max_size、改 max_execution_time…… 后来我发现一个道理：当一个工具要你改这么多配置才能用的时候，可能不是配置问题，是工具本身的问题。 一句话理解： phpMyAdmin 上传大文件的限制主要来自 PHP 本身的运行机制——而 2026 年，你完全可以用更好的工具来管理数据库。 传统方法：修改 phpMyAdmin 配置但首先，如果你还没法换工具，这里还是教你怎么改。 修改 PHP 配置（php.ini）123456; 找到这些参数并调大upload_max_filesize = 128M ; 文件上传大小限制post_max_size = 128M ; POST 数据大小限制max_execution_time = 600 ; 执行时间限制（秒）max_input_time = 600 ; 输入时间限制（秒）memory_limit = 256M ; 内存...

我刚开始做网站时，遇到过一件很丢人的事—— 把 index.html 上传到了主机，但怎么访问都是 403 Forbidden。 我一遍遍检查代码，没问题。检查权限，没问题。检查文件路径……等等，我上传到哪个目录了？ 后来问了人才知道：我把文件传到了 FTP 的根目录，但网站服务器的根目录是 htdocs——我传错文件夹了。 一句话理解： 网站根目录就是”当有人访问你的域名时，服务器去哪个文件夹找文件”。 不同环境下的根目录传统虚拟主机如果你用的是老式虚拟主机或云虚拟主机，常见的根目录名称： 服务商 根目录名称 阿里云/万网 htdocs/ 西部数码 wwwroot/ 或 web/ 新网 www/ 美橙互联 wwwroot/ 香港主机 通常有 DB/、LOG/、WEB/ 三个文件夹，WEB/ 才是 这些其实都是同一个东西——放 index.html、index.php 的地方。 经验之谈： 我第一次搞清楚这事是因为在主机控制面板里发现了一个”默认首页设置”——我才明白，根目录下没有 index.html 的话，服务器不知道展示什么，就给...

我早期做网站时，图标全部用的是图片——每个图标一张 PNG。 后来我发现了字体图标（Font Icon），感觉就像发现了新大陆：一套字体搞定所有图标，用 CSS 就能控制颜色和大小。 但字体图标也有它的问题。2026 年，我大部分项目开始转向 SVG 图标了。 一句话理解： 字体图标是把图标放进”字体文件”，用字符来显示；SVG 图标是用 HTML 标签直接画图标——各有优劣，看场景选择。 字体图标 vs SVG 图标 维度 字体图标 SVG 图标 渲染原理 字体渲染 矢量图形渲染 颜色支持 单色（或 CSS 渐变色） 多色、多层级 缩放 矢量，不失真 矢量，不失真 性能 好（字体文件一次加载） 好（每个图标独立加载） 可访问性 可用 aria-label 支持 title/desc 深色模式 通过 CSS 控制 通过 CSS 变量控制 CSS 控制 font-size/color width/height/fill/stroke 字体图标的时代Font Awesome 和 Iconfont（...

你应该猜不到，我第一次建站时犯的最蠢的错误是什么—— 所有图片链接全部写成了 http://localhost/images/abc.jpg。 上传到服务器后，所有图片全挂。因为服务器上没有叫”localhost”的东西。 一句话理解： 绝对路径告诉浏览器”从世界上哪里能找到这个文件”，相对路径告诉浏览器”相对于当前页面的位置”——能省事，但换个环境可能就断了。 绝对路径：从头到尾的完整地址绝对路径分两种： 12345<!-- 网络绝对路径 --><img src="https://6mal.com/images/logo.png"><!-- 本地绝对路径（专业开发者几乎不用，只在本机测试时偶尔出现） --><img src="C:/website/images/logo.png"> 网络绝对路径的好处是： 不管这个代码出现在哪（你的网站、别人的网站、RSS 订阅邮件），它都能正确加载。 缺点呢？换域名或迁移时就头疼了。 经验之谈： 我之前接手过一个项目，所有资源链接写死了 http://...

我学会做网页的第一步，不是看书，不是上课——是看别人的代码。 看到一个好看的布局，右键→”审查元素”，看它 CSS 怎么写。看到一个炫酷的动画，打开 Console 面板，看什么 JS 实现的。这个习惯一直保持到今天。 一句话理解： 查看网页源代码是”读”别人写好的代码，审查元素是”调试和修改”当前页面——两者都是前端开发者最基础、最好用的学习工具。 查看源代码 vs 审查元素 查看源代码 审查元素（DevTools） 看到什么 服务器返回的原始 HTML 当前 DOM 树的实时状态 能否修改 只能看，不能改 可以实时修改并看到效果 包含 JS 动态内容 ❌ 看不到 ✅ 能看到 快捷键 Ctrl+U（Win）/ Cmd+U（Mac） F12 或 Ctrl+Shift+I 查看源代码适合做什么 看网站用了什么 CMS 或框架（会留下 meta generator 标签） 看 SEO 标签是否完善（title、description、og 标签） 看页面结构是否语义化 审查元素适合做什么 调试 CSS：修改样式实时预览，不用刷新页面 调试布局：...

几年前我的一个小网站突然打不开了。 上去一看服务器——CPU 100%，带宽跑满，连接数爆表。登录 SSH 都卡得不行。 当时的感受就是四个字：束手无策。 我一直等，等攻击停了，才恢复正常。但接下来一周，同样的攻击来了三次。 那时候我才认真研究 DDoS 防御，发现了一个残酷的事实：个人站长在 DDoS 面前，和你网站的规模、技术实力没任何关系——只和你有没有上保护有关系。 一句话理解： DDoS 攻击不是”黑客攻破你的网站”，而是”黑客叫了一万个人堵在你店门口，真正的顾客进不来”。 什么是 DDoS 攻击DDoS（Distributed Denial of Service，分布式拒绝服务攻击）的原理很简单： 攻击者控制大量”肉鸡”（被感染的电脑、IoT 设备等），让它们同时向你的服务器发送请求——你的服务器处理不过来，正常用户就访问不了了。 传统上分为两类： 攻击类型 攻击层面 典型方式 网络层攻击（L3/L4） 带宽和连接 SYN Flood、ICMP Flood、UDP Flood 应用层攻击（L7） HTTP 请求 HTTP Flood、Slow...

说实话，我刚写网页那几年，整个页面全是 <div>。 不是我不想用别的标签，是我不知道它们有什么区别。article 和 section 看起来都像”区块”，div 又是最熟悉的”盒子”——选哪个好像没差。 后来我才发现，这不是一个样式问题，是一个意义问题。 一句话理解： div 是你告诉浏览器”这有个区域”，section 是”这有个主题区域”，article 是”这有个独立内容”——语义的强度从低到高。 先搞清楚：为什么要有语义标签HTML5 之前，整个网页就是一个 <div> 的海洋。 1234<div class="header">网站标题</div><div class="nav">导航</div><div class="content">主要内容</div><div class="footer">版权信息</div> 这能跑，但浏览器、搜索引擎、辅助工具（屏幕阅读器）完...