网页基础三剑客

一、网页开发技术

1．HTML

2．CSS

3．JavaScript

二、网页的结构

三、网页的分类

1．静态网页

2．动态网页

1．jQuery

2．AJAX

3．DHTML

2.3.4 网页数据的格式

1．XML

2．JSON

一、网页开发技术

网页可以看作承载各种网站应用和信息的容器，它包含文字、图像、超链接、音频、视

频以及动画等内容。通过查看网页的源代码可知，网页实际上是一个 HTML 文件。该文件包

含了一些特殊符号和文本，可通过特殊符号和文本对文字、图片、表格、声音等进行描述。

常用的网页开发技术包括 HTML 、 CSS 和 JavaScript 。其中， HTML 用于描述网页中的

内容，如文本、图片、声音等； CSS 用于设定网页的元素样式、页面布局； JavaScript 用于

向网页添加交互行为，如验证用户登录信息。下面分别对 HTML 、 JavaScript 和 CSS 进行

介绍。

1．HTML

HTML 的英文全称为 Hyper Text Markup Language ，即超文本标记语言，是一种用于创建

网页的标准标记语言。一个 HTML 文档由一系列的 HTML 元素组成， HTML 元素的组成如

图 2-5 所示。

在图 2-5 中，开始标签、内容、结束标签组合在一起便构成了一个完整的 HTML 元素，

关于各部分的说明如下。

开始标签：标识元素的起始位置，由尖角括号包裹着元素名称，如图 2-5 中的<h1>。
结束标签：标识元素的结束位置，与开始标签相似，只不过在元素名称之前多了一个

“ / ”，如图 2-5 中的 </h1> 。

内容：表示元素的内容，位于开始标签和结束标签之间，如图 2-5 中的“今天天气

真好！”。

HTML 中提供了许多标签，用于描述网页中的内容， HTML 的常用标签及说明如表 2-4

所示。

2．CSS

CSS（ Cascading Style Sheets ）通常称为 CSS 样式或层叠样式表，主要用于设置 HTML 页

面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框样式等）以及版面

的布局等外观显示样式。 CSS 以 HTML 为基础，它不仅可以提供丰富的控制字体、颜色、背

景及整体排版的功能，而且可以针对不同的浏览器设置不同的样式。例如，通过 CSS 控制登录页面中文字的大小、字体和背景颜色，如图 2-6 所示。

3．JavaScript

JavaScript 是一门独立的网页脚本编程语言，它可以做很多事情，但主流的应用是在 Web

上创建网页特效或验证信息。例如，使用 JavaScript 脚本语言对用户输入的内容进行验证。如

果用户在用户名文本框和密码文本框中未输入任何信息，那么单击“登录”按钮后将弹出相

应的提示信息，如图 2-7 所示。

二、网页的结构

如果想要了解一个网页的结构，我们可以直接在浏览器打开的快捷菜单中选择“检查”

命令。例如，使用 Chrome 浏览器打开百度首页，通过“检查”命令查看百度首页的网页结构

如图 2-8 所示。

从图 2-8 中可以看出，百度首页的源代码包含了众多 HTML 元素。这些 HTML 元素是互

相嵌套的，具有明显的层级关系，例如， <head> 元素与 <body> 元素属于同级关系， <body> 元

素与 <script> 元素存在父子关系。

HTML 页面中使用文档对象模型（ Document Object Model ， DOM ）来描述 HTML 页面的

层次结构。 DOM 出现的目的是将 JavaScript 和 HTML 文档的内容联系起来，通过使用 DOM

可以在 HTML 文档中添加、移除和操作各种元素。

根据互联网联盟（World Wide Web Consortium ， W3C ）的 HTML DOM 标准， HTML DOM

由节点组成， HTML 文档的所有内容都是节点，整个 HTML 文档是一个文档节点，每个 HTML

元素是元素节点，每个 HTML 属性是属性节点，每个注释是注释节点。

把一个 HTML 文档中的所有节点组织在一起，就构成一棵 HTML DOM 树。这些节点之

间存在层级关系， HTML DOM 节点树如图 2-9 所示。

在图 2-9 中， HTML DOM 节点树通过父、子以及兄弟等术语描述节点之间的关系。例如，

<html> 内部嵌套了 <head> ，它们属于父子关系； <head> 和 <body> 属于相同层级的节点，它们

属于兄弟关系。根据节点之间的关系，我们可以快速定位元素的位置。

三、网页的分类

网页可以分为静态网页、动态网页两种类型。关于这两种网页的介绍如下。

1．静态网页

静态网页包含的诸如文本、图像、Flash 动画、超链接等内容，在编写网页源代码时已经

确定。除非网页源代码被重新修改，否则这些内容不会发生变化。例如，edge浏览器首页就是一个静态网页，具体如图 2-10 所示。

静态网页具有以下几个特点。

静态网页的内容相对稳定，一旦上传至网站服务器，无论是否有用户访问，内容都会

一直保存在网站服务器上。

静态网页被访问的速度快，访问过程中无须连接数据库。
静态网页没有数据库的支持，内容更新与维护比较复杂。
静态网页的交互性较差，在功能方面有较大的限制。

值得一提的是，静态网页上展示的内容并非完全静止的，它也可以有各种视觉上的动态

效果，如 GIF 动图、 Flash 动画、滚动字幕等。

2．动态网页

相比静态网页，动态网页有数据库支撑、包含程序以及提供与用户交互的功能，如用户

如，登录某网站后查询百度公司信息的页面是一个动态网页，如图 2-11 所示。

动态网页具有以下一些特点。

动态网页一般以数据库技术为基础。
动态网页并不是独立存在于服务器上的网页文件，只有当用户发送请求时，服务器才

会返回完整的网页。

采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、

用户管理、订单管理等。

对于网络爬虫来说，静态网页的内容都写在源代码中，比较容易抓取；动态网页的内容

不一定写在网页源代码中，可能需要用户登录后才能显示完整，这增加了抓取难度。

多学一招：动态网页上使用的技术

这里所说的动态网页是在网页中依赖 JavaScript 动态加载数据的网页，使用了 JavaScript

的网页能够在 URL 不变的情况下改变网页的内容。动态网页上使用的技术主要包括 jQuery 、

AJAX 和 DHTML ，关于这几种技术的介绍如下。

1．jQuery

jQuery 是一个快速、简洁的 JavaScript 框架，于 2006 年 1 月由 John Resig （约翰 · 瑞森）

发布。该框架的设计宗旨是“ write less, do more ”，即写更少的代码，做更多的事情。 jQuery

框架中封装了 JavaScript 常用的代码，并对一些功能进行了优化，包括 HTML 文档操作、事

件处理、动画设计等。

如果一个网站中使用了 jQuery 框架，那么我们可以在网页源代码中看到 jQuery 入口，具

体代码如下。

<script type="text/javascript" 
src="https://statics.huxiu.com/w/mini/static_2015/js/jquery-1.11.1.min.js?v=201
512181512"></script>

需要注意的是， jQuery 可以动态地生成 HTML 内容，但只有在 JavaScript 代码执行之后

才会显示。

2．AJAX

AJAX（异步 JavaScript 和 XML ）并不是一门新的编程语言，而是一种用于创建又快又好

和交互性强的 Web 应用程序的技术。使用了 AJAX 技术的 Web 应用程序能够快速地将增量更

新呈现在用户界面上，而不需要重载整个页面，这使得该程序能够快速地回应用户的操作。

如果用户提交表单，或者从服务器获取响应信息之后，网站的页面不需要重新刷新，那

么当前访问的网站便使用了 AJAX 技术。

3．DHTML

DHTML 是 Dynamic HTML 的简称，它其实并不是一门新的语言，而是 HTML 、 CSS 和

客户端脚本的集成。 DHTML 可以通过客户端脚本改变网页元素（ HTML 、 CSS ，或者二者皆

被改变），例如，按钮每次被单击后改变其背景色。

网页是否属于 DHTML ，关键要看有没有用 JavaScript 控制 HTML 和 CSS 元素。

2.3.4 网页数据的格式

互联网包含了许多数据，这些数据一般分为非结构化数据、结构化数据两种类型。其中

非结构化数据是指数据结构不规则或不完整，没有预定义的数据模型，不方便使用数据库二

维表结构表现的数据，包括文本、图片、 HTML 等；结构化数据是方便使用二维表结构表现

的数据，这种数据严格遵循数据格式与长度规范，包括 XML 和 JSON 等。

对于网络爬虫而言，它经常需要解析 HTML 、 XML 和 JSON 类型的数据，我们在前面介

绍过 HTML ，所以在这里主要对 XML 和 JSON 进行介绍。

1．XML

XML 是 Extensible Markup Language 的缩写，它是一种类似于 HTML 的标记语言，称为

可扩展标记语言。可扩展指的是用户可以按照 XML 规则自定义标记。 XML 片段如图 2-12

所示。

在图 2-12 中， <employees> 、 <employee> 、 <firstName> 、 <lastName> 都属于 XML 元素，

每个元素由开始标记和结束标记组成，必须是成对出现的。 <employees> 元素是整个 XML 片

段的根元素，它包含了 3 个 <employee> 子元素，每个 <employee> 元素又包含了 <firstName> 和

<lastName> 这 2 个子元素。在 XML 文档中，通过元素的嵌套关系可以很准确地描述具有树状

层次结构的复杂信息。

2．JSON

JSON（ JavaScript Object Notation ， JavaScript 对象表示法）是一种轻量级的数据交换格式，它采用完全独立于编程语言的文本格式存储和表示数据。JSON 具有简洁、清晰的层次结构，便于人们阅读和编写，同时便于机器解析和生成，是理想的数据交换语言。JSON 片段如图 2-13 所示。