Python 网络爬虫（一）：HTML 基础知识

在这里插入图片描述

《Python入门核心技术》专栏总目录・点这里

文章目录

1. 什么是 HTML
2. HTML 的特点
3. HTML 的标签和属性
4. HTML 的结构
- 4.1 文档类型声明
- 4.2 根元素
- 4.3 头部部分
- 4.4 主体部分
- 4.5 表格标签
- 4.6 区块
- 4.7 嵌套和层次结构
- 4.8 表单
- 4.9 注释
5. HTML 交互事件

大家好，我是水滴~~

在学习爬虫之前，了解HTML基础知识是至关重要的。这是因为爬虫通常通过解析和提取HTML内容来获取数据。HTML（超文本标记语言）是用于构建网页的标准语言，它定义了网页的结构和内容。

当您编写一个网页爬虫时，您的目标是从网页中提取有用的数据。网页通常以HTML的形式呈现，其中包含了各种标签、元素和属性来描述和组织内容。通过理解HTML的结构和语法，您可以准确地定位和提取所需的数据。

爬虫通过解析HTML文档，逐层遍历和检索其中的标签和元素，以获取所需的信息。了解HTML基础知识可以帮助您理解如何定位目标数据所在的标签和元素，并使用适当的属性和方法来提取这些数据。

例如，如果您想要提取网页中的标题，您需要了解<title>标签是用于定义页面标题的，可以使用爬虫工具解析HTML并提取<title>标签中的文本内容。同样地，如果您想要提取网页中的链接或段落，您需要了解相关的HTML标签（如<a>和<p>）以及它们的属性和嵌套关系。

1. 什么是 HTML

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签（tags）组成，这些标签描述了网页中的不同元素和内容的结构。HTML标签用于定义文本、图像、链接、表格、表单等在网页上的展示和交互方式。

HTML不是一种编程语言，而是一种标记语言，它使用标签来标记和描述文档的结构和内容。浏览器可以解析HTML文档，并将其呈现为可视化的网页。

HTML文档由嵌套的HTML元素组成，每个元素由一个开始标签（opening tag）和一个结束标签（closing tag）组成，中间是元素的内容。例如，<p>标签用于定义段落，<img>标签用于插入图像。

以下是一个简单的HTML示例：

<!DOCTYPE html>
<html>
<head><title>我的网页</title>
</head>
<body><h1>欢迎来到我的网页！</h1><p>这是一个段落。</p><img src="image.jpg" alt="图片">
</body>
</html>

在上面的示例中，<!DOCTYPE html>声明指定了HTML5文档类型。<html>标签是HTML文档的根元素，包含了整个网页的内容。<head>标签包含了与网页相关的设置和元数据，如标题（<title>标签）和链接到外部样式表或脚本文件。<body>标签包含了网页的实际内容，如标题、段落和图像。

通过使用不同的HTML标签和属性，开发者可以创建出丰富多样的网页内容，并通过CSS（层叠样式表）和JavaScript等技术来实现更复杂的样式和交互效果。

2. HTML 的特点

HTML语言具有以下特点：

标记语言：HTML是一种标记语言，使用标签（tags）来标记和描述文档的结构和内容。标签通过尖括号进行界定，如<tag>。
结构化：HTML提供了一种结构化的方式来组织网页内容。通过使用不同的标签，可以将内容划分为段落、标题、列表、表格等不同的部分，使内容具有层次结构。
跨平台和跨浏览器：HTML是一种跨平台的语言，可以在不同的操作系统和设备上使用。同时，HTML也是跨浏览器兼容的，可以在各种现代浏览器中正确解析和显示网页内容。
可扩展性：HTML具有良好的扩展性，通过使用自定义的标签和属性，可以扩展HTML的功能和语义，以满足特定的需求。
多媒体支持：HTML支持多种多媒体元素，如图像（<img>）、音频（<audio>）和视频（<video>）。这使得开发者可以在网页中嵌入丰富的媒体内容。
链接和导航：HTML提供了超链接（<a>）来创建链接到其他页面或资源的链接。这使得用户可以通过点击链接在不同的页面之间进行导航。
容易学习和使用：相对于其他编程语言，HTML具有较低的学习曲线。它的语法简单明了，标签具有直观的含义，对于初学者来说比较容易理解和上手。

尽管HTML本身不能实现复杂的逻辑和交互功能，但它是构建网页的基础，可以与CSS和JavaScript等技术结合使用，实现更丰富的用户体验和功能。

3. HTML 的标签和属性

HTML标签是HTML文档中用于定义元素的标记。每个HTML标签表示不同的元素，并用于描述和结构化文档的内容。以下是一些常见的HTML标签及其介绍：

<html>：HTML文档的根元素，包含整个网页的内容。
<head>：定义文档的头部，包含与文档相关的设置和元数据，如标题、样式表和脚本文件等。
<title>：定义文档的标题，通常显示在浏览器的标题栏或页签上。
<body>：定义文档的主体部分，包含网页的实际内容，如文本、图像、链接等。
<h1>到<h6>：定义标题，级别从1到6递减，其中<h1>表示最高级标题。
<p>：定义段落。
<a>：创建链接到其他页面或资源。
<img>：插入图像。
<ul>和<li>：创建无序列表。
<ol>和<li>：创建有序列表。
<div>：通用的容器，用于组合其他元素。
<span>：行内容器，用于对文本进行分组或样式化。
<table>、<tr>、<td>：创建表格和表格行、单元格。
<form>、<input>、<button>：创建表单和表单元素，如文本输入框、按钮等。
<select>、<option>：创建下拉列表框和选项。
<textarea>：创建多行文本输入框。
<iframe>：插入一个内联框架，用于显示其他页面或嵌入内容。

除了HTML标签，每个标签可以具有一些属性，用于提供元素的额外信息或控制元素的行为。常见的HTML属性包括：

class：指定元素的类名，用于选择性地应用CSS样式或JavaScript操作。
id：指定元素的唯一标识符，用于JavaScript操作或通过锚点链接直接跳转到元素。
src：指定图像、音频或视频等媒体元素的源文件路径。
href：指定链接元素的目标URL。
style：直接在元素上应用内联样式，包含CSS属性和值。
disabled：禁用表单元素或按钮。
placeholder：在文本输入框中提供默认的提示文本。

这只是一小部分常见的HTML标签和属性示例，HTML提供了众多标签和属性，每个用途不同。开发者可以根据需要选择适当的标签和属性来构建网页的结构和功能。

4. HTML 的结构

HTML的结构是通过嵌套和组合不同的HTML标签和元素来实现的。开发者可以根据需要创建适当的结构，以便组织和呈现网页的内容。良好的HTML结构有助于提高代码的可读性、维护性和可访问性。

4.1 文档类型声明

每个HTML文档都应该以文档类型声明（Document Type Declaration）开始，它告诉浏览器使用哪个HTML版本解析文档。以下是HTML5的文档类型声明：

<!DOCTYPE html>

确保将这行声明放在HTML文档的最顶部，并位于<html>标签之前。

4.2 根元素

HTML文档的根元素是<html>标签，它包含整个网页的内容。以下是一个基本的HTML结构示例：

<!DOCTYPE html>
<html>
<head><title>我的网页</title>
</head>
<body><!-- 网页内容在这里 -->
</body>
</html>

<head>：头部部分包含了一些元数据和与网页相关的设置。例如，可以在<head>中设置网页的标题（<title>标签）和链接到外部样式表或脚本文件。
<body>：主体部分包含了网页的可见内容，如文本、图像、链接等。

4.3 头部部分

头部部分包含了网页的元数据和其他配置信息。以下是一些常见的头部标签：

<title>：定义网页的标题，显示在浏览器的标题栏或选项卡上。
<meta>：提供关于网页的元数据，如字符编码、描述和关键字等。
<link>：用于链接外部资源，如样式表和图标文件。
<script>：用于引入JavaScript脚本文件。

<head><title>我的网页</title><meta charset="UTF-8"><meta name="description" content="这是我的网页"><link rel="stylesheet" href="styles.css"><script src="script.js"></script>
</head>

4.4 主体部分

主体部分包含了网页的实际内容，如文本、图像、链接等。以下是一些常见的主体标签：

标题标签：<h1>到<h6>，用于定义标题的级别和重要性。
段落标签：<p>，用于定义段落。
链接标签：<a>，用于创建链接到其他页面或资源的超链接。其中href属性为目标链接地址。
图像标签：<img>，用于插入图像。其中src属性为图片链接地址，alt属性为提示语。
列表标签：<ul>和<ol>，用于创建无序列表和有序列表。

<body><h1>这是一级标题。</h1><h2>这是二级标题。</h2><h3>这是三级标题。</h3><p>这是一个段落。</p><a href="https://www.example.com">这是一个链接</a><img src="image.jpg" alt="图片"><ul><li>列表项1</li><li>列表项2</li></ul>
</body>

4.5 表格标签

HTML提供了<table>标签用于创建表格。表格由行和列组成，使用<tr>（表格行）和<td>（表格数据）标签来定义。以下是一个简单的表格示例：

<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td>25</td></tr><tr><td>小红</td><td>30</td></tr><tr><td>小李</td><td>28</td></tr>
</table>

在上面的示例中，<table>标签用于创建表格，<tr>标签用于定义表格的行，<th>标签用于定义表格的表头单元格，<td>标签用于定义表格的数据单元格。使用适当的标签和嵌套关系来构建你想要的表格结构。

4.6 区块

<div>和<span>是两个常用的HTML标签，用于在网页中创建和组织内容。

<div>标签是一个块级元素，用于定义一个通用的容器块。它通常用于将一组相关的HTML元素组织在一起，形成一个独立的区块。<div>标签没有特定的语义含义，可以根据需要应用自定义的样式和功能。常用于布局、分组、包装等目的。

示例：

<div><h1>这是一个标题</h1><p>这是一段文本。</p>
</div>

<span>标签是一个内联元素，用于将文本或其他内联元素包裹起来，以便对其应用样式或标记。<span>标签类似于<div>标签，但作用于内联元素而不是块级元素。它通常用于对文本的部分内容进行样式化、高亮或其他处理。

示例：

<p>这是一段包含<span style="color: red;">红色文本</span>的段落。</p>

需要注意的是，<div>和<span>标签本身没有特定的样式或功能，它们主要用于组织和标记内容，以便进行样式化和操作。通过CSS样式或JavaScript脚本，可以对<div>和<span>标签及其内部的内容进行更具体的处理和控制。

4.7 嵌套和层次结构

HTML允许在标签内嵌套其他标签，从而创建层次结构。这对于构建复杂的网页布局非常有用。以下是一个嵌套示例：

<body><div><h2>标题</h2><p>这是一个段落。</p><table><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td>25</td></tr><tr><td>小红</td><td>30</td></tr><tr><td>小李</td><td>28</td></tr></table></div>
</body>

4.8 表单

HTML表单（HTML Form）用于收集用户输入的数据。它是构建交互性网页的重要组成部分。通过HTML表单，用户可以输入文本、选择选项、提交数据等操作。

下面是一个基本的HTML表单结构：

<form action="/submit" method="POST"><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">邮箱：</label><input type="email" id="email" name="email" required><label for="message">留言：</label><textarea<form action="/submit" method="POST"><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">邮箱：</label><input type="email" id="email" name="email" required><label for="message">留言：</label><textarea id="message" name="message" required></textarea><input type="submit" value="提交">
</form>

在上面的示例中，<form>标签用于创建一个表单，其中包含了三个字段：姓名、邮箱和留言。每个字段都由一个<label>标签和一个输入元素（<input>或<textarea>）组成。<label>标签用于描述输入字段的标签文本，并通过for属性与对应的输入元素建立关联。输入元素的类型通过type属性指定，例如type="text"表示文本输入框，type="email"表示邮箱输入框。<textarea>标签用于创建多行文本输入框。

表单中的最后一个元素是一个提交按钮，由<input>元素的type="submit"来表示。当用户点击提交按钮时，表单数据将被发送到指定的URL（由action属性指定），并使用指定的HTTP方法（由method属性指定，通常是GET或POST）进行提交。

通过使用不同类型的输入元素和属性，以及一些额外的属性和标签，可以进一步定制和扩展HTML表单，以满足各种需求。

4.9 注释

HTML注释用于在文档中添加注释或临时禁用代码。注释不会在浏览器中显示。以下是HTML注释的示例：

<body><!-- 这是一个注释 --><h1>欢迎来到我的网页！</h1>
</body>

通过理解和应用HTML的结构，你可以构建出功能丰富、美观的网页。希望这篇HTML结构的详细教程对你有所帮助！如果你有任何问题或需要更多的示例，请随时向我提问。

5. HTML 交互事件

HTML提供了一些与用户交互和元素操作相关的事件，可以通过JavaScript来处理这些事件。以下是一些常见的HTML事件：

onclick：当元素被点击时触发。
onmouseover：当鼠标指针移动到元素上方时触发。
onmouseout：当鼠标指针移出元素时触发。
onkeydown：当按下键盘上的任意键时触发。
onkeyup：当释放键盘上的任意键时触发。
onsubmit：当表单提交时触发。
onchange：当元素的值发生改变时触发（适用于输入框、下拉列表等）。
onload：当页面或图片加载完成时触发。
onunload：当页面即将关闭或离开时触发。

这只是一小部分常见的HTML事件，实际上还有很多其他事件可用。可以将这些事件与HTML元素的属性结合使用，例如<button onclick="myFunction()">点击我</button>，其中onclick属性指定了点击按钮时要调用的JavaScript函数。

通过JavaScript，可以编写事件处理程序（event handler）来响应这些事件。事件处理程序是一段JavaScript代码，用于定义在事件发生时要执行的操作。例如，可以使用事件处理程序来更改元素的样式、更新文本内容、发送HTTP请求等。

示例：

<button onclick="changeText()">点击我</button><script>
function changeText() {document.getElementById("myElement").innerHTML = "新的文本";
}
</script>

在上面的示例中，当按钮被点击时，changeText()函数将被调用，并通过document.getElementById("myElement")获取到具有id为"myElement"的元素，并更新其内容为"新的文本"。

通过使用HTML事件和JavaScript，可以实现与用户交互和页面元素操作相关的动态功能和效果。