通过实例学Python爬虫(一)——认识HTML网页与爬虫基础框架

写在前面的话:

        作者目前是一名计算机专业本科生,为了更好的巩固知识,记录学习心得,也为了更好锻炼自己的表达能力,因此计划对已学过半年的爬虫技术进行整理分享。

        对于爬虫技术入门,我认为理论与实操结合才能更好的掌握爬虫技术,所以此系列的每一篇文章中,我都会结合具体代码的简单实例,整理自己相关方面的心得,也供大家参考,同时也欢迎大家提出疑问或者建议,一起相互学习,共同进步!

本节梗概:

        1.对HTML网页结构进行简单介绍

        2.利用HTML+CSS完成一个简单网页

        3.简单了解爬虫基本框架,基本流程

一、认识HTML网页结构

1.简述

        日常生活中我们都会使用浏览器检索信息,是否想过浏览器为何能够按照我们的需求返回特定的页面?为何每个网页页面分布样式各有差异?网络页面的获取底层是如何实现的?数以千计的网络页面是如何存储的?针对这些问题,首先我们就要来了解一下网页基础信息。

2.认识HTML网页      

        浏览器中每个页面,即所对应的某个具体网址,都可以视为一个网页。网页内容的呈现也是依靠一些网络语言进行编写,常见的有HTML、PHP、JavaScript等,通过其对应的语言编写规范,即可展现各式各样的网页。在浏览器中可以通过 右键-检查(图1),即可查看当前页面对应的源代码(图2) 。

检查工具打开检查页面后,点击左上角小电视图标即可进入检查操作,鼠标点击网页界面后源码界面会自动锁定到对应代码部分 

图一、检查操作
图二、网页对应源代码

3.HTML语言基础

        HTML全称为超文本标记语言,是一种专门用来描述网页的语言,利用此语言可以在网页中添加文字、图片、视频、链接等。在语言规范方面,HTML语言主要依靠标记标签来定义页面内容,一个网页可以对应一个或者多个HTML文档。

        3.1  HTML标签介绍

  • 标签:在HTML语言中,被尖括号<>包括的关键词被称为标签,也就是HTML的基本部件,例如<body>、</body>、<head>、</head>、<br>....,不同标签有着不同作用。
  • 标签属性:比如标签<a  href="https://blog.csdn.net/m0_56364204?spm=1010.2135.3001.534">,标签<a>的href属性可以用于显示超链接;对于不同的标签,其拥有一些特有属性,用于辅助标签,使得标签更好的发挥起作用,
  • 元素:对于闭合标签来讲,闭合标签的开始标签到结束标签之间的代码被称为元素,比如标签<title>标题元素</title>,其中间就是元素;

         HTML文档的结构是使用HTML标签嵌套使用,整个文档通过标签可以形成一棵树形结构。整体来看,最外层为<html>-</html>标签,表明了此网页编写语言为HTML语言;其间又有两大部分组成:头部和主体,分别由<head>-</head>、<body>-</body>界定,其具体作用查看下表。在头部与尾部内又有许多小标签可选择使用比如<br>、<img>等。我们可以先编写一个简单的网页看一下这个整体结构:(可用记事本书写,完成后修改后缀为html即可直接打开)

<html>
	<head>
		<title> 网页标题 </title>
	</head>
	<body>
		认真与热爱<br>
		这个是换行标签<br>
		&nbsp这个特殊符号是空格<br>
		<a href='https://blog.csdn.net/m0_56364204?spm=1010.2135.3001.534'> 这是超链接</a>
	</body>
</html>
代码对应网页

        3.2  HTML常用标签

HTML常用标签介绍
       HTML标签                                                        作用
<html>、</html>闭合标签,HTML文档都以其为最外层标签,来界定文档的开始点与结束点;
<head>、</head>闭合标签,一般在<html>标签内部;对网页头部进行控制,描述页面标题、关键词、说明等信息;
<title>、</title>闭合标签,一般在<head>标签内部;通过元素来定义文档的标题
<base>空标签,一般在<head>标签内部;用来定义页面上所有链接的默认地址,为之后的相对路径做出基准;其含有href属性,用来表明具体的默认地址
<meta>空标签,一般在<head>标签内部;用来描述HTML文档的字符编码方式、关键词、描述信息等;其含有charset属性,用来指定编码格式
<body>、</body>闭合标签,一般在<html>标签内部;对网页实际内容进行控制,表达关键信息,所关注的信息内容大部分也是封装在其间;
<p>、</p>闭合标签,一般在<body>标签内部;用来定义段落,其间的元素会自动开头缩进,显示为标准的一个段落;
<div>、</div>闭合标签,一般在<body>标签内部;用来分隔出一块区域,区域内可以包含段落、标题、表格等消息,经常用来网页页面布局;其含有id属性,用于标识单独的、唯一的元素;(一般div会与CSS结合使用,CSS可以修改区域显示的样式,具有通用性)

<h1>、</h1>

<h2>、</h2>

<h4>、</h4>

闭合标签,一般在<body>标签内部;标题标签,使用在一个网页中唯一标题、重要栏目、重要标题下;其后数字代表着标题的重要性程度,一共四个等级;
<b>、<\b>闭合标签,一般在<body>标签内部;作用为加粗,使得其间元素加粗;
<img>空标签,一般在<body>标签内部;用来显示图片;其src属性来表示图片地址,可用相对路径(相对base标签内的路径),也还含有width、height属性,表示图片高宽;
<a>、</a>闭合标签,一般在<body>标签内部;用于显示超链接;其属性href用来指定链接的目标
<table>、</table>闭合标签,一般在<body>标签内部;用来定义表格;其属性border用来指定边框厚度,其一般要与表格标签<th>、<tr>、<td>结合使用;

<tr>、</tr>

<th>、</th>

<td>、</td>

闭合标签,一般在<table>标签内部,<tr>用来表明一行、<th>表示标题列、<td>表示单元格

4. HTML网页的简单制作

        结合具体实例才能更好理解所学知识,现在根据上面的基础知识构建一个自己的网页;本次实例为制作简单HTML+CSS网页,以“河南风景”为主题,制作一个介绍河南城市景点的网页。

4.1  定义网页头部代码

         在<head>-</head>头部信息中,完成一些指定操作:

  • 使用<meta>的charset属性来指定文档的编码格式
  • 使用<title>的元素来指定文档的标题
  • 使用<style>来定义一些需要使用的样式模板
  • 事先准备纯色背景图,并且把背景图的路径传递给.f样式的background-image属性中
<head>
    <!-- 定义文档编码格式 -->
	<meta charset="utf-8">  
    <!-- 定义网页标题 -->
	<title>河南风景</title>
    <!-- 定义多个目标格式 注意:实际编写时需要不断调整其中参数,采用CSS-->
	<style type ="text/css">
		*{
			padding:0;
			margin:0;
			list-style:none;
		}
		body{
			font-size:12px;
			font-family:"宋体";
			color:#000;
		}
		.al:link,.al:visited{
			color:#444;
			text-decoration:none;
		}
		.al:hover{
			color:#499;
			text-decoration:underline;
			}
        /* 已给九个区域,确定九个样式 */
		.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9{
			width:470px;
			height:auto;
			border:1px solid #999;
			margin:30px auto;
			padding:15px;
			position:relative; 
			float:left;
		}
        /* 整体背景样式 */
		.f{
			background:#64ce8d;
			border:1px solid #999;
			width:1550px;
			height:1900px;
            /* 此处将用来作为背景图 */
			background-image: url("./backgroud.png");
		}
        /* 定义几个文字样式 */
		.c1{
			font-size: 23px;
		}
		.c2{
			font-size: 20px;
		}
		.c3{
			font-size: 50px;
			text-align:center;
		}
		.c4{
			font-size: 30px;
			text-align:center;
		}
		.c5{
			font-size: 20px;
		}
	</style>
</head>

 4.2  定义网页主体代码

        首先使用<div>截取一块区域,并用属性style定义其样式为事先写的CSS样式.f作为整体背景,再使用3个<div>从此区域中划分三个小方格区域(div划分的区域可从其属性style中的CSS属性修改);首先来描述第一个城市“安阳”的显示:

  • 在第一块区域p1:城市简介,利用<p>标签写入介绍,在从其之后定义一个div区域,区域内用<a>标签的href属性添加城市百度百科的超链接;
  • 在第二、三块区域p2、p3:从百度上下载两张景点图片(455*455),与HTML文件保存在同一目录下,或者直接输入绝对路径,在标签<img>的src属性中添加图片路径、再从其之后定义一个div区域,在区域内添加文字描述与超链接;
<body>
    <!-- 把网页整体视为一个div区域,样式为.f -->
	<div class="f">
        <!-- 创建左上角区域 -->
		<div class="p1">
            <!-- 创建文字内容:<h2>标题、<p>段落-->
			<h2><p class="c3" >河南安阳</p></h2>
				<p class="c1">&nbsp&nbsp安阳,河南省地级市,古称殷、邺城、邺郡、相州、彰德府等,位于河南省最北部,地处河南、山西、河北三省交界处,东接濮阳,西临长治,南接鹤壁、新乡,北临邯郸,总面积7413平方公里。</br>&nbsp&nbsp安阳是甲骨文的故乡、周易的发源地、红旗渠精神的发祥地、国家历史文化名城和豫晋冀三省交界地区区域性中心城市,是京津冀周边协同发展区城市,是省委、省政府支持建设的重要区域中心城市,国家卫生城市、国家森林城市、 全国双拥模范县城。</br>历史学家郭沫若曾对安阳评价:</p>
				<p class="c4" >洹水安阳名不虚,</p>
				<p class="c4" >三千年前是帝都;</p>
				<p class="c4" >中原文化殷创始,</p>
				<p class="c4" >观此胜于读古书。</p>
            <!-- 使用box样式,将超链接添加在box的右下角 -->
			<div class="box">
				<p class="c2"align="right"><a href="https://baike.baidu.com/item/%E5%AE%89%E9%98%B3/8202?fromtitle=%E6%B2%B3%E5%8D%97%E5%AE%89%E9%98%B3&fromid=6395378&fr=aladdin" >详情</a></p>
			</div>
		</div>
        <!-- 创建中上方区域 -->
		<div class="p2">
            <!-- 插入图片 -->
			<a class="al"><img src="./太行大峡谷.png"></a>
            <!-- 插入文字 -->
			<div class="box">
				<p class="c1"><b>太行大峡谷</b></p>
				<p class="c5" >&nbsp&nbsp国家5A级旅游景区、国家重点风景名胜区、国家地质公园。</p>
				<p class="c2" align="right"><a href="https://baike.baidu.com/item/%E5%A4%AA%E8%A1%8C%E5%A4%A7%E5%B3%A1%E8%B0%B7%E9%A3%8E%E6%99%AF%E5%8C%BA/1235752?fromtitle=%E5%A4%AA%E8%A1%8C%E5%A4%A7%E5%B3%A1%E8%B0%B7&fromid=291066&fr=aladdin">详情</a></p>
			</div>
		</div>
        <!-- 创建右上角区域 -->
		<div class="p3">
			<a class="al"><img src="./殷墟.png"></a>
			<div class="box">
				<p class="c1"><b>殷墟</b></p>
				<p class="c5" >&nbsp&nbsp殷墟,原称“北蒙”,是中国商朝后期都城遗址,现为国家5A级旅游景区。</p>
				<p class="c2" align="right"><a href="https://baike.baidu.com/item/%E6%AE%B7%E5%A2%9F/3908528">详情</a></p>
			</div>
		</div>
    </div>
</body>

 4.3 完整代码与结果显示

重复4.2操作,可再次添加其他城市介绍;此处代码一共介绍了三个城市,划分出了九个区域用来描述,完整代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>河南风景</title>
	<style type ="text/css">
		*{
			padding:0;
			margin:0;
			list-style:none;
		}
		body{
			font-size:12px;
			font-family:"宋体";
			color:#000;
		}
		.al:link,.al:visited{
			color:#444;
			text-decoration:none;
		}
		.al:hover{
			color:#499;
			text-decoration:underline;
			}
		.p1,.p2,.p3,.p4,.p5,.p6,.p7,.p8,.p9{
			width:470px;
			height:auto;
			border:1px solid #999;
			margin:30px auto;
			padding:15px;
			position:relative; 
			float:left;
		}
		.f{
			background:#64ce8d;
			border:1px solid #999;
			width:1550px;
			height:1900px;
			background-image: url("backgroud.png");
		}
		.c1{
			font-size: 23px;
		}
		.c2{
			font-size: 20px;
		}
		.c3{
			font-size: 50px;
			text-align:center;
		}
		.c4{
			font-size: 30px;
			text-align:center;
		}
		.c5{
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div class="f">
		<div class="p1">
			<h2><p class="c3" >河南安阳</p></h2>
				<p class="c1">&nbsp&nbsp安阳,河南省地级市,古称殷、邺城、邺郡、相州、彰德府等,位于河南省最北部,地处河南、山西、河北三省交界处,东接濮阳,西临长治,南接鹤壁、新乡,北临邯郸,总面积7413平方公里。</br>&nbsp&nbsp安阳是甲骨文的故乡、周易的发源地、红旗渠精神的发祥地、国家历史文化名城和豫晋冀三省交界地区区域性中心城市,是京津冀周边协同发展区城市,是省委、省政府支持建设的重要区域中心城市,国家卫生城市、国家森林城市、 全国双拥模范县城。</br>历史学家郭沫若曾对安阳评价:</p>
				<p class="c4" >洹水安阳名不虚,</p>
				<p class="c4" >三千年前是帝都;</p>
				<p class="c4" >中原文化殷创始,</p>
				<p class="c4" >观此胜于读古书。</p>
			<div class="box">
				<p class="c2"align="right"><a href="https://baike.baidu.com/item/%E5%AE%89%E9%98%B3/8202?fromtitle=%E6%B2%B3%E5%8D%97%E5%AE%89%E9%98%B3&fromid=6395378&fr=aladdin" >详情</a></p>
			</div>
		</div>
		<div class="p2">
			<a class="al"><img src="./太行大峡谷.png"></a>
			<div class="box">
				<p class="c1"><b>太行大峡谷</b></p>
				<p class="c5" >&nbsp&nbsp国家5A级旅游景区、国家重点风景名胜区、国家地质公园。</p>
				<p class="c2" align="right"><a href="https://baike.baidu.com/item/%E5%A4%AA%E8%A1%8C%E5%A4%A7%E5%B3%A1%E8%B0%B7%E9%A3%8E%E6%99%AF%E5%8C%BA/1235752?fromtitle=%E5%A4%AA%E8%A1%8C%E5%A4%A7%E5%B3%A1%E8%B0%B7&fromid=291066&fr=aladdin">详情</a></p>
			</div>
		</div>
		<div class="p3">
			<a class="al"><img src="./殷墟.png"></a>
			<div class="box">
				<p class="c1"><b>殷墟</b></p>
				<p class="c5" >&nbsp&nbsp殷墟,原称“北蒙”,是中国商朝后期都城遗址,现为国家5A级旅游景区。</p>
				<p class="c2" align="right"><a href="https://baike.baidu.com/item/%E6%AE%B7%E5%A2%9F/3908528">详情</a></p>
			</div>
		</div>
		<div class="p4">
			<h2><p class="c3" >河南郑州</p></h2>
			<p class="c1">&nbsp&nbsp郑州,简称“郑”,古称商都,河南省辖地级市,是河南省省会、特大城市 、中原城市群核心城市,国务院批复确定的中国中部地区重要的中心城市、国家重要的综合交通枢纽。</br>&nbsp&nbsp郑州地处中国华中地区、黄河下游、中原腹地、河南中部偏北,位于黄河中下游和伏牛山脉东北翼向黄淮平原过渡的交接地带;属北温带大陆性季风气候,四季分明,极具观赏性。</p>
			<p class="c1">&nbsp&nbsp郑州是中国八大古都之一,文物古迹众多,有古城、古文化、古墓葬、古建筑、古关隘和古战场在内的遗址遗迹达1万余处。二七广场的二七纪念塔是郑州的标志性建筑,这里有最早的天文建筑登封观星台,更有有闻名世界少林寺,威震海内外的中国功夫也是从这里走向世界</p>
			<div class="box">
				<p class="c2"align="right"><a href="https://baike.baidu.com/item/%E9%83%91%E5%B7%9E/123948?fr=aladdin" >详情</a></p>
			</div>
		</div>
		<div class="p5">
			<a class="al"><img src="./嵩山.png"></a>
			<div class="box">
				<p class="c1"><b>嵩山</b></p>
				<p class="c5" >&nbsp&nbsp嵩山,古称“外方”,五岳中岳,现为国家5A级旅游景区。</p>
				<p class="c2"align="right"><a href="https://baike.baidu.com/item/%E5%B5%A9%E5%B1%B1/5671?fr=aladdin">详情</a></p>
			</div>
		</div>
		<div class="p6">
			<a  class="al" ><img src="./三泉湖.png"></a>
			<div class="box">
				<p class="c1"><b>三泉湖</b></p>
				<p class="c5" >&nbsp&nbsp三泉湖景区是伏羲山旅游区面积最大的自然风景区,现为国家4A级旅游景区。</p>
				<p class="c2"align="right"><a href="https://baike.baidu.com/item/%E4%B8%89%E6%B3%89%E6%B9%96%E6%99%AF%E5%8C%BA/23485586?fr=aladdin">详情</a></p>
			</div>
		</div>
		<div class="p7">
			<h2><p class="c3" >河南洛阳</h2>
			<p class="c1">&nbsp&nbsp洛阳市,简称“洛”,别称洛邑、洛京,河南省地级市,中原城市群副中心城市,洛阳市总面积15230平方千米。河南省西部,横跨黄河中下游南北两岸。</p>
			<p class="c1">&nbsp&nbsp洛阳市有5000多年文明史、4000多年城市史、1500多年建都史 。洛阳是华夏文明的发祥地之一、丝绸之路的东方起点 ,隋唐大运河的中心,历史上先后有十三个王朝在洛阳建都 。洛阳市有二里头遗址、偃师商城遗址、东周王城遗址、汉魏洛阳城遗址、隋唐洛阳城遗址等五大都城遗址。截至2019年3月,洛阳市共有龙门石窟、汉函谷关、含嘉仓等3项6处世界文化遗产;</br></br>司马光曾对洛阳群花感叹:</p>
			
			<p class="c4" >洛阳春日最繁花,</p>
			<p class="c4" >红绿荫中十万家。 </p>
			<div class="box">
				<p class="c2"align="right"><a href="https://baike.baidu.com/item/%E6%B4%9B%E9%98%B3/125712?fr=aladdin" >详情</a></p>
			</div>
		</div>
			<div class="p8">
			<a class="al"><img src="./白云山.png"></a>
			<div class="box">
				<p class="c1"><b>白云山</b></p>
				<p class="c5" >&nbsp&nbsp国家5A级旅游景区,被誉为"自然博物馆"、"人间仙境"、"京洛名山"。</p>
				<p class="c2"align="right"><a href="https://baike.baidu.com/item/%E7%99%BD%E4%BA%91%E5%B1%B1/2667398?fromtitle=%E6%B4%9B%E9%98%B3%E7%99%BD%E4%BA%91%E5%B1%B1&fromid=8570125&fr=aladdin">详情</a></p>
			</div>
		</div>
		<div class="p9">
			<a class="al"><img src="./龙门石窟.png"></a>
			<div class="box">
				<p class="c1"><b>龙门石窟</b></p>
				<p class="c5" >&nbsp&nbsp目前规模最大的石刻艺术宝库,被评为"中国石刻艺术的最高峰",现为国家5A级旅游景区。</p>
				<p class="c2"align="right"><a href="https://baike.baidu.com/item/%E9%BE%99%E9%97%A8%E7%9F%B3%E7%AA%9F/274?fromtitle=%E6%B4%9B%E9%98%B3%E9%BE%99%E9%97%A8%E7%9F%B3%E7%AA%9F&fromid=3734203">详情</a></p>
			</div>
		</div>
	</div>
</body>
</html>

 结果如下

 二、爬虫基础框架

1.引入

         通过制作简单网页,对网页的显示有了基础的认识,那么爬虫与网页之间有着什么样的关系呢?原因就是基于当下大数据时代,大量信息都以网页形式储存在web服务器中,日常生活中我们可以通过浏览器检索信息获取到web服务器中相应的网页,通过网页能够浏览到我们所需要的信息。而爬虫技术主要就是基于需要检索大量信息,或者提取其一部分信息作为使用,那么就可以编写一只满足我们需求的“爬虫”,爬虫会遍历一定的范围,代替人工手动查询相关信息,将我们所需要的信息提取出来,做到信息全面且高效。

2.基本流程

        从实现方式上看,爬虫就是在模拟客户向服务器发送请求,获取服务器的响应;获得服务器返回的网页后,提取网页源代码,根据网页编码的方式进行抽取特定的信息,像文本、图片、音乐甚至是别的网址,将目标信息大量筛选出来;这就是爬虫技术的基本流程;

简单爬虫流程

        从这个基本流程上分析,我们就能发现我们要解决的几个关键问题,也是之后我们要学习的内容:

  1. 如何让爬虫模拟客户请求,从而获取服务器的相应?
  2. 获取服务器相应后,如何解析网页源码,筛选出目标信息?
  3. 对于筛选出不同类型的信息,如何进行存储?以及存储接口的使用?
  4. 如何让爬虫爬取大量相关主题网页,并非局限于特定网址?
  5. ......

三、结尾

         这次的分享主要是对HTML文档进行基础介绍,并且了解爬虫的整体流程,对于提出的各个问题以及如何通过python代码实现具体的爬虫将在之后的章节介绍。

        文章和代码都为原创,作者水平有限,难免会出现一些错误,代码可能不够规范整洁,仅供参考。也欢迎大家提出问题共同讨论,共同进步。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值