查看: 2334|回复: 4

[教程] 爱飞采集规则基础教程，HTML代码入门

64 主题	975 好友	1万积分

管理员

Rank: 9 Rank: 9 Rank: 9

签到天数: 31 天

[LV.5]常住居民I

151****1798

发消息

发表于 2012-10-22 21:52:22 |显示全部楼层

爱飞软件提供了可视化的规则编辑器，即使用户不精通HTML代码也能写出满意的规则。尽管如此，为了更快的制作出规则，用户仍然有必要了解一定的HTML代码基础知识！

HTML代码基础知识
一般来说，html代码是闭合的，这边提供一个简单的源代码示例，并结合规则解释器讲解，便于用户理解：

<div class="title">
<h1>标题1</h1>
</div>
<h2>标题2</h2>
<p>摘要段落1</p>
<div class="content">
<p>段落2</p>
<p class="ad">广告</p>
<p>段落3</p>
</div>
<div class="page">
<b>1</b>
<a href="http://www.aaa.com/txt_2.html">2</a>
<a href="http://www.aaa.com/txt_2.html">下一页</a>
</div>

复制代码

以“标题1”为例，HTML代码 <h1>表示开始，</h1>表示结束并闭合，两个代码成对出现，两个代码中间是标题字段，我们也称这种<h1>标题1</h1>封闭的代码为HTML块（正对块、代码块），软件就是利用HTML代码块成对匹配的特性，来自动获取字段，并且一般情况下不需要输入代码结束符，会自动闭合。

class为css代码样式选择器，这部分属于网页模板范畴，一定程度上也可以说是网页模板的特征，大部分时候可以通过这种特征，来定位网页并抓取需要的内容。

题外话：随着HTML、CSS代码标准不断发展，除了少数非常老的网站源程序还是用表格为基础的网页展现形式，新的网站网页代码越来越规范，大量使用了CSS代码，具体表现为，id和class样式选择器使用越来越多，当然，样式选择器可以很方便的给网页元素、内容套用格式，也就是所谓css网页模板的意思。

规则编辑器的基本使用方法

一、爱飞软件内置了源代码工具，我们在制作规则的时候，可以很方便的分析源代码，截图如下，代码树分析：

代码树反映了网页代码（包括源代码和浏览器代码）的结构关系，清晰的树状结构便于用户快速找到源代码区块对应的特征，并且鼠标点击代码树，可以在浏览器网页上自动标记对应区域！

二、设置采集字段的操作方法如下图（也可以在代码树上右键操作）：

1.在浏览器网页上，鼠标框选需要的内容字段，设置到对应的“采集标签”；
2.软件自动提取“特征代码”，显示“输出”处理结果，并反馈在浏览器网页上黄颜色高亮显示。

可视化规则编辑器所见即所得的效果，能极大的提高制作规则速度。

三、类似于抓取需要字段，我们也可以利用“块删除”删掉多余的字段，如下图：

四、从上面分析我们可以看到，“软件自动定位特征代码所在的HTML区块”，另外软件还支持“匹配代码顺序关系”，来实现精确定位，如下图：

由于网址<a在网页上会出现很多次，我们需要的翻页地址是加粗符号<b后面的<a，不过这样还不是很保险，我们再限定一下取值范围，设置正文翻页区域为 class="page"，这样就不会取到错误的翻页地址了。

小技巧：直接输入 >下一页< ，软件会找到包含这段代码的代码块，提取出网址，同样也可以实现抓取翻页地址的目的，而且更简单！

补充：精确定位的延伸，利用结束代码，扩大抓取区块

http://sports.163.com/special/00051P2R/moressxy_02.html

复制代码

的翻页区域源代码如下：

<div style="TEXT-ALIGN: center"><a href="http://sports.163.com/special/00051P2R/moressxy.html" target="_self"><img alt="上页" src="http://cimg2.163.com/sports/newimg/list/page_back.gif" width="51" height="20"></a> <a href="http://sports.163.com/special/00051P2R/moressxy.html" target="_self">1</a> 2<a href="http://sports.163.com/special/00051P2R/moressxy_03.html" target="_self">3</a> <a href="http://sports.163.com/special/00051P2R/moressxy_04.html" target="_self">4</a> <a href="http://sports.163.com/special/00051P2R/moressxy_05.html" target="_self">5</a> <a href="http://sports.163.com/special/00051P2R/moressxy_06.html" target="_self">6</a> <a href="http://sports.163.com/special/00051P2R/moressxy_07.html" target="_self">7</a> <a href="http://sports.163.com/special/00051P2R/moressxy_08.html" target="_self">8</a> <a href="http://sports.163.com/special/00051P2R/moressxy_09.html" target="_self">9</a> <a href="http://sports.163.com/special/00051P2R/moressxy_10.html" target="_self">10</a> <a style="BORDER-BOTTOM: blue 2px solid; BORDER-LEFT: blue 2px solid; BORDER-TOP: blue 2px solid; BORDER-RIGHT: blue 2px solid" href="http://sports.163.com/special/00051P2R/moressxy_03.html" target="_self"><img alt="下页" src="http://cimg2.163.com/sports/newimg/list/page_next.gif" width="51" height="20"></a> </div>

复制代码

如果设置翻页代码 alt="下页" 是无法抓取到外层的 <a 超链接，我们可以设置成：

alt="下页"
</a>

复制代码

这样就可以代表包含 alt="下页" 的整个<a区块了。

五、html过滤，html过滤是直接过滤常用的html区块，打钩即可过滤，可以参考下面的表格

通过以上学习，大家应该可以制作出采集规则了。下面表格是常用的HTML代码，便于大家参考学习：
注意：类似 id="idwebpig***" 这样的代码，是规则编辑器内部编码，并非网页源代码的CSS属性，做规则的时候一定不能带这样的代码，否则规则会失效。

序号	名称/定义	代码	标准属性（常用部分)	链接	代码结束
1	标题	<h1-6	id, class, title		</h1>
2	文档中的分区或节	<div	id, class, title		</div>
3	组合文档中的行内元素	<span	id, class, title		</span>
4	锚,链接	<a	id, class, title	href="链接"	</a>
5	向网页中嵌入一幅图像	<img	id, class, title	src="图片链接"	</img>
6	段落	<p>	id, class, title		</p>
7	块引用	<blockquote>	id, class, title		</blockquote>
8	列表项目	<li>	id, class, title		</li>
9	定义列表	<dl>	id, class, title		</dl>
10	列表中的项目（即术语部分）	<dt>	id, class, title		</dt>
11	无序列表	<ul>	id, class, title		</ul>
12	表格	<table>	id, class, title		</table>
13	表格内的表头单元格	<th>	id, class, title		</th>
14	表格中的标准单元格	<td>	id, class, title		</td>
15	表格中的行	<tr>	id, class, title		</tr>
16	规定文本的字体、字体尺寸、字体颜色	<font>	id, class, title		</font>
17	frameset 中的一个特定的窗口（框架）	<frame>	id, class, title	src="链接"	</frame>
18	客户端脚本，比如 JavaScript	<script>			</script>