1.2 网页知识
网页是万维网最基本的信息表达媒介，也是网络爬虫最主要的数据来源。网页主要由HTML、CSS和JavaScript代码组成，CSS和JavaScript代码可以直接嵌入HTML文档中，也可以作为外部文件被引用。HTML用于描述网页内容，CSS用于呈现外观样式，JavaScript用于定义页面动作。如果将网页比喻成一个人，那么HTML、CSS和JavaScript分别相当于人的骨架、皮肤和肌肉。三者结合起来才能构成一个生动的网页。
1.2.1 HTML
HTML（HyperText Marked Language，超文本标记语言）是制作网页的标准语言。之所以称为超文本（HyperText），一方面是因为网页中包含超链接（HyperLink），另一方面是因为网页是一种超媒体（HyperMedia）数据——能够在文本中嵌入图形、图像、声音、动画、视频等其他形式的媒体资源。
HTML使用标记标签（markup tag）描述网页元素，标签用尖括号包围起来（如<body>）。HTML文档由标签和文本排列、嵌套而成，以下给出了一个示例文档。
第1行<!DOCTYPE html>用于说明该文档的类型；第2行“<!--”与“-->”之间为注释文本，起解释说明的作用；第3行<html>是HTML文档的起始标签（与结束标签</html>相匹配），lang属性说明该网页的主要语言为中文；<head>标签和<body>标签包含在<html>中，它们都是成对出现的标签，分别代表网页的“头”和“体”。
网页相关参数和引用资源通常在<head>中指定。本例中的<meta charset="UTF-8">说明该网页编码格式为UTF-8，并在<title>标签中指定网页标题；<body>是网页的主体部分，可以嵌套多种标签以呈现网页内容。
在<body>中首先定义了1个区块（<div>标签），其id属性值“container”唯一标识了该元素；区块中包含1个标题（<h1>标签）和3个段落（<p>标签）；区块之后又添加了一个指向“网易首页”的超链接（<a>标签）。网页显示效果如图1-11所示。
HTML文档中不仅可以包含文本数据和超链接对象，还可以包含图像、声音、视频等多媒体数据。例如，我们可以使用<img>标签在网页中插入一张图片：
上述标签的width和height属性定义了图像的大小（300×400像素），src属性指定了图片原始数据的URL（"../pic/dog.png"）。注意：这是一个相对路径，假设当前网页的URL为http://localhost/html/index.html，那么图片的实际URL为http://localhost/pic/dog.png。
图1-11 在浏览器中显示HTML文档
HTML提供了一系列具有特定含义的标签，可以表示标题、段落、列表、表格、图片、声音、视频等丰富的页面元素。HTML标签一般成对出现，即同时包含起始标签和结束标签（如<p>和</p>）；也有少量标签可以独立使用，即仅包含起始标签（如<br>）。常用的HTML标签如表1-10所示。
表1-10 常用的HTML标签
（续）
注意：
1）HTML文档中的标签都是预定义标签，用户不能随意创造标签（浏览器将无法识别）。
2）成对标签中可以嵌套其他标签或文本，独立标签则不能。
3）标签之间的嵌套不是任意的，需要符合一定的语义规则（如<tr>应当包含在<table>中）。
1.2.2 CSS
CSS（Cascading Style Sheet，层叠样式表）是一套描述网页元素样式的规范。CSS不仅可以静态地修饰网页，还可以配合脚本语言实现丰富的动态效果。“层叠”是指当HTML引用多个样式文件发生冲突时，浏览器将依据层叠顺序进行处理；“样式”指网页元素的大小、颜色、间距、排列方式等属性。每条CSS规则由“选择器”和“样式列表”组成，其基本格式如图1-12所示。
图1-12 CSS规则示例
“选择器”用于定位HTML元素，“样式列表”用于描述具体样式。样式列表用“{}”括起来，其中可以包含多条样式声明，声明之间以“;”分隔；每条声明由“属性名”和“值”组成，属性名和值间以“:”连接。属性名是CSS语法中规定的关键字，每个属性规定了样式修饰的一个方面。上述CSS规则表示：将所有段落（<p>标签）的文本颜色（color）设置为蓝色（blue），字体大小（font-size）设为12px。表1-11给出了常见的样式属性。
表1-11 常见的C S S属性
我们可以通过<style>标签将CSS代码直接嵌入HTML文档中，也可将其保存在独立的CSS文件中。若网页需要应用某种样式，可通过<link>标签引入相关CSS文件。
CSS选择器用于选择应用样式的网页元素，语法简洁但功能强大。CSS选择器的基本选择条件包括id、class和标签名，常用的CSS选择器语法如表1-12所示。
表1-12 CSS选择器语法
（续）
（续）
CSS选择器具有元素定位的功能，可以用于网络爬虫数据抽取。网页中“置顶”的帖子、“聚焦”的新闻、“特价”的商品等，其显示样式往往与众不同。例如，网易的新闻列表中有些标题加粗显示（如图1-13所示），原因在于其class属性被设为“cm_fb”。我们可以据此设置抽取条件，从而更精准地抽取数据。
图1-13 网页中加粗的标题
1.2.3 JavaScript
JavaScript（简称“JS”）是一种轻量级的脚本语言，广泛应用于Web前端，能够运行在几乎所有的浏览器上。JavaScript不仅能够按照DOM标准访问页面元素，还可以通过AJAX技术实现对Web资源的异步加载。
说明：虽然JavaScript与Java在名称上相近，但它们是两种完全不同的编程语言。DOM（Document Object Model，文档对象模型）是一种用于访问HTML等文档元素的W3C标准。AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）能够在不刷新页面的情况下与服务器进行数据交换。
JavaScript代码既可以直接嵌入HTML文档中，也可以写成单独的JS文件。若直接嵌入HTML文档，JavaScript代码必须包含在<script>与</script>标签之间，<script>标签可以嵌入网页的任何位置，但通常放在<head>中。下面给出了一个示例：
上述文档的JavaScript代码位于<head>标签内，代码中定义了一个名为myFunction的函数；同时为<button>元素添加onclick事件，当此按钮被单击时就会执行myFunction函数。加载上述网页，单击按钮前后的对比如图1-14所示。
图1-14 在网页中执行JavaScript代码前后的对比
我们也可以将JavaScript代码存放在单独的JS文件中，在HTML文档同目录下新建一个名为“myScript.js”的文件，其代码如下：
将HTML文档内容调整如下：
在HTML文档中通过<script>标签的src属性引入myScript.js文件，此时标签内容为空即可。经过上述调整，我们将1个HTML文档拆分成两个文件（HTML和JS），但运行结果保持不变。将JavaScript代码保存为单独的文件，不仅有利于功能划分，而且能够提高代码的复用率。这与单独存放CSS文件具有类似的意义。