| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
在数字化时代，网络数据的获取和处理变得愈发重要。无论是为了获取实时新闻、监测市场动向，还是进行学术研究，网络爬虫技术都为我们提供了强有力的工具。而在学习和掌握网络爬虫的过程中，理解Web前端的构成与特性，是每一个开发者必不可少的基础。
本文旨在带领大家逐步深入爬虫的世界，尤其是在这一节中，我们将重点探讨Web前端的概念与技术。无论你是初学者还是有一定经验的开发者，了解HTML、CSS和JavaScript的基本原理，将帮助你更有效地提取和利用互联网上的数据。
当用户在浏览器中输入网址（如 www.mingrisoft）访问明日学院网站时，用户的浏览器被称为客户端，而明日学院网站被称为服务器。这个过程本质上是客户端向服务器发起请求，服务器接收请求后，将处理后的信息（也称为响应）传给客户端。这个过程是通过HTTP协议实现的。
HTTP（HyperText Transfer Protocol），即超文本传输协议，是互联网上应用最为广泛的一种网络协议。HTTP通过TCP在Web服务器和客户端之间传输信息。客户端使用Web浏览器发起HTTP请求给Web服务器，Web服务器发送被请求的信息给客户端。
当在浏览器输入URL后，浏览器会先请求DNS服务器，获得请求站点的IP地址（即根据URL地址 www.mingrisoft 获取其对应的IP地址，如101.201.120.85），然后发送一个HTTP Request（请求）给拥有该IP的主机（明日学院的阿里云服务器），接着就会接收到服务器返回的HTTP Response（响应），浏览器经过渲染后，以一种较好的效果呈现给用户。HTTP基本原理如图所示。
Web服务器的工作原理可以概括为以下4个步骤：
步骤2中，客户端向服务器端发起请求时，常用的请求方法如表所示。
步骤3中，服务器返回给客户端的状态码，可以分为5种类型，由它们的第一位数字表示，如表所示。例如，状态码为200，表示请求成功已完成；状态码为404，表示服务器找不到给定的资源。
用谷歌浏览器访问明日学院官网，查看请求和响应的流程。步骤如下：
从图中的 General 概述关键信息如下：
HTML（HyperText Markup Language，超文本标记语言）是一种纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器（如Windows的“记事本”）打开查看HTML源代码，也可以在浏览器中通过“查看源文件”命令查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行，无须编译。当浏览器打开网页时，会读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容。
HTML的标签分为单独出现的标签和成对出现的标签两种。
成对标签：
<元素名称>内容</元素名称><title>网页标题</title>单独标签：
<元素名称><br>（表示换行）说明：
<HTML>、<Html>和<html>效果相同。<元素名称 属性1="值1" 属性2="值2" …>
在介绍HTML文件结构之前，我们来看一个简单的HTML文件及其在浏览器上的显示结果。以下代码可以在Windows自带的记事本中编写，然后保存为.html文件。
<!DOCTYPE html>
<html>
<head>
<title>文件标题</title>
</head>
<body>
文件正文
</body>
</html>
运行效果：浏览器会显示一个标题为“文件标题”，正文为“文件正文”的简单网页。
从上述代码中可以看出HTML文件的基本结构：
<head>标签与</head>标签之间的部分是文件头部分，用于说明文件的标题和一些公共属性。<body>标签与</body>标签之间的部分是文件主体部分，主要内容标签都嵌套在这里使用。文件开始标签 <html>：
<html>，用于表示该文件是以HTML编写的。<html>文件的全部内容</html>文件头部标签 <head>：
<head>头部内容</head><head>标签中放置关于HTML文件的信息，如标题、编码方式、URL等。<head>标签，如果不需要提供相关信息。文件标题标签 <title>：
<title>文件名称</title><title>标签应包含在<head>与</head>标签中。元信息标签 <meta>：
<meta>标签提供的信息是用户不可见的，用于定义页面信息的名称、关键字、作者等。<meta 属性="值">name和http-equiv，用于描述网页和提供索引信息。页面的主体标签 <body>：
<body>标签开始，以</body>标签结束。<body>主体内容</body><body>标签可以设置很多属性，如背景颜色、字体颜色等。CSS 是 Cascading Style Sheets（层叠样式表）的缩写。CSS 是一种用于定义 HTML 文档布局的标记语言。例如，CSS 涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。通过使用 CSS 样式，可以使页面变得美观，就像化妆前和化妆后的效果一样。请参见图。
CSS 可以改变 HTML 中标签的样式。具体而言，CSS 通过回答以下三个问题来改变样式：
选择器是用来选择标签的工具。例如，ID 选择器通过 ID 选择标签，类选择器通过类名选择标签。
属性选择器通过属性来选择标签，这些属性既可以是标准属性（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;
}
注意：给元素定义属性和属性值时，可以任意定义属性，但要尽量做到“见名知意”，即看到这个属性名和属性值，能明白设置这个属性的用意。
在 CSS 中，除了属性选择器，类和 ID 选择器也是广泛支持的选择器。它们有一些区别：
ID 选择器：前面有一个 “#” 号（井号）。语法如下：
#intro {
color: red;
}
类选择器：前面有一个 “.” 号。语法如下：
.intro {
color: red;
}
第二个区别是 ID 选择器引用的是 id 属性的值，而类选择器引用的是 class 属性的值。
注意：在一个网页中，标签的 class 属性可以定义多个，而 id 属性只能定义一个。例如，一个页面中只能有一个标签的 ID 属性值为 intro。
前端通常指 HTML、CSS 和 JavaScript 这三项技术：
JavaScript 是一种可以嵌入 HTML 代码中并由客户端浏览器运行的脚本语言。在网页中使用 JavaScript 代码，不仅可以实现网页特效，还可以响应用户请求并实现动态交互的功能。例如，在用户注册页面中，需要对用户输入信息的合法性进行验证，包括是否填写了“邮箱”和“手机号”，以及填写的“邮箱”和“手机号”格式是否正确等。JavaScript 验证邮箱是否为空的效果如图所示。
在 Web 页面中使用 JavaScript 有两种方法：
在 HTML 文档中，可以使用 <script>...</script> 标签将 JavaScript 脚本嵌入其中。可以在 HTML 文档中使用多个 <script> 标签，每个 <script> 标签中可以包含多个 JavaScript 代码集合。<script> 标签常用的属性及说明如表所示。
在 HTML 页面中直接嵌入 JavaScript 代码，如图所示。
注意：<script> 标签可以放在 Web 页面 <head> 标签中，也可以放在 <body> 标签中。
引入 JavaScript 的另一种方法是链接外部 JavaScript 文件。如果脚本代码比较复杂或是同一段代码可以被多个页面使用，则可以将这些脚本代码放置在一个单独的文件中（文件扩展名为 .js），然后在需要使用该代码的 Web 页面中链接该 JavaScript 文件即可。链接外部 JavaScript 文件的语法格式如下：
<script language="javascript" src="your-Javascript.js"></script>
在 HTML 页面中链接外部 JavaScript 代码，如图所示。
注意：在外部 JavaScript 文件中，不需要将脚本代码用 <script> 和 </script> 标签括起来。
本文发布于:2025-03-04 12:12:00，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/1741061582581211.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
