前言
前端开发的网站又多又散，收藏夹越堆越乱。本文按”导航网站 → 工具网站 → 资源网站 → 知识点网站“四类整理，只收录当前可正常访问的站点，帮你一站式解决”找网站、用工具、拿资源、查知识”四个需求。
正文
一、前端导航网站
不用一个个记网址，收藏一个导航站就够：
| 网站 | 链接 | 说明 |
|---|---|---|
| 小呆导航（前端版） | webjike.com/web.html | 收录数百站点，26 个前端子分类，学习/框架/工具/素材全覆盖 |
| JavaSoho 前端导航 | javasoho.com | 手册、工具、框架、博客、教程分类极全，前端导航标杆 |
| 技术加油站·前端导航 | zh-shan.github.io/sites.html | 80+ 站点，含 UI 库/构建工具/图形动效/设计资源 |
| 极客导航 | w3cschool.cn/nav | 程序员综合导航，前端只是其中一块 |
| 编程导航（鱼皮） | codefather.cn | 一站式编程社区，10 大技术方向 + 学习路线 + 面试题库 + 面经内推 |
| 程序员导航网 | haonav.cn | 程序员工作学习导航，汇聚常用网址与工具 |
| 前端开发资源整理大全 | CSDN 161454978 | 2026 系统整理，HTML/CSS/JS/工程化完整导航（收藏 7、点赞 7） |
二、工具网站
开发过程中即开即用，无需安装：
工具导航（一个站搜罗海量工具）
| 网站 | 链接 | 说明 |
|---|---|---|
| 开发者工具导航 | tools.hn24365.com | 精选 400+ 全栈开发工具，20+ 分类，前端/后端/DevOps/设计全覆盖 |
综合工具箱（一个站装下几十个工具）
| 网站 | 链接 | 说明 |
|---|---|---|
| 程序员在线工具（87 个本地优先） | 腾讯云开发者 | JSON/正则/Cron/JWT/AI 工具等 7 大类 |
| 在线工具箱 | xmhky.com | JSON/时间戳/哈希/正则/二维码/图片压缩，无需注册 |
| 在线工具箱（纯前端） | myybox.cn | 纯前端运行数据不上传，隐私安全 |
JSON 专项
| 网站 | 链接 | 说明 |
|---|---|---|
| jsondev | jsondev.cn | JSON 格式化/解析/转换 + 加密解密等 |
| WeJSON | wejson.cn | 无广告，42 种 JSON 工具 |
其他高频工具
| 网站 | 链接 | 说明 |
|---|---|---|
| 正则测试 | regex101.com | 正则调试 + 解释，全语言支持 |
| Can I use | caniuse.com | 查 API/CSS 浏览器兼容性 |
| 代码对比 | Text Compare | 文本 diff 对比，改 bug 排查利器 |
| 时间戳转换 | tool.lu/timestamp | 时间戳在线转换 |
| 代码格式化 | prettier.io/playground | Prettier 在线格式化 |
三、资源网站
资源导航（一个站收齐各类素材）
| 网站 | 链接 | 说明 |
|---|---|---|
| 奈思设计导航 | nav.niceui.cn | 收录 556 个设计/素材站点，灵感、图标、字体、配色全覆盖 |
| 知几设计导航 | zhijdesign.com | 设计资源导航，含灵感/UI/UX/图标/字体/配色/动效/设计系统 |
图标
| 网站 | 链接 | 说明 |
|---|---|---|
| iconfont 阿里图标库 | iconfont.cn | 国内最大矢量图标库，SVG 下载 |
| Iconify | icon-sets.iconify.design | 20 万+ 图标集合，支持任意框架 |
配色
| 网站 | 链接 | 说明 |
|---|---|---|
| 中国色 | zhongguose.com | 中国传统色，中文配色灵感 |
| Coolors | coolors.co | 一键生成配色方案，空格随机切换 |
字体与图片
| 网站 | 链接 | 说明 |
|---|---|---|
| Google Fonts | fonts.google.com | 免费开源字体库 |
| 100font 免费商用字体 | 100font.com | 国内免费商用字体集合 |
| picsum 占位图 | picsum.photos | 随机占位图，开发测试必备 |
其他资源
| 网站 | 链接 | 说明 |
|---|---|---|
| Unpkg / jsDelivr | jsdelivr.com | 免费 CDN，前端库快速引用 |
四、知识点网站
系统学知识、查 API 的权威入口：
| 网站 | 链接 | 说明 |
|---|---|---|
| MDN Web Docs | developer.mozilla.org | Web 技术权威文档，HTML/CSS/JS 全覆盖 |
| 现代 JavaScript 教程 | zh.javascript.info | 全球最流行的 JS 系统教程中文版 |
| 阮一峰 ES6 教程 | es6.ruanyifeng.com | ES6 标配工具书 |
| Vue 官方中文文档 | cn.vuejs.org | Vue 权威文档 + 互动教程 |
| React 官方文档 | react.dev | React 新版官方文档 |
| TypeScript 官方文档 | typescriptlang.org | TS 权威手册 |
| Quick Reference | quickref.cn | 编程语法速查表，碎片复习用 |
| 前端工程师手册 | frontendmasters.com | 各大主题速查手册（英文） |
五、面试题网站
求职刷题、模拟面试专用：
| 网站 | 链接 | 说明 |
|---|---|---|
| 前端进阶之旅（poetries） | interview.poetries.top | 最全面的前端面试题库，按 JS/CSS/框架/工程化分类刷题 |
| 前端面试题每日一题 | feinterview.poetries.top | 每日一题，碎片时间打卡 |
| 面试鸭 | mianshiya.com | 2026 最新企业真题 + 详细答案解析，在线刷题 |
| 牛客网·前端题库 | nowcoder.com | 校招/社招真题，大厂笔试题库 |
| LeetCode | leetcode.cn | 算法刷题，前端面试算法题也常出自这里 |
六、使用建议
- 导航站留 1~2 个：小呆导航或 JavaSoho 做主力，编程导航（codefather）补学习路线和求职，其余网站都能从它跳过去
- 工具导航留 1 个：开发者工具导航（400+ 工具）可替代零散收藏的单个工具站
- 资源站按需收藏：iconfont（图标）+ 中国色（配色）+ picsum（占位图）是最高频三件套
- 知识点站全留：MDN + 现代 JS 教程是地基，框架文档跟着自己技术栈收藏
- 面试题站选 2 个：poetries 题库（系统刷）+ 牛客/面试鸭（刷真题）
- 定期清理：网站会改版、停更，每季度点一遍，访问不了的及时替换
总结
前端网站收藏的黄金法则：导航站做总入口，工具导航收罗工具，资源导航收罗素材，知识点站打牢地基，面试题站备战求职。本文收录的站点均为当前可访问的主流选择，按上面”使用建议”各留几个核心的，收藏夹就能从”越堆越乱”变成”即点即用”。
内容由 AI 生成，仅供参考。本文发布于 码上学习，转载请注明出处。