一、教程目标
本教程实现以下功能：
下载指定 URL 的 HTML 页面
自动下载页面中引用的：
- CSS 文件
- JS 文件
- 图片（img）
解析 CSS 文件中的：
- 背景图片（url(…)）
- 字体文件（@font-face）
将 HTML 和 CSS 中的外链资源全部修改为本地相对路径
最终生成一个可离线访问的网页目录
适合用于：
- 网页备份
- 离线浏览
- 页面模板保存
- 简单静态站点克隆
二、环境准备
1. Python 版本
建议使用 Python 3.7 及以上版本
2. 安装依赖库
pipinstallrequests beautifulsoup4三、完整代码（中文注释版）
importosimportrequestsfrombs4importBeautifulSoupfromurllib.parseimporturlparse,urljoinimportredefdownload_file(url,folder):""" 下载单个文件并保存到指定目录 :param url: 文件的绝对 URL :param folder: 保存目录 """response=requests.get(url)ifresponse.status_code==200:# 从 URL 中解析出文件名filename=os.path.basename(urlparse(url).path)save_path=os.path.join(folder,filename)# 以二进制方式写入文件withopen(save_path,'wb')asf:f.write(response.content)defdownload_and_modify_links(html_url,save_folder,domain_to_remove):""" 下载 HTML 页面，并将其中的 CSS、JS、IMG 等资源下载到本地， 同时把所有链接修改为相对路径 :param html_url: 目标网页 URL :param save_folder: 本地保存目录 :param domain_to_remove: 预留参数（当前版本未使用） """response=requests.get(html_url)ifresponse.status_code!=200:print(f"页面下载失败，状态码：{response.status_code}")return# 使用 BeautifulSoup 解析 HTMLsoup=BeautifulSoup(response.text,'html.parser')# 创建保存资源的目录os.makedirs(save_folder,exist_ok=True)# 处理 link、img、script 标签# link -> CSS# img -> 图片# script -> JSfortag,attributein[('link','href'),('img','src'),('script','src')]:elements=soup.find_all(tag,{attribute:True})forelementinelements:original_link=element[attribute]# 将相对路径转换为绝对路径absolute_link=urljoin(html_url,original_link)# 提取文件名filename=os.path.basename(urlparse(absolute_link).path)ifnotfilename:continue# 修改 HTML 中的引用为相对路径element[attribute]=f"./{filename}"# 下载资源文件download_file(absolute_link,save_folder)# 单独处理 CSS 文件，解析其中的图片和字体css_elements=soup.find_all('link',{'rel':'stylesheet'})forcss_elementincss_elements:css_url=urljoin(html_url,css_element['href'])css_response=requests.get(css_url)ifcss_response.status_code!=200:continuecss_text=css_response.text# 处理 CSS 中的 url(...) 图片image_urls=re.findall(r'url\((.*?)\)',css_text)forimage_urlinimage_urls:clean_url=image_url.strip('\'"')absolute_image_url=urljoin(css_url,clean_url)filename=os.path.basename(urlparse(absolute_image_url).path)ifnotfilename:continue# 替换 CSS 中的路径为本地相对路径css_text=css_text.replace(image_url,f"./{filename}")# 下载图片download_file(absolute_image_url,save_folder)# 处理 @font-face 中的字体文件font_urls=re.findall(r'@font-face.*?url\((.*?)\)',css_text,re.S)forfont_urlinfont_urls:clean_url=font_url.strip('\'"')absolute_font_url=urljoin(css_url,clean_url)filename=os.path.basename(urlparse(absolute_font_url).path)ifnotfilename:continuecss_text=css_text.replace(font_url,f"./{filename}")download_file(absolute_font_url,save_folder)# 保存修改后的 CSS 文件css_filename=os.path.basename(urlparse(css_url).path)css_save_path=os.path.join(save_folder,css_filename)withopen(css_save_path,'w',encoding='utf-8')asf:f.write(css_text)# 修改 HTML 中的 CSS 引用路径css_element['href']=f"./{css_filename}"# 保存最终修改后的 HTML 文件html_save_path=os.path.join(save_folder,'index.html')withopen(html_save_path,'w',encoding='utf-8')asf:f.write(str(soup))print("HTML 页面及相关资源已成功下载并本地化")四、主程序入口示例
if__name__=="__main__":html_url="http://example.com/"save_folder="downloaded_files"domain_to_remove="http://example.com"download_and_modify_links(html_url,save_folder,domain_to_remove)五、运行结果目录结构示例
downloaded_files/ ├── index.html打开index.html即可离线访问网页。
