这篇文章分三种方法讲：浏览器自带（单页面零门槛）→ 命令行工具（批量抓取灵活）→ 整站下载工具（图形化一键克隆）。最后单独说清楚一个很多人误会的事：什么代码能下、什么代码永远下不到、下了之后怎么用才不侵权。
一、先搞懂一个前提：你能下载什么，不能下载什么
很多人对"下载网站源码"有一个根本性的误解，以为点个按钮就能把整个网站连后端代码带数据库全搬下来。实际上：
一句话总结：任何在浏览器里"能看到"的代码和资源，都能下载。任何运行在服务器上的、浏览器看不到的东西，永远下不到。所以"下载淘宝的源码"这件事——你只能下载到淘宝的前端页面代码，淘宝的推荐算法、支付逻辑、商品数据库，你永远拿不到。
二、方法一：浏览器自带功能（适合下载单个页面，零门槛）
如果你只需要下载一个页面的源码来学习或参考，浏览器自带的方法就够了，不需要装任何软件。
① Ctrl+S 保存完整网页（最简单但最不完整）
在网页上按 Ctrl+S，保存类型选"网页，全部"，会生成一个HTML文件和一个同名文件夹（放CSS/JS/图片）。但这个方法有两个大问题：动态加载的内容保存不到（比如Ajax请求的数据、懒加载的图片），而且CSS/JS的路径可能出错导致打开后样式丢失。
② F12开发者工具 → Sources面板（手动逐个保存，最完整）
按F12打开开发者工具 → 点Sources标签 → 左侧能看到网站加载的所有文件（HTML、CSS、JS、图片、字体等）。右键任意文件 → Save as 就能保存到本地。优点是能看到所有文件，缺点是要一个一个手动保存，文件多了很累。
③ 浏览器插件（一键保存，最省事）
Chrome应用商店搜"Save All Resources"或"SingleFile"这类插件，安装后点一下就能把当前页面的所有资源（HTML+CSS+JS+图片）打包下载成一个ZIP文件。SingleFile还会把所有内容合并到一个HTML文件里，打开后和原网页一模一样。
三、方法二：命令行工具 wget / curl（批量抓取，适合开发者）
如果你想下载的不是一个页面，而是一个网站的一部分或整站（比如某个文档站的所有页面），命令行工具是最灵活的方式。门槛稍高，但可控性最强。
# 下载单个页面及所有关联资源（CSS/JS/图片）wget -p -k -E https://example.com/page.html# 镜像整个网站（递归下载，限制深度为3层）wget -r -l 3 -p -k -np https://example.com/# 只下载HTML文件，不下载图片和CSSwget -r -l 2 -A html https://example.com/docs/参数说明：-r 递归下载；-l 3 最多跟踪3层链接；-p 下载页面所需的CSS/JS/图片等资源；-k 转换链接为本地路径，保证离线打开正常；-np 不追溯到上级目录，防止下载整个服务器。Windows用户注意：wget默认没有，需要去这里下载Windows版，或直接用WSL。
wget 的优势是参数丰富、精确控制下载范围。缺点是对现代单页应用（SPA，比如Vue/React做的网站）无能为力——因为SPA的页面内容是JS动态渲染的，wget只能拿到一个空壳HTML。这时候就得用下面第三种方法了。
四、方法三：整站下载工具（图形化一键克隆，适合非技术人员）
如果你不想敲命令行，或者要下载的网站比较复杂（大量页面、大量资源），用专业的整站下载工具最省事。2026年主流的有这几个：
HTTrack 三步操作（最推荐，免费且功能最全）
- 新建项目：打开HTTrack → Next → 输入项目名称和保存路径 → Next
- 输入网址：选"Download web site(s)" → 输入目标网址 → Next
- 开始下载：点Finish开始。下载完成后，保存目录里就是一个完整的本地镜像，用浏览器打开index.html就能浏览
HTTrack 的几个关键设置：在第二步的"Set options"里，建议勾选"Use HTTP/1.1"（兼容性更好），在"Limits"里设置最大深度（建议3-5层，不然会无限制下载整个互联网），在"Links"里选"Get non-HTML files"确保图片和CSS也下载。下载速度可以调，但调太快容易被目标服务器封IP，建议保持默认。
五、下载后打开乱码/样式丢失/图片不显示？三步排查
下载完源码后最常遇到的问题：打开index.html发现页面一团糟。原因和解决方案：
问题一：CSS和图片路径是绝对路径，指向了原网站
很多网站的CSS引用是 /css/style.css 这种绝对路径。下载到本地后，浏览器会去找你电脑上根本不存在的 C:\css\style.css。解决方案：用HTTrack或wget的 -k 参数会自动把路径转成相对路径。如果已经下载了，可以手动把HTML里的 href="/css/ 替换成 href="css/。
问题二：动态加载的内容没下载到
如果是Vue/React/Next.js这类前端框架做的网站，页面内容全是JS动态渲染的。HTTrack和wget都抓不到JS渲染后的内容，只能拿到一个空壳 <div id="app"></div>。这种情况基本无解——你需要用Puppeteer/Playwright这类无头浏览器来渲染后再保存，门槛很高。
问题三：跨域资源被浏览器拦截
有些网站的CSS/JS/字体是从CDN加载的（比如cdn.example.com），下载工具可能没抓取这些跨域资源。检查方法：打开浏览器的Network面板，看哪些资源是红色的（加载失败），手动把这些URL的文件也下载下来放到对应目录。
六、下了源码之后：能做什么，不能做什么
这是很多人忽略但最重要的一节。代码下载下来了，然后呢？
法律红线：《著作权法》规定，未经许可复制、传播他人作品属于侵权。前端页面代码（HTML/CSS/JS）也是作品，受著作权保护。学习参考和直接商用之间有一条清晰的线：你看懂了再自己写，没问题；你复制粘贴改个logo就上线，就是侵权。2024年有判例，用盗版CMS系统做网站的公司被判赔128万——比你买正版贵几十倍。
七、四种场景，直接给方案
场景一：我就想看看某个网站的HTML和CSS是怎么写的
方案：按F12就够用了。Elements面板能实时看到DOM结构和CSS样式，Sources面板能看到所有源文件。没必要下载，直接在线看更方便，还能实时改CSS看效果。
场景二：我想把某个网页完整离线保存，发给别人看
方案：装个SingleFile浏览器插件，一键保存成单个HTML文件，打开和原网页一样。或Ctrl+S选"网页，全部"，把生成的文件夹打包发过去。
场景三：我想下载一个文档站或教程站的所有页面，离线看
方案：HTTrack。输入网址，设置深度3-5层，勾选"只下载本域名下的文件"，放一晚上就下载完了。文档站通常结构简单、没有复杂JS渲染，HTTrack完美胜任。
场景四：我想下载一个Vue/React做的网站，能行吗？
方案：很遗憾，常规工具几乎不行。SPA网站的内容全靠JS动态生成，HTTrack和wget拿到的是空壳HTML。如果你真的需要，得用Puppeteer（Node.js库）写脚本，启动无头浏览器渲染页面后再保存——这需要编程基础，而且耗时。大多数情况下，对于SPA网站，在线F12学习比下载更实际。
下载网站源码这件事，核心就三句话：浏览器能看到的，你都能下载；服务器上运行的，你永远拿不到。单页面用F12或浏览器插件，整站用HTTrack，现代SPA网站基本没法完整下载。下载下来的代码，学习参考没问题，直接拿去做商业网站就是侵权。搞清楚这些边界，你就能既不浪费时间、也不踩法律坑。
