python爬虫jsp网页_Python爬虫基础之网页的结构和选择器

网页的结构

我们首先用例子来感受一下HTML的基本结构。新建一个文本文件，名称可以随便我们自己设定，把文件的后缀名改成html，内容如下：

first_web.html

这就是最简单的HTML实例。开头用DOCTYPE定义了文档类型，其次最外层是html标签，最后还有对应的结束标签来表示闭合，其内部是head标签和body标签，分别代表网页头和网页体，它们也需要结束标签。head标签内定义了一些页面的配置和引用，如： 它指定了网页的编码为UTF-8。

title标签则定义了网页的标题，会显示在网页的选项卡中，不会显示在正文中。body标签内则是在网页正文中显示的内容。div标签定义了网页中的区块，它的id是container，这是一个非常常用的属性，且id的内容在网页中是惬意的，我们可以通过它来获取这个区块。然后在此区块内又有一个div标签，它的class为wrapper，这也是一个非常常用的属性，经常与CSS配合使用来设定样式。然后在区块内部又有一个h2标签，这代表一个二级标题。另外还有一个p标签，这代表一个段落。在这两者中直接从写入相应的内容即可在网页中呈现出来，它们也有各自的class属性。将代码保存后，在浏览器中打开该文件，我们就可以看到我们的网页的样式啦：

网页的样式

可以看到，在选项卡上显示了This is a Demo的字样，这是我们在head中的title里定义的文字。而网页正文是body标签内部定义的各个元素生成的，可以看到这里显示了二级标题和段落。

这个实例便是网页的一般结构。一个网页的标准形式是html标签内嵌套head和body标签，head内定义网页的配置和引用，body内定义网页的正文。

选择器

在HTML中，所有标签定义的内容都是节点，它们构成了一个HTML DOM树。我们知道网页是由一个个节点组成的，CSS选择器会根据不同的节点设置不同的样式规则，那么怎么来定位节点呢？

在CSS中，我们使用CSS选择器来定位节点。例如，上例中div节点的id为container，那么就可以表示为#container，其中#开头代表选择id，其后紧跟id的名称。另外，如果我们想选择class为wrapper的节点，便可以使用.wrapper，这里以点（.）开头代表选择class，其后紧跟class的名称。另外，还有一种选择方式，那就是根据标签名筛选，例如想选择二级标题，直接用h2即可。这是最常用的3种表示，分别是根据id、class、标签名筛选，请牢记它们的写法。

另外，CSS选择器还支持嵌套选择，各个选择器之间加上空格分隔开便可以代表嵌套关系，如#container .wrapper p则代表先选择id为container的节点，然后选中其内部的class为wrapper的节点，然后再进一步选中其内部的p节点。另外，如果不加空格，则代表并列关系，如div#container .wrapper p.text代表先选择id为container的div节点，然后选中其内部的class为wrapper的节点，再进一步选中其内部的class为text的p节点。这就是CSS选择器，其筛选功能还是非常强大的。

另外还有一种比较常用的选择器是XPath，这种选择方式后面会详细介绍。这样我们就有更加清晰的思路去解析和提取网页内容啦。