写一个跨浏览器的下拉菜单，本地调试一切正常，上线后却在某个浏览器里错位两像素；想确认一个 CSS 属性到底哪些版本支持，搜到的答案一半是三年前的博客，一半是没有标注日期的问答帖。前端这类细碎问题，靠搜索拼凑答案的成本很高：同一个接口在不同浏览器里的行为差异、某个特性从哪个版本开始可用、废弃写法该换成什么，都需要一个能持续维护的参照物。MDN Web Docs 就是这样的参照物，它把 HTML、CSS、JavaScript 与 Web API 的说明按规范组织起来，每个条目都附浏览器兼容性表与可运行的示例代码。本文会讲清它的文档结构、兼容性表怎么读、教程路径适合哪个阶段的人，以及免费阅读与订阅增值功能之间的边界。
MDN Web Docs是什么？
MDN Web Docs 是一套面向 Web 开发者的技术文档库，由 Mozilla 发起并长期维护，内容由社区贡献者共同编写，覆盖 HTML、CSS、JavaScript、Web API、HTTP、无障碍与 Web 开发教学。它的骨架是 Web 标准本身：一个接口的说明会同时给出语法、参数、返回值、异常、示例、规范出处与浏览器支持情况，读者可以顺着链接直接读到对应的规范章节。与零散的教程站相比，它的特点是条目之间互相引用、术语统一、每个参考页都带兼容性数据和最后更新时间，适合当成查询工具长期使用，而不是一次性读完的课程。
核心功能
对需要反复确认接口行为的人来说，MDN 把”查一次文档”压缩成两三次点击：从技术分类进入条目，看语法与示例，再拉到兼容性表确认版本，整个过程不需要跳转到别的站点。
- 分层文档树——按 Web 技术、指南、教程、术语表四类入口组织，从概念下钻到具体接口，不用在站内反复搜索。
- 浏览器兼容性表——每个参考页底部列出各浏览器与版本的支持状态，判断某个特性能否上线时不必再翻第三方统计站。
- 页面内可运行示例——参考页的代码块能直接在页内展开执行，改一行参数就能看到结果，省掉本地搭环境。
- 学习区教程——从环境准备到做出一个页面、再到脚本与框架接入，按模块排好顺序，适合跟着从头走一遍。
- 术语表——把 CORS、事件循环、闭包这类名词单独成条，遇到陌生概念可以先查词再读正文。
- 页面目录锚点——长文档顶部列出本节内容，跳转到某个小节不用一路滚动。
- 多语言版本——中文页与英文页可互相跳转，遇到翻译滞后时能立刻切回原文对照。
- 贡献者与更新记录——页面末尾标注最后更新时间，判断一条说明是否跟上了新规范。
使用场景
下面几类人把 MDN 当成日常工作的查询入口，而不是学习阶段才打开的教程站。区别在于使用频率：有人一天开十几次，有人只在遇到兼容性问题时来一趟。
| 人群/角色 | 场景描述 | 推荐指数 |
|---|---|---|
| 前端开发者 | 上线前核对某接口在目标浏览器的最低版本，直接引用兼容性表结论 | ★★★★★ |
| 后端转前端 | 补齐 HTML 语义与事件模型的基础，按学习区顺序走一遍 | ★★★★★ |
| 移动端与跨端开发者 | 查 WebView 里可用的 API 边界，避开只在桌面端成立的写法 | ★★★★☆ |
| 技术写作者 | 核对术语的标准译法与规范出处，让文档表述统一 | ★★★★☆ |
| 计算机专业学生 | 做课程项目时查标签与接口，示例代码可直接改造 | ★★★★☆ |
操作指南
不用注册就能读全部文档，注册只影响集合、Playground 分享与 AI 辅助这类附加功能。刚开始用建议按下面的顺序走，三五分钟就能把入口记住。
- 打开 MDN Web Docs，首页顶部有 HTML、JavaScript 两个直达入口，其余技术从 Web 技术 进入。
- 在顶部搜索框输入接口名或属性名，例如 fetch，下拉结果会区分参考页、指南与教程。
- 进入参考页后先看 本文内容 目录，确认这一页讲的是语法还是用法，避免读到不相关的章节。
- 找到 试一试 区域，改一行参数看输出变化；示例支持切换 JavaScript、CSS 结果面板。
- 拉到 浏览器兼容性 表，按目标浏览器筛选版本，注意表格下方的脚注说明部分支持的情形。
- 需要系统学习时走 学习 Web 开发，从模块一顺序推进，每节都有小练习。
- 想保存常用条目或使用不限量的 AI 辅助，再考虑注册账号并查看 MDN Plus 的套餐对比。（中文页顶部可切到英文原文，新规范条目优先更新英文版。）
支持平台
以网页端为主，桌面浏览器与手机浏览器都能正常阅读，窄屏下侧边栏收起为抽屉式目录，代码块横向滚动查看。页面是静态文档，弱网环境下加载后仍可继续阅读，不依赖实时接口。站内没有独立的桌面客户端与移动应用，也不提供浏览器扩展；需要离线查阅时，可借助浏览器的阅读模式或把页面另存为本地文件。其余端与工具支持情况以官网当前说明为准。
产品定价
文档阅读、站内搜索与浏览器兼容性查询全部 免费，也不要求注册账号。需要附加功能时可选择 MDN Plus 订阅：核心版免费，包含最多 3 个集合、每日 5 次 AI 辅助问答与示例分享；Plus 5 每月 5 美元，Supporter 10 每月 10 美元，两档都含去广告、集合数量不限、更新筛选与不限量 AI 辅助，后一档另有新功能优先体验。按年付费可省两个月，具体金额与条款以官方订阅页为准。
常见问题
Q：浏览 MDN 会收集我的个人信息吗？
阅读公开文档不需要登录，也不需要填写任何资料，站内不会因为你未登录而埋点追踪个人身份。若注册账号并使用订阅功能，账号与支付信息由 Mozilla 的账号体系托管，页面提供的遥测设置可以关闭使用数据上报，具体条款以站点的隐私声明为准。
Q：MDN 收费吗？
阅读、搜索、兼容性表与示例运行都不收费，也不存在按次查看的限制。收费只针对 MDN Plus 的去广告、不限量 AI 辅助、集合与更新筛选等附加能力，个人学习用免费的核心版已经够用。
Q：中文内容完整吗，需要注册才能看吗？
主要条目都有简体中文翻译，新规范与小众接口的中文页可能滞后，页面顶部可随时切到英文原文对照，不影响阅读。浏览与搜索都不需要注册，注册只影响集合保存、示例分享与 AI 辅助的每日额度。
开发者小结
MDN 的价值在于把规范翻译成可查、可验证的条目：兼容性表让上线判断有据可依，页内示例省掉搭环境的步骤，术语表把零散概念收拢成索引，更新记录则提醒你哪条说明已经过时。它适合需要长期核对接口行为的前端与跨端开发者，也适合刚入门、需要一条清晰路径的人。边界同样清楚：站内不做完整项目实战，构建工具、状态管理这类框架层问题要回到框架自己的文档；中文页存在翻译滞后，冷门接口只有英文。把它当成查询工具与规范索引，而不是系统课程，预期就不会落空。
相关导航
