2.2 网页基础_Python 3网络爬虫实战-QQ阅读男生科幻网

书名：Python 3网络爬虫实战
作者名：胡松涛
本章字数：4636字
更新时间：2021-03-26 22:27:46

2.2　网页基础

一个网站是由若干个网页组成的，可以说网页是构成整个网络的基石。本节就来了解一下有关网页的基础知识。

2.2.1　网页的组成

一般网站的页面都有文字、图片、超链接、表格、表单、动画及框架等。下面来详细介绍这些组成元素。

1．框架

框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示出来。例如，我们可以在一个框架内放置导航栏，另一个框架中的内容可以随着单击导航栏中的链接而改变，这样我们只要制作一个导航栏的网页即可，而不必将导航栏的内容复制到各栏目的网页中去。

2．文本

文本是网页中的主要信息。在网页中可以通过字体、字号、颜色、底纹以及边框等来设置文本属性。这里的文字指的是文本文字，而并非图片中的文字。在网页制作中，文字可以方便地设置成各种字体和大小，但是这里建议用于正文的文字不要太大，也不要使用太多的字体，中文文字使用宋体、9磅或者12、14像素左右即可，因为文字过大在显示器中显示时线条不够平滑。颜色也不要使用得太过复杂，以免影响用户视觉。大段文本文字排列建议参考优秀的报纸杂志等。

3．图片

我们能够看到丰富多彩的网页，都是因为网页中有了图片，可见图片在网页中的重要性。使用在网页上的图片一般为JPG和GIF格式的，即以.jpg和.gif为后缀的文件。

4．超链接

超链接是整个网站的通道，它是把网页指向另一个目的端的链接，例如指向另一个网页或相同网页上的不同位置。这个目的端通常是另一个网页，也可以是图片、电子邮件地址、文件、程序，或者也可以是本网页的其他位置。超链接可以是文本或者图片。超链接广泛地存在于网页的图片和文字中，提供与图片和文字内容相关的链接。在超链接上单击，即可链接到相应地址（URL）的网页。有链接的地方，鼠标指到光标会变成小手的形状。可以说超链接是Web的主要特色。

5．表格

表格是网页排版的灵魂，使用表格排版是网页的主要制作形式之一。通过表格可以精确地控制各网页元素在网页中的位置。表格并非指网页中直观意义的表格，范围要更广一些，它是HTML语言中一种元素。表格主要用于网页内容的排列，组织整个网页的外观，通过在表格中放置相应的内容即可有效地组合成符合设计效果的页面。有了表格的存在，网页中的元素得以方便地固定在设计位置上。一般表格的边线不在网页中显示。

6．表单

表单是用来收集站点访问者信息的域集。站点访问者填写表单的方式有输入文本、单击单选按钮与复选框以及从下拉菜单中选择选项。在添写好表单之后，服务器将表单保存到数据库，该数据库就会根据所设置的表单处理程序，以各种不同的方式进行处理。

7．动画

动画是网页上非常活跃的元素，通常制作优秀、有创意、出众的动画是吸引浏览者的有效方法。但太多的动画让人眼花缭乱，无心细看。这就使得对动画制作的要求越来越高。通常制作动画的软件有Flash、Web Animator等。Macromedia的Flash虽然出现的时间不长，但已经成为重要的Web动画形式。Flash不仅比HTML易学得多，而且有很多重要的动画特征，如关键帧、补间、运动路径、动画蒙版、形状变形和洋葱皮效果等。利用这个多才多艺的程序不仅可以制作Flash电影，而且可以把动画输出为QuickTime文件、GIF文件以及其他不同格式的文件（PICT、JPEG、PNG等）。

8．其他

网页中除了这些基本元素外，还包括横幅广告、字幕、悬停按钮、日戳、计数器、音频及视频等。

2.2.2　网页的结构

很多时候学习网页制作开发第一看到的印象深刻的就是以.html或.htm为后缀的网页，那么HTML基本语言结构是怎么样的呢？

先看一下HTML结构：

    <html>
    <head>
    <title>放置文章标题</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> //这
里设置网页的编码，此时为gb2312
    <meta name="keywords" content="关键字" />
    <meta name="description" content="本页描述或关键字描述" />
    </head>
    <body>
    这里就是正文内容
    </body>
    </html>

一个完整的网页其HTML源代码包括HTML DOCTYPE声明、Title、Head、网页编码声明等内容。

最初HTML 4版本下完整的HTML源代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>标题部分</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="本页描述或关键字描述" />
    </head>
    <body>
    内容
    </body>
    </html>

HTML 5版本结构完整的HTML源代码如下，注意其与HTML4版本在DOCTYPE方面的异同：

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <title>网页标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="此网页描述" />
    </head>
    <body>
    网页正文内容
    </body>
    </html>

无论是HTML还是其他后缀的动态页面，其HTML语言结构都是这样的，只是在命名网页文件时以不同的后缀结尾。

（1）无论是动态还是静态页面，都是以“<html>”开始的，然后在网页最后以“</html>”结尾。

（2）“<html>”后接着“<head>”页头，其在<head></head>中的内容是在浏览器中无法显示的，这里是给服务器、浏览器链接外部JavaScript、a链接CSS样式的区域，而“<title></title>”中放置的是网页标题，可在浏览器的标题栏看到，如图2-4所示。

图2-4　<title></title>显示位置图

（3）“<meta name="keywords" content="关键字" /> <meta name="description" content="本页描述或关键字描述" /> ”这两个标签里的内容是给搜索引擎看的，说明本网页的关键字及主要内容等，SEO（Search Engine Optimization，搜索引擎优化）可以用到。

（4）接着就是正文“<body></body>”，也就是常说的body区，这里放置的内容可以通过浏览器呈现给用户，其内容可以是table表格布局格式的内容，可以DIV布局的内容，也可以直接是文字。这里是非常重要的区域，是网页内容的呈现区。

（5）最后以“</html> ”结尾，也就是网页闭合。

以上是一个完整的简单HTML语言基本结构，通过以上步骤可以增加更多的样式和内容充实网页。

注意

网页一般根据XHTML标准都要求每个标签闭合，比如以<html>开始，以</html>闭合。如果没有闭合，如<meta name="keywords" content="关键字" />就没有</meta>，此时就要使用<meta内容…/>来完成闭合。

以上是简单的HTML语言结构，如果需要查看更丰富的HTML语言结构，可打开一个网站的网页，然后在浏览器界面中使用快捷键Ctrl+U来查看网页源代码，这样可以根据此源代码来分析此网页的HTML语言结构与内容。

2.2.3　节点树及节点间的关系

HTML网页文档从本质上来说是由HTML源代码构成的，而HTML源代码是一个树状结构，由一个个不同的节点构成了整个树。这一小节来介绍节点树及节点之间的关系。

1．DOM节点树

首先来看DOM节点树。文档对象模型（Document Object Model, DOM）是W3C（万维网联盟）组织推荐的处理可扩展置标语言的标准编程接口。这是一种与平台和语言无关的应用程序接口，DOM可以动态地访问程序和脚本，更新其内容、结构和WWW文档的风格。根据W3C的DOM标准，文档中的所有内容都是节点，节点是DOM的最小组成单元。浏览器会根据DOM模型将文档解析成一系列节点，这些节点组成一个树状结构，称为DOM节点树。

DOM节点树体现了文档的层次结构，它有两种类型：一种是DOM文档节点树；另一种是DOM元素节点树。DOM文档节点树包含文档中所有类型的节点，DOM元素节点树只包含元素节点。

可以通过DOM提供的一些方法及属性来遍历文档节点树。

首先来遍历所有Node节点。遍历DOM文档节点树的方法兼容所有浏览器。

parentNode：获取父节点。
childNodes：获取所有子节点（包含元素节点和文本节点）。
firstChild：获取第一个子节点。
lastChild：获取最后一个子节点。
nextSibling：获取元素之后紧跟的节点。
previousSibling：获取元素之前紧跟的节点。

说明

可以使用JavaScript配合以上方法来获取相应的节点。

以下属性在遍历元素节点树时会使用到。只遍历元素节点，其余类型的节点忽略。除了children方法外，其余方法在IE 8及以下版本的浏览器中都不兼容。

parentElement：获取父元素。
children：获取所有子元素。
childElementCount：获取子元素的数量。
firstElementChild：获取第一个子元素。
lastElementChild：获取最后一个子元素。
nextElementSibling：获取元素后紧跟的元素。
previousElementSibling：获取元素前紧跟的元素。

下面的示例将演示如何使用演绎法获取一个元素的所有子节点。

【示例2-1】获取元素的子节点

以上代码使用getElementsByTagName()方法获取标签“ul”元素，然后通过元素的children属性返回该元素的所有子元素节点，即其中的所有“li”。这里使用children是因为该属性只返回元素节点，而不会返回文本节点，这样便于更好地获取其中的内容。然后通过遍历来弹出每一个子元素节点的文本内容。将以上代码保存为：2-1.htm，执行该代码的结果如图2-5所示。

图2-5　获取元素的子节点

2．DOM节点之间的关系

DOM将文档解析成一个由多层次节点构成的结构，即DOM结构。节点是DOM结构的基础。DOM节点包含12种类型，每种类型的节点分别表示文档中不同的信息及标记。节点之间的关系构成了层次，整个文档表现为一个以特定节点为根节点的树形结构。节点关系类似于传统的家族关系，节点树相当于家谱。

提示

DOM的节点属性有一个特征，即DOM节点的关系属性都是只读的。

（1）parentNode，父级属性。每个节点都有一个parentNode属性，该属性指向当前节点在节点树中的父节点。对于一个节点来说，它的父节点只可能为3种类型，分别是元素节点、文档节点和文档片段节点。如果父节点不存在，就返回null。

（2）parentElement，与parentNode属性不同的是，该属性指向当前节点在节点树中的父元素节点。IE浏览器中只有元素节点有该属性，其他浏览器中所有类型的节点都有该属性。

下面通过一个示例来说明如何获取一个节点的父节点。

【示例2-2】获取节点的父节点

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <title>获取元素父节点</title>
    </head>
    <body>
    <div>
        <strong></strong>
        <span></span>
    </div>
    <script language="javascript">
        var strong = document.getElementsByTagName("strong")[0];
        console.log(strong.parentElement);
    </script>
    </body>
    </html>

以上代码先调用getElementsByTagName()获取标签<strong>（返回一个列表中的第一个节点），然后使用节点的属性parentElement来获取节点的父节点，并将内容在控制台输出。将以上代码保存为：2-2.htm，执行该代码的结果如图2-6所示。

图2-6　获取节点的父节点

（3）childNodes子级属性，childNodes属性返回一个只读的NodeList集合，保存着当前节点的第一层子节点。

将示例2-2的代码，修改如下：

    <script>
        var div = document.getElementsByTagName("div")[0];
        console.log(div.childNodes);
    </script>

以上代码使用childNodes来获取div的子节点。将修改后的代码保存为：2-3.htm，执行该代码的结果如图2-7所示。

图2-7　获取元素的子节点

查看图2-7中返回了div的所有子节点，分别是text、strong、text、span、text，其length为5。

children返回一个只读的HTMLCollection集合，保存着当前节点的第一层子元素节点。在代码2-1.htm中已经对children属性做了说明，这里不再赘述。

childElementCount属性返回当前节点下子元素节点的个数，相当于children.length。IE 8及以下版本的浏览器中不兼容。

将示例2-2的代码修改如下：

    <script>
        var div = document.getElementsByTagName("div")[0];
        console.log(div.childElementCount); //2
    </script>

以上代码使用节点的childElementCount属性来获取其所有子元素的数量。将代码保存为：2-4.htm，执行该代码的结果如图2-8所示。

图2-8　获取子元素数量

firstChild：当前节点的第一个子节点。IE 8及以下版本的浏览器忽略空白文本节点。
lastChild：当前节点的最后一个子节点。IE 8及以下版本的浏览器忽略空白文本节点。
firstElementChild：当前节点的第一个元素节点。IE 8及以下版本的浏览器不兼容。
lastElementChild：当前节点的最后一个元素节点。IE 8及以下版本的浏览器不兼容。
nextSibling：当前节点的后一个兄弟节点。IE 8及以下版本的浏览器忽略空白文本节点。
previousSibling：当前节点的前一个兄弟节点。IE 8及以下版本的浏览器忽略空白文本节点。
nextElementSibling：当前节点的后一个兄弟元素节点。IE 8及以下版本的浏览器不兼容。
previousElementSibling：当前节点的前一个兄弟元素节点。IE 8及以下版本的浏览器不兼容。

除了以上属性之外，节点还有两个方法，分别为hasChildNodes()方法和contains()方法。

hasChildNodes()：判断当前节点是否包含子节点，包含一个或多个子节点时返回true。子节点可以是任意类型的。
contains()：contains方法接收一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。参数若为后代节点即返回true，不一定是第一层子节点。IE和Safari不支持document.contains()方法，只支持元素节点的contains()方法。

下面的代码将演示如何调用方法判断某一个节点是否有下级节点，以及一个节点是否包含在另一个节点中。

【示例2-3】节点方法的调用

以上代码调用方法hasChildNodes()判断d1与s1有无子节点，再调用方法contains()判断某个节点是否是另一个节点的子节点。将代码保存为：2-5.htm，用浏览器打开，效果如图2-9所示。

图2-9　节点方法的使用

2.2.4　选择器

在DOM中要选择一个或多个节点，除了根据节点之间的各种父子兄弟关系选取之外，还可以通过DOM选择器来选择，DOM选择器大致有以下几种：

（1）document.getElementByID()，该方法根据提供的ID名称返回唯一元素。元素ID在IE 8以下的浏览器中不区分字母大小写，而且返回匹配name属性的元素。

（2）getElementsByTagName()，该方法提供的标签名返回一组元素，如果要对其中一个（即使是唯一一个）进行操作，就需要加上元素的数组引用标识，例如：

    <div id = "only">123</div>
    var div = document.getElementsByTagName('div');

把页面中的所有div都拿出来，放到一个类数组里，代表一个数组，代码如下：

    div.style.background = "red"

这样会报错。为了不报错，把这个div取出来需要采取如下操作：

    document.getElementsByTagName('div')[0];

尽管页面只有一个div，但选出来的永远是一组，所以要加下标。

（3）getElementsByName()，根据提供的name返回一组元素，注意只有部分标签能够生效（表单、表单元素、img、iframe）。

（4）getElementsByClassName()，根据提供的class属性返回一组元素，IE 8及以下版本不支持这样的操作。

关于这些方法的调用，在前面的例子中已经有所涉及，这里不再赘述。

2.2 网页基础

2.2.1 网页的组成