下载掌阅APP，畅读海量书库
立即打开
当从网站服务器获取了HTML文档后，就需要从文档中提取有价值、有意义的数据了。如何从看似纷繁复杂、杂乱无章的HTML文档中提取想要的数据呢？这就必须要了解HTML的基本组成和结构了。可以将HTML看成一个树形结构，沿着树根往下遍历，就能找到任何想要位置的数据了。
HTML（HyperText Markup Language，超文本标记语言）用于创建网页。HTML使用标签来表示不同的内容，如使用<img>表示图片，使用<video>表示视频，使用<form>表示表格，使用<div>对页面进行布局等，各种标签互相嵌套，就形成了复杂的网页。
还记得在Chrome浏览器的“开发者工具”中，如何查看百度的HTML代码吗？没错，服务器将它放在了响应体中，见图2-5所示。
下面来看一个简单的电影排行的HTML例子。代码可以在记事本中编写，保存后将后缀改为html（movies.html），也可以在PyCharm中新建一个HTML文档。下面是实现的HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影排行</title>
</head>
<body>
<div id="content">
<h1>电影排行榜单</h1>
<div class="m_list">
<p>1.肖申克的救赎</p>
<p>2.霸王别姬</p>
</div>
</div>
</body>
</html>
使用浏览器打开movies.html，网页效果如图2-7所示。
下面来分析一下这个HTML代码。
·第一行代码中用DOCTYPE定义了文档类型。
·使用尖括号定义标签，如<html>、<head>、<body>、<div>。
·标签一般是成对出现的，如<html>是起始标签，</html>是终止标签。
·最外层的是HTML标签，表示HTML代码的范围。内部包含head和body标签，分别表示网页头和网页体。
·head标签内定义了网页的属性和引用。例如，<meta charset="UTF-8">指明了网页的编码方式为UTF-8；<title>电影排行</title>定义了网页的标题。
·body标签内是浏览器显示的正文内容，也是爬虫获取数据的来源。
·div标签类似于一个容器，它将内部所有的内容看成一个整体，主要用于页面的布局。
图2-7 电影排行页面
·h1标签代表一级标题；p标签代表段落，会自动换行。
·标签内可以定义自己的属性。例如，<div id="content">的属性id值为content。这是一个非常有用的属性，因为整个网页中，id的值是唯一的，可以通过它快速定位到这个标签。在<div class="m_list">中，属性class的值为m_list，这也是一个非常有用的属性，通过它可以定位到所有相同样式的标签。
如何获取穿插在HTML文档中的文本信息呢？可以把HTML文档看作一棵树，准确地讲，叫做HTML DOM树。什么是DOM呢？DOM（Document Object Model，文档对象模型）是W3C（万维网联盟）的标准，它定义了访问HTML和XML文档的标准。不同的浏览器有不同的呈现网页的内部数据结构。但DOM树是跨平台且不依赖语言的，可以支持几乎所有的浏览器。
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点，所以HTML DOM树也叫做节点树。
·整个文档是一个文档节点。
·每个HTML元素是元素节点。
·HTML元素内的文本是文本节点。
·每个HTML属性是属性节点。
·注释是注释节点。
注意： 这里所说的元素和标签是不一样的。标签是指被尖括号括起来的对象，元素是指从起始标签到终止标签所包含的所有内容的对象，如<h1>电影排行榜单</h1>就是一个元素，其中<h1>是一个标签。
将电影排行的HTML文档转化为HTML DOM树，如图2-8所示，图中的方框就是一个个节点。
图2-8 HTML DOM树结构
通过这棵HTML DOM树，就可以遍历任意节点了。例如要获取网页的标题“电影排行”，可以沿着图2-8中树的左侧，从根节点依次查找：html→head→title→文本“电影排行”。
树中的节点之间具有层级关系，常用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。在节点树中，顶端节点称为根（root）。如图2-9所示为部分节点之间的关系。
图2-9 节点之间的关系