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

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

快速复习

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

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

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

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

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

查看网页的 HTML 源代码

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

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

浏览器的开发者工具

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

对于 Firefox ，可以在Windows和Linux中需要按下Ctrl-Shifl-C， 或在OS X中按下⌘-option-C，调出开发者工具查看器。 它的布局几乎与Chrome的开发者工具一样。 在 Safari 中，打开 Preferences 窗口， 并在 Advanced pane 选中 Show Develop menu in the menu bar选项。 在它启用后，可以按下耗-option-I， 调出开发者工具。

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

解析 HTML

不要用正则表达式来解析 HTML，在一个字符串中定位特定的一段 HTML，这似乎很适合使用正则表达式。 但是建议不要这么做。HTML的格式可以有许多不同的方式， 并且仍然被认为是有效的HTML，但尝试用正则表达式来捕捉所有这些可能的变化， 将非常繁琐，并且容易出错。 专门用于解析 HTML 的模块，诸如 Beautiful Soup ，将更不容易导致缺陷。

寻找 HTML 元素

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

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

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

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