写在前面的话：

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

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

本节梗概：

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

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

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

目录

写在前面的话：

本节梗概：

一、认识HTML网页结构

1.简述

2.认识HTML网页

3.HTML语言基础

3.1 HTML标签介绍

3.2 HTML常用标签

4. HTML网页的简单制作

4.1 定义网页头部代码

4.2 定义网页主体代码

4.3 完整代码与结果显示

二、爬虫基础框架

1.引入

2.基本流程

三、结尾

一、认识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.基本流程

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

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

如何让爬虫模拟客户请求，从而获取服务器的相应？

获取服务器相应后，如何解析网页源码，筛选出目标信息？

对于筛选出不同类型的信息，如何进行存储？以及存储接口的使用？

如何让爬虫爬取大量相关主题网页，并非局限于特定网址？

......

三、结尾

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

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

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

0基础学python做什么工作好-写给0基础小白：Python能干什么？就业前景好不好？怎么开始学？...
原标题:写给0基础小白:Python能干什么?就业前景好不好?怎么开始学? 今天,我们深度了解一下Python这门语言,它到底是什么,都能用来干什么,为什么这么火? 首先,普及一下编程语言的基础知识. ...
学python就业要看哪些书-编程0基础自学Python，踩完这些坑，我才成功就业！
" 0基础小白学Python的路程不易,但总有一些思路和方法值得借鉴,知道这些能让我们少走很多弯路. 今天我们就来分享2位前辈的学习经验和方法. 零基础学编程的方法回忆一下我自己学习计算机 ...
python数据抓取技术与实战训练_师傅带徒弟学Python：项目实战1：网络爬虫与抓取股票数据...
本视频基于**Python 3.X版本本视频课程是第四篇第一个实战项目,内容包括网络爬虫技术.使用urllib爬取数据.使用Selenium爬取数据.使用正则表达式.使用BeautifulSoup库 ...
零基础学python书籍-清华大学出版社-图书详情-《零基础入门学习Python》
前言 Life is short. You need Python. --Bruce Eckel 上边这句话是Python社区的名言,翻译过来就是"人生苦短,我用Python". ...
零基础学python这本书怎么样-看了这本基础教程的书籍你还担心你的python学不好吗？...
提取码:chcj 值得花时间阅读的一本书内容简介 · · · · · · 本书是经典教程的全新改版,作者根据Python 3.0版本的种种变化,全面改写了书中内容,做到既能"瞻前" ...
学python是看书还是看视频-零基础自学Python是看书还是看视频？
很多人都碍于Python培训班的高昂费用和有限的空余时间都选择自学Python,但是没有老师帮助,显得有些迷茫,不知应该从何处学起,也不知识看书学习还是应该看视频学习.本就来谈谈这个话题. 我们先来看 ...
学python人工智能电脑要什么配置_没有基础能不能学人工智能首选语言是Python吗...
没有基础能不能学人工智能?首选语言是Python吗?人工智能涵盖的领域很广,除了机器学习外,还包括专家系统.进化计算.模糊逻辑.粗糙集.多代理.规划问题等.近几年,人工智能的发展主要得益于机器学习领域 ...
【实例】python 使用beautifulSoup 抓取网页正文以淘宝商品价格为例
参考文章: 利用BeautifulSoup抓取新浪网页新闻的内容使用Requests库和BeautifulSoup库来爬取网页上需要的文字与图片 -------------------------- ...
python零基础电子书免费下载-零基础学Python
准备自学Python朋友,不放来看看<零基础学Python>吧!小编这里为各位送上的是这本书的全彩PDF版,该书从初学者角度出发,通过通俗易懂的语言.流行有趣的实例,详细地介绍了使用IDL ...
零基础学python电子书-零基础学Python
准备自学Python朋友,不放来看看<零基础学Python>吧!小编这里为各位送上的是这本书的全彩PDF版,该书从初学者角度出发,通过通俗易懂的语言.流行有趣的实例,详细地介绍了使用IDL ...

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

写在前面的话：

本节梗概：