影刀RPA新手教程：HTML标签与属性速查——前端知识在RPA中的实用清单
不需要成为前端工程师，但需要认识页面上的几类标签和属性。
因为这些标签就是XPath的素材库——class、id、href、src、data-*，全是用来定位元素的锚点。
不认得这些标签，XPath写到哪算哪。认得了，看一眼开发者工具就知道怎么定位。
一、HTML基本结构——一段代码看懂
<divid="product-card"class="goods-item"data-sku="SKU001"><ahref="/product/12345.html"><imgsrc="https://img.example.com/product.jpg"alt="连衣裙"/></a><h3class="title">2026夏季新款连衣裙 法式收腰显瘦</h3><spanclass="price"><em>¥</em>128.00</span><spanclass="sales">已拼<em>10万+</em>件</span></div>标签之间的关系：
<div>是父容器（最外层的盒子）<a>、<h3>、<span>是它的直接子元素<em>是<span>的子元素，是<div>的孙子元素
二、影刀RPA必须认识的HTML标签
| 标签 | 中文名 | 影刀采集中常用于 |
|---|---|---|
<div> | 块容器 | 页面区域的父容器，99%的元素都包在div里 |
<a> | 链接 | 提取商品链接、跳转URL（用"获取元素属性"取href） |
<span> | 行内文本 | 价格、销量、标签等小段文本 |
<img> | 图片 | 提取图片地址（用"获取元素属性"取src） |
<input> | 输入框 | 输入文本的目标元素 |
<button> | 按钮 | 点击操作的目标元素 |
<h1>~<h6> | 标题 | 商品名称、文章标题 |
<ul>/<li> | 列表 | 导航栏、分类列表 |
<table>/<tr>/<td> | 表格 | 后台管理系统的数据表格 |
<iframe> | 内嵌页面 | 嵌套网页（需要先"切换框架"） |
三、电影RP
RPA定位最常用的6种属性
拼多多店群自动化上架方案
1. id —— 最理想的定位锚点
<divid="search-input-wrapper"># XPath中通过id定位（最稳定，id理论上是唯一的）//*[@id='search-input-wrapper']优势：id在一个页面里是唯一的，定位最精确。
劣势：很多现代网站不写id了，或者用动态id。
2. class —— 最常用的定位锚点
<spanclass="price-value red">¥128.00</span># 精确匹配class//span[@class='price-value']# 部分匹配（推荐，因为class可能包含多个值）//span[contains(@class,'price')]注意：@class='price-value red'是用空格分隔的两个class名。如果写@class='price-value'是匹配不到的。所以推荐用contains。
3. href —— 链接地址
<ahref="/product/12345.html">商品详情</a># 定位特定链接//a[@href='/product/12345.html']# 定位href包含某个关键词的链接//a[contains(@href,'/product/')]4. src —— 图片地址
<imgsrc="https://img.example.com/abc.jpg"/># 获取图片URL（用"获取元素属性"指令，属性名填"src"）获取元素属性("商品图片元素","src")5.><divdata-spm="goods"data-id="12345678"data-track="item"># data属性一般不随改版变化，比class更稳定//div[@data-id='12345678']# 用data属性过滤//div[contains(@data-track,'item')]
# data属性一般不随改版变化，比class更稳定//div[@data-id='12345678']# 用data属性过滤//div[contains(@data-track,'item')]data属性是业务开发为了埋点和数据追踪写的，电商页面改了CSS样式也不会改data属性。所以用data属性定位比class更稳。
6. text() —— 文本内容
<button>下一页</button># 通过文本内容定位//button[text()='下一页']# 部分匹配文本//button[contains(text(),'下一')]# 通过文本定位兄弟元素（参照物定位）//span[text()='价格']/following-sibling::span[1]四、Chrome开发者工具怎么看HTML
按下F12
打开目标页面 → 按F12（或右键→检查）→ 出现开发者工具。
Elements面板
左侧就是页面的HTML结构。鼠标在HTML上移动，页面上对应区域会高亮。
怎么找到你要的元素的代码
TEMU店群如何管理运营？
最方便的方式：在页面上右键你要的元素 → 检查。开发者工具直接跳转到对应代码。
从这里提取XPath定位的关键信息
看这个元素的标签名、class、id、data属性。用来构造XPath。
<!-- 示例：淘宝的搜索输入框 --><inputid="q"class="search-combobox-input"placeholder="搜索 淘宝"aria-label="搜索"/>从这段代码可以写出多种XPath：
//input[@id='q']# 用id//input[contains(@class,'search')]# 用class//input[@placeholder='搜索 淘宝']# 用placeholder//input[@aria-label='搜索']# 用aria-label推荐用id（@id='q'），因为最不容易变。
五、RPA中常用的CSS概念
不需要学CSS，但理解两个概念能帮你判断元素状态：
display:none= 元素在DOM里但看不见。影响相似元素列表的计数。
# 排除隐藏元素//div[@class='card'andnot(contains(@style,'display:none'))]disabled= 按钮变灰不可点击。
# 只匹配可点击的下一页按钮//a[@class='next'andnot(@disabled)]六、速查：从"我要做什么"到"查什么属性"
| 我想提取 | 看哪个标签 | 取哪个属性 | XPath示例 |
|---|---|---|---|
| 商品标题文本 | h3, div, span | 文本内容（innerText） | //h3[@class='title'] |
| 价格 | span | 文本内容 | //span[contains(@class,'price')] |
| 商品链接 | a | href | //a[contains(@class,'link')]/@href |
| 图片地址 | img | src | //img[contains(@class,'pic')]/@src |
| 商品ID | div, li | data-id 或>
版权声明:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设
2026/6/10 12:37:05
程序员修炼之道：务以己任，实则明心——通向务实的最高境界那个凌晨三点的破绽 凌晨三点，生产环境崩了。监控大屏一片血红，报警消息像瀑布一样涌进手机。团队七个人被拉进电话会议，每个人都在说“不是我写的”“这块我不熟”“上次改的时候就这样了”。 没有人承认问题出在自己的代码上。但也没有人能解决问题。 最后是一个刚转正… 
李华
网站建设
2026/6/10 12:37:03
昇腾CANN神经网络算子库ops-nn：从零开始了解NPU原生的深度学习算子生态前言 在深度学习训练与推理的生产环境中，算子（Operator）是模型计算图的基本执行单元。每一层卷积、每一次矩阵乘法、每一个激活函数，本质上都是一个个算子在硬件上的具体实现。昇腾NPU作为华为面向AI场景自研的专用加速器&#x… 
李华
网站建设
2026/6/10 12:31:50
2026年AI论文平台盘点：12款神器助你高效完成初稿生成、排版和降AI率随着 AI 技术的持续突破，2026 年的论文辅助工具市场已进入“智能化、精细化、合规化”的全新发展阶段。从本科生的课程论文到研究生的学位论文，再到科研人员的期刊投稿，AI 工具正在深度渗透各类学术写作场景。本文基于权威行业调研与多维度实… 
李华
网站建设
2026/6/10 12:30:27
Java全栈工程师面试实录：从基础到高阶的全面解析Java全栈工程师面试实录：从基础到高阶的全面解析 今天，我有幸参与了一场关于Java全栈开发岗位的面试。应聘者是一位名叫林浩然的28岁程序员，拥有计算机科学与技术硕士学位，工作年限为5年，目前在一家互联网大厂担任高级… 
李华
网站建设
2026/6/10 12:29:01
Text2SQL智能体学习笔记（一）——NL2SQL及执行流程介绍第一节：NL2SQL介绍 一、什么是NL2SQL NL2SQL（也常写作 NLP2SQL）是自然语言处理（NLP）与数据库技术深度融合的交叉领域技术，核心目标是将人类用自然语言（中文、英文等）表达的非结构化数… 
李华
|
