【愚公系列】《Python网络爬虫从入门到精通》002-了解Web前端-USB迷|专注于互联网分享

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

文章目录

🚀前言
🚀一、了解Web前端
- 🔎1.HTTP基本原理
- - 🦋1.1 HTTP协议
  - 🦋1.2 HTTP与Web服务器
  - 🦋1.3 浏览器中的请求和响应
- 🔎2.HTML语言
- - 🦋2.1 什么是HTML
  - 🦋2.2 HTML标签的分类与结构概述
  - 🦋2.3 HTML文件结构
  - 🦋2.4 HTML的基本标签
- 🔎3.CSS 层叠样式表
- - 🦋3.1 CSS 概述
  - 🦋3.2 属性选择器
  - 🦋3.3 类和 ID 选择器
- 🔎4.JavaScript 动态脚本语言
- - 🦋4.1 在页面中直接嵌入 JavaScript 代码
  - 🦋4.2 链接外部 JavaScript 文件

🚀前言

在数字化时代，网络数据的获取和处理变得愈发重要。无论是为了获取实时新闻、监测市场动向，还是进行学术研究，网络爬虫技术都为我们提供了强有力的工具。而在学习和掌握网络爬虫的过程中，理解Web前端的构成与特性，是每一个开发者必不可少的基础。

本文旨在带领大家逐步深入爬虫的世界，尤其是在这一节中，我们将重点探讨Web前端的概念与技术。无论你是初学者还是有一定经验的开发者，了解HTML、CSS和JavaScript的基本原理，将帮助你更有效地提取和利用互联网上的数据。

🚀一、了解Web前端

🔎1.HTTP基本原理

🦋1.1 HTTP协议

当用户在浏览器中输入网址（如 www.mingrisoft）访问明日学院网站时，用户的浏览器被称为客户端，而明日学院网站被称为服务器。这个过程本质上是客户端向服务器发起请求，服务器接收请求后，将处理后的信息（也称为响应）传给客户端。这个过程是通过HTTP协议实现的。

HTTP（HyperText Transfer Protocol），即超文本传输协议，是互联网上应用最为广泛的一种网络协议。HTTP通过TCP在Web服务器和客户端之间传输信息。客户端使用Web浏览器发起HTTP请求给Web服务器，Web服务器发送被请求的信息给客户端。

🦋1.2 HTTP与Web服务器

当在浏览器输入URL后，浏览器会先请求DNS服务器，获得请求站点的IP地址（即根据URL地址 www.mingrisoft 获取其对应的IP地址，如101.201.120.85），然后发送一个HTTP Request（请求）给拥有该IP的主机（明日学院的阿里云服务器），接着就会接收到服务器返回的HTTP Response（响应），浏览器经过渲染后，以一种较好的效果呈现给用户。HTTP基本原理如图所示。

Web服务器的工作原理可以概括为以下4个步骤：

建立连接: 客户端通过TCP/IP协议建立到服务器的TCP连接。
请求过程: 客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档。
应答过程: 服务器向客户端发送HTTP协议应答包。如果请求的资源包含有动态语言的内容，那么服务器会调用动态语言的解释引擎负责处理“动态内容”，并将处理后得到的数据返回给客户端。由客户端解释HTML文档，在客户端屏幕上渲染图形结果。
关闭连接: 客户端与服务器断开。

步骤2中，客户端向服务器端发起请求时，常用的请求方法如表所示。

步骤3中，服务器返回给客户端的状态码，可以分为5种类型，由它们的第一位数字表示，如表所示。例如，状态码为200，表示请求成功已完成；状态码为404，表示服务器找不到给定的资源。

🦋1.3 浏览器中的请求和响应

用谷歌浏览器访问明日学院官网，查看请求和响应的流程。步骤如下：

在谷歌浏览器中输入网址 www.mingrisoft，按 Enter 键，进入明日学院官网。
按 F12 键（或右击，选择“检查”选项）审查页面元素，运行效果如图所示。
单击谷歌浏览器调试工具的 Network 选项，按 F5 键（或手动刷新页面），单击调试工具中 Name 栏目下的 www.mingrisoft，查看请求与响应的信息，如图所示。

从图中的 General 概述关键信息如下：

Request URL: 请求的URL地址，也就是服务器的URL地址。
Request Method: 请求方式是 GET。
Status Code: 状态码是 200，即成功返回响应。
Remote Address: 服务器IP地址是 101.201.120.85，端口号是 80。

🔎2.HTML语言

🦋2.1 什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是一种纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器（如Windows的“记事本”）打开查看HTML源代码，也可以在浏览器中通过“查看源文件”命令查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行，无须编译。当浏览器打开网页时，会读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容。

🦋2.2 HTML标签的分类与结构概述

HTML的标签分为单独出现的标签和成对出现的标签两种。

成对标签：

成对标签由首标签和尾标签组成。
格式：<元素名称>内容</元素名称>
例如：<title>网页标题</title>

单独标签：

单独标签无需结束标签。
格式：<元素名称>
例如：<br>（表示换行）

说明：

HTML标签中的大、小写混写均可，例如<HTML>、<Html>和<html>效果相同。
HTML标签可以设置属性，控制标签所建立的元素。这些属性位于首标签中，如：
```
<元素名称 属性1="值1" 属性2="值2" …>
```

🦋2.3 HTML文件结构

在介绍HTML文件结构之前，我们来看一个简单的HTML文件及其在浏览器上的显示结果。以下代码可以在Windows自带的记事本中编写，然后保存为.html文件。

<!DOCTYPE html>
<html>
<head>
    <title>文件标题</title>
</head>
<body>
    文件正文
</body>
</html>

运行效果：浏览器会显示一个标题为“文件标题”，正文为“文件正文”的简单网页。

从上述代码中可以看出HTML文件的基本结构：

<head>标签与</head>标签之间的部分是文件头部分，用于说明文件的标题和一些公共属性。
<body>标签与</body>标签之间的部分是文件主体部分，主要内容标签都嵌套在这里使用。

🦋2.4 HTML的基本标签

文件开始标签 <html>：
- 在任何一个HTML文件里，最先出现的HTML标签就是<html>，用于表示该文件是以HTML编写的。
- 格式：<html>文件的全部内容</html>
- 该标签不带任何属性。
- 虽然现代浏览器可以自动识别HTML文件，但为了提高文件的适用性，仍建议使用这个标签。
文件头部标签 <head>：
- HTML文件分为文件头和文件主体两个部分。文件头部分用来规定文件的标题和一些属性。
- 格式：<head>头部内容</head>
- <head>标签中放置关于HTML文件的信息，如标题、编码方式、URL等。
- 可以省略<head>标签，如果不需要提供相关信息。
文件标题标签 <title>：
- 每个HTML文件都需要有一个标题，标题会显示在浏览器窗口的最上方。
- 格式：<title>文件名称</title>
- <title>标签应包含在<head>与</head>标签中。
元信息标签 <meta>：
- <meta>标签提供的信息是用户不可见的，用于定义页面信息的名称、关键字、作者等。
- 格式：<meta 属性="值">
- 属性包括name和http-equiv，用于描述网页和提供索引信息。
页面的主体标签 <body>：
- 网页的主体部分以<body>标签开始，以</body>标签结束。
- 格式：<body>主体内容</body>
- <body>标签可以设置很多属性，如背景颜色、字体颜色等。

🔎3.CSS 层叠样式表

🦋3.1 CSS 概述

CSS 是 Cascading Style Sheets（层叠样式表）的缩写。CSS 是一种用于定义 HTML 文档布局的标记语言。例如，CSS 涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。通过使用 CSS 样式，可以使页面变得美观，就像化妆前和化妆后的效果一样。请参见图。

CSS 可以改变 HTML 中标签的样式。具体而言，CSS 通过回答以下三个问题来改变样式：

改变谁？ 使用选择器来选择特定的标签。
改什么？ 指定要改变的属性。
怎么改？ 为属性指定新的属性值。

选择器是用来选择标签的工具。例如，ID 选择器通过 ID 选择标签，类选择器通过类名选择标签。

🦋3.2 属性选择器

属性选择器通过属性来选择标签，这些属性既可以是标准属性（HTML 中默认的属性，例如 input 标签中的 type 属性），也可以是自定义属性。

在 HTML 中，通过各种属性，可以为元素增加很多附加信息。例如，在一个 HTML 页面中，插入多个 p 标签，并为每个 p 标签设定不同的属性。示例代码如下：

<p font="fontsize">编程图书</p>
<p color="red">PHP 编程</p>
<p color="red">Java 编程</p>
<p font="fontsize">当代文学</p>
<p color="green">盗墓笔记</p>
<p color="green">明朝那些事</p>

在 HTML 中为标签添加属性后，可以在 CSS 中使用属性选择器选择相应的标签来改变样式。使用属性选择器时，需要声明属性与属性值，声明方法如下：

[att=val]

其中 att 代表属性，val 代表属性值。例如，如下代码可以为相应的 p 标签设置样式：

[p color=red] {
    color: red;
}
[p color=green] {
    color: green;
}
[p font=fontsize] {
    font-size: 20px;
}

注意：给元素定义属性和属性值时，可以任意定义属性，但要尽量做到“见名知意”，即看到这个属性名和属性值，能明白设置这个属性的用意。

🦋3.3 类和 ID 选择器

在 CSS 中，除了属性选择器，类和 ID 选择器也是广泛支持的选择器。它们有一些区别：

ID 选择器：前面有一个 “#” 号（井号）。语法如下：
```
#intro {
    color: red;
}
```
类选择器：前面有一个 “.” 号。语法如下：
```
.intro {
    color: red;
}
```

第二个区别是 ID 选择器引用的是 id 属性的值，而类选择器引用的是 class 属性的值。

注意：在一个网页中，标签的 class 属性可以定义多个，而 id 属性只能定义一个。例如，一个页面中只能有一个标签的 ID 属性值为 intro。

🔎4.JavaScript 动态脚本语言

前端通常指 HTML、CSS 和 JavaScript 这三项技术：

HTML：定义网页的内容。
CSS：描述网页的样式。
JavaScript：描述网页的行为。

JavaScript 是一种可以嵌入 HTML 代码中并由客户端浏览器运行的脚本语言。在网页中使用 JavaScript 代码，不仅可以实现网页特效，还可以响应用户请求并实现动态交互的功能。例如，在用户注册页面中，需要对用户输入信息的合法性进行验证，包括是否填写了“邮箱”和“手机号”，以及填写的“邮箱”和“手机号”格式是否正确等。JavaScript 验证邮箱是否为空的效果如图所示。

在 Web 页面中使用 JavaScript 有两种方法：

在页面中直接嵌入 JavaScript 代码。
链接外部 JavaScript 文件。

🦋4.1 在页面中直接嵌入 JavaScript 代码

在 HTML 文档中，可以使用 <script>...</script> 标签将 JavaScript 脚本嵌入其中。可以在 HTML 文档中使用多个 <script> 标签，每个 <script> 标签中可以包含多个 JavaScript 代码集合。<script> 标签常用的属性及说明如表所示。

在 HTML 页面中直接嵌入 JavaScript 代码，如图所示。

注意：<script> 标签可以放在 Web 页面 <head> 标签中，也可以放在 <body> 标签中。

🦋4.2 链接外部 JavaScript 文件

引入 JavaScript 的另一种方法是链接外部 JavaScript 文件。如果脚本代码比较复杂或是同一段代码可以被多个页面使用，则可以将这些脚本代码放置在一个单独的文件中（文件扩展名为 .js），然后在需要使用该代码的 Web 页面中链接该 JavaScript 文件即可。链接外部 JavaScript 文件的语法格式如下：

<script language="javascript" src="your-Javascript.js"></script>

在 HTML 页面中链接外部 JavaScript 代码，如图所示。

注意：在外部 JavaScript 文件中，不需要将脚本代码用 <script> 和 </script> 标签括起来。

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

文章目录

🚀前言
🚀一、了解Web前端
- 🔎1.HTTP基本原理
- - 🦋1.1 HTTP协议
  - 🦋1.2 HTTP与Web服务器
  - 🦋1.3 浏览器中的请求和响应
- 🔎2.HTML语言
- - 🦋2.1 什么是HTML
  - 🦋2.2 HTML标签的分类与结构概述
  - 🦋2.3 HTML文件结构
  - 🦋2.4 HTML的基本标签
- 🔎3.CSS 层叠样式表
- - 🦋3.1 CSS 概述
  - 🦋3.2 属性选择器
  - 🦋3.3 类和 ID 选择器
- 🔎4.JavaScript 动态脚本语言
- - 🦋4.1 在页面中直接嵌入 JavaScript 代码
  - 🦋4.2 链接外部 JavaScript 文件

🚀前言

🚀一、了解Web前端

🔎1.HTTP基本原理

🦋1.1 HTTP协议

🦋1.2 HTTP与Web服务器

Web服务器的工作原理可以概括为以下4个步骤：

建立连接: 客户端通过TCP/IP协议建立到服务器的TCP连接。
请求过程: 客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档。
应答过程: 服务器向客户端发送HTTP协议应答包。如果请求的资源包含有动态语言的内容，那么服务器会调用动态语言的解释引擎负责处理“动态内容”，并将处理后得到的数据返回给客户端。由客户端解释HTML文档，在客户端屏幕上渲染图形结果。
关闭连接: 客户端与服务器断开。

🦋1.3 浏览器中的请求和响应

用谷歌浏览器访问明日学院官网，查看请求和响应的流程。步骤如下：

在谷歌浏览器中输入网址 www.mingrisoft，按 Enter 键，进入明日学院官网。
按 F12 键（或右击，选择“检查”选项）审查页面元素，运行效果如图所示。
单击谷歌浏览器调试工具的 Network 选项，按 F5 键（或手动刷新页面），单击调试工具中 Name 栏目下的 www.mingrisoft，查看请求与响应的信息，如图所示。

从图中的 General 概述关键信息如下：

Request URL: 请求的URL地址，也就是服务器的URL地址。
Request Method: 请求方式是 GET。
Status Code: 状态码是 200，即成功返回响应。
Remote Address: 服务器IP地址是 101.201.120.85，端口号是 80。

🔎2.HTML语言

🦋2.1 什么是HTML

🦋2.2 HTML标签的分类与结构概述

HTML的标签分为单独出现的标签和成对出现的标签两种。

成对标签：

成对标签由首标签和尾标签组成。
格式：<元素名称>内容</元素名称>
例如：<title>网页标题</title>

单独标签：

单独标签无需结束标签。
格式：<元素名称>
例如：<br>（表示换行）

说明：

HTML标签中的大、小写混写均可，例如<HTML>、<Html>和<html>效果相同。
HTML标签可以设置属性，控制标签所建立的元素。这些属性位于首标签中，如：
```
<元素名称 属性1="值1" 属性2="值2" …>
```

🦋2.3 HTML文件结构

在介绍HTML文件结构之前，我们来看一个简单的HTML文件及其在浏览器上的显示结果。以下代码可以在Windows自带的记事本中编写，然后保存为.html文件。

<!DOCTYPE html>
<html>
<head>
    <title>文件标题</title>
</head>
<body>
    文件正文
</body>
</html>

运行效果：浏览器会显示一个标题为“文件标题”，正文为“文件正文”的简单网页。

从上述代码中可以看出HTML文件的基本结构：

<head>标签与</head>标签之间的部分是文件头部分，用于说明文件的标题和一些公共属性。
<body>标签与</body>标签之间的部分是文件主体部分，主要内容标签都嵌套在这里使用。

🦋2.4 HTML的基本标签

文件开始标签 <html>：
- 在任何一个HTML文件里，最先出现的HTML标签就是<html>，用于表示该文件是以HTML编写的。
- 格式：<html>文件的全部内容</html>
- 该标签不带任何属性。
- 虽然现代浏览器可以自动识别HTML文件，但为了提高文件的适用性，仍建议使用这个标签。
文件头部标签 <head>：
- HTML文件分为文件头和文件主体两个部分。文件头部分用来规定文件的标题和一些属性。
- 格式：<head>头部内容</head>
- <head>标签中放置关于HTML文件的信息，如标题、编码方式、URL等。
- 可以省略<head>标签，如果不需要提供相关信息。
文件标题标签 <title>：
- 每个HTML文件都需要有一个标题，标题会显示在浏览器窗口的最上方。
- 格式：<title>文件名称</title>
- <title>标签应包含在<head>与</head>标签中。
元信息标签 <meta>：
- <meta>标签提供的信息是用户不可见的，用于定义页面信息的名称、关键字、作者等。
- 格式：<meta 属性="值">
- 属性包括name和http-equiv，用于描述网页和提供索引信息。
页面的主体标签 <body>：
- 网页的主体部分以<body>标签开始，以</body>标签结束。
- 格式：<body>主体内容</body>
- <body>标签可以设置很多属性，如背景颜色、字体颜色等。

🔎3.CSS 层叠样式表

🦋3.1 CSS 概述

CSS 可以改变 HTML 中标签的样式。具体而言，CSS 通过回答以下三个问题来改变样式：

改变谁？ 使用选择器来选择特定的标签。
改什么？ 指定要改变的属性。
怎么改？ 为属性指定新的属性值。

选择器是用来选择标签的工具。例如，ID 选择器通过 ID 选择标签，类选择器通过类名选择标签。

🦋3.2 属性选择器

属性选择器通过属性来选择标签，这些属性既可以是标准属性（HTML 中默认的属性，例如 input 标签中的 type 属性），也可以是自定义属性。

<p font="fontsize">编程图书</p>
<p color="red">PHP 编程</p>
<p color="red">Java 编程</p>
<p font="fontsize">当代文学</p>
<p color="green">盗墓笔记</p>
<p color="green">明朝那些事</p>

在 HTML 中为标签添加属性后，可以在 CSS 中使用属性选择器选择相应的标签来改变样式。使用属性选择器时，需要声明属性与属性值，声明方法如下：

[att=val]

其中 att 代表属性，val 代表属性值。例如，如下代码可以为相应的 p 标签设置样式：

[p color=red] {
    color: red;
}
[p color=green] {
    color: green;
}
[p font=fontsize] {
    font-size: 20px;
}

注意：给元素定义属性和属性值时，可以任意定义属性，但要尽量做到“见名知意”，即看到这个属性名和属性值，能明白设置这个属性的用意。

🦋3.3 类和 ID 选择器

在 CSS 中，除了属性选择器，类和 ID 选择器也是广泛支持的选择器。它们有一些区别：

ID 选择器：前面有一个 “#” 号（井号）。语法如下：
```
#intro {
    color: red;
}
```
类选择器：前面有一个 “.” 号。语法如下：
```
.intro {
    color: red;
}
```

第二个区别是 ID 选择器引用的是 id 属性的值，而类选择器引用的是 class 属性的值。

注意：在一个网页中，标签的 class 属性可以定义多个，而 id 属性只能定义一个。例如，一个页面中只能有一个标签的 ID 属性值为 intro。

🔎4.JavaScript 动态脚本语言

前端通常指 HTML、CSS 和 JavaScript 这三项技术：

HTML：定义网页的内容。
CSS：描述网页的样式。
JavaScript：描述网页的行为。

在 Web 页面中使用 JavaScript 有两种方法：

在页面中直接嵌入 JavaScript 代码。
链接外部 JavaScript 文件。

🦋4.1 在页面中直接嵌入 JavaScript 代码

在 HTML 页面中直接嵌入 JavaScript 代码，如图所示。

注意：<script> 标签可以放在 Web 页面 <head> 标签中，也可以放在 <body> 标签中。

🦋4.2 链接外部 JavaScript 文件

<script language="javascript" src="your-Javascript.js"></script>

在 HTML 页面中链接外部 JavaScript 代码，如图所示。

注意：在外部 JavaScript 文件中，不需要将脚本代码用 <script> 和 </script> 标签括起来。

USB迷 | 专注于互联网分享

文章目录

🚀前言

🚀一、了解Web前端

🔎1.HTTP基本原理

🦋1.1 HTTP协议

🦋1.2 HTTP与Web服务器

🦋1.3 浏览器中的请求和响应

🔎2.HTML语言

🦋2.1 什么是HTML

🦋2.2 HTML标签的分类与结构概述

🦋2.3 HTML文件结构

🦋2.4 HTML的基本标签

🔎3.CSS 层叠样式表

🦋3.1 CSS 概述

🦋3.2 属性选择器

🦋3.3 类和 ID 选择器

🔎4.JavaScript 动态脚本语言

🦋4.1 在页面中直接嵌入 JavaScript 代码

🦋4.2 链接外部 JavaScript 文件

文章目录

🚀前言

🚀一、了解Web前端

🔎1.HTTP基本原理

🦋1.1 HTTP协议

🦋1.2 HTTP与Web服务器

🦋1.3 浏览器中的请求和响应

🔎2.HTML语言

🦋2.1 什么是HTML

🦋2.2 HTML标签的分类与结构概述

🦋2.3 HTML文件结构

🦋2.4 HTML的基本标签

🔎3.CSS 层叠样式表

🦋3.1 CSS 概述

🦋3.2 属性选择器

🦋3.3 类和 ID 选择器

🔎4.JavaScript 动态脚本语言

🦋4.1 在页面中直接嵌入 JavaScript 代码

🦋4.2 链接外部 JavaScript 文件

与本文相关的文章

评论列表 (0)