Question

在你拆解网页之前，需要学习一些HTML的基本知识。你也会看到如何利用Web浏览器的强大开发者工具，它们使得从Web抓取信息更容易。

11.4.1 学习HTML的资源

超文本标记语言（HTML）是编写Web页面的格式。本章假定你对HTML有一些基本经验，但如果你需要初学者指南，我推荐以下站点：

· http://htmldog.com/guides/html/beginner/

· http://www.codecademy.com/tracks/web/

· https://developer.mozilla.org/en-US/learn/html/

11.4.2 快速复习

假定你有一段时间没有看过HTML了，这里是对基本知识的快速复习。HTML文件是一个纯文本文件，带有.html文件扩展名。这种文件中的文本被“标签”环绕，标签是尖括号包围的单词。标签告诉浏览器以怎样的格式显示该页面。一个开始标签和一个结束标签可以包围某段文本，形成一个“元素”。“文本”（或“内部的HTML”）是在开始标签和结束标签之间的内容。例如，下面的HTML在浏览器中显示Hello world!，其中Hello用粗体显示。

<strong>Hello</strong> world! 

这段HTML在浏览器中看起来如图11-1所示。

图11-1 浏览器渲染的Hello world!

开始标签< strong>表明，标签包围的文本将使用粗体。结束标签< /strong>告诉浏览器，粗体文本到此结束。

HTML中有许多不同的标签。有一些标签具有额外的特性，在尖括号内以“属性”的方式展现。例如，< a>标签包含一段文本，它应该是一个链接。这段文本链接的URL是由href属性确定的。下面是一个例子：

Al's free <a href="http://inventwithpython.com">Python books</a>.

这段HTML在浏览器中看起来如图11-2所示。

图11-2 浏览器中渲染的链接

某些元素具有id属性，可以用来在页面上唯一地确定该元素。你常常会告诉程序，根据元素的id属性来寻找它。所以利用浏览器的开发者工具，弄清楚元素的id属性，这是编写Web抓取程序常见的任务。

11.4.3 查看网页的HTML源代码

对于程序要处理的网页，你需要查看它的HTML源代码。要做到这一点，在浏览器的任意网页上点击右键（或在OS X上Ctrl-点击），选择View Source或View page source，查看该页的 HTML 文本（参见图 11-3）。这是浏览器实际接收到的文本。浏览器知道如何通过这个HTML显示或渲染网页。

图11-3 查看网页的源代码

我强烈建议你查看一些自己喜欢的网站的HTML源代码。在查看源代码时，如果你不能完全理解，也没有关系。你不需要完全掌握HTML，也能编写简单的Web抓取程序，毕竟你不是要编写自己的网站。只需要足够的知识，就能从已有的网站中挑选数据。

11.4.4 打开浏览器的开发者工具

除了查看网页的源代码，你还可以利用浏览器的开发者工具，来检查页面的HTML。在Windows版的Chrome和IE中，开发者工具已经安装了。可以按下F12，让它们出现（参见图11-4）。再次按下F12，可以让开发者工具消失。在Chrome中，也可以选择View ►Developer ►Developer Tools，调出开发者工具。在OS X中按下⌘- Option-I，将打开Chrome的开发者工具。

对于Firefox，可以在Windows和Linux中需要按下Ctrl-Shift-C，或在OS X中按下⌘-option-C，调出开发者工具查看器。它的布局几乎与Chrome的开发者工具一样。

图11-4 Chrome浏览器中的开发者工具窗口

在Safari中，打开Preferences窗口，并在Advanced pane选中Show Develop menu in the menu bar选项。在它启用后，你可以按下⌘-option-I，调出开发者工具。

在浏览器中启用或安装了开发者工具之后，可以在网页中任何部分点击右键，在弹出菜单中选择Inspect Element，查看页面中这一部分对应的HTML。如果需要在Web抓取程序中解析HTML，这很有帮助。

不要用正则表达式来解析HTML

在一个字符串中定位特定的一段HTML，这似乎很适合使用正则表达式。但是，我建议你不要这么做。HTML 的格式可以有许多不同的方式，并且仍然被认为是有效的HTML，但尝试用正则表达式来捕捉所有这些可能的变化，将非常繁琐，并且容易出错。专门用于解析HTML的模块，诸如Beautiful Soup，将更不容易导致缺陷。在http://stackoverflow.com/a/1732454/1893164/，你会看到更充分的讨论，了解为什么不应该用正则表达式来解析HTML。

11.4.5 使用开发者工具来寻找HTML元素

程序利用requests模块下载了一个网页之后，你会得到该页的HTML内容，作为一个字符串值。现在你需要弄清楚，这段HTML的哪个部分对应于网页上你感兴趣的信息。

这就是可以利用浏览器的开发者工具的地方。假定你需要编写一个程序，从http://weather.gov/获取天气预报数据。在写代码之前，先做一点调查。如果你访问该网站，并查找邮政编码94105，该网站将打开一个页面，显示该地区的天气预报。

如果你想抓取那个邮政编码对应的气温信息，怎么办？右键点击它在页面的位置（或在OS X上用Control-点击），在弹出的菜单中选择Inspect Element。这将打开开发者工具窗口，其中显示产生这部分网页的HTML。图11-5展示了开发者工具打开显示气温的HTML。

图11-5 用开发者工具查看包含温度文本的元素

通过开发者工具，可以看到网页中负责气温部分的 HTML 是< p class= "myforecast- current-lrg">57°F< /p>。这正是你要找的东西！看起来气温信息包含在一个< p>元素中，带有myforecast-current-lrg类。既然你知道了要找的是什么，BeautifulSoup模块就可以帮助你在这个字符串中找到它。