下载掌阅APP，畅读海量书库
立即打开
浏览器中显示的网页是浏览器根据网页源代码进行渲染后呈现出来的。网页源代码规定了网页中要显示的文字、链接、图片等信息的内容和格式。为了从网页源代码中提取数据，需要分析网页的结构，找到数据的存储位置，从而制定提取数据的规则，编写出爬虫的代码。因此，本节先来学习网页源代码和网页结构的基础知识。
下面以谷歌浏览器为例，介绍两种查看网页源代码的方法。
1. 使用右键菜单查看网页源代码
在谷歌浏览器中使用百度搜索引擎搜索“当当”，
在搜索结果页面的空白处右击，
在弹出的快捷菜单中单击“查看网页源代码”命令，如下图所示。
随后会弹出一个窗口，显示当前网页的源代码，如下图所示。利用鼠标滚轮上下滚动页面，能够看到更多的源代码内容。
2. 使用开发者工具查看网页源代码
开发者工具是谷歌浏览器自带的一个数据挖掘利器，它能直观地指示网页元素和源代码的对应关系，帮助我们更快捷地定位数据。
在谷歌浏览器中使用百度搜索引擎搜索“当当”，然后按【F12】键，即可打开开发者工具，界面如下图所示。此时窗口的上半部分显示的是网页，下半部分的开发者工具中默认显示的是“Elements”选项卡，该选项卡中的内容就是网页源代码。源代码中被“<>”括起来的文本称为网页元素，我们需要提取的数据就存放在这些网页元素中。
单击开发者工具左上角的元素选择工具按钮
，按钮变成蓝色，
将鼠标指针移到窗口上半部分的任意一个网页元素（如百度的徽标）上，该元素会被突出显示，
同时开发者工具中该元素对应的源代码也会被突出显示，如下图所示。
在实际应用中，常常会将上述两种方法结合使用。在这两种方法打开的界面中，都可以通过快捷键【Ctrl+F】打开搜索框，搜索和定位我们感兴趣的内容，从而提高分析效率。
需要注意的是，使用这两种方法看到的网页源代码可能相同，也可能不同。两者的区别为：前者是网站服务器返回给浏览器的原始源代码，后者则是浏览器对原始源代码做了错误修正和动态渲染的结果。
如果使用这两种方法看到的网页源代码差别较大，则说明该网页做了动态渲染处理。对于未做动态渲染的网页和做了动态渲染的网页，获取网页源代码的方法是有区别的，后面会分别讲解。
在开发者工具中显示网页源代码后，可以对网页结构进行初步了解。如下图所示，开发者工具中显示的网页源代码的左侧有多个三角形符号。一个三角形符号可以看成一个包含代码信息的框，框里面还嵌套着其他框，单击三角形符号可以展开或隐藏框中的内容。
由此可见，网页的结构就相当于一个大框里嵌套着一个或多个中框，一个中框里嵌套着一个或多个小框，不同的框属于不同的层级。通过网页源代码前的缩进，我们可以很清晰地查看它们的层级关系。
◎代码文件：test.html
前面利用开发者工具查看了网页的源代码和基本结构，下面使用PyCharm创建一个简单的网页，帮助大家进一步认识网页结构的基本组成。
在PyCharm中执行“File>New”菜单命令，在弹出的列表中单击“HTML File”选项，再在弹出的对话框中输入文件名“test”，按【Enter】键，PyCharm会自动补全文件的扩展名，创建一个名为“test.html”的HTML文档。HTML（HyperText Markup Language）是一种用于编写网页的编程语言。
该HTML文档的内容并不是空白的，PyCharm会自动生成一些网页源代码，搭建出一个基本框架，如下图所示。
因为我们接触到的网页大多数是中文内容，所以这里先将第2行代码中代表英文的“en”修改为代表中文的“zh-CN”。然后将鼠标指针放在代码编辑区的任意位置，在编辑区的右上方会显示浏览器工具栏，如下图所示。单击工具栏中的任意一个浏览器图标，就能用对应的浏览器打开该HTML文档。这里单击谷歌浏览器的图标。
浏览器打开HTML文档后，会将其中的源代码渲染成网页并显示出来。因为当前HTML文档的<body>标签下还没有任何内容，所以显示的网页是空白的。如果要为网页添加内容元素，就要在HTML文档中添加对应元素的代码。
从前面展示的网页源代码可以看出，大部分网页元素是由格式类似“<×××>文本内容</×××>”的代码来定义的，这些代码称为HTML标签。在PyCharm自动生成的网页源代码的基础上，我们可以继续添加HTML标签和文本内容来搭建自己的网页。下面就来介绍一些常用的HTML标签。
1. <div>标签——定义区块
<div>标签用于定义一个区块，表示在网页中划定一个区域来显示指定的内容。区块的宽度和高度分别用参数width和height来定义，区块边框的格式（如粗细、线型、颜色等）用参数border来定义，这些参数都存放在style属性下。
如下图所示，在“test.html”文件的<body>标签下方输入两行代码，添加两个<div>标签，即添加两个区块。
输入的代码定义了两个区块的宽度和高度均为100 px，但是区块的边框粗细和颜色不同，区块中的文本内容也不同。在浏览器工具栏中单击谷歌浏览器的图标，打开修改后的“test.html”文件，并按【F12】键打开开发者工具查看网页源代码，效果如下图所示。可以看到，网页源代码经过浏览器的渲染后得到的网页中显示了两个边框粗细和颜色不同的正方形，正方形里的文本就是源代码中被<div>标签括起来的文本。
2. <ul>标签、<ol>标签和<li>标签——定义列表
<ul>标签和<ol>标签分别用于定义无序列表和有序列表。<li>标签位于<ul>标签或<ol>标签之下，一个<li>标签代表列表中的一个项目。无序列表中的<li>标签在网页中显示的项目符号默认为小圆点，有序列表中的<li>标签在网页中显示的序号默认为数字序列。
在<body>标签下添加一个<div>标签，再在<div>标签下添加<ul>、<ol>和<li>标签，如下左图所示。使用谷歌浏览器打开修改后的网页并用开发者工具查看源代码，效果如下右图所示。
3. <h>标签——定义标题
<h>标签用于定义标题，它细分为<h1>到<h6>共6个标签，所定义的标题的字号从大到小依次变化。
在<body>标签下添加<h>标签的代码，如下左图所示。使用谷歌浏览器打开修改后的网页并用开发者工具查看源代码，效果如下右图所示。
4. <a>标签——定义链接
<a>标签用于定义链接。在网页中单击链接，可以跳转到<a>标签的href属性指定的页面地址。
在<body>标签下添加<a>标签的代码，如下左图所示。使用谷歌浏览器打开修改后的网页并用开发者工具查看源代码，效果如下右图所示。此时如果单击网页中的链接文字“百度的链接”，会跳转到百度搜索引擎的首页。
5. <p>标签——定义段落
<p>标签用于定义段落。不设置样式时，一个<p>标签的内容在网页中显示为一行。
在<body>标签下添加<p>标签的代码，如下左图所示。使用谷歌浏览器打开修改后的网页并用开发者工具查看源代码，效果如下右图所示。
6. <span>标签——定义行内元素
<span>标签用于定义行内元素，以便为不同的元素设置不同的格式。例如，在一段连续的文本中将一部分文本加粗，为另一部分文本添加下划线，等等。
在<body>标签下添加<span>标签的代码，如下页左图所示。使用谷歌浏览器打开修改后的网页并用开发者工具查看源代码，效果如下页右图所示。可以看到两个<span>标签中的文本显示在同一行，并且由于没有设置样式，两部分文本的视觉效果没有任何差异。
7. <img>标签——定义图片
<img>标签用于显示图片，src属性指定图片的网址，alt属性指定在图片无法正常加载时显示的替换文本。在<body>标签下添加<img>标签的代码，如下图所示。
使用谷歌浏览器打开修改后的网页，可看到图片的显示效果，如下图所示。
通过前面的学习，相信大家对网页的结构和源代码已经有了基本的认识。下面对百度新闻的页面结构进行剖析，帮助大家进一步理解各个HTML标签的作用。
在谷歌浏览器中打开百度新闻体育频道（https://news.baidu.com/sports）。然后按【F12】键打开开发者工具，在“Elements”选项卡下查看网页的源代码，如下图所示。其中<body>标签下存放的就是该网页的主要内容，包括4个<div>标签和一些<style>标签、<script>标签。
这里重点查看4个<div>标签。在网页源代码中分别单击前3个<div>标签，可以在窗口的上半部分看到分别在网页中选中了3块区域，如下图所示。
单击第4个<div>标签，可看到选中了网页底部的区域，如下图所示。
单击每个<div>标签前方的折叠/展开按钮，可以看到该<div>标签下包含的标签，可能是另一个<div>标签，也可能是<ul>标签、<li>标签等，如下图所示，这些标签同样可以继续展开。这样一层层地剖析，就能大致了解网页的结构组成和源代码之间的对应关系。
前面介绍<a>标签时定义的是一个文字链接，而许多网页源代码中的<a>标签下还包含<img>标签，这表示该链接是一个图片链接。下图所示为百度新闻页面中的一个图片链接及其对应的源代码，在网页中单击该图片，就会跳转到<a>标签中指定的网址。
经过剖析可以发现，百度新闻页面中的新闻标题和链接基本是由大量<li>标签下嵌套的<a>标签定义的。取出<a>标签的文本和href属性值，就能得到每条新闻的标题和详情页链接。
读者可以在谷歌浏览器中打开其他网页，然后用开发者工具分析网页的源代码。多做这种练习，能够更好地理解网页的结构组成，对后面学习数据爬取有很大帮助。