程序员经验分享-hwhale

第二节 Web网页基础

2023-05-16

网页的组成

网页需要通过 HTML、CSS、JavaScript 和各种媒体资源的组合，实现多种功能和呈现效果的页面
一个网页通常由以下几个组成部分构成：

  1. HTML标记语言：定义网页的结构、内容和格式，用于显示文本、图像、链接等信息。
  2. CSS样式表：定义网页的样式和布局，可以控制字体、颜色、大小、排版等方面。
  3. JavaScript脚本语言：用于增强网页的交互性和动态性，可以实现网页上的动画效果、表单验证、事件处理等功能。
  4. 图像和多媒体：包括各种格式的图像、音频和视频文件，用于丰富网页的内容和呈现方式。
  5. 超链接和导航：用于连接不同的网页或者同一网页内的不同部分，让用户能够快速地浏览和导航。
  6. 表单和控件：用于接收用户的输入，包括文本框、复选框、单选框、下拉框等。
  7. 脚注和注释：提供对网页内容的解释和补充，方便用户了解更多信息。

网页的结构

网页结构通常分为三个部分：文档类型声明、头部和主体。

  1. 文档类型声明：位于 HTML 文档的最开始，用于告诉浏览器这是一个 HTML 文档，并且应该使用哪个 HTML 版本的标准来解析。
  2. 头部：位于文档类型声明之后，主要包括了一些网页的元信息，如 title、meta、link、script 等标签，这些标签用于告诉浏览器一些关于网页的基本信息，例如标题、关键词、网页描述等等。
  3. 主体：网页的主要内容，包括文本、图片、视频、音频等等，主体部分的标签包括 div、p、h1~h6、img、video、audio、ul、ol 等等，通过这些标签可以将网页内容进行适当的分组和排版，呈现出更好的阅读体验。

选择器

网页选择器是指在开发者工具中，通过选择器来获取网页中特定元素的工具。开发者可以通过使用网页选择器来定位网页上的元素，例如文本、图片、链接等。常见的网页选择器有CSS选择器、XPath选择器等。

CSS选择器

CSS选择器是一种使用CSS语法来定位元素的选择器，通常通过元素的类名、ID等属性来选择特定的元素。
以下是一些常见的CSS选择器及其用法和示例：

  1. 标签选择器：根据元素的标签名称进行选择。
    例如，选择所有段落元素（p）：
p {
  color: red;
}
  1. 类选择器：根据元素的类名进行选择。
    例如，选择所有class为“highlight”的元素
.highlight {
  background-color: yellow;
}
  1. ID选择器：根据元素的ID进行选择。
    例如，选择ID为“header”的元素：
#header {
  font-size: 24px;
}
  1. 属性选择器：根据元素的属性进行选择。
    例如，选择所有包含title属性的元素：
[title] {
  border: 1px solid black;
}
  1. 组合选择器：将多个选择器组合在一起，以选择指定的元素。
    例如，选择所有类为“highlight”且标签为“p”的元素：
p.highlight {
  font-weight: bold;
}
  1. 后代选择器：选择指定元素的后代元素。
    例如，选择所有div元素内的段落元素（p）：
div p {
  color: blue;
}
  1. 子元素选择器：选择指定元素的直接子元素。
    例如，选择所有列表（ul）元素的直接子元素（li）：
ul > li {
  list-style: none;
}

以上仅是CSS选择器的一部分，还有其他更高级的选择器，如伪类选择器和伪元素选择器等。熟练掌握CSS选择器可以帮助开发者更轻松地样式化和操作HTML元素。
在爬虫中，我们可以通过选择器来定位元素，解析页面，获取想要的信息。对于我个人的爬虫开发来说，我习惯于使用xpath来定位元素。

Xpath

可以通过路径表达式在文档中进行导航，并选择所需的节点或节点集合。
XPath中最基本的路径表达式是节点选择器，可以通过节点的名称、属性和其他属性进行选择。以下是一些常用的XPath选择器：

  1. 选择所有节点：//*
  2. 根据节点名称选择节点：//div 选择所有div节点
  3. 根据节点属性选择节点：//div[@class=“example”] 选择所有class属性值为example的div节点
  4. 根据节点文本内容选择节点：//a[text()=“click here”] 选择所有文本内容为click here的a节点
  5. 根据节点位置选择节点：//ul/li[2] 选择所有ul节点下的第二个li节点

Xpath helper浏览器拓展插件使用

我使用的是chrome浏览器,其他浏览器安装插件可自行搜索安装方法。
安装方法如下

  1. 打开设置，点击拓展程序
    在这里插入图片描述
  2. 打开开发者模式
    在这里插入图片描述
  3. 进入chrome应用商店，搜索xpath helper拓展程序，并添加
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  4. 【测试】：打开任意一个网页，按快捷键ctrl+shift+x打开选择器，左侧query为xpath语法，右侧为选择结果
    在这里插入图片描述

Xpath 定位示例

示例HTML代码如下：
假设有以下的HTML文档：

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <div class="container">
      <h1>Example Page</h1>
      <p>This is an example page.</p>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div>
  </body>
</html>

如果我需要获取以上的网页内【Link 1】这个字符串，我需要先观察包含该数据的标签结构
该数据被包在a标签内，a标签为ul下的第一个li内，所以该数据对应的a标签的路径为//ul/li[1]/a
如果要取到a标签内的数据，我们可以调用text()方法。以上数据的完整路径则为//ul/li[1]/a/text()
结果展示，获取到了字符串 Link 1
在这里插入图片描述
XPath还有许多其他的语法和功能，例如通配符、运算符、函数等。它是一种强大的工具，可用于从文档中提取所需的数据。
更多的xpath使用方法可以参考https://www.w3school.com.cn/xpath/index.asp

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

第二节 Web网页基础 的相关文章

  • docker pull 下来的镜像文件存放的位置

    参考文献 xff1a http www tuicool com articles bENrUf 1 存放在 var lib docker 2 repositories aufs 文件 xff1a 34 Repositories 34 34

  • docker主要命令整理

    docker docker info docker version docker images 展示镜像 docker ps 展示容器 docker ps a 会展示出所有正在运行的和已经停止的容器 docker rmi 镜像ID 删除镜像

  • python xml读写

    1 xml例子 lt xml version 61 34 1 0 34 encoding 61 34 UTF 8 34 gt lt annotation gt lt folder gt VOC2007 lt folder gt lt fil

  • caffe2编译问题：avx、avx2

    caffe2编译问题 xff1a 9898 init intrinsics check cc 54 CPU feature avx is present on your machine but the Caffe2 binary is no

  • 【Hello,电赛】2020电赛从备战到回顾(F题)

    瞎扯几句 2020应该让所有人难忘的一年 赋闲大半年 xff0c 开学两行泪 博主也是突然从大二被迫成了大三老油条 大一的时候身边就有同学开始展露科创竞赛方面的头角 xff0c 后来成了学院有名的带佬 咱当时觉得好玩也是羡慕 xff0c 奈

  • #C++#通过libcurl获取当前次HTTP请求的一些相关信息

    libcurl库是一个非常完整和好用的HTTP请求库 xff0c 通过它 xff0c 我们可以方便的书写HTTP请求程序 xff0c 而且不需要关心HTTP协议内部的细节处理 最近在做一个HTTP监测的程序 xff0c 就是通过libcur

  • 运行Maven Web项目出现 org.eclipse.jdt.internal.compiler.classfmt.ClassFormatException错误

    异常问题描述 xff1a 初学Maven xff0c 新建了一个基于Web骨架的Web项目 xff0c jar 包也导好了 xff0c 作用域也设置正确了 xff0c Tomcat也正常运行了 xff0c 可是就是说编译错误 问题原因 由于

  • 解决mingw-w64外网下载太慢问题，离线包安装配置过程讲解

    常规安装程序下载地址 xff1a http www mingw w64 org doku php 但用安装程序直接安装mingw w64 xff0c 由于国际网络链路问题 xff0c 很难安装成功 xff0c 于是做了打包了一个离线包 xf

  • HTTP安全-nonce和timestamp在Http安全协议中的作用

    http www byywee com page M0 S591 591082 html 写道 前段时间给客户网站做新浪微博账号登录功能 xff0c 对 OAuth协议以及相关的一些安全协议做了一些研究 xff0c 顺便就记录一下学习心得吧

  • NVIDIA TensorRT使用记录

    1 准备工作 1 Pipeline train 在Host PC的GPU上训练test deployment 在TX1 TX2上部署使用 2 主机部署步骤 Running JetPack on the Host JetPack L4T 3

  • 用C语言实现串口通讯程序

    1 首先安装虚拟串口vspd软件 xff0c 用于创建虚拟串口进行互联调试 2 打开vspd软件 xff0c 选择COM1和COM4 xff0c 点击Add pair xff0c 把COM1和COM4互联 3 打开虚拟串口助手 xff0c

  • A2M7雷达在虚拟机的SLAM建图

    准备 Ubuntu18 04 雷达A2M7 一 前期准备 安装 建立工作空间并编译 mkdir p turtlebot ws src cd turtlebot ws src git clone https github com ncnynl

  • linux cmake分别指定编译/运行时动态库链接路径

    1 背景 在树莓派上开发执行程序 xff0c 需要用到opencv curl jsoncpp等库函数支持 xff0c apt get安装好后 xff0c 编译执行正常 但是执行程序挪到别的板子上 xff0c 都要apt get安装这些库 x

  • C语言函数库之字符串连接函数(string.h)

    1 字符串连接函数strcat 函数定义 xff1a char strcat char str1 const char str2 函数功能 xff1a 把str2 包括 39 0 39 拷贝到str1的尾部 连接 xff0c 并返回str1

  • foc学习笔记3——电流环

    foc学习笔记3 电流环 电流环的作用 前文不断强调 xff0c 进行磁场定向控制需要控制的是电流而非电压 xff0c 只是因为我们没有办法直接去控制电流才暂时退而求其次地去控制电压 虽然电压控制的效果也还不错 xff0c 但由于电机不是单

  • ESP32之蓝牙配网blufi

    概览 BluFi 是一款基于蓝牙通道的 Wi Fi 网络配置功能 xff0c 适用于 ESP32 它通过安全协议将 Wi Fi 配置和证书传输到 ESP32 xff0c 然后 ESP32 可基于这些信息连接到 AP 或建立 SoftAP B

  • 机器人学习之项目- Project2 :Where Am I?

    1 项目概述 欢迎来到 Where Am I 我在哪里 定位项目 在这个项目中 xff0c 将学习如何利用ROS AMCL包在Gazebo模拟环境的地图中准确地定位移动机器人 在完成本项目的过程中 xff0c 涉及机器人软件工程的几个方面

  • 将不同类对象指针存放QVector中

    需求 xff1a 将一系列操作步骤放在链表中按需调用 我将每个操作步骤用一个类实现 xff0c 将各类继承于一个基类 xff0c 再将指向各子类的基类指针放在QVector Vector xff0c 即可通过C 43 43 的多态实现调用各

  • 体感摄像头 realsense 系列硬件资料

    一 体感摄像头 Intel的体感摄像机是具有深度图像采集能力的摄像机 xff0c 目前已经出到了400系列 与kinect 2 xff0c ZED xff0c leap motion比较 xff0c 属于比较中庸 手势识别方面不如leap

  • C语言进度条的实现

    C语言进度条的实现 buff N xff1a 进度条状态字符串 xff0c N大小决定进度条长度 xff08 自行调整 xff09 xff0c 使用前先将所有字符初始化置零 xff0c 我这里使用的是memset函数 xff1b label

随机推荐

  • numpy下的随机数

    版权声明 xff1a 本文为博主原创文章 xff0c 未经博主允许不得转载 https blog csdn net m0 38061927 article details 75335069 在使用Python进行数据处理时 xff0c 往往

  • 宏函数 可变参数 C/C++

    span class token macro property span class token directive hash span span class token directive keyword include span spa

  • 排查ingress 404报错的方法--附：在容器中使用tcpdump抓包

    出现这个问题 xff0c 一般是由于路由不通导致的 xff0c 需要进行抓包排查 首先要解决的问题是 xff0c 如何在 ingress controller 容器中安装抓包工具 1 由于 ingress controller 的mando

  • fastApi介绍与重要版本更新细节

    fastApi介绍 FastAPI 是用于使用 Python 构建 API 的现代 Web 框架 它建立在 Starlette 框架之上 xff0c Starlette 框架是一个轻量级且可扩展的 ASGI xff08 异步服务器网关接口

  • 3. fastApi查询参数详解

    当声明的参数不是路径参数时 xff0c 路径操作函数会把该参数自动解释为查询参数 如下 路径操作函数将参数skip limit解释为查询参数 query parameter span class token decorator annota

  • 4. fastApi请求体详解

    简单介绍网络请求 网络请求是指客户端 xff08 例如浏览器 移动应用程序等 xff09 向服务器发送请求 xff0c 以获取特定资源或执行特定操作的过程 HTTP请求是一种常见的网络请求协议 xff0c 它通过互联网连接客户端和服务器 x

  • python多线程与多进程简略介绍

    GIL介绍 在python中GIL的限制导致不论是在单核还是多核条件下 xff0c 同时刻都只能运行 一个线程 xff0c 这使得Python多线程无法发挥多核并行的优势 GIL全称为Global Interpreter Lock意思是全局

  • 高并发场景下，python各web框架的优劣对比与示例分析

    高并发场景下 xff0c python各个web框架的优劣对比与示例分析 Python有许多适合高并发场景的Web框架 xff0c 下面是其中几个 xff1a Flask Flask是一个轻量级的Web框架 xff0c 由Werkzeug和

  • 6. fastApi文件上传请求处理示例

    需求 xff1a 开发文件上传功能接口 接口路径 files 请求类型 post 响应结果 返回文件的大小 单位bytes 实现方案 使用post类型处理方法 xff0c 指定参数类型为bytes或UploadFile 使用File 方法处

  • 7. fastApi表单数据处理详解与示例

    需求 前端通过表单数据的形式发送用户名与密码到后端 xff0c 后端通过用户信息校验 xff0c 过滤出合法用户 xff0c 并为用户设置cookie 超时时间为24h xff09 接口路径 login 请求类型 post方法发送的文件 响

  • C语言结构体字节对齐规则

    C语言结构体字节对齐规则 基本规则 规则1 xff1a 结构体 xff08 struct xff09 的数据成员 xff0c 第一个数据成员放在offset为0的地方 xff0c 以后每个数据成员存放在offset为该数据成员大小的整数倍的

  • 如何处理C++构造函数中的错误

    用C 43 43 写代码的时候总是避免不了处理错误 xff0c 一般来说有两种方式 xff0c 通过函数的返回值或者抛出异常 C语言的错误处理一律是通过函数的返回值来判断的 xff0c 一般是返回0 NULL 或者 1 表示错误 xff0c

  • 改进后的A星三维路径规划完整算法(matlab语言)，包括障碍物模型优化

    改进后的A星三维路径规划完整算法 matlab语言 xff0c 包括障碍物模型优化 xff0c 平滑处理 xff0c 启发函数的改进 xff0c 环境地图可以根据自己的实际情况进行改进 xff0c 算法包含了非常详细的代码注释 ID 695

  • 8. fastApi请求错误处理方式与示例

    请求错误处理 某些情况下 xff0c 需要向客户端返回错误提示 需要向客户端返回错误提示的场景主要如下 xff1a 客户端没有执行操作的权限客户端没有访问资源的权限客户端要访问的项目不存在服务器内部错误 遇到这些情况时 xff0c 通常要返

  • 9. fastApi的json编码器使用示例

    JSON 编码器 有时 xff0c 我们要把 Pydantic 模型等数据类型转换为字典 列表等与 JSON 兼容的格式 例如 xff0c 把 Pydantic 模型存入数据库时就要进行转换 为此 xff0c FastAPI 提供了 jso

  • 10. fastApi数据更新方法

    用 PUT 更新数据 把输入数据转换为 JSON 数据 xff08 例如 xff0c 使用 NoSQL 数据库时 xff09 xff0c 可以使用 jsonable encoder 例如 xff0c 把 datetime 转换为 str P

  • 写在前面--(与各位读者聊聊)

    xff61 xff65 xff65 xff89 xff9e 嗨 xff01 我是jesse xff0c 欢迎来到我的Python爬虫博客专栏 xff01 在本专栏中 xff0c 我将分享Python爬虫技术的各个方面 xff0c 包括基础知

  • 爬虫示例一【简单爬虫实现】

    爬虫构建 回顾以上的接口分析过程 xff0c 整个对我们有用的请求过程是 xff0c 浏览器发送一个GET请求 xff0c 直接获取到了我们想要的数据页面 那么如何通过python代码复现以上的请求过程呢 xff1f 对于这样的简单爬虫 x

  • 第一节 请求与响应

    请求 由客户端发往服务器 xff0c 分为四个部分 xff1a 请求头 xff0c 请求方法 xff0c 请求网址URL 请求体 当我们在浏览器中输入一个网址或点击一个链接时 xff0c 浏览器会向服务器发送请求 xff0c 请求获取指定的

  • 第二节 Web网页基础

    网页的组成 网页需要通过 HTML CSS JavaScript 和各种媒体资源的组合 xff0c 实现多种功能和呈现效果的页面 一个网页通常由以下几个组成部分构成 xff1a HTML标记语言 xff1a 定义网页的结构 内容和格式 xf

热门标签