写在前面的话:
作者目前是一名计算机专业本科生,为了更好的巩固知识,记录学习心得,也为了更好锻炼自己的表达能力,因此计划对已学过半年的爬虫技术进行整理分享。
对于爬虫技术入门,我认为理论与实操结合才能更好的掌握爬虫技术,所以此系列的每一篇文章中,我都会结合具体代码的简单实例,整理自己相关方面的心得,也供大家参考,同时也欢迎大家提出疑问或者建议,一起相互学习,共同进步!
本节梗概:
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>
 这个特殊符号是空格<br>
<a href='https://blog.csdn.net/m0_56364204?spm=1010.2135.3001.534'> 这是超链接</a>
</body>
</html>
3.2 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">  安阳,河南省地级市,古称殷、邺城、邺郡、相州、彰德府等,位于河南省最北部,地处河南、山西、河北三省交界处,东接濮阳,西临长治,南接鹤壁、新乡,北临邯郸,总面积7413平方公里。</br>  安阳是甲骨文的故乡、周易的发源地、红旗渠精神的发祥地、国家历史文化名城和豫晋冀三省交界地区区域性中心城市,是京津冀周边协同发展区城市,是省委、省政府支持建设的重要区域中心城市,国家卫生城市、国家森林城市、 全国双拥模范县城。</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" >  国家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" >  殷墟,原称“北蒙”,是中国商朝后期都城遗址,现为国家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">  安阳,河南省地级市,古称殷、邺城、邺郡、相州、彰德府等,位于河南省最北部,地处河南、山西、河北三省交界处,东接濮阳,西临长治,南接鹤壁、新乡,北临邯郸,总面积7413平方公里。</br>  安阳是甲骨文的故乡、周易的发源地、红旗渠精神的发祥地、国家历史文化名城和豫晋冀三省交界地区区域性中心城市,是京津冀周边协同发展区城市,是省委、省政府支持建设的重要区域中心城市,国家卫生城市、国家森林城市、 全国双拥模范县城。</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" >  国家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" >  殷墟,原称“北蒙”,是中国商朝后期都城遗址,现为国家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">  郑州,简称“郑”,古称商都,河南省辖地级市,是河南省省会、特大城市 、中原城市群核心城市,国务院批复确定的中国中部地区重要的中心城市、国家重要的综合交通枢纽。</br>  郑州地处中国华中地区、黄河下游、中原腹地、河南中部偏北,位于黄河中下游和伏牛山脉东北翼向黄淮平原过渡的交接地带;属北温带大陆性季风气候,四季分明,极具观赏性。</p>
<p class="c1">  郑州是中国八大古都之一,文物古迹众多,有古城、古文化、古墓葬、古建筑、古关隘和古战场在内的遗址遗迹达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" >  嵩山,古称“外方”,五岳中岳,现为国家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" >  三泉湖景区是伏羲山旅游区面积最大的自然风景区,现为国家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">  洛阳市,简称“洛”,别称洛邑、洛京,河南省地级市,中原城市群副中心城市,洛阳市总面积15230平方千米。河南省西部,横跨黄河中下游南北两岸。</p>
<p class="c1">  洛阳市有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" >  国家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" >  目前规模最大的石刻艺术宝库,被评为"中国石刻艺术的最高峰",现为国家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.基本流程
从实现方式上看,爬虫就是在模拟客户向服务器发送请求,获取服务器的响应;获得服务器返回的网页后,提取网页源代码,根据网页编码的方式进行抽取特定的信息,像文本、图片、音乐甚至是别的网址,将目标信息大量筛选出来;这就是爬虫技术的基本流程;
从这个基本流程上分析,我们就能发现我们要解决的几个关键问题,也是之后我们要学习的内容:
- 如何让爬虫模拟客户请求,从而获取服务器的相应?
- 获取服务器相应后,如何解析网页源码,筛选出目标信息?
- 对于筛选出不同类型的信息,如何进行存储?以及存储接口的使用?
- 如何让爬虫爬取大量相关主题网页,并非局限于特定网址?
- ......
三、结尾
这次的分享主要是对HTML文档进行基础介绍,并且了解爬虫的整体流程,对于提出的各个问题以及如何通过python代码实现具体的爬虫将在之后的章节介绍。
文章和代码都为原创,作者水平有限,难免会出现一些错误,代码可能不够规范整洁,仅供参考。也欢迎大家提出问题共同讨论,共同进步。