深入解析网页定义与浏览器绘制流程：HTML文件的本质与标记规则

1. 什么是网页？

浏览器绘制网页的过程是：浏览器将用户输入的URL告诉网站的服务器，然后网站的服务器将URL对应的网页返回给浏览器，浏览器绘制网页。

这里所说的网页一般是后缀为html的文件。

网页文件与我们平时处理的文件没有什么不同。我们通常知道Word文件的后缀是.doc，可以通过Word打开。图片文件具有.jpg后缀，可以通过Photoshop打开；网页有.html后缀，可以通过浏览器打开。

网页文件的本质也是文本文件。为了让文字和图片呈现出各种风格，网页文件通过一种称为HTML语法的标记规则来标记原始文本。

(1) 手动下载网页

我们以 Omelette.com 为例来了解一下该网页的本质。使用浏览器打开jandan.net/这个链接，你会看到如下界面。能…

右键单击空白区域，另存为，然后选择保存类型：仅 HTML。

接下来返回桌面，可以看到网页已经保存到桌面了。后缀是html。这就是我们所说的网页文件。

(2)网页内容初步探索

我们右键单击刚刚下载的文件，选择使用 VS Code 打开它。打开的文件内容如下图所示。

这是网页文件的实际内容（在浏览器绘制之前）。我们暂时不用担心难以理解的代码。你还记得我们看到的第一条新闻吗？ “今天的价格不错……”。 （您的密码）

我们在 VS Code 中通过 CTRL + F 调出搜索面板，搜索“Today's Good Price”（暗码）。可见这条消息被成功找到了。虽然周围有很多未知的代码，但也可以确认我们看到的Omelette.com的主页确实是这个html文件。

2.如何下载普通网页？

Python以系统类的形式提供了下载网页的功能，放置在urllib3模块中。这里的类相当多，我们不需要一一去使用。我们只需要记住主要用法即可。

(1) 获取网页内容

我们以 Omelette.com 为例。当我们打开这个网页时，排名第一的新闻是：“天文学家首次目睹黑洞的诞生”。

Omelette 更新了新消息，只需记住当时您的第一条新闻的标题即可。稍后我们会在我们下载的网页中搜索这个标题来验证我们下载的正确性。

首先，打开 vscode 并输入以下代码：

.ini

代码解读

复制代码

# 导入urllib3模块的所有类和对象 import urllib3 # 将要下载的URL保存在url变量中。英文中一般用url来表示URL的含义 url = "http://jandan.net/p/date/2021/03/23 " # 创建一个PoolManager对象，命名为http http = urllib3.PoolManager( ) # 调用http对象的request方法，传递一个字符串“GET”作为第一个参数 # 第二个参数是要下载的URL，也就是我们的url变量 # request方法会返回一个HTTPResponse类的对象，我们称之为response = http.request("GET", url) # 获取response对象的数据属性，保存在变量response_data中 response_data = response.data # 调用response_data对象的decode方法获取网页内容，存储在 html_content 中 # 变量中的 html_content = response_data.decode() # 打印 html_content print(html_content)

上述代码完成了下载完整网页的功能。还有几点需要注意：

执行上面的代码后，可以看到打印出了很多内容，和我们在第一部分手动保存的网页非常相似。这说明html_content变量中当前存储的是我们要下载的网页内容。

(2) 将网页保存到文件

既然html_content就是我们想要的网页内容，那么完成下载就只剩下最后一步了，那就是保存为文件。其实这一步与保存网页无关，而是我们如何将字符串保存到文件中。

在Python中，读取和保存文件是通过文件对象来完成的。接下来我们通过实际例子来了解一下这项技术。

创建一个新的Cell并输入以下代码：

.ini

代码解读

复制代码

# 调用open函数，三个参数都是字符串类型，第一个参数是要操作的文件名 # 第二个参数代表模式，w代表写文件，r代表读文件 # 第三个参数代表编码格式，一般用中文识别utf-8。 # open函数返回一个文件对象，我们将其存储在fo变量中 fo=open("jiandan.html","w",encoding="utf-8") # 调用文件对象的 write 方法，使用字符 spring上面存储网页内容的变量，html_content # 作为参数 fo.write(html_content) # 关闭文件对象 fo.close()

执行上述代码后，可以在VS Code左侧边栏中看到该文件夹​​中多了一个jiandan.html文件。这是我们刚才用Python代码保存的文件。

打开它，你会看到熟悉的网页内容。

(3)让我们的代码更加通用

刚才我们分别在两个单元格中实现了将网页保存为字符串和将字符串保存为文件。如果我们要抓取一个新的网页，要么需要直接修改之前的代码，要么需要复制代码。

这两种方法都不是很好。根据我们之前所学的知识，对于具有一定通用性的代码，我们可以将其重写为函数，以方便后续使用。

重写后的代码如下：

.ini

代码解读

复制代码

# 第一个函数用于下载网页并返回网页内容 # 参数url代表要下载的网页的URL。 # 整体代码与之前类似 defdownload_content(url): http=urllib3.PoolManager() response=http.request("GET",url) response_data=response.data html_content=response_data.decode() returnhtml_content # 第二个函数将将字符串内容保存到文件# 第一个参数是要保存的文件名，第二个参数是要保存的字符串内容的变量defsave_to_file(filename,content): fo=open(filename,"w",encoding="utf-8") fo .write(content) fo.close() url="http://jandan.net/" # 调用download_content 函数，传入 url，并将返回值存储在 html_content 中 # 变量 html_content=download_content(url) # 调用 save_to_file 函数，指定文件名为jiandan.html，然后将上一步得到的#html_content变量作为第二个参数传入save_to_file("jiandan.html",html_content)

经过这样的重写，我们在抓取新网页时就可以使用download_content函数和save_to_file函数快速完成这个过程，不再需要编写复杂的实现。

3、如何实现动态网页下载？

urllib3很强大，但是并不能一劳永逸地解决网页下载的问题。对于煎蛋这样的普通网页，urllib3可以表现得更好。然而，有一类网页的数据是动态加载的，即先出现网页，然后才延迟加载数据。那么 urllib3 可能无法完成它所做的事情。

我们以豆瓣的电视剧网页为例：

现在，让我们使用刚刚定义的两个函数来下载该网页。

.ini

代码解读

复制代码

url="https://movie.douban.com/tv" html_content=download_content(url) save_to_file("douban_tv.html",html_content)

代码很简单，就是将豆瓣电视剧网页下载到文件douban_tv.html中。执行代码后，可以在VS Code左侧的文件夹视图中看到成功生成了douban_tv.html文件，说明网页已经下载成功。

现在我们在VS Code中打开这个网页，搜索上图所示的电视剧：《山河令》。这一次，却奇迹般地找不到了。事实上，你会发现我们在网页上看到的电视剧名都找不到。

为什么下载了网页却搜索不到电视剧？出现这种现象的原因是豆瓣电视剧网页的电视剧列表部分是动态加载的，所以我们使用urllib3直接下载，但是只能下载到一个没有里面列表内容的shell网页。这种网页里面的数据就是动态加载的网页，我们统称为动态网页。

如何抓取动态网页？回过头来看，一个网页无论多么动态，最终都会展示给用户，所以浏览器应该是最了解网页内容的人。如果我们能够用代码来控制浏览器来帮助我们下载网页，那么我们应该可以解决动态网页的爬取问题。

接下来我们将介绍一个使用Python控制浏览器的强大工具：selenium。

(1)安装硒

Selenium不属于Python系统库，因此需要先安装它才能使用该库。

我们通常通过Anaconda命令行安装Python库。既然是模拟浏览器，那么我们的电脑首先得有浏览器。这里我们以 Chrome 为例。因此，在开始之前，您需要确保您的计算机上安装了 Chrome。

在准备阶段，我们已经安装了Anaconda套件。现在我们进入开始菜单（或者按桌面上的Win键）找到Anaconda 3文件夹，点击文件夹中的Anaconda Prompt程序。只需在 Mac 上使用终端即可。

打开后，会出现一个命令行窗口。在这个命令行中，我们可以输入conda install xxx来安装Python扩展库。

例如，在本例中，我们输入 conda install selenium 并按 Enter。界面会变成如下图，询问我们是否要确认安装，输入y并回车。

安装完成后，命令行窗口会回到要输入命令的状态，此时可以关闭。

返回VS Code，新建一个Cell，输入以下测试代码：

夏普

代码解读

复制代码

# 从selenium库导入webdriver类 fromseleniumimportwebdriver # 创建Chrome浏览器对象 brow=webdriver.Chrome() # 使用Chrome对象打开url（刚才豆瓣电视剧的url） brow.get(url)

运行代码将自动打开Chrome浏览器窗口并显示URL对应的网页。同时还会有提示说明该浏览器窗口是由程序控制的，如下图所示。

如果代码运行错误，会提示找不到chromedriver。这意味着您安装的 selenium 版本缺少 chromedriver。您可以按如下方式进行操作：

Python

代码解读

复制代码

# 导入webdriver类 from selenium import webdriver # 导入chromedriver importchromedriver_binary # 创建Chrome浏览器对象 brow = webdriver.Chrome() # 使用Chrome对象打开url（刚才豆瓣电视剧的url） brow.get(网址）

(2)使用selenium下载动态网页

如果刚才的代码已经成功运行并且Chrome界面已经打开，那么我们距离动态网页的最终下载已经不远了。当我们通过Chrome对象打开网页后，只需要访问Chrome对象的page_source属性即可获取网页的内容。

代码如下：

.ini

代码解读

复制代码

# 从selenium库导入webdriver类 from selenium import webdriver # 创建Chrome浏览器对象 brow = webdriver.Chrome() # 使用Chrome对象打开url（刚才豆瓣电视剧的网址） brow.get(url ) # 访问Chrome对象的page_source属性并保存在html_content变量中 html_content=brow.page_source # 调用我们之前定义的save_to_file函数，这次我们将其另存为double_tv1.html #保存的内容为html_content save_to_file("douban_tv1.html",html_content)

运行代码时，您可以看到 Chrome 已打开并加载了网页。电视剧列表加载完成后，可以在VS Code中看到double_tv1.html已成功创建。

这时候我们去这个档案里搜索山河岭，发现已经有结果了。这个html文件中已经有所有电视剧的信息。

至此，我们也实现了动态内容网页的下载功能。