Python爬虫笔记 | HTML基础

关注

原创最新推荐文章于 2026-06-05 09:16:08 发布 537 阅读 AI 写同款· GEO 优化 ›

什么是网络爬虫又称为网页蜘蛛，网络机器人，在FOAF社区中间，更经常的称为网页追逐者，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。网络爬虫可以根据指定的规则，从互联网上下载网页、图片、视频等内容，并抽取其中的有用信息进行处理。网络爬虫的工作流程包括获取网页源代码、解析网页内容、存储数据等步骤。根据其目的和工作方式的不同，网络爬虫可以分为多种类型。常见的网络爬虫包括通用爬虫、聚焦爬虫、增量式爬虫等。阅读详情

使用python版本：3.7.0 64-bit

如果把HTML的学习依序分为三个层次的话，应该是读懂、修改、编写。

读懂： 只有读懂了HTML，我们才能看得懂网页结构，才有可能运用Python的其他模块去解析数据和提取数据。所以想写爬虫程序的话，一定要先学好HTML基础。
修改： 在读懂HTML文档的基础上，学会修改HTML代码，是可以做些有趣的事情的。
编写： 如果达到了这个水平，那就可以去应聘前端工程师了，这是专业的程序员水平了。

HTML 基础

HTML称为超文本标记语言，是一种用来描述网页信息的标识性语言。

查看网页的HTML代码

用谷歌浏览器（Chrome）进行演示。

在网页任意地方点击鼠标右键，然后点击“显示网页源代码”。（Windows系统的电脑还可以使用快捷键ctrl+u来查看网页源代码），你会看到，浏览器弹出了一个新的标签页：
在这里插入图片描述
如图显示的就是HTML源代码。

这样查看的好处是，整个网页的源代码都完整地呈现在你面前。坏处是，在大部分情况下，它都会经过压缩，导致结构不够清晰，你不太容易懂每行代码的含义。而且，源代码和网页分开在两个页面展示。

所以更多时候，我们会用这样一种方法：
在网页的空白处点击右键，然后选择“检查”（快捷方式是ctrl+shift+i）。

这个即是 开发者工具栏：
在这里插入图片描述
上图中标亮的部分就是网页的HTML代码。

将鼠标放在HTML源代码上，你会发现，左边网页上有一些内容会被标亮。这其实就是这行代码所描述的网页内容，它们一左一右，相互对应。

HTML的层级

通过开发者工具栏，可以看出HTML会有鲜明的层级结构，以及互相对应的关系。

HTML的组成

标签和元素

最简单的HTML文档：

<html>
	<head>
		<meta charset="utf-8"> 
	</head>
    <body>
        <h1>我是一级标题</h1>
        <h2>我是二级标题</h2>
        <h3>我是三级标题</h3>
        <p>我是一个段落啦。一级标题、二级标题和我，我们三个一起组成了body。
         </p>
    </body>
</html>

标签： 夹在尖括号<> 中间的字母。

标签通常是成对出现的：前面的是 开始标签，比如< body >；后面的是结束标签，如 < /body >。

元素： 开始标签+结束标签+中间的所有内容。如下：

<html>
	<body>
        <h1>我是一级标题</h1>
    </body>
</html>

常见的HTML元素：

开始标签	元素内容	结束标签	用法
< h1 >	一级标题	< /h1 >	一级标题
< h2 >	二级标题	< /h2 >	二级标题
< p >	段落文本	< /p >	段落
< a >	描述链接的文本	< /a >	超链接
< div >	其它元素或文本	< /div >	块

HTML标签是可以嵌套标签的，而且可以多层嵌套。

网页头和网页体

HTML文档的基本是由 网页头 和 网页体 组成的：

<html>
	<head>
		网页头的具体内容
	</head>
    <body>
        网页体的具体内容
    </body>
</html>

HTML文档的最外层标签一定是< html >，里面嵌套着< head >元素与< body >元素。< head >元素代表了网页头，< body >元素代表了 网页体 ，这是最基本的网页结构。

HTML文档和网页的内容一定是一一对应的。只是网页头的内容不会被直接呈现在浏览器里的网页正文中，而网页体的内容是会直接显示在网页正文中的。

网页头：< head >元素

<head>
    <meta charset="utf-8">     # 定义了HTML文档的字符编码
    <title>我是网页的名字</title> # 定义网页的标题，这个标题就是显示在浏览器的标签页中的内容
</head>

网页体： < body >元素

<html>
  <head>
      <meta charset="utf-8"> 
      <title>我要学python</title>
  </head>
  <body>
      <h1>我要学python</h1>
      <h3>百度百科解释</h3>
      <h2>python是什么:</h2>
      <p>Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。
      </p>
  </body>
</html>

HTML文档是由网页头和网页体组成的，网页头不显示在网页中。

而网页体中依次有四个内容：
< h1 >元素 代表一级标题，对应网页中的“我要学python”；
< h3 >元素 代表三级标题，对应网页中的“百度百科解释”；
< h2 >元素 代表二级标题，对应网页中的“python是什么:”；
< p >元素 对应网页中“Python是一种跨平台…的开发。”这一整段文本。

属性

HTML标签可以通过设置属性来为HTML元素描述更多的信息。如：文字颜色等。

style属性：规定元素的内行样式(inline style)

<h1 style="color:#20b2aa;">我要学python</h1>

属性通常都是在HTML元素的 开始标签 中设置的。

给< h1 >元素添加了一个style属性，属性中的内容规定了这行文字的颜色。

style属性 可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等。

href属性：用来定义链接

<a href="https://blog.youkuaiyun.com/Microgoblins">我是一个链接，点我试试</a>

href属性用来在网页中 添加链接。

在HTML中，链接一般都由< a >标签定义，href属性用于规定指向页面的URL。

class属性：为html元素定义一个或多个类名(classname)

<html>
  <head>
      <meta charset="utf-8"> 
      <title>我要学python</title>
      <style>
      .book {
      float: left;
      margin: 5px;
      padding: 15px;
      width: 350px;
      height: 240px;
      border: 3px solid #20b2aa;
      } 
      </style>
  </head>
  
  <body>
      <h1 style="color:#20b2aa;">我要学python</h1>
      <h3>百度百科解释</h3>
      <a href="https://blog.youkuaiyun.com/Microgoblins">点这里看看</a>
      <div class="book">
          <h2>python是什么:</h2>
          <p>Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。
          </p>
      </div>
  </body>
</html>

网页头中多了一个很长的

<style> 
.book {
/*以下是.book的具体样式规定*/
float: left; /*控制元素浮动*/
margin: 5px; /*外边距为5像素*/
padding: 15px; /*内边距为15像素*/
width: 350px; /*宽度为350像素*/
height: 240px; /*高度为240像素*/
border: 3px solid #20b2aa; /*边框为3像素*/
} 
</style>