网页爬虫基础:HTML结构与CSS/XPath选择器详解
1. 网页抓取的本质理解HTML结构刚接触爬虫的新手最容易犯的错误就是直接开始写代码却对要抓取的对象一无所知。就像猎人不知道猎物长什么样厨师不认识食材的特性。我们首先要搞清楚你要抓的到底是什么HTML超文本标记语言是构成网页的骨架。每个网页本质上都是一个HTML文档它用标签tag来定义内容的结构和含义。比如h1表示一级标题p表示段落a表示超链接。这些标签像乐高积木一样通过嵌套组合构成了我们看到的网页。重要提示现代网页很多内容是通过JavaScript动态加载的直接查看网页源代码可能看不到完整内容。这时需要借助开发者工具Chrome按F12的Elements面板来查看最终渲染的DOM结构。1.1 HTML文档的基本结构一个典型的HTML文档是这样的结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 title示例页面/title /head body div idcontent h1 classtitle主标题/h1 p这是一个段落文本/p ul li列表项1/li li列表项2/li /ul /div /body /html关键点解析!DOCTYPE html声明文档类型html是根元素lang属性指定语言head包含元信息不会显示在页面中body包含所有可见内容标签可以嵌套形成父子关系标签可以有属性如id,class1.2 为什么需要选择器当我们要从复杂的HTML中提取特定数据时就需要定位到目标元素。就像在人群中找人你可以说找穿红衣服的人相当于CSS选择器也可以说从门口进来左转第三排第二个人相当于XPath选择器就是帮我们精确描述要抓取哪个元素的工具。没有选择器我们只能获取整个HTML文档无法提取其中的特定数据。2. CSS选择器精准定位的利器CSS选择器最初是为样式表设计的但因为其简洁直观的语法成为了爬虫中最常用的元素定位方式之一。2.1 基础选择器类型元素选择器直接按标签名选择p /* 选择所有p元素 */类选择器通过class属性选择.title /* 选择classtitle的元素 */ID选择器通过id属性选择#content /* 选择idcontent的元素 */属性选择器通过其他属性选择[href] /* 选择有href属性的元素 */ [typesubmit] /* 选择typesubmit的元素 */2.2 组合选择器通过组合基础选择器可以实现更精确的定位后代选择器空格分隔div p /* 选择div内的所有p元素不限层级 */子元素选择器分隔div p /* 只选择div的直接子p元素 */相邻兄弟选择器分隔h1 p /* 选择紧接在h1后的p元素 */通用兄弟选择器~分隔h1 ~ p /* 选择h1后面的所有同级p元素 */2.3 伪类选择器伪类选择器可以根据元素的状态或位置进行选择a:hover /* 鼠标悬停时的链接 */ li:nth-child(2) /* 选择第二个li元素 */ p:first-child /* 选择作为第一个子元素的p */实战技巧在Chrome开发者工具中可以使用$(css选择器)快速测试选择器是否有效。比如在Console输入$(h1.title)可以检查是否能选中目标元素。3. XPath更强大的路径定位语言XPathXML Path Language是一种用于在XML和HTML文档中导航和选择节点的语言。相比CSS选择器XPath功能更强大语法也更灵活。3.1 XPath基础语法节点选择/从根节点开始//从当前节点选择匹配的节点不考虑位置.当前节点..父节点示例/html/body/div /* 选择从根开始的精确路径 */ //div[idcontent] /* 选择任意位置的id为content的div */3.2 谓语Predicates谓语用于查找特定节点或包含特定值的节点写在方括号中//ul/li[1] /* 选择第一个li元素 */ //a[href] /* 选择有href属性的a元素 */ //p[contains(text(),Python)] /* 选择文本包含Python的p元素 */3.3 通配符和运算符*匹配任何元素节点*匹配任何属性节点|合并多个路径的结果and,or逻辑运算//div[classarticle or classpost] /* 选择class为article或post的div */3.4 轴Axes轴定义了与当前节点的关系//div/child::p /* 选择div的子p元素 */ //span/parent::div /* 选择span的父div元素 */ //h1/following-sibling::p /* 选择h1后面的同级p元素 */经验分享在Chrome开发者工具中右键元素 - Copy - Copy XPath可以快速获取元素的XPath但自动生成的XPath通常不够健壮容易因页面微小改动而失效建议手动编写更简洁通用的XPath。4. 选择器实战对比与应用场景4.1 CSS选择器 vs XPath特性CSS选择器XPath语法简洁度⭐⭐⭐⭐⭐⭐⭐⭐功能强大程度⭐⭐⭐⭐⭐⭐⭐⭐文本内容匹配有限支持:contains已废弃完全支持text(), contains()浏览器兼容性完全支持完全支持性能通常更快稍慢上手难度简单较复杂4.2 如何选择优先使用CSS选择器当元素有明确的class或id时CSS选择器更简洁直观使用XPath的情况需要根据文本内容定位时需要复杂路径导航如父节点、祖先节点时需要条件组合查询时4.3 实际案例解析假设我们要抓取以下HTML中的商品信息div classproduct-list div classproduct h3a href/product/1Python编程入门/a/h3 p classprice¥59.00/p div classrating span classstars⭐⭐⭐⭐⭐/span span(128评价)/span /div /div !-- 更多商品... -- /divCSS选择器方案# 商品标题 titles response.css(.product h3 a::text).getall() # 商品价格 prices response.css(.product .price::text).getall() # 评价数量需要提取括号内数字 ratings response.css(.product .rating span:nth-child(2)::text).re(r\((\d)评价\))XPath方案# 商品标题 titles response.xpath(//div[classproduct]/h3/a/text()).getall() # 商品价格 prices response.xpath(//p[classprice]/text()).getall() # 评价数量 ratings response.xpath(//div[classrating]/span[contains(text(), 评价)]/text()).re(r\((\d)评价\))4.4 选择器编写技巧尽量使用唯一的属性优先选择id或独特的class避免使用可能重复的标签名避免过于脆弱的选择器不要依赖绝对路径或固定位置如div[3]利用浏览器工具验证在开发者工具的Console中用$x(xpath)或$(css)测试考虑性能越具体的选择器通常性能越好处理动态属性有些class是动态生成的可以用contains或starts-with匹配部分值5. 常见问题与调试技巧5.1 选择器失效的常见原因元素是动态加载的页面通过JavaScript异步加载内容初始HTML中没有解决方案使用Selenium等工具或分析AJAX请求iframe嵌套目标元素在iframe中解决方案先切换到iframe上下文属性值变化class或id包含随机字符串解决方案使用部分匹配contains(class, product)网页结构变化网站改版导致选择器失效解决方案编写更健壮的选择器定期维护爬虫5.2 调试工具与方法Scrapy Shellscrapy shell url # 然后可以交互式测试选择器 response.css(selector).get()浏览器开发者工具Elements面板查看完整DOM结构Console面板测试CSS/XPath选择器Network面板分析数据请求打印中间结果print(response.text[:500]) # 查看部分HTML print(response.css(selector).get()) # 检查选择结果5.3 性能优化建议避免使用//开头的XPath这会搜索整个文档性能较差缓存选择器结果重复使用已解析的选择器限制提取范围先选择父元素再在子范围内查找使用更高效的选择器ID选择器最快复杂选择器较慢5.4 反爬虫应对策略设置合理的请求头headers { User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) ..., Accept-Language: zh-CN,zh;q0.9 }添加请求延迟DOWNLOAD_DELAY 2 # 2秒延迟使用代理IP需谨慎合法使用# 在settings.py中 PROXY http://proxy_ip:port处理Cookie和Session# 在Request中传递cookies yield scrapy.Request(url, cookies{key: value})在实际项目中我通常会先花时间仔细分析网页结构编写多个备选选择器方案然后通过Scrapy Shell交互测试选择最稳定高效的方案。记住一个健壮的爬虫不在于代码有多复杂而在于对目标网站的理解有多深入。

相关新闻

大型语言模型在复杂心脏病诊疗中的决策支持应用与挑战

大型语言模型在复杂心脏病诊疗中的决策支持应用与挑战

1. 项目概述:当AI医生遇上“心”难题最近,一篇发表在《自然医学》上的研究,把“大型语言模型”和“复杂心脏病诊疗”这两个看似遥远的领域,硬核地结合在了一起。作为一名长期关注医疗科技交叉应用的从业者,我第一眼看到…

2026/8/3 1:32:34 阅读更多 →
TartanAir与Unreal Engine:构建视觉SLAM算法的仿真训练与评测平台

TartanAir与Unreal Engine:构建视觉SLAM算法的仿真训练与评测平台

1. 项目概述:为什么是TartanAir与Unreal Engine?如果你正在做视觉SLAM(VSLAM)或者深度估计相关的研究,大概率还在用KITTI、EuRoC这些“老熟人”数据集。它们经典、稳定,但问题也很明显:场景单一…

2026/8/3 1:32:34 阅读更多 →
Java初学者之———类与方法

Java初学者之———类与方法

欢迎来到Java的世界!作为初学者,理解“类”与“方法”是迈进面向对象编程(OOP)大门的第一步。Java核心技术笔记:类(Class)与方法(Method) 1. 初识面向对象(OO…

2026/8/3 1:31:34 阅读更多 →

最新新闻

SpringBoot+Vue物流系统开发实战与优化经验

SpringBoot+Vue物流系统开发实战与优化经验

1. 项目概述这个物流配送中心信息化管理系统是我去年为某中型物流企业开发的毕业设计项目,采用SpringBootVue前后端分离架构,完整实现了从订单管理到配送调度的全流程数字化。系统上线后帮助客户将人工调度效率提升了60%,异常订单处理时间缩短…

2026/8/3 2:48:06 阅读更多 →
【机器学习】DBSCAN聚类算法——原理、参数调优与实战

【机器学习】DBSCAN聚类算法——原理、参数调优与实战

DBSCAN聚类算法:从原理到参数调优实战简介一、DBSCAN 相关概念核心概念图解核心术语详解算法实现流程二、DBSCAN 的 API核心参数说明三、案例分析1. 导入所需库2. 数据读取与标准化3. 数据准备4. DBSCAN 参数调优5. 确定最佳参数并输出结果总结关键参数调优建议简介…

2026/8/3 2:48:06 阅读更多 →
Unity3D MMORPG手游战斗系统架构设计与C#实战解析

Unity3D MMORPG手游战斗系统架构设计与C#实战解析

1. 项目概述:为什么MMORPG战斗系统是手游成败的关键在手游开发领域,尤其是MMORPG这个红海赛道,战斗系统的好坏几乎直接决定了产品的生死。它不仅仅是玩家与游戏世界交互的核心,更是承载付费、社交、策略和长期留存的关键模块。一个…

2026/8/3 2:48:06 阅读更多 →
Unity动画进阶:Parent Constraints实现动态装备绑定与平滑切换

Unity动画进阶:Parent Constraints实现动态装备绑定与平滑切换

1. 项目概述:从父子关系到约束关系的思维跃迁如果你是一个Unity动画师或者技术美术,肯定对“父子关系”(Parenting)这个操作熟得不能再熟了。把一把剑拖到角色的手上,让它成为手骨骼的子物体,这是最直接、最…

2026/8/3 2:48:06 阅读更多 →
AI实验自动化调度框架:基于成本感知的智能GPU资源管理

AI实验自动化调度框架:基于成本感知的智能GPU资源管理

1. 项目概述:当AI实验遇上“电费焦虑”如果你也搞过深度学习,尤其是需要长时间训练模型或者跑大量对比实验,那对下面这个场景肯定不陌生:盯着屏幕上的训练进度条,心里盘算着这次实验要跑多久,然后目光不自觉…

2026/8/3 2:48:06 阅读更多 →
156K星的仓库,一行代码都没有——它只做一件事:给AI立规矩

156K星的仓库,一行代码都没有——它只做一件事:给AI立规矩

开篇 你有没有过这种经历? 你把需求丢给Claude Code,喝了杯咖啡回来,看到一整片代码。粗略扫一眼,感觉写得还不错。跑一下试试——要么根本不是你想要的,要么产出了一坨复杂度爆炸的「大泥球」,要么测试全绿…

2026/8/3 2:47:06 阅读更多 →

日新闻

3个让你工作效率翻倍的Umi-OCR实战技巧:免费离线文字识别完全指南

3个让你工作效率翻倍的Umi-OCR实战技巧:免费离线文字识别完全指南

3个让你工作效率翻倍的Umi-OCR实战技巧:免费离线文字识别完全指南 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片,PDF文档识别,排除水印/页眉页脚,扫描/生成二维码。…

2026/8/3 0:00:47 阅读更多 →
[具身智能-181]:PC+服务器+具身机器人:构建具身智能从仿真到量产的闭环迭代混合架构

[具身智能-181]:PC+服务器+具身机器人:构建具身智能从仿真到量产的闭环迭代混合架构

PC服务器具身机器人:构建具身智能从仿真到量产的闭环迭代混合架构一、前言:具身智能需要“混合算力闭环系统”传统人工智能依赖云端静态数据集训练,不具备物理交互能力,无法适应真实世界的不确定性。具身智能(Embodied…

2026/8/3 0:00:47 阅读更多 →
[具身智能-181]:大分布式通信模型对比:看懂为什么 DDS 是 ROS2 底层通信最优解

[具身智能-181]:大分布式通信模型对比:看懂为什么 DDS 是 ROS2 底层通信最优解

前言构建机器人、具身智能这类分布式实时系统,通信底座直接决定整套系统的实时性、容错性、组网能力。分布式领域长期存在 4 类经典通信架构:点对点模式、Broker 中间代理模式、广播模式、以数据为中心(DDS)模式。很多开发者疑惑&…

2026/8/3 0:00:47 阅读更多 →

周新闻

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

最大流算法详解:从水管网络到Ford-Fulkerson与Dinic实战

1. 从水管网络到最大流:一个核心问题的诞生想象一下,你是一个城市供水系统的总工程师。你的城市有多个水源(水库),需要通过一个复杂的地下管道网络,将水输送到各个居民区。每条管道都有其最大通水能力&…

2026/8/2 0:00:38 阅读更多 →
基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

基于Springboot的企业门户网站(源码+LW+调试文档+讲解)

温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:本人主页置顶文章(点我)开头有 CSDN 平台…

2026/8/3 1:53:31 阅读更多 →
MATLAB xcorr函数详解:从互相关原理到四大实战应用

MATLAB xcorr函数详解:从互相关原理到四大实战应用

1. 从一次信号“找茬”说起:为什么我们需要互相关几年前,我在处理一组声学传感器数据时遇到了一个棘手的问题。我有两个麦克风记录了一段相同的音频信号,理论上它们接收到的声音波形应该非常相似,只是由于麦克风位置不同&#xff…

2026/8/2 0:00:38 阅读更多 →

月新闻

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南

免费解锁百度网盘SVIP加速:macOS用户必备的下载提速终极指南 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在为百度网盘macOS版的龟速下…

2026/8/2 6:34:16 阅读更多 →
终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换

终极ncmdump指南:3分钟实现网易云NCM音乐解密与格式转换 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗?ncmdump解密工具帮你轻松解决这个困…

2026/8/2 2:47:48 阅读更多 →
HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

HarmonyOS 应用开发《掌上英语》第81篇: 智能体卡片:为英语学习 App 打造桌面级学习助手

AgentCard 智能体卡片:为英语学习 App 打造桌面级学习助手适用平台:HarmonyOS 7.0 (API 26 Beta)一、引言 HarmonyOS 7.0(API 26 Beta)新增了 AgentCard 智能体卡片能力,这是继 HMAF(鸿蒙智能体框架&#x…

2026/8/2 0:23:22 阅读更多 →