爬虫基础：Web网页基础

前言
Web网页基础
- 网页的组成
- 网页的结构
- 节点树及节点间的关系
- 选择器

前言

用浏览器访问不同的网站时，呈现的页面各不相同，你有没有想过为何会这样呢？了解一下网页的组成、结构和节点等内容。了解这些内容有助于我们进一步了解爬虫的基本原理。
由于本人水平有限，难免出现错漏，敬请批评改正。
更多精彩内容，可点击进入Python日常小操作专栏、OpenCV-Python小应用专栏、YOLO系列专栏、自然语言处理专栏或我的个人主页查看
基于DETR的人脸伪装检测
YOLOv7训练自己的数据集（口罩检测）
YOLOv8训练自己的数据集（足球检测）
YOLOv5：TensorRT加速YOLOv5模型推理
YOLOv5：IoU、GIoU、DIoU、CIoU、EIoU
玩转Jetson Nano（五）：TensorRT加速YOLOv5目标检测
YOLOv5：添加SE、CBAM、CoordAtt、ECA注意力机制
YOLOv5：yolov5s.yaml配置文件解读、增加小目标检测层
Python将COCO格式实例分割数据集转换为YOLO格式实例分割数据集
YOLOv5：使用7.0版本训练自己的实例分割模型（车辆、行人、路标、车道线等实例分割）
使用Kaggle GPU资源免费体验Stable Diffusion开源项目

Web网页基础

Web网页基础主要包括网页的构成元素以及相关的开发技术。

首先，网页通常由结构、样式和行为这三个方面组成。具体来说，结构由HTML（Hyper Text Markup Language，超文本标记语言）来定义，它用于描述网页的内容和结构，并通过标签来定义元素，如标题、段落、链接等。样式则由CSS（Cascading Style Sheets，层叠样式表）来负责，它描述了网页的呈现方式，包括颜色、字体、布局等。而行为则通过JavaScript来实现，它负责网页的交互和动态效果。

在网页开发中，还需要掌握一些前端框架和工具，如Angular、React、Vue.js等，它们提供了一系列工具和组件，简化了前端应用程序的开发。同时，为了确保数据传输的安全性，SSL/TLS技术也常用于加密Web传输中的数据。

此外，后端开发技术也是Web网页基础的重要组成部分，包括服务器端语言（如PHP、Python、Ruby、Java等）用于处理客户端发送的请求并生成动态网页内容，以及数据库用于存储和管理应用程序的数据。

总的来说，Web网页基础涉及多个方面，包括HTML、CSS、JavaScript等前端技术，以及后端开发技术和数据库等。掌握这些基础知识对于开发一个功能完善、用户体验良好的Web应用至关重要。

网页的组成

网页的组成主要包括以下几个部分：

文本：这是网页的主要内容，包括标题、段落、列表、链接等。文本内容通过HTML标签进行描述和定位，使浏览器能够正确地解析和显示。
图片：图片是网页中常见的元素，用于展示各种视觉信息，如产品图片、背景图、图标等。HTML中使用<img>标签来插入图片，并可以通过属性指定图片的URL、大小等。
音频和视频：随着多媒体技术的发展，音频和视频也逐渐成为网页中不可或缺的元素。HTML5引入了<audio>和<video>标签，使得在网页中嵌入音频和视频文件变得更加简单。
超链接：超链接是网页的重要组成部分，它允许用户点击后跳转到其他网页或网站。HTML中使用<a>标签来创建超链接，通过href属性指定链接的目标地址。
表格：表格用于展示数据，可以清晰地排列和比较信息。
表单：表单是网页中用于收集用户输入信息的元素，如搜索框、登录框等。HTML中使用<form>标签来创建表单，并通过各种输入类型（如文本框、单选框、复选框等）来收集用户数据。
框架：框架可以将一个浏览器窗口划分为多个区域，每个区域可以独立加载不同的网页。虽然框架在早期的网页设计中较为常见，但现代网页设计中较少使用，因为框架会影响网页的可访问性和响应性。

除了以上基本元素外，网页的组成还可能包括各种插件、脚本（如JavaScript用于实现交互效果）、CSS样式表（用于控制网页的外观和布局）等。这些元素共同构成了网页的完整内容和功能。同时，随着Web技术的不断发展，新的元素和特性也在不断被引入到网页设计中。

网页的结构

网页的结构主要由以下几个关键部分组成：

页面结构：页面结构主要包括导航栏、栏目以及正文内容。
- 导航栏：导航栏是网站频道入口的集合区域，相当于网站的菜单，用户可以通过导航栏快速找到所需的信息或页面。
- 栏目：栏目是指网页中存放相同性质内容的区域。通过对内容进行合理的分类和组织，栏目可以帮助用户更快速地获取所需信息。
- 正文内容：正文内容是页面的主体部分，如文章、产品介绍等。这部分内容通常与页面的主题紧密相关，是用户访问页面时最关注的部分。
布局结构：网页的布局结构决定了页面元素的排列和组合方式，常见的布局结构有右框型、目字型、曰字形对称等。
- 右框型布局：顶部为网站Logo和banner，下方左侧为菜单，右侧为主要内容。这种布局结构清晰明了，适合初学者。
- 目字型布局：在右框型布局的基础上，增加一个竖列，缩小中间内容的宽度，并将菜单和导航集中在上方和下方横列中。
- 曰字形对称布局：具有强烈的反差对比和视觉冲击力，可以是上下对称或左右对称。
HTML标签：HTML是构成网页的基础，通过HTML标签可以描述网页的结构和内容。HTML标签分为块级元素和内联元素，块级元素如<div>、<p>等，用于定义页面中的区块；内联元素如<span>、<a>等，用于定义页面中的文本或其他内联内容。
CSS样式：CSS用于控制网页的样式和布局，包括颜色、字体、边距、背景等。通过CSS，可以实现对网页的精细化控制，使其呈现出美观、易用的界面。
响应式设计：响应式设计是指网页能够根据设备的屏幕大小和分辨率自动调整布局和样式，以确保在各种设备上都能获得良好的用户体验。这通常通过媒体查询和百分比宽度等方式实现。

综上所述，网页的结构是一个综合性的概念，涉及页面元素的组织、布局、HTML标签和CSS样式等多个方面。一个合理的网页结构不仅能够提高用户体验，还有助于提升网站的搜索引擎排名和可访问性。

节点树及节点间的关系

节点树和节点间的关系是计算机编程和数据结构中常见的概念，尤其在处理如XML、HTML等树形结构的数据时。下面是对节点树和节点间关系的解释：

节点树：

节点树是一种数据结构，用于表示层次关系或父子关系。在节点树中，每个节点可能有一个或多个子节点，而每个子节点只有一个父节点（除了根节点，它没有父节点）。这种结构允许我们以一种直观和有序的方式表示和访问数据。

在HTML或XML文档中，节点树是文档结构的直观表示。每个元素、属性、文本内容等都被视为一个节点，节点之间通过父子、兄弟等关系连接，形成一个整体的树形结构。

节点间的关系：

父节点与子节点：在节点树中，一个节点（称为父节点）可以有一个或多个子节点。子节点是父节点下一级的节点。每个子节点都只有一个父节点，但一个父节点可以有多个子节点。
兄弟节点：拥有相同父节点的节点被称为兄弟节点。在节点树中，兄弟节点位于同一层级，并共享相同的父节点。
祖先节点与后代节点：从根节点到任意节点的路径上的所有节点都是该节点的祖先节点，包括根节点和该节点的所有父节点。而从任意节点到其叶子节点（没有子节点的节点）的所有节点都是该节点的后代节点，包括该节点本身和其所有子节点。

在编程中，理解和处理这些节点间的关系是非常重要的，因为它们允许我们有效地遍历和操作节点树，实现如搜索、插入、删除等操作。例如，在DOM（文档对象模型）操作中，我们可以使用这些关系来访问和修改HTML文档的结构和内容。

请注意，不同的编程语言和框架可能具有不同的术语和方法来表示和处理节点树及节点间的关系，但基本概念是相似的。

选择器

选择器是编程和网页开发中用于定位和操作特定元素的重要工具。其基本概念和用法在不同语境下可能有所差异，但核心功能都是根据一定的规则或模式来选取目标对象。

在CSS中，选择器用于选择需要添加样式的元素，确定HTML的树形结构中的DOM元素节点。它们有多种类型，如标签选择器、id选择器和类选择器。标签选择器通过标签名直接选中标签，对整个标签进行统一样式的更改。id选择器是对标签中的特定元素进行样式设定，进行针对性的更改，但id选择器具有唯一性，无法重复。类选择器则更为灵活和方便，可以在标签上定义class属性，并指定值，然后让这个值作为选择器来使用。

在JavaScript中，选择器同样是一种强大的工具，用于从HTML文档中选择和操作元素。常见的选择器类型包括ID选择器和类选择器。ID选择器使用元素的id属性来选择元素，而类选择器选择具有相同类名的元素。通过选择器，可以轻松地找到特定的元素，并对其进行各种操作，比如修改样式、添加事件监听器或者改变内容。

此外，在某些编程语境中，选择器也可以用于定义和处理节点树及节点间的关系。节点树是一种数据结构，用于表示层次关系或父子关系，而选择器则可以根据这些关系来定位和操作特定的节点。

总的来说，选择器在编程和网页开发中扮演着至关重要的角色，它们使得开发者能够精确地选择和操作目标元素，从而实现各种复杂的功能和效果。

在这里插入图片描述

由于本人水平有限，难免出现错漏，敬请批评改正。
更多精彩内容，可点击进入Python日常小操作专栏、OpenCV-Python小应用专栏、YOLO系列专栏、自然语言处理专栏或我的个人主页查看
基于DETR的人脸伪装检测
YOLOv7训练自己的数据集（口罩检测）
YOLOv8训练自己的数据集（足球检测）
YOLOv5：TensorRT加速YOLOv5模型推理
YOLOv5：IoU、GIoU、DIoU、CIoU、EIoU
玩转Jetson Nano（五）：TensorRT加速YOLOv5目标检测
YOLOv5：添加SE、CBAM、CoordAtt、ECA注意力机制
YOLOv5：yolov5s.yaml配置文件解读、增加小目标检测层
Python将COCO格式实例分割数据集转换为YOLO格式实例分割数据集
YOLOv5：使用7.0版本训练自己的实例分割模型（车辆、行人、路标、车道线等实例分割）
使用Kaggle GPU资源免费体验Stable Diffusion开源项目