目录
一、网页开发技术
网页可以看作承载各种网站应用和信息的容器，它包含文字、图像、超链接、音频、视
频以及动画等内容。通过查看网页的源代码可知，网页实际上是一个
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 所示。
在图 2-13
中，花括号用于容纳
JSON
对象，方括号用于容纳数组。
JSON
数据写为名称
/
值对，名称与值之间以冒号进行分隔，例如，
"firstName": "Bill""lastName": "Gates"
等。由图
2-13
可知，最外层的花括号中有一个
JSON
对象，对象的名称为
employees
，值为一个数组。
该数组包含多个对象，每个对象包含两个名称
/
值对。
4198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
