前端入门最该放在收藏夹的文档：MDN，免费且不用注册

学前端最大的障碍不是没有教程，而是教程太多、质量参差。真正值得放在收藏夹第一位的，其实是一个免费文档站 —— MDN Web Docs。

它是什么

MDN 由 Mozilla 维护，是 Web 技术（HTML、CSS、JavaScript 以及各种浏览器 API）的权威参考文档。它不只是 API 手册，而是一个「参考 + 教程 + 兼容性数据」的完整体系，社区和浏览器厂商都会参与其中。

它包含什么

• 完整参考：HTML 元素与属性、CSS 属性与选择器、JavaScript 语言与内置对象。
• Web API：DOM 操作、Fetch 网络请求、Canvas 绘图、本地存储等等，逐个接口说明参数与返回值。
• 成体系的教程：学习区里有从零开始的 HTML 入门、CSS 布局、JavaScript 编程，按顺序读完就是一条完整路径。
• 浏览器兼容性表：每个特性的页面里都有，写清楚在 Chrome、Safari、Firefox 和移动端各版本的支持情况 —— 这一块是它最有价值的部分之一。
• 进阶主题：HTTP、Web 安全、无障碍访问、性能优化，都有专门章节。

为什么它比「搜索到的零散博客」可靠

中文技术博客里的 API 说明，相当一部分是互相转载的，一个细节传错就会错一片，而且没人维护。MDN 的每个页面都有版本状态标记 —— 「实验性」的会明确标注，「已废弃」的也会写明替代方案。你照着它写，至少知道这个特性是不是稳的。

另外它的兼容性数据是同一份被多个开发者工具引用的公共数据源，比随手一搜的结果更靠近事实。

怎么用它效率最高

1. 需要查某个属性或方法时，直接搜「mdn + 名字」，页面通常排第一。也可以用它自带的搜索框，按 / 键可以快速聚焦。
2. 看参考页时先扫一眼顶部的状态提示：实验性（浏览器支持还不全）、已弃用（不该再用）。
3. 拿不准能不能用在生产环境，直接翻到「浏览器兼容性」，看目标浏览器的最低支持版本。
4. 示例代码可以复制到 CodePen 之类的在线编辑器里改一改，比只看不动手印象深得多。
5. 认真学一门技术时，走学习区里的成体系教程，而不是按关键词到处跳 —— 顺序错了，学起来会一直卡在「为什么这里要这么写」。

关于授权

MDN 的文档内容以 Creative Commons 授权发布（署名 — 相同方式共享），页面里的代码示例则采用更宽松的 CC0，可以视为公有领域，直接抄进你的项目没有版权顾虑。如果要整篇转载教程，需要按 CC 的规则注明来源和作者。

常见问题

有中文吗？
有简体中文页面，但翻译进度不完整，很多页面只有部分内容被译出。查关键 API 时建议中英文对照看，以英文页为准。

要注册吗？
阅读完全不需要。注册只在你想要贡献内容或收藏时才有意义。

能离线看吗？
社区有做离线包和镜像。不过技术文档迭代很快，更推荐在线看以保证是最新版本。

它只适合初学者吗？
不是。写了几年的开发者日常也一直在查它 —— 尤其是那些不常用但必须准确的属性和兼容性信息。

内容会不会过时？
页面会持续更新，但浏览器行为的变化有时更快。涉及浏览器兼容的关键决策，除了 MDN，最好再看一眼对应浏览器的官方发布说明。