当前位置： 首页 > article >正文

爬虫基础（二）Web网页的基本原理

article 2026/5/10 21:28:42

一、网页的组成

网页由三部分构成：HTML、JavaScript、CSS。

（1）HTML

HTML 相当于网页的骨架，它通过使用标签来定义网页内容的结构。

举个例子：

它把图片标签为img、把视频标签为video，然后组合到一个界面里，这种呈现方式就是HTML

如果你想找到它，

比如我们打开任意一个网站：

然后右键打开“检查”，进入Elements面板：

可以看到，当我们鼠标放置在某一标签上时，该标签标记的东西会被锁定，然后呈现出来。

当很多个标签组合，就成了我们看到的网页界面，

（2）CSS

经过上文得知HTML 负责网页内容的结构

那么 CSS 则控制这些内容的样式和布局。

即CSS通过选择器决定网页元素的字体、颜色、间距、对齐方式、背景、边框等。

比如：

打开Styles面板，下面的各种各样就是在设置样式

（3）JavaScript

如果说：HTML构建了网页、CSS装饰了网页。

那么JavaScript则提供了交互性

比如下图框中，带js后缀的代码，就是引入互动行为 

二、制作一个简单网页

首先打开文本文件：

第一步，来定义文档类型

<!DOCTYPE html>

第二步要写：

<html lang="zh">
……你的HTML代码
</html>

<html lang="zh">我们可以理解为，告诉电脑我们要开始写了

正常来说我们可以直接写<html>，但加上 lang="zh"就表示指定语言为中文。

结尾的</html>代表，到这里就结束了。

而中间部分，则是我们要写的设置网页内容

第三部，写head标签和body标签

<html>包括head标签和body标签

所以我们要写：

<head>……</head><body>……</body>

head标签意思是网页头，即说明一下页面需要的配置，比如我们可以写：

<meta charset="UTF-8">来表示指定网页编码为UTF-8

body标签的意思是网页体，就是网页正文里要展现的东西，比如我们可以写：

<div id="word">其中div表示定义一个区块，这个区块的id是word，之后我们就可以通过id来获得这个区块，并进行相应的修改设置。

到此为止，我们的完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>简单网页</title>
</head>
<body><header><h1>欢迎访问我的网站</h1></header>    <div class="container"><h2>关于我们</h2><p>这是一个简单的网页示例，展示了HTML和CSS如何一起工作来构建网页结构和样式。</p></div>
</body>
</html>

其中h几表示几级标题，p标签表示一个段落

之后我们把文件后缀改为html，然后双击打开，展示如下；

三、相关概念

（1）节点和节点树

在HTML中，我们把所有的标签内容都看出节点

而所有的节点构成了节点树（HTML DOM树）

至于节点树的构成，相信如果你如果看了第二部分就明白了，其构成如下：

最顶端的节点称之为根节点

每个节点（如果有的话）上一个节点称为父节点，下一个节点称为子节点。

同级的子节点称为兄弟节点

这些概念同理于 树 部分概念

（2）选择器

在说到CSS时，我们提到了选择器，那么这是什么呢？

首先，选择器是用来定位节点的

比如，我们之前通过div来确定了一个id为word的节点

那么我们要去定位这个id，有三个常用办法：

第一，类选择器，以“ . ”开头

.word {background-color: yellow;
}

这会选中所有 class="word" 的元素，并给它们加上黄色背景。

第二，ID选择器，以“#”开头

#word {font-size: 24px;
}

这会选中具有 id="word" 的元素，并将字体大小设置为 24px。

第三，元素选择器，选择所有指定标签的元素

p {color: blue;
}

这会选中页面中的所有 <p> 标签，并将它们的文字颜色设置为蓝色。

常见的 CSS 选择器及其语法规则，汇总如下：

元素选择器

  • 选中指定标签的所有元素。

    p { color: red; }
    这会选中页面中的所有 <p> 元素并将它们的文字颜色设置为红色。

2. 类选择器

  • 选中所有具有指定类的元素。类选择器以 . 开头。

    .highlight { background-color: yellow; }
    这会选中所有 class="highlight" 的元素，并为它们设置黄色背景。

3. ID 选择器

  • 选中具有指定 ID 的元素。ID 选择器以 # 开头。

    #header { font-size: 24px; }
    这会选中 ID 为 header 的元素，并将字体大小设置为 24px。

4. 通配符选择器

  • 选中所有元素。

    * { margin: 0; }
    这会把页面中所有元素的外边距（margin）设置为 0。

5. 后代选择器

  • 选中某个元素内部的所有指定子元素。空格表示层级关系，选中某个元素的所有后代元素。

    div p { color: blue; }
    这会选中所有位于 <div> 内部的 <p> 元素，并将它们的文字颜色设置为蓝色。

6. 子元素选择器

  • 选中某个元素的直接子元素，使用 > 符号表示。

    div > p { color: green; }
    这会选中所有直接位于 <div> 元素内部的 <p> 元素，而不会选中更深层嵌套的 <p> 元素。

7. 并列关系选择器（兄弟选择器）

  • **相邻兄弟选择器 (+)**：选中某个元素后紧跟的第一个兄弟元素。

    h1 + p { color: orange; }

    这会选中紧接在 <h1> 元素后面的第一个 <p> 元素。

  • **通用兄弟选择器 (~)**：选中所有在指定元素后面的兄弟元素。

    h1 ~ p { color: purple; }

    这会选中所有位于 <h1> 后面的 <p> 元素。

8. 属性选择器

  • 根据元素的属性和属性值来选择元素。

    input[type="text"] { border: 1px solid black; }
    这会选中所有 type="text" 的 <input> 元素，并给它们加上黑色边框。

9. 伪类选择器

  • 选择元素的特定状态。

    • :hover：当鼠标悬停在元素上时应用样式。

      a:hover { color: red; }

    • :first-child：选中某元素是其父元素的第一个子元素。

      p:first-child { font-weight: bold; }

10. 伪元素选择器

  • 选中元素的特定部分，如首字母、首行等。

    • ::before：在元素的内容前插入内容。

      p::before { content: "Note: "; font-weight: bold; }

    • ::after：在元素的内容后插入内容。

      p::after { content: "."; }

11. 组合选择器

  • 多个选择器结合起来使用，达到更精确的选中效果。
    • 后代选择器：div p，选中 <div> 内的所有 <p> 元素。
    • 类和元素选择器组合：p.highlight，选中所有同时拥有 highlight 类的 <p> 元素。

12. 通用选择器

  • **:not()**：选中所有不符合某种条件的元素。

    p:not(.special) { color: blue; }
    这会选中所有不具有 special 类的 <p> 元素，并将它们的颜色设置为蓝色。

13. 组选择器

  • 通过逗号 , 组合多个选择器，用于多个元素应用相同样式。

    h1, h2, h3 { color: black; }
    这会将 <h1>、<h2>、<h3> 元素的文字颜色设置为黑色。

相关文章：

爬虫基础（二）Web网页的基本原理

一、网页的组成 网页由三部分构成&#xff1a;HTML、JavaScript、CSS。 &#xff08;1&#xff09;HTML HTML 相当于网页的骨架&#xff0c;它通过使用标签来定义网页内容的结构。 举个例子&#xff1a; 它把图片标签为img、把视频标签为video&#xff0c;然后组合到一个界面…...

编程日记 2026/5/1 10:32:36

Kotlin开发（六）：Kotlin 数据类，密封类与枚举类

引言 想象一下&#xff0c;你是个 Kotlin 开发者&#xff0c;敲着代码忽然发现业务代码中需要一堆冗长的 POJO 类来传递数据。烦得很&#xff1f;别急&#xff0c;Kotlin 贴心的 数据类 能帮你自动生成 equals、hashCode&#xff0c;直接省时省力&#xff01;再想想需要多种状…...

编程日记 2026/5/1 5:45:56

我的AI工具箱Tauri+Django内容生产介绍和使用

在现代内容生产环境中&#xff0c;高效、自动化的工具能够显著提升生产力&#xff0c;降低人工成本。Tauri 与 Django 结合打造的工作箱&#xff0c;集成了强大的 音频处理、视频剪辑、内容下载 以及 AI 文章撰写 等模块&#xff0c;帮助用户在多媒体内容生产的各个环节实现高效…...

编程日记 2026/3/11 4:48:33

openssl 生成证书 windows导入证书

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…...

编程日记 2026/5/1 16:16:35

AJAX笔记入门篇

黑马程序员视频地址&#xff1a; 黑马程序员前端AJAX入门到实战全套教程https://www.bilibili.com/video/BV1MN411y7pw?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes&p2https://www.bilibili.com/video/BV1MN411y7pw?vd_source…...

编程日记 2026/4/27 2:56:24

DOM操作中childNodes与children的差异及封装方案

引言 在JavaScript的DOM操作中&#xff0c;childNodes和children是开发者常用的属性&#xff0c;但它们在浏览器中的行为差异可能导致兼容性问题。尤其是在处理空白符&#xff08;如换行符\n&#xff09;时&#xff0c;某些浏览器&#xff08;如Chrome和Edge&#xff09;会将空…...

编程日记 2026/3/10 3:24:42

数据分析系列--④RapidMiner进行关联分析(案例)

一、核心概念 1.1项集&#xff08;Itemset&#xff09; 1.2规则&#xff08;Rule&#xff09; 1.3支持度&#xff08;Support&#xff09; 1.3.1 支持度的定义 1.3.2 支持度的意义 1.3.3 支持度的应用 1.3.4 支持度的示例 1.3.5 支持度的调整 1.3.6 支持度与其他指标的…...

编程日记 2026/5/7 18:32:49

危机13小时：追踪一场GitHub投毒事件

事件概要 自北京时间 2024.12.4 晚间6点起&#xff0c; GitHub 上不断出现“幽灵仓库”&#xff0c;仓库中没有任何代码&#xff0c;只有诱导性的病毒文件。当天&#xff0c;他们成为了 GitHub 上 star 增速最快的仓库。超过 180 个虚假僵尸账户正在传播病毒&#xff0c;等待不…...

编程日记 2026/5/3 0:03:42

LLMs之WebRAG：STORM/Co-STORM的简介、安装和使用方法、案例应用之详细攻略

LLMs之WebRAG&#xff1a;STORM/Co-STORM的简介、安装和使用方法、案例应用之详细攻略 目录 STORM系统简介 1、Co-STORM 2、更新新闻 STORM系统安装和使用方法 1、安装 pip安装 直接克隆GitHub仓库 2、模型和数据集 两个数据集 FreshWiki数据集 WildSeek数据集 支持…...

编程日记 2026/5/6 2:12:41

使用QSqlQueryModel创建交替背景色的表格模型

class UserModel(QSqlQueryModel):def __init__(self):super().__init__()self._query "SELECT name, age FROM users"self.refresh()def refresh(self):self.setQuery(self._query)# 重新定义data()方法def data(self, index, role): if role Qt.BackgroundRole…...

编程日记 2025/5/11 1:10:52

低代码产品插件功能一览

下图是统计的目前市面上流行的低代码、零代码产品的插件功能。 产品名称 产品类型 官方插件数量 支持拓展 官方插件功能 宜搭 零代码 3 暂不支持 云打印、CAD看图、打印表单详情 微搭 低代码 1 暂不支持 小程序 明道云 低代码 2 支持 视图、工作流节点 简道…...

编程日记 2026/3/24 14:47:00

buu-rip-好久不见26

简单的栈溢出&#xff0c;找到后面函数和输入的个数即可...

编程日记 2026/5/1 5:53:06

Flutter 新春第一弹，Dart 宏功能推进暂停，后续专注定制数据处理支持

在去年春节&#xff0c;Flutter 官方发布了宏&#xff08;Macros&#xff09;编程的原型支持&#xff0c; 同年的 5 月份在 Google I/O 发布的 Dart 3.4 宣布了宏的实验性支持&#xff0c;但是对于 Dart 内部来说&#xff0c;从启动宏编程实验开始已经过去了几年&#xff0c;但…...

编程日记 2026/4/4 13:19:47

新手项目管理的实用工具推荐

项目启动的实用工具推荐 1. MindManager MindManager 是一款功能强大且广受欢迎的思维导图工具&#xff0c;对于项目启动阶段的新手而言&#xff0c;它就像是一位贴心的 “思路梳理助手”。在项目启动初期&#xff0c;各种信息和想法往往杂乱无章地充斥在脑海中&#xff0c;而…...

编程日记 2026/4/11 23:36:46

2025一区新风口：小波变换+KAN！速占！

今天给大家分享一个能让审稿人眼前一亮&#xff0c;好发一区的idea&#xff1a;小波变换KAN&#xff01; 一方面&#xff1a;KAN刚中稿ICLR25&#xff0c;正是风口上&#xff0c;与小波变换的结合还处于起步阶段&#xff0c;正是红利期&#xff0c;创新空间广阔。 另一方面&a…...

编程日记 2026/4/30 14:14:22

Django ORM解决Oracle表多主键的问题

现状 以Django 3.2为例 Django ORM 设计为默认使用单一主键&#xff08;通常是自增的 id 字段&#xff09;&#xff0c;这一选择主要基于以下核心原因&#xff1a; 简化ORM设计与操作 统一访问方式外键关联简化 避免歧义冲突 主键语义明确防止隐式依赖 性能与数据库兼容 索引…...

编程日记 2026/3/8 16:51:41

solidity高阶 -- 线性继承

Solidity是一种面向合约的高级编程语言&#xff0c;用于编写智能合约。在Solidity中&#xff0c;多线继承是一个强大的特性&#xff0c;允许合约从多个父合约继承属性和方法。本文将详细介绍Solidity中的多线继承&#xff0c;并通过不同的实例展示其使用方法和注意事项。 在Sol…...

编程日记 2026/3/7 15:12:55

无公网IP 外网访问 本地部署夫人 hello-algo

hello-algo 是一个为帮助编程爱好者系统地学习数据结构和算法的开源项目。这款项目通过多种创新的方式&#xff0c;为学习者提供了一个直观、互动的学习平台。 本文将详细的介绍如何利用 Docker 在本地安装部署 hello-algo&#xff0c;并结合路由侠内网穿透实现外网访问本地部署…...

编程日记 2026/5/5 17:17:28

系统思考—蝴蝶效应

“个体行为的微小差异&#xff0c;可能在系统中引发巨大且不可预测的结果。” — 诺贝尔经济学得主托马斯谢林 我们常说&#xff0c;小变动带来大影响&#xff0c;这种现象&#xff0c;在复杂系统理论中被称为“蝴蝶效应”&#xff1a;即使极小的变化&#xff0c;也能在动态系…...

编程日记 2026/5/8 16:01:19

钉钉群机器人设置——python版本

钉钉群机器人设置——python版本 应用场景钉钉界面操作程序开发效果展示 应用场景 由于工作需要&#xff0c;很多项目执行程序后出现报错信息无法第一时间收到&#xff0c;因此实时预警对于监控程序还是有必要。&#xff08;仅个人观点&#xff09; 参考文档及博客&#xff1a…...

编程日记 2026/5/4 3:50:05

sem_wait的概念和使用案列

sem_wait 是 POSIX 标准中定义的一个用于同步的函数&#xff0c;它通常用于操作信号量&#xff08;semaphore&#xff09;。信号量是一个整数变量&#xff0c;可以用来控制对共享资源的访问。在多线程编程中&#xff0c;sem_wait 常用于实现线程间的同步。 概念 sem_wait 的基…...

编程日记 2026/4/22 12:10:12

深度学习在金融风控中的应用：突破传统模型的瓶颈

深度学习在金融风控中的应用：突破传统模型的瓶颈 金融风险控制（简称“风控”）是现代金融体系中至关重要的一环，关系到金融机构的稳定性、客户的安全以及整体经济的健康运行。近年来，随着深度学习的迅猛发展，传统的风控模型正面临被颠覆的挑战，新的技术手段和思维方式正…...

编程日记 2026/2/25 8:43:14

【Rust自学】15.0. 智能指针(序)：什么是智能指针及Rust智能指针的特性

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 15.0.1 指针的基本概念 指针是一个变量在内存中包含的是一个地址&#xff0c;指向另一个数据。 Rust 中最常见的指针是引用&#xff0c…...

编程日记 2026/5/1 5:33:56

Spring AI 在微服务中的应用：支持分布式 AI 推理

1. 引言 在现代企业中&#xff0c;微服务架构 已成为开发复杂系统的主流方式&#xff0c;而 AI 模型推理 也越来越多地被集成到业务流程中。如何在分布式微服务架构下高效地集成 Spring AI&#xff0c;使多个服务可以协同完成 AI 任务&#xff0c;并支持分布式 AI 推理&#x…...

编程日记 2026/5/6 9:23:41

QT串口通信，实现单个温湿度传感器数据的采集

1、硬件设备 RS485中继器(一进二出)，usb转485模块、电源等等 => 累计115元左右。 2、核心代码 #include "MainWindow.h" #include "ui_MainWindow.h"MainWindow::...

编程日记 2026/5/10 11:27:30

EtherCAT主站IGH-- 21 -- IGH之fsm_reboot.h/c文件解析

EtherCAT主站IGH-- 21 -- IGH之fsm_reboot.h/c文件解析 0 预览一 该文件功能`fsm_reboot.c` 文件功能函数预览二 函数功能介绍`fsm_reboot.c` 中主要函数的作用1. `ec_fsm_reboot_init`2. `ec_fsm_reboot_clear`3. `ec_fsm_reboot_single`4. `ec_fsm_reboot_all`5. `ec_fsm_reb…...

编程日记 2026/3/18 0:18:54

使用 Docker + Nginx + Certbot 实现自动化管理 SSL 证书

使用 Docker Nginx Certbot 实现自动化管理 SSL 证书 在互联网安全环境日益重要的今天&#xff0c;为站点或应用部署 HTTPS 已经成为一种常态。然而&#xff0c;手动申请并续期证书既繁琐又容易出错。本文将以 Nginx Certbot 为示例&#xff0c;基于 Docker 容器来搭建一个…...

编程日记 2026/3/22 6:00:49

深入理解Linux内核的虚拟地址到物理地址转换机制及缓存优化

在现代计算机系统中，虚拟地址到物理地址的转换是操作系统内存管理的重要组成部分。特别是在基于x86_64架构的Linux系统上，这一转换过程及其相关的缓存机制对系统性能和稳定性至关重要。本文将深入探讨Debian 10上运行Linux 4.19内核时，这些机制的实现细节，特别是页表管理、…...

编程日记 2026/3/11 21:24:04

DeepSeek R1：中国AI黑马的崛起与挑战

文章目录 技术突破&#xff1a;从零开始的推理能力进化DeepSeek R1-Zero&#xff1a;纯RL训练的“自我觉醒”DeepSeek R1&#xff1a;冷启动与多阶段训练的平衡之道 实验验证&#xff1a;推理能力的全方位跃升基准测试&#xff1a;超越顶尖闭源模型蒸馏技术&#xff1a;小模型的…...

编程日记 2026/5/2 9:44:58

MFC开发，给对话框添加垂直滚动条并解决鼠标滚动响应的问题

无论在使用QT或者MFC进行界面开发时&#xff0c;都会出现在一个对话框里面存在好多的选项&#xff0c;导致对话框变得非常长或者非常大&#xff0c;就会显现的不美观&#xff0c;在这种情况下通常是添加一个页面的滚动条来解决这个问题&#xff0c;下面我们就来介绍给MFC的对话…...

编程日记 2026/5/6 14:20:28