不写爬虫代码：HTML Extract 节点提取网页中的标题、图片与正文-N8N大学

还在手动复制粘贴？你的时间比代码更值钱

笔者在 N8N大学社区里潜水时，发现一个高频痛点：很多做运营、做数据分析的朋友，每天都要去固定的网站扒拉内容。复制标题、保存图片、搬运正文，一套操作下来，半小时没了。

有人会去学 Python 写爬虫，折腾 Scrapy、Selenium，光是环境配置就能卡住半天。其实，对于大多数“获取公开数据”的场景，我们完全可以在 n8n 里“偷个懒”。

今天，N8N大学就带你玩转 n8n 的 HTML Extract 节点。不需要写一行爬虫代码，只要你会用鼠标点点点，就能把网页里的标题、图片、正文统统抓下来。

在开始之前，你需要确保手里有两样东西：

废话不多说，直接开干。

我们将构建一个极简的工作流：获取网页 HTML -> 提取数据 -> 查看结果。

首先，我们需要把网页的“骨架”下载下来。

点击执行，你会看到 Output 里出现了一堆乱糟糟的 HTML 代码。别慌，这就是我们要的原材料。

这是今天的主角登场。n8n 提供了一个非常强大的工具，专门用来解析 HTML。

在 HTTP Request 节点后面，添加一个 HTML Extract 节点。
在 HTML 字段中，直接引用上一步的数据： {{ $json.data }} （或者根据上一级节点的输出字段名，通常是 {{ $json.response }}）。
重点来了，点击 Rules to Extract 下方的 Add Rule，这里我们要配置具体的提取逻辑。

这里 N8N大学给大家演示如何提取标题、正文和图片。假设该网页的结构是标准的：

提取标题：

Rule Type 选择 CSS Selector，Extract From 选 HTML，Key 填 title，Selector 填 h1（或者具体的标题类名，如 .article-title）。
提取正文：

添加新 Rule。Key 填 content，Selector 填 div.post-content（记得替换成实际网页的正文容器选择器）。
提取图片：

这是一个坑点。图片通常在 src 属性里。添加新 Rule，Key 填 image_url，Selector 填 img.featured。然后在下方选项中，务必勾选 Get attribute value，并在旁边填入 src。如果不勾选这个，你得到的只是图片标签，而不是链接。

再次点击执行，奇迹发生了！原本杂乱的 HTML 变成了整齐的 JSON 数据：标题、正文、图片链接一目了然。

虽然 HTML Extract 很好用，但新手很容易在这些地方翻车：

CSS 选择器太脆弱：

网页一改版，你的 Selector 就废了。建议优先使用 ID（如 #main-content）或 class 组合（如 div.article > p.text），尽量避免嵌套层级太深。
图片懒加载问题：

很多网站为了性能，图片使用 data-src 而不是 src。如果你发现提取出来的图片链接是空的，记得把属性改成 data-src 试试。
内容不全：

有时候你发现正文只提取了一半。这可能是因为该网站做了反爬措施，或者 HTML 结构极其复杂。这时，你可以尝试把 Selector 的范围放大一点，先提取大块，然后再用后续的 Code 节点做二次清洗。

记住，HTML Extract 处理静态网页是一把好手，但如果遇到 JS 动态渲染的内容（比如滚动才加载的评论区），它就无能为力了，那种情况可能需要配合 Playwright 节点。

Q1: 提取的数据包含很多 HTML 标签，怎么去掉？
A: n8n 的 HTML Extract 有时会保留标签。你可以使用 Code 节点（JS）或 Text Converter 节点来清洗这些标签，或者在 Selector 里更精确地定位到 p 标签而不是外层的 div。

Q2: 如果网页需要登录怎么办？
A: 在 HTTP Request 节点中，你可以配置 Authentication。如果是 Cookie 登录，你可以先在浏览器登录，复制 Cookie 填入 Header 中。

Q3: 为什么我提取不到数据？
A: 90% 是因为选择器写错了。在浏览器打开网页，按 F12，右键点击你想提取的元素 -> 检查，复制它的 Selector，粘贴到 n8n 里试试。

不写代码不代表技术退步，而是学会了利用工具放大生产力。HTML Extract 节点就是 n8n 赋予我们的“万能抓手”。

从今天起，把那些重复的复制粘贴工作交给 n8n 吧。如果你在实操中遇到更复杂的网页结构，欢迎来 N8N大学 (n8ndx.com) 找我，我们一起探讨解决方案。