《从零开始学Scrapy网络爬虫》之网络爬虫基础（网页基础）2

上一篇文章我们讨论了HTTP的基本原理，下面，就来简单了解一下网页相关基础知识，只有了解了网页的组成形式，网络爬虫才能抽丝剥茧，找出想要的，有用的数据。

当从网站服务器获取了HTML文档后，就需要从文档中提取有价值、有意义的数据了。如何从看似纷繁复杂、杂乱无章的HTML文档中提取想要的数据呢？这就必须要了解HTML的基本组成和结构了。可以将HTML看成一个树形结构，沿着树根往下遍历，就能找到任何想要位置的数据了。

1、HTML文档

HTML全称HyperText Markup Language，即超文本标记语言，用于创建网页。HTML使用标签来表示不同的内容，如使用表示图片，使用

表示表格，使用

对页面进行布局等，各种标签互相嵌套，就形成了复杂的网页。

还记得在Chrome浏览器的“开发者工具”中，如何查看百度的HTML代码吗？没错，服务器将它放在了响应体中了，如上图2-5所示。

2、网页的结构

来看一个简单的电影排行的HTML的例子。代码可以在记事本中编写，保存后将后缀改为html（movies.html），也可以在PyCharm中新建一个HTML文档。下面是实现的HTML代码：

    
        
        
    
    
        

            
电影排行榜单
            

                
1.肖申克的救赎
                
2.霸王别姬
            
        
    

使用浏览器打开movies.html，网页效果下图所示。

下面来分析一下这个HTML代码。

• 第一行用DOCTYPE定义了文档类型。
• 使用尖括号定义标签，如、、、
  。
• 标签一般是成对出现的，如是起始标签，是终止标签。
• 最外层的是html标签，表示HTML代码的范围。内部包含head和body标签，分别表示网页头和网页体。
• head标签内定义了网页的属性和引用。如“”指明了网页的编码方式为UTF-8；“”定义了网页的标题。
• body标签内是浏览器显示的正文内容，也是爬虫获取数据的来源。
• div标签类似于一个容器，它将内部所有的内容看成一个整体，主要用于页面的布局。
• h1标签代表一级标题；p标签代表段落，会自动换行。
• 标签内可以定义自己的属性。如“
  ”它的属性id值为content。这是一个非常有用的属性，因为整个网页中，id的值是唯一的，可以通过它快速定位到这个标签。“

  ”中，属性class的值为m_list，这也是一个非常有用的属性，通过它可以定位到所有相同样式的标签。

节点树及节点之间的关系

如何获取穿插在HTML文档中的文本信息呢？可以把HTML文档看作一棵树，准确地讲，叫做HTML DOM树。什么是DOM呢？DOM是W3C（万维网联盟）的标准，全称Document Object Model，即文档对象模型，它定义了访问HTML和XML文档的标准。不同的浏览器有不同的呈现网页的内部数据结构，但DOM树是跨平台且不依赖语言的，可以被几乎所有浏览器支持。

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点，所以HTML DOM树也叫做节点树。

• 整个文档是一个文档节点。
• 每个HTML元素是元素节点。
• HTML元素内的文本是文本节点。
• 每个HTML属性是属性节点。
• 注释是注释节点。

通过这棵HTML DOM树，就可以遍历任意节点了。例如要获取网页的标题“电影排行”，可以沿着上图树的左侧，从根节点依次查找：html→head→title→文本“电影排行”。

树中的节点之间具有层级关系，常用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。在节点树中，顶端节点称为根（root）。下图展示了部分节点之间的关系。

节选自书籍：《从零开始学Scrpay网络爬虫》，作者张涛，欢迎选购，京东，当当均有售。

下一节继续讲解：《从零开始学网络爬虫》之网络爬虫基础（使用XPath提取信息）