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

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

news 2025/9/14 10:14:13

一、网页的组成

网页由三部分构成：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;然后组合到一个界面…...

编程日记 2025/2/2 2:55:12

外网访问禅道软件项目管理系统

禅道项目管理软件是一款国产的开源免费项目管理软件&#xff0c;专注于研发项目管理&#xff0c;旨在帮助企业或团队提高项目管理的效率和质量。 本文将详细的介绍如何在 Windows 系统电脑端下载运行禅道软件项目管理系统&#xff0c;并且结合路由侠内网穿透实现外网访问本地的…...

编程日记 2025/2/2 2:51:08

Python 梯度下降法（五）：Adam Optimize

文章目录 Python 梯度下降法&#xff08;五&#xff09;&#xff1a;Adam Optimize一、数学原理1.1 介绍1.2 符号说明1.3 实现流程 二、代码实现2.1 函数代码2.2 总代码2.3 遇到的问题2.4 算法优化 三、优缺点3.1 优点3.2 缺点 四、相关链接 Python 梯度下降法&#xff08;五&a…...

编程日记 2025/2/2 2:50:04

笔试-二进制

应用题 将符合区间[l,r]内的十进制整数转换为二进制表示&#xff0c;请问不包含“101”的整数个数是多少&#xff1f; 实现 l int(input("请输入下限l&#xff0c;其值大于等于1&#xff1a;")) r int(input("请输入上限r&#xff0c;其值大于等于l&#x…...

编程日记 2025/2/2 2:49:03

springboot 2.7.6 security mysql redis jwt配置例子

数据库结构用的是若依的数据库基本结构,ruoyi.vip。 总体参考了文章&#xff1a;https://blog.csdn.net/qq_45847507/article/details/126681110 本文章只包含不同的地方&#xff0c;相同的不再赘述。 1、创建spring工程&#xff0c;jdk1.8&#xff0c;maven。 pom.xml中依赖部…...

编程日记 2025/2/2 2:41:48

FreeRTOS从入门到精通 第十六章（任务通知）

参考教程&#xff1a;【正点原子】手把手教你学FreeRTOS实时系统_哔哩哔哩_bilibili 一、任务通知简介 1、概述 &#xff08;1&#xff09;任务通知顾名思义是用来通知任务的&#xff0c;任务控制块中的结构体成员变量ulNotifiedValue就是这个通知值。 &#xff08;2&#…...

编程日记 2025/2/2 2:39:39

TensorFlow 简单的二分类神经网络的训练和应用流程

展示了一个简单的二分类神经网络的训练和应用流程。主要步骤包括&#xff1a; 1. 数据准备与预处理 2. 构建模型 3. 编译模型 4. 训练模型 5. 评估模型 6. 模型应用与部署 加载和应用已训练的模型 1. 数据准备与预处理 在本例中&#xff0c;数据准备是通过两个 Numpy 数…...

编程日记 2025/2/2 2:28:18

无人机图传模块 wfb-ng openipc-fpv，4G

openipc 的定位是为各种模块提供底层的驱动和linux最小系统&#xff0c;openipc 是采用buildroot系统编译而成&#xff0c;因此二次开发能力有点麻烦。为啥openipc 会用于无人机图传呢&#xff1f;因为openipc可以将现有的网络摄像头ip-camera模块直接利用起来&#xff0c;从而…...

编程日记 2025/2/2 2:27:15

.cc扩展名是什么语言?C语言必须用.c为扩展名吗？主流编程语言扩展名?Java为什么不能用全数字的文件名?

.cc扩展名是什么语言? .cc是C语言使用的扩展名&#xff0c;一种说法是它是c with class的简写&#xff0c;当然C语言使用的扩展名不止.cc和.cpp, 还包含.cxx, .c, .C等&#xff0c;这些在不同编译器系统采用的默认设定不同&#xff0c;需要区分使用。当然&#xff0c;编译器提…...

编程日记 2025/2/2 2:26:14

【MyDB】4-VersionManager 之 3-死锁及超时检测

【MyDB】4-VersionManager 之 3-死锁及超时检测 死锁及超时检测案例背景LockTable锁请求与等待管理 addvm调用addputIntoList&#xff0c;isInList&#xff0c;removeFromList 死锁检测 hasDeadLock方法资源释放与重分配 参考资料 死锁及超时检测 本章涉及代码&#xff1a;top/…...

编程日记 2025/2/2 2:19:06

【Linux】使用管道实现一个简易版本的进程池

文章目录 使用管道实现一个简易版本的进程池流程图代码makefileTask.hppProcessPool.cc 程序流程&#xff1a; 使用管道实现一个简易版本的进程池 流程图 代码 makefile ProcessPool:ProcessPool.ccg -o $ $^ -g -stdc11 .PHONY:clean clean:rm -f ProcessPoolTask.hpp #pr…...

编程日记 2025/2/2 2:13:59

【OpenGL】OpenGL游戏案例(二)

文章目录 特殊效果数据结构生成逻辑更新逻辑 文本渲染类结构构造函数加载函数渲染函数 特殊效果 为提高游戏的趣味性&#xff0c;在游戏中提供了六种特殊效果。 数据结构 PowerUp 类只存储存活数据&#xff0c;实际逻辑在游戏代码中通过Type字段来区分执行 class PowerUp …...

编程日记 2025/2/2 2:11:58

28. 【.NET 8 实战--孢子记账--从单体到微服务】--简易报表--报表定时器与报表数据修正

这篇文章是《.NET 8 实战–孢子记账–从单体到微服务》系列专栏的《单体应用》专栏的最后一片和开发有关的文章。在这片文章中我们一起来实现一个数据统计的功能&#xff1a;报表数据汇总。这个功能为用户查看月度、年度、季度报表提供数据支持。 一、需求 数据统计方面&…...

编程日记 2025/2/2 2:10:56

Java 泛型＜? extends Object＞

在 Java 泛型中&#xff0c;<? extends Object> 和 <?> 都表示未知类型&#xff0c;但它们在某些情况下有细微的差异。泛型的引入是为了消除运行时错误并增强类型安全性&#xff0c;使代码更具可读性和可维护性。 在 JDK 5 中引入了泛型&#xff0c;以消除编译时…...

编程日记 2025/2/2 2:09:55

FPGA|使用quartus II通过AS下载POF固件

1、将开发板设置到AS下载挡位&#xff0c;或者把下载线插入到AS端口 2、打开quartus II&#xff0c;选择Tools→Programmer→ Mode选择Active Serial Programming 3、点击左侧Add file…&#xff0c;选择 .pof 文件 →start 4、勾选program和verify&#xff08;可选&#xff0…...

编程日记 2025/2/2 2:04:50

“新月之智”智能战术头盔系统（CITHS）

新月人物传记&#xff1a;人物传记之新月篇-CSDN博客 相关文章链接&#xff08;更新&#xff09;&#xff1a; 星际战争模拟系统&#xff1a;新月的编程之道-CSDN博客 新月智能护甲系统CMIA--未来战场的守护者-CSDN博客 目录 一、引言 二、智能头盔控制系统概述 三、系统架…...

编程日记 2025/2/2 1:58:44

php：代码中怎么搭建一个类似linux系统的crontab服务

一、前言 最近使用自己搭建的php框架写一些东西&#xff0c;需要用到异步脚本任务的执行&#xff0c;但是是因为自己搭建的框架没有现成的机制&#xff0c;所以想自己搭建一个类似linux系统的crontab服务的功能。 因为如果直接使用linux crontab的服务配置起来很麻烦&#xff0…...

编程日记 2025/2/2 1:57:43

【LeetCode: 958. 二叉树的完全性检验 + bfs + 二叉树】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…...

编程日记 2025/2/2 1:54:38

MinDoc 安装与部署

下载可执行文件 mindoc mindoc_linux_amd64.zip 上传并解压压缩包 cd /opt mkdir mindoc cd mindocunzip mindoc_linux_amd64.zip 创建数据库 CREATE DATABASE mindoc_db DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 配置数据库 将解压目录下 conf/app.conf.exam…...

编程日记 2025/2/2 1:53:35

从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架（基础组件实现）

目录 基础组件实现 如何将图像和文字显示到OLED上 如何绘制图像 如何绘制文字 如何获取字体&#xff1f; 如何正确的访问字体 如何抽象字体 如何绘制字符串 绘制方案 文本绘制 更加方便的绘制 字体附录 ascii 6x8字体 ascii 8 x 16字体 基础组件实现 我们现在离手…...

编程日记 2025/2/2 1:45:23

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/9/14 3:25:53

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/9/13 21:23:27

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/9/3 1:27:59

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/10 2:57:34

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/6/17 4:52:56

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/8/11 11:25:20

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/9/13 8:59:33

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2025/9/4 7:05:35

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/9/7 8:50:27

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/9/6 23:12:54