Question

想要了解一个网页的结构如何，可以使用查看源代码的方法。在大多数浏览器中，都可以在页面上右键单击选择View page source 选项，获取网页的源代码，如图2.1所示。

我们可以在HTML的下述代码中找到我们感兴趣的数据。

<table>
<tr id="places_national_flag__row"><td class="w2p_fl"><label
  for="places_national_flag"
    id="places_national_flag__label">National Flag:
      </label></td><td class="w2p_fw"><img
        src="/places/static/images/flags/gb.png" /></td><td
          class="w2p_fc"></td></tr>
...
<tr id="places_neighbours__row"><td class="w2p_fl"><label
  for="places_neighbours"
    id="places_neighbours__label">Neighbours: </label></td><td
      class="w2p_fw"><div><a href="/iso/IE">IE </a></div></td><td
        class="w2p_fc"></td></tr></table>

图2.1

对于浏览器解析而言，缺失空白符和格式并无大碍，但在我们阅读时则会造成一定困难。要想更好地理解该表格，我们将使用Firebug Lite扩展。该扩展适用于所有浏览器，我们可以通过https://getfirebug.com/firebuglite 页面获取到该扩展。如果愿意的话，Firefox用户可以安装完整版的Firebug扩展，不过Lite版本已经包含了我们在本章和第6章中所用到的功能。

Firebug Lite安装完成后，可以右键单击我们在抓取中感兴趣的网页部分，然后在菜单中选择Inspect with Firebug Lite ，如图2.2所示。

图2.2

此时，浏览器就会打开如图2.3所示的Firebug面板，并显示选中元素周围的HTML层次结构。

如图2.3所示，当选择国家面积这一属性时，我们可以从Firebug面板中清晰地看到，该值包含在class为w2p_fw 的<td> 元素中，而<td> 元素又是ID为places_area__row 的<tr> 元素的子元素。现在，我们就获取到需要抓取的面积数据的所有信息了。

图2.3