免费起步做网页，可以用代码编辑器编写 HTML/CSS/JavaScript，用设计工具先完成页面结构与视觉稿，再用浏览器调试和部署服务发布。Pixso适合网页界面、组件和协作交付，可从网页设计工具开始。软件免费不等于网站上线零成本：域名、托管、团队席位或商业授权可能需要单独付费。
1. 文本编辑器
写网页代码时，文本编辑器负责 HTML、CSS 与 JavaScript 的编写；选择时重点看语法提示、调试和版本控制支持。
1.1 Visual Studio Code（VS Code）
Visual Studio Code（VS Code）是微软提供的代码编辑器，适合编写 HTML、CSS、JavaScript，并通过扩展支持更多语言。
VS Code 提供语法高亮、代码补全、调试器、集成终端和 Git 支持，可在 Windows、macOS 和 Linux 上使用。编辑器可免费使用；扩展由不同开发者提供，选用前应分别了解其功能与付费条件。
1.2 Sublime Text
Sublime Text 是侧重文本编辑与快捷操作的商业编辑器，可下载评估，持续使用需要购买许可证。它适合偏好轻量编辑流程的开发者，不属于永久免费工具。
Sublime Text 支持分栏编辑、多重选择和 Goto Anything 快速导航，便于查找文件、符号和代码位置。额外的代码检查或版本控制功能可以通过扩展补充。
1.3 Atom
Atom 曾是 GitHub 的开源编辑器，支持包管理和多窗口编辑，但项目已停止维护，不应作为新项目的主要编辑器。历史项目若仍使用 Atom，应先迁移到仍有安全更新的编辑器，并保存好现有配置。
2. 图形设计工具
网页视觉部分需要图形设计工具来创建页面结构、图像和图标；下面先看可协作的界面设计工具。
2.1 Pixso
Pixso是浏览器中的界面设计与协作工具，适合把网页页面、组件和交互状态先整理成可讨论的设计稿。它承担的是设计与交付环节，不等同于代码编辑器或网站托管平台。
用组件和自动布局搭建页面结构，邀请团队成员评审，再把标注、资源与设计说明交给开发。页面内容较多时，先在同一画布里统一导航、卡片和按钮规则，能减少后续页面的重复调整。
Pixso提供免费方案。个人尝试可以先用免费方案开始；团队加入成员、增加文件或使用 AI 时，应把所需席位、容量与用量同价格页中的方案范围对应起来。
网页设计需要素材或结构参考时，可在 Pixso 资源社区选择相关内容，再调整为自己的页面布局。
需要图标等辅助资源时，可按当前任务选择插件；设计稿中的素材仍需分别检查使用范围。
2.2 Adobe XD
Adobe XD 可用于已有 XD 文件的界面设计和原型维护，并与 Photoshop、Illustrator 等工具配合。Adobe 已将 XD 置于维护状态，仍维护此类项目的团队需要关注已有文件访问和后续迁移安排。
2.3 Figma
Figma 支持在浏览器中设计界面和多人实时协作，也提供桌面应用，适合团队共同编辑和评审网页设计稿。
Figma 的组件、样式和原型功能可以帮助团队统一页面规则；导入 Sketch 文件后，应检查字体、组件和效果是否符合交付需要。免费方案与团队方案的范围不同，协作规模扩大时要另行核算成本。
2.4 Sketch
Sketch 的设计编辑应用主要面向 macOS，网页端可供团队查看、反馈与交付设计。需要在 Windows 上直接编辑设计稿时，应先考虑其他编辑工具。
Sketch 支持组件、共享样式与实时协作。设计师可在支持的 Mac 应用中共同编辑 Workspace 文档，再通过浏览器与其他成员沟通；购买前要区分 Mac 编辑许可与团队协作需求。
2.5 InVision Studio
InVision 的设计协作服务已停止运营，不适合作为新网页项目的工具选项。仍保存 InVision Studio 历史文件的团队，应先整理可访问的源文件和导出资源，再安排迁移。
3. 网页开发框架
选择开发框架时，要结合项目规模、团队语言和部署环境，而不是把框架当成可视化网页编辑器。
3.1 React.js
React 是用于构建用户界面的 JavaScript 库。它把页面拆成可复用组件，适合交互较多、状态变化频繁的网页应用。
React 可以把导航、表单和卡片等界面单元写成组件，复用于不同页面。状态变化后，React计算需要显示的内容并更新 DOM。完整项目还需要结合路由、数据请求和构建部署方案，并不是把设计稿放进去就能自动生成网站。
3.2 Angular
Angular 是用于构建 Web 应用的前端框架，提供组件、模板、依赖注入和路由等能力，适合需要统一开发约定的项目。
Angular 以组件组织界面，组件通常包含 TypeScript 类、HTML 模板与样式。选型时重点看团队是否熟悉 TypeScript，以及是否需要一套统一的路由、表单和依赖管理方式。
3.3 Vue.js
Vue 是渐进式 JavaScript 框架，可通过组件组织网页界面，也适合逐步增强已有页面的交互。
Vue 可以从简单的页面交互开始，再配合路由、状态管理和构建工具扩展到完整应用。小型页面不必一次引入所有配套工具；多人项目则需要明确组件组织与数据管理规则。
4. 浏览器开发工具
调试网页时，浏览器开发者工具可以检查元素、网络请求、脚本和性能；它与代码编辑器配合使用。
4.1 谷歌 Chrome 浏览器
Chrome DevTools 是 Chrome 内置的网页调试工具，可检查元素样式、网络请求和 JavaScript 执行情况，与代码编辑器配合使用。
在 Chrome DevTools 中，可以临时修改元素样式、模拟不同屏幕宽度、查看请求耗时，也可以设置断点并逐步调试脚本。临时改动不会自动写回项目源码，确认方案后要回到代码文件保存。
📍适用于：Web 开发、调试和性能优化。
📍功能：元素检查、网络分析、控制台调试、性能分析等。
4.2 Mozilla Firefox 浏览器
接下来是 Mozilla Firefox 浏览器。Firefox 除了提供与 Chrome 类似的页面审查和脚本调试功能外，还有许多出色的 CSS 开发工具。
Firefox Developer Tools 有一款独特的 Grid Inspector 工具，专门用于帮助开发者理解和调试 CSS 网格布局。此外，该工具的 Flexbox Inspector 也是调试弹性布局的有力工具。如果你是一名注重样式开发的前端开发者，Firefox 的开发者工具将会是你的得力工具。
📍适用于：Web 开发、调试和性能优化。
📍功能：类似于 Chrome 的开发者工具，包括元素检查、网络分析、控制台调试等。
4.3 配合调试：Visual Studio Code
VS Code 可与浏览器配合调试前端代码，但它本身是编辑器，不是浏览器内置的开发者工具。需要把页面中的问题定位到源码时，可使用其调试能力。
VS Code 支持语法高亮、代码片段、自动补全、Git 整合等诸多特性。它还有一款强大的调试工具，支持断点、条件断点、内联值查看等多种调试方式。另外，VS Code 的扩展商店中有大量的插件供你选择，你可以根据自己的需要安装不同的插件来增强该工具的功能。
📍适用于：Web 开发、前端开发。
📍功能：内置代码编辑器，支持多种编程语言和插件。适用于 HTML、CSS、JavaScript 等。
5. 版本控制系统
代码开始多人协作后，需要版本控制系统跟踪变更、分支和回退；它不负责页面视觉设计。
5.1 Git
Git 是常用的分布式版本控制系统，用于记录代码变更并支持多人协作。
Git是一个分布式的版本控制系统，这意味着每个开发者在本地都有一个完整的项目副本。这样的设计使得开发者可以在离线情况下工作，并通过各种命令来查看历史记录、创建分支、合并更改等。除此之外，Git具有高效的性能和强大的灵活性，无论是处理大型网页开发项目还是复杂的代码库，这个工具都能游刃有余。
5.2 Mercurial
接下来要说的工具是 Mercurial。Mercurial也是一个分布式版本控制系统，但它的设计原则是简洁和易用。
Mercurial 支持提交历史、分支、合并和冲突处理，适合已经采用该工作流的团队。选择它或 Git 时，优先看团队经验、现有仓库和托管环境，而不是单凭命令数量判断学习难度。
5.3 SVN（Apache Subversion）
最后让我们看看 SVN（Apache Subversion）。不同于Git和Mercurial，SVN是一个集中式版本控制系统。
在 SVN 中，修改提交到中央仓库，成员获取工作副本并更新代码。它支持原子性提交、路径权限和目录版本管理，适合已有集中式版本管理流程的项目；并不只适用于小团队。
6. 网页浏览器
完成页面后，要在不同浏览器中检查布局、脚本和兼容性；下面列出常用浏览器。
6.1 Google Chrome
Google Chrome 是常用的网页浏览器，可用来检查桌面和移动尺寸下的页面表现。
Chrome 使用 Blink 渲染引擎和 V8 JavaScript 引擎。开发网页时可利用 DevTools 检查布局、脚本和网络；测试仍应覆盖目标用户使用的其他浏览器，不能只在 Chrome 中通过就认为完全兼容。
6.2 Mozilla Firefox
接下来我们来看看 Mozilla Firefox。Firefox 是一款开源的网页浏览器，它强调自由和隐私保护。
Firefox 由 Mozilla 维护，提供增强型跟踪保护和 Cookie 管理功能。网页开发仍需关注目标用户的版本与隐私设置，检查登录、表单和跨站资源能否正常工作。
6.3 Microsoft Edge
最后我们要说的是 Microsoft Edge。Edge 是 Microsoft 推出的新一代浏览器，该工具基于Chromium内核，整合了Microsoft服务，兼具速度和兼容性。
Microsoft Edge 基于 Chromium，可用于检查 Windows 环境下的页面与交互。在企业仍依赖旧系统时，IE 模式需要相应配置；现代网页应优先采用标准 Web 技术，不依赖旧版 IE 行为。
7. 服务器和后端技术
需要服务端交互时，再选择运行环境、后端框架和服务器部署方式；这些工具不替代前端设计。
7.1 Node.js（使用Express框架）
首先，我们要谈论的是基于Google V8引擎运行的JavaScript运行环境Node.js。
Node.js 让开发者使用 JavaScript 编写服务端程序，其异步 I/O 机制适合网络服务。Express 可帮助组织路由与中间件；网站涉及登录、表单或数据接口时，还需要处理身份验证、错误响应和部署配置。
7.2 Django（使用Python）
接下来我们要谈论的工具是Django。Django是一个用Python编写的开源web应用框架。
Django采用MVT（模型-视图-模板）设计模式，框架齐全，提供了从数据库操作、会话管理到模板系统等一系列功能，可以帮助你快速构建高质量的web应用。另外，由于该工具使用了Python这种语言，因此代码清晰，易读，易学。
7.3 Ruby on Rails
最后，我们将讨论的工具是Ruby on Rails。Rails是一个使用Ruby语言编写的开源web应用框架。
Ruby on Rails也称为Rails或RoR，采用MVC（模型-视图-控制器）架构模式。Rails的哲学是“约定优于配置”，即它提供了一套默认的最佳实践，让你可以少做决策，更专注于应用本身的开发。同时，该工具拥有强大的社区支持和丰富的插件库。
8. 数据库
网页需要保存和检索数据时，再根据数据结构、查询复杂度与团队经验选择数据库。
8.1 MySQL
MySQL是一个开源的关系型数据库管理系统(RDBMS)，它使用SQL（结构化查询语言）作为接口语言。
MySQL 支持事务、索引、视图和存储过程等能力，常用于需要结构化数据与关系查询的 Web 项目。选择时应根据表结构、查询和运维条件判断。
8.2 PostgreSQL
PostgreSQL 是开源的对象关系型数据库，支持复杂查询、事务、多版本并发控制，以及数组和 JSON 等数据类型。项目需要扩展能力时，还可以使用自定义函数与类型。
8.3 MongoDB
MongoDB是一种面向文档的数据库（Document-oriented database），它不同于前面提到的关系型数据库。
MongoDB 使用 BSON（二进制文档格式）存储数据，应用层常以类似 JSON 的文档结构读写。它适合文档结构与业务对象匹配的场景；是否采用它，应根据查询方式、数据关系和运维需求判断，而不只看数据量大小。
9. 网页性能优化工具
上线前可以用性能工具检查加载速度、可访问性、SEO 和移动端表现，再按报告修复问题。
9.1 Google PageSpeed Insights
Google PageSpeed Insights是一款由Google提供的免费工具，它可以分析网页内容，并提供优化建议来提升网页加载速度。
PageSpeed Insights 同时提供 Lighthouse 实验室检测，以及数据充足时的真实用户体验指标。实验室性能分数不是按网页体积单独计算，也不代表全部真实访问体验；可以结合加载、交互与布局稳定性问题安排优化。
9.2 Lighthouse
Lighthouse是Google开发的另一款开源自动化工具，旨在帮助开发者改进网页质量。
Lighthouse 可检查可访问的网页，生成性能、可访问性、最佳实践和 SEO 等报告。它帮助定位待修问题，不能代替真实设备测试；PWA 类别已从 Lighthouse 12 移除。
10. 集成开发环境（IDE）
项目规模较大、需要多语言调试或完整构建流程时，可以选择集成开发环境（IDE）。
10.1 Visual Studio
Visual Studio 是集成开发环境，适合需要完整编译、调试与测试流程的项目，可通过工作负载支持不同语言和应用类型。
Visual Studio 提供代码补全、调试、测试及项目管理能力，可与 Azure、SQL Server 等工具配合。它与 VS Code 是不同产品；个人或团队使用 Community 等版本时，应先确认对应的许可条件。
10.2 Eclipse
接下来，我们将介绍工具Eclipse。Eclipse是一款广受欢迎的开源IDE，原生支持Java，并通过插件支持其他众多编程语言。
Eclipse的优势在于其极高的可定制性和强大的插件系统。用户可以根据自己的需求选择和安装不同的插件，以满足特定的开发需求。此外，该工具还提供了丰富的代码管理工具，如Git集成、版本控制等，这对于团队合作或大型项目开发非常有帮助。对于网页开发而言，Eclipse提供了多种Web开发插件，支持HTML、CSS、JavaScript等前端技术。
开始时不必装齐所有工具：先用设计稿明确页面，再选择一个编辑器和所需技术栈，借助浏览器调试并用版本控制保存修改。完成后把前端产物部署到托管环境；涉及后端和数据库时，还要配置服务、访问权限与备份。若要横向比较设计软件、代码工具和建站平台，可继续阅读网页制作软件分类对比。
