网页的结构

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

python 爬虫 执行js代码 python爬虫jsp网页_python 爬虫 执行js代码

first_web.html

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

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

python 爬虫 执行js代码 python爬虫jsp网页_python 爬虫 执行js代码_02

网页的样式

可以看到,在选项卡上显示了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,这种选择方式后面会详细介绍。这样我们就有更加清晰的思路去解析和提取网页内容啦。