查 API 、挑组件、复现 Bug 、压缩图片、排查兼容问题……前端开发的一天里，很多时间花在寻找合适的资料和工具上。把常用入口整理好，遇到问题时就能少绕一些弯路。

这份 2026 版清单收录了 100 个网站，分成 10 类：学习文档、框架工具、组件库、在线调试、包管理与协作、测试性能、设计配色、图标字体、图片与 CSS 工具、实战练习。每个网站都附上入口和使用场景，可以按当前需求收藏。

整理时间：2026 年 11 月。

一、学习与文档类网站

知识会更新，查阅资料也需要讲究方法。理解概念时看教程，确认行为时看文档，遇到版本差异时回到对应版本的说明。

1 、npmcn.com：npm 包中文文档 https://npmcn.com/

读 npm 包的英文 README 时，可以先到这里查看已有的中文文档。网站提供包搜索、中文简介、README 和原文切换，也能浏览热门中文包与最新中文包。它适合用来初步了解一个包，再对照原文确认 API 和配置。中文内容由自动翻译流程生成，可能有措辞偏差，当前也没有覆盖所有 npm 包。

2 、MDN Web Docs https://developer.mozilla.org/

查 HTML 、CSS 、JavaScript 和浏览器 API 时，优先打开这份参考资料。它把语法、示例与相关概念放在一起，适合解决具体问题，也适合沿着学习路径补齐前端基础。

3 、web.dev https://web.dev/

页面能运行之后，怎样让它更快、更易用？这里围绕性能、无障碍和跨浏览器体验提供课程与案例，适合把零散的优化技巧整理成可以执行的开发与检查流程。

4 、JavaScript.info https://javascript.info/

适合系统学习 JavaScript 。教程从语言基础延伸到对象、异步与浏览器交互，配有练习；遇到概念理解不牢的问题，可以顺着章节补课，再用练习检验自己是否理解。

5 、TypeScript https://www.typescriptlang.org/

类型报错看不懂时，官方手册和 Playground 很有用。可以把复杂类型缩成一小段代码，观察推断结果，再核对接口、泛型与配置的正式说明，适合团队统一写法。

6 、Can I use https://caniuse.com/

准备使用一个新 CSS 属性或浏览器能力时，先查支持表。它按浏览器和版本展示兼容情况，适合评估目标用户能否使用某项特性，再决定是否增加降级方案。

7 、CSS-Tricks https://css-tricks.com/

以 CSS 和前端实践文章见长的资料站，适合在处理布局、样式细节时寻找思路。阅读历史文章时，记得同时核对发布日期与浏览器支持，避免直接照搬旧时代的兼容写法。

8 、W3C WAI https://www.w3.org/WAI/

做无障碍不能只给图片补一个说明。WAI 汇集标准、设计开发指导和评估资源，适合检查键盘操作、内容语义与辅助技术体验，让产品的可用性有明确的参考依据。

9 、freeCodeCamp https://www.freecodecamp.org/

想边写边学，可以从它的 HTML 、CSS 、JavaScript 课程与项目练习开始。适合需要练习节奏的入门者，也适合用完整项目检查自己是否真正掌握了基础知识。

10 、roadmap.sh https://roadmap.sh/

当学习资料太多、不知道下一步学什么时，用路线图梳理知识位置。它提供前端等方向的学习路径、指南与课程，适合做查漏补缺清单，不必把每个节点都当成入职门槛。

二、框架与工程化类网站

框架解决不同的问题。选型前先看它的使用方式、渲染方案和部署要求，再决定是否适合当前项目。

11 、React https://react.dev/

学习 React 时值得反复查阅的官方入口，包含教程与 API 参考。适合从组件和数据流建立理解，再对照官方示例排查状态设计问题，减少仅靠复制片段拼页面的习惯。

12 、Vue.js https://vuejs.org/

Vue 官方站把快速上手、交互教程、示例和 API 放在同一入口，还能找到路由及状态管理生态。适合开发时按问题查文档，也适合给新人安排循序渐进的学习路径。

13 、Angular https://angular.dev/

需要理解一套完整应用框架时，可以从这里查组件、依赖注入、表单和路由。官网还有浏览器内教程，适合先做小实验，再判断 Angular 的组织方式是否适合团队项目。

14 、Svelte https://svelte.dev/

想体验以编译器为核心的组件开发，可以从交互教程和 Playground 入手。它用 HTML 、CSS 与 JavaScript 编写组件，适合做小型原型，也能继续学习 SvelteKit 应用开发。

15 、Next.js https://nextjs.org/

做 React 网站时，路由、服务端渲染和数据获取往往需要一起考虑。这里提供框架文档与学习材料，适合查清客户端和服务端的边界，再选择适合项目的页面组织方式。

16 、Nuxt https://nuxt.com/

Vue 项目需要页面路由、服务端渲染和数据获取时，可以先看 Nuxt 的约定。官方教程解释目录与自动导入等机制，适合搭应用原型，也适合查清框架替你处理了哪些工作。

17 、Astro https://astro.build/

建设博客、文档或内容型网站时值得了解。官网提供文档、主题、集成与示例入口，适合先围绕内容展示组织页面，再按需要加入交互，避免一开始就堆积复杂应用结构。

18 、Vite https://vite.dev/

前端项目遇到开发服务、构建配置或插件问题时，直接查官方指南更有效。它把配置与生态入口集中起来，适合搭建项目，也适合逐项理解现有工程中的构建约定。

19 、Tailwind CSS https://tailwindcss.com/

采用工具类写样式时，官方文档是常用速查表。适合确认布局、间距、响应式与状态变体的用法，再把重复组合抽成组件；先理解 CSS 行为，类名才不会变成新的记忆负担。

20 、Sass https://sass-lang.com/

维护较大的样式代码库时，可以用官方文档查变量、嵌套、混入和函数。它也解释如何组织与复用样式，适合接手已有 Sass 工程时厘清规则，再逐步整理重复代码。

三、组件库与界面开发类网站

做后台、搭表单、实现弹窗时，成熟组件能省去不少重复工作。挑选时也要考虑项目技术栈、主题定制和交互可访问性。

21 、shadcn/ui https://ui.shadcn.com/

适合想掌握组件源码、又希望有现成起点的项目。可以查看组件、区块和示例，把代码按自己的产品需求修改扩展。接手代码后，可以继续统一主题、补充业务交互，逐步形成自己的组件集合。

22 、Radix UI https://www.radix-ui.com/

自建 React 设计系统时，可以参考它的基础组件。Primitives 处理弹窗、菜单等交互中的键盘操作和焦点管理，同时保留样式控制权，适合在可靠行为之上实现自己的视觉设计。

23 、Ant Design https://ant.design/

制作 React 管理后台或业务界面时，可以集中查看组件 API 、交互示例和设计规范。适合统一表单、数据展示与操作反馈的表达方式，也方便团队按同一套约定协作。

24 、Element Plus https://element-plus.org/

Vue 3 项目常用的组件参考入口，提供设计指南、组件演示与资源。搭建后台页面时，可以先对照示例确定交互，再查看属性和事件，减少反复摸索组件默认行为的时间。

25 、MUI https://mui.com/

React 项目采用 Material Design 风格时，可以从组件、主题和布局工具入手。它也有面向复杂场景的扩展组件，选型时要区分基础库与商业产品，再按实际需求决定组合。

26 、Vuetify https://vuetifyjs.com/

希望 Vue 项目拥有一致的 Material Design 界面，可以查看它的组件与主题体系。适合先用现成规范搭建页面，再结合属性和插槽调整细节；查资料时注意对应项目使用的版本。

27 、PrimeVue https://primevue.dev/

Vue 业务应用需要多种交互组件时，可以用它查看示例和定制方式。适合从数据展示、输入和弹层等具体需求出发比较组件能力，再选择与项目风格匹配的主题方案。

28 、Headless UI https://headlessui.com/

想自己控制界面样式，又不想从头实现菜单和弹窗行为，可以看看这套无预设样式的组件。支持 React 与 Vue 的相应组件入口，适合配合 Tailwind CSS 组织产品交互。

29 、React Bootstrap https://react-bootstrap.github.io/

团队熟悉 Bootstrap 、项目又使用 React 时，这是便于衔接的文档入口。组件使用 React 方式实现，适合参考 API 和示例迁移界面；使用前应确认 React 与 Bootstrap 的版本组合。

30 、daisyUI https://daisyui.com/

已经使用 Tailwind CSS ，却想减少按钮、卡片等常见元素的样式重复，可以了解它的语义化组件类名。适合搭建统一风格的原型，再按产品需要调整主题和具体组件组合。

四、在线编码与调试类网站

想验证一个想法，或者让别人帮忙定位问题，可以先做一个最小示例。下面这些工具适合快速试验、分享和对照结果。

31 、CodePen https://codepen.io/

验证 CSS 动效、布局或小型交互时，在线编辑与即时预览很方便。它也能展示和分享作品，适合做最小示例、交流实现思路；把实验整理清楚后，再移回正式项目。

32 、CodeSandbox https://codesandbox.io/

需要快速搭建可分享的代码实验时，可以使用它的沙箱与模板入口。平台还提供隔离环境和 SDK ，适合前端原型、教学或工具集成；先按场景选择产品，避免混淆不同服务。

33 、StackBlitz https://stackblitz.com/

想把前端问题变成别人能直接打开的复现项目，可以从官方在线开发环境与模板入手。它支持前端和 Node.js 生态，适合文档演示、教学与问题沟通，也能研究 WebContainers 的能力。

34 、JSFiddle https://jsfiddle.net/

只想快速验证一段网页代码，不一定需要完整仓库。这个在线 Playground 适合缩小问题范围、展示效果和交流复现步骤；部分私密保存与扩展功能属于 PRO 服务。

35 、JS Bin https://jsbin.com/

适合把页面故障缩成一个可以分享的最小示例。把结构、样式和脚本放在独立面板，边修改边看预览，再把链接交给同事一起定位问题，讨论布局和交互时尤其直接。

36 、Babel REPL https://babeljs.io/repl

想知道新语法经过编译后变成什么，可以在这里对照输入与输出。适合学习语法转换、检查预设影响，或在调整构建配置前，用一小段代码验证自己的判断，减少盲目改配置的次数。

37 、regex101 https://regex101.com/

处理表单规则、日志字段或文本替换时，可以边写表达式边查看匹配与捕获组，并阅读语法解释。前端使用时先选 JavaScript 模式，再补上不该匹配的样例，避免规则只在演示数据里成立。

38 、RegExr https://regexr.com/

适合学习和调试正则表达式。输入文本后能即时查看匹配结果，悬停了解符号含义，还能把正例与反例组成测试。把规则发给同事讨论时，保存和分享功能能让双方使用同一组样本。

39 、Transform https://transform.tools/

把常见格式转换集中到一个入口，例如将接口数据生成类型定义，或把矢量图与网页片段转换成组件语法。适合减少重复录入；生成后仍要核对可选字段和数据含义，再纳入项目代码。

40 、JSON Crack htt