爬虫基础(二)Web网页的基本原理
一、网页的组成
网页由三部分构成: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网页的基本原理
一、网页的组成 网页由三部分构成:HTML、JavaScript、CSS。 (1)HTML HTML 相当于网页的骨架,它通过使用标签来定义网页内容的结构。 举个例子: 它把图片标签为img、把视频标签为video,然后组合到一个界面…...
1.4 Go 数组
一、数组 1、简介 数组是切片的基础 数组是一个固定长度、由相同类型元素组成的集合。在 Go 语言中,数组的长度是类型的一部分,因此 [5]int 和 [10]int 是两种不同的类型。数组的大小在声明时确定,且不可更改。 简单来说,数组…...
爬虫基础(三)Session和Cookie讲解
目录 一、前备知识点 (1)静态网页 (2)动态网页 (3)无状态HTTP 二、Session和Cookie 三、Session 四、Cookie (1)维持过程 (2)结构 正式开始说 Sessi…...
hive:基本数据类型,关于表和列语法
基本数据类型 Hive 的数据类型分为基本数据类型和复杂数据类型 加粗的是常用数据类型 BOOLEAN出现ture和false外的其他值会变成NULL值 没有number,decimal类似number 如果输入的数据不符合数据类型, 映射时会变成NULL, 但是数据本身并没有被修改 创建表 创建表的本质其实就是在…...
Maya软件安装步骤与百度网盘链接
软件简介: MAYA软件是Autodesk旗下的著名三维建模和动画软件。maya软件功能更为强大,体系更为完善,因此国内很多的三维动画制作人员都开始转向maya,maya软件已成为三维动画软件的主流。 百度网盘链接: https://pan.baidu.com/s…...
error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054
Descriptions: Solutions:...
PID算法的数学实现和参数确定方法
目录 概述 1 算法描述 1.1 PID算法模型 1.2 PID离散化的图形描述 1.3 PID算法的特点 2 离散化的PID算法 2.1 位置式PID算法 2.2 增量式PID算法 2.3 位置式PID与增量式PID比较 3 控制器参数整定 3.1 PID参数确定方法 3.1.1 凑试法 3.1.2 临界比例法 3.1.3 经验法…...
【已解决】ECharts 没有在页面生效
元素高度问题: ECharts 需要一个具有明确高度的容器来渲染图表,也就是说 echartsRef 元素需要一个明确的 div 高度。我项目中的问题就是在 .base-echarts(我项目中的最外层元素) 上设置了高度为 300px,但没有为 .echar…...
三角函数正交性应用--以信号分离为例
三角函数的正交性的应用 引言 在信号处理、通信等众多领域中,三角函数的正交性发挥着至关重要的作用。它不仅是理论分析的基础,更是实际应用中解决各种问题的有力工具。本文将详细介绍三角函数正交性的定义、证明,并通过一个具体的信号处理…...
ASP.NET Core 中使用依赖注入 (DI) 容器获取并执行自定义服务
目录 一、ASP.NET Core 中使用依赖注入 (DI) 容器获取并执行自定义服务 1. app.Services 2. GetRequiredService() 3. Init() 二、应用场景 三、依赖注入使用拓展 1、使用场景 2、使用步骤 1. 定义服务接口和实现类 2. 注册服务到依赖注入容器 3. 使用依赖注入获取并…...
一个数如果恰好等于他的因子之和,这是就成为“完数“,例如6=1+2+3.编程找出1000以内的所有完数
from sys import stdoutfor i in range(2,1001):k[] #用于存储因子si #初始化s为当前数字ifor j in range(1,i):if i%j0: #如果j是i的因子s-j #从s中减去银子jk.append(j) #将因子j加入列表kif s0:#如果s最终为0,说明i是一个完数print(i)for j in range(len(k)): #遍历银子列表…...
理解 InnoDB 如何处理崩溃恢复
在数据库领域,数据的一致性与可靠性至关重要。InnoDB 存储引擎的崩溃恢复机制是保障数据安全的核心,其中 Doublewrite Buffer 和 Redo Log 发挥着关键作用。下面,我们将详细探讨 InnoDB 从写入到崩溃恢复的全过程。 一、写入流程 修改页面&…...
Linux-CentOS的yum源
1、什么是yum yum是CentOS的软件仓库管理工具。 2、yum的仓库 2.1、yum的远程仓库源 2.1.1、国内仓库 国内较知名的网络源(aliyun源,163源,sohu源,知名大学开源镜像等) 阿里源:https://opsx.alibaba.com/mirror 网易源:http://mirrors.1…...
Redis复制
一、Redis复制: 1.为了解决分布式中单点故障问题,通常会把数据复制多个副本部署到其他机器上来解决故障恢复和负载均衡等需求。 2.建立复制 参与复制的redis实例划分为主节点(master)和从节点(slave),每个从…...
小白怎样部署和使用本地大模型DeepSeek ?
1 安装Ollama (1) 下载Ollama 从https://ollama.com/download 下载, 根据你的系统下载对应的版本,支持Win, Mac ,Linux: 如果下载不了,右键复制链接地址,贴到迅雷,指定可以下载下来。 (2) 安…...
ECharts 样式设置
ECharts 样式设置 引言 ECharts 是一款功能强大的可视化库,广泛用于数据可视化。样式设置是 ECharts 中的重要一环,它能够帮助开发者根据需求调整图表的视觉效果,使其更加美观和易于理解。本文将详细介绍 ECharts 的样式设置,包…...
Java synchronized关键字和锁分类
专栏系列文章地址:https://blog.csdn.net/qq_26437925/article/details/145290162 本文目标: 关于synchronized已经有很多博主很细致的讲解了,本文主要是通过代码例子再次理解下,并要求能头脑反射出相关知识点主要是锁分类的知识…...
Vue.js 新的生命周期钩子:`onMounted`, `onUpdated` 等
Vue.js 新的生命周期钩子:onMounted, onUpdated 等 今天我们来聊聊 Vue 3 中的生命周期钩子,特别是 onMounted、onUpdated 等。如果你对如何在 Vue 3 的组合式 API(Composition API)中使用这些钩子感到困惑,那么这篇文…...
OpenCV:闭运算
目录 1. 简述 2. 用膨胀和腐蚀实现闭运算 2.1 代码示例 2.2 运行结果 3. 闭运算接口 3.1 参数详解 3.2 代码示例 3.3 运行结果 4. 闭运算的应用场景 5. 注意事项 相关阅读 OpenCV:图像的腐蚀与膨胀-CSDN博客 OpenCV:开运算-CSDN博客 1. 简述…...
Android 音视频编解码 -- MediaCodec
引言 如果我们只是简单玩一下音频、视频播放,那么使用 MediaPlayer SurfaceView 播放就可以了,但如果想加个水印,加点其他特效什么的,那就不行了; 学习 Android 自带的硬件码类 – MediaCodec。 MediaCodec 介绍 Med…...
移动互联网用户行为习惯哪些变化,对小程序的发展有哪些积极影响
一、碎片化时间利用增加 随着生活节奏的加快,移动互联网用户的碎片化时间越来越多。在等公交、排队、乘坐地铁等间隙,用户更倾向于使用便捷、快速启动的应用来满足即时需求。小程序正好满足了这一需求,无需下载安装,随时可用&…...
数据分析系列--②RapidMiner导入数据和存储过程
一、下载数据 二、导入数据 1. 在本地计算机中创建3个文件夹 2. 从本地选择.csv或.xlsx 三、界面说明 四、存储过程 1.保存 Congratulations, you are done. 一、下载数据 点击下载AssociationAnalysisData.xlsx数据集 二、导入数据 1. 在本地计算机中创建3个文件夹 2. 从…...
Prometheus 中的 Exporter
在 Prometheus 生态系统中,Exporter 扮演着至关重要的角色,它们负责从不同的服务或系统中收集和暴露度量数据。本文将详细介绍 Exporter 的概念、类型以及如何有效使用它们将 Prometheus 集成到各种系统中进行监控。 什么是 Exporter? Exporter 是一段软件,它从应用程序或…...
从 HTTP/1.1 到 HTTP/3:如何影响网页加载速度与性能
一、前言 在最近使用Apipost时,突然注意到了http/1.1和http/2,如下图: 在我根深蒂固的记忆中,对于http的理解还停留在TCP协议、三次握手。由于我的好奇心,于是触发了我被动“开卷”,所以有了这篇文章&…...
GenAI 在金融服务领域的应用:2025 年的重点是什么
作者:来自 Elastic Karen Mcdermott GenAI 不是魔法 我最近参加了 ElasticON,我们与纽约 Elastic 社区一起度过了一天,讨论了使用检索增强生成 (retrieval augmented generation - RAG) 为大型语言模型 (large language models - LLMs) 提供…...
小红书文案生成器(基于openai API和streamlit)
prompt_text.py: # 专门用来放提示文本(系统提示、用户提示)system_prompt_text """ 你是小红书爆款写作专家,请你遵循以下步骤进行创作:首先产出5个标题(包含适当的emoji表情)…...
Spring AOP 入门教程:基础概念与实现
目录 第一章:AOP概念的引入 第二章:AOP相关的概念 1. AOP概述 2. AOP的优势 3. AOP的底层原理 第三章:Spring的AOP技术 - 配置文件方式 1. AOP相关的术语 2. AOP配置文件方式入门 3. 切入点的表达式 4. AOP的通知类型 第四章&#x…...
力扣面试150 快乐数 循环链表找环 链表抽象 哈希
Problem: 202. 快乐数 👩🏫 参考题解 Code public class Solution {public int squareSum(int n) {int sum 0;while(n > 0){int digit n % 10;sum digit * digit;n / 10;}return sum;}public boolean isHappy(int n) {int slow n, fast squa…...
【实战篇章】深入探讨:服务器如何响应前端请求及后端如何查看前端提交的数据
文章目录 深入探讨:服务器如何响应前端请求及后端如何查看前端提交的数据一、服务器如何响应前端请求HTTP 请求生命周期全解析1.前端发起 HTTP 请求(关键细节强化版)2. 服务器接收请求(深度优化版) 二、后端如何查看前…...
《AI大模型开发笔记》DeepSeek技术创新点
一、DeepSeek横空出世 DeepSeek V3 以颠覆性技术架构创新强势破局!革命性的上下文处理机制实现长文本推理成本断崖式下降,综合算力需求锐减90%,开启高效 AI 新纪元! 最新开源的 DeepSeek V3模型不仅以顶尖基准测试成绩比肩业界 …...
【大模型LLM面试合集】大语言模型架构_MHA_MQA_GQA
MHA_MQA_GQA 1.总结 在 MHA(Multi Head Attention) 中,每个头有自己单独的 key-value 对;标准的多头注意力机制,h个Query、Key 和 Value 矩阵。在 MQA(Multi Query Attention) 中只会有一组 k…...
实战技巧:如何快速增加网站的收录页面?
本文转自:百万收录网 原文链接:https://www.baiwanshoulu.com/43.html 要快速增加网站的收录页面,可以从以下几个方面进行实战优化: 一、内容优化 高质量原创内容 确保网站内容具备高质量与原创性,满足搜索引擎对独…...
20-30 五子棋游戏
20-分析五子棋的实现思路_哔哩哔哩_bilibili20-分析五子棋的实现思路是一次性学会 Canvas 动画绘图(核心精讲50个案例)2023最新教程的第21集视频,该合集共计53集,视频收藏或关注UP主,及时了解更多相关视频内容。https:…...
PYH与MAC的桥梁MII/MIIM
在学习车载互联网时,看到了一句话,Processor通过DMA直接存储访问与MAC之间进行数据的交互,MAC通过MII介质无关接口与PHY之间进行数据的交互。常见的以太网硬件结构是,将MAC集成进Processor芯片,将PHY留在Processor片外…...
pytorch基于 Transformer 预训练模型的方法实现词嵌入(tiansz/bert-base-chinese)
以下是一个完整的词嵌入(Word Embedding)示例代码,使用 modelscope 下载 tiansz/bert-base-chinese 模型,并通过 transformers 加载模型,获取中文句子的词嵌入。 from modelscope.hub.snapshot_download import snaps…...
探秘 TCP TLP:从背景到实现
回家的路上还讨论了个关于 TCP TLP 的问题,闲着无事缕一缕。本文内容参考自 Tail Loss Probe (TLP): An Algorithm for Fast Recovery of Tail Losses 以及 Linux 内核源码。 TLP,先说缘由。自 TCP 引入 Fast retrans 机制就是为了尽力避免 RTO…...
MCU内部ADC模块误差如何校准
本文章是笔者整理的备忘笔记。希望在帮助自己温习避免遗忘的同时,也能帮助其他需要参考的朋友。如有谬误,欢迎大家进行指正。 一、ADC误差校准引言 MCU 片内 ADC 模块的误差总包括了 5 个静态参数 (静态失调,增益误差,微分非线性…...
国产之光DeepSeek架构理解与应用分析
目录 初步探索DeepSeek的设计 一、核心架构设计 二、核心原理与优化 三、关键创新点 四、典型应用场景 五、与同类模型的对比优势 六、未来演进方向 从投入行业生产的角度看 一、DeepSeek的核心功能扩展 二、机械电子工程产业中的具体案例 1. 预测性维护(Predictive…...
群晖NAS安卓Calibre 个人图书馆
docker 下载镜像johngong/calibre-web,安装之 我是本地的/docker/xxx/metadata目录 映射到 /usr/local/calibre-web/app/cps/metadata_provider CALIBREDB_OTHER_OPTION 删除 CALIBRE_SERVER_USER calibre_server_user 缺省用户名口令 admin admin123 另外有个N…...
openRv1126 AI算法部署实战之——Tensorflow模型部署实战
在RV1126开发板上部署Tensorflow算法,实时目标检测RTSP传输。视频演示地址 rv1126 yolov5 实时目标检测 rtsp传输_哔哩哔哩_bilibili 一、准备工作 从官网下载tensorflow模型和数据集 手动在线下载: https://github.com/tensorflow/models/b…...
HTML特殊符号的使用示例
目录 一、基本特殊符号的使用 1、空格符号: 2、小于号 和 大于号: 3、引号: 二、版权、注册商标符号的使用 1、版权符号:© 2、注册商标符号: 三、数学符号的使用 四、箭头符号的使用 五、货币符号的使用…...
如何对系统调用进行扩展?
扩展系统调用是操作系统开发中的一个重要任务。系统调用是用户程序与操作系统内核之间的接口,允许用户程序执行内核级操作(如文件操作、进程管理、内存管理等)。扩展系统调用通常包括以下几个步骤: 一、定义新系统调用 扩展系统调用首先需要定义新的系统调用的功能。系统…...
【MFC】C++所有控件随窗口大小全自动等比例缩放源码(控件内字体、列宽等未调整) 20250124
MFC界面全自动等比例缩放 1.在初始化里 枚举每个控件记录所有控件rect 2.在OnSize里,根据当前窗口和之前保存的窗口的宽高求比例x、y 3.枚举每个控件,根据比例x、y调整控件上下左右,并移动到新rect struct ControlInfo {CWnd* pControl;CRect original…...
前端 | 深入理解Promise
1. 引言 JavaScript 是一种单线程语言,这意味着它一次仅能执行一个任务。为了处理异步操作,JavaScript 提供了回调函数,但是随着项目处理并发任务的增加,回调地狱 (Callback Hell) 使异步代码很难维护。为此,ES6带来了…...
【视频+图文讲解】HTML基础2-html骨架与基本语法
图文教程 基本骨架 举个例子,下图所展示的为html的源代码 -!DOCTYPE:表示文档类型(后边写的html表示文档类型是html);其中“!”表示声明 只要是加这个声明标签的,浏览器就会把下边的源代码当…...
LabVIEW在电机自动化生产线中的实时数据采集与生产过程监控
在电机自动化生产线中,实时数据采集与生产过程监控是确保生产效率和产品质量的重要环节。LabVIEW作为一种强大的图形化编程平台,可以有效实现数据采集、实时监控和自动化控制。详细探讨如何利用LabVIEW实现这一目标,包括硬件选择、软件架构设…...
《深入理解HTTP交互与数据监控:完整流程与优化实践》
文章目录 🌐 全链路解析:HTTP请求响应与数据可视化监控一、HTTP请求响应全流程解析1. 全链路交互流程图2.关键技术实现2.1 前端请求构造(ES6语法示例)2.2 服务端处理架构(Node.js/Express) 二、数据可视化监…...
pytorch使用SVM实现文本分类
人工智能例子汇总:AI常见的算法和例子-CSDN博客 完整代码: import torch import torch.nn as nn import torch.optim as optim import jieba import numpy as np from sklearn.model_selection import train_test_split from sklearn.feature_extract…...
Recommender Systems with Large Models
一、引言 信息爆炸时代,用户面临信息过载,传统推荐系统依赖经典算法,难以满足需求。大模型基于深度学习,经大规模预训练,具备强大能力,能实现更精准推荐,为推荐系统发展开辟新路径。 二、大模…...
团体程序设计天梯赛-练习集——L1-028 判断素数
前言 一道10分的题目,相对来说比较简单,思考的时候要仔细且活跃,有时候在写代码的时候一些代码的出现很多余,并且会影响最后的结果 L1-028 判断素数 本题的目标很简单,就是判断一个给定的正整数是否素数。 输入格式…...