请输入
菜单

什么是html和xpath?

标签:教程

通过上一篇的了解,我们知道为什么要用xpath,那么究竟什么是xpath,在介绍xpath之前,我们先了解一下html

HTML

HTML(HyperText Markup Language)是“超文本标记语言”的缩写,被用于创建网页中的内容,构成网页的基础。

它主要有以下特点:

  1. HTML是一种标记语言,不是一种编程语言。它由一系列元素或标记组成,用来告诉浏览器如何组织和展示内容。
  2. HTML组成的网页元素包括标题、段落、列表、链接、图片等。这些元素可以通过使用样式表(CSS)进行布局和装饰,由JavaScript增强功能。

HTML 使用各种标记或元素进行操作,这些标记被封装在尖括号<>里。它们通常是成对出现的,比如<tag>和</tag>,标签内可以嵌套其他标签来构建复杂的网页结构。

举个例子,如果你有一段文本想让它在网页内显示成标题,你可以将它放在一个 <h1> 的标签之间,像这样:

<h1>这是一个标题</h1>

当浏览器读取到这段HTML代码时,它会知道 "这是一个标题" 这段文本需要展现出标题的样式(通常是大号字体,加粗等)。类似的,链接可以用 <a> 标签,图片可以用 <img> 标签。

那如果我们想让它一层一层显示,显示成一个列表呢

<ul>
        <li>这是列表的第一个项目</li>
        <li>这是列表的第二个项目</li>
</ul>  

在上面的HTML代码中,<ul> 定义无序列表,其内部的 <li> 定义了列表元素。

我们试着让结构更加复杂一点

<head>
    <title>我的第一个网页</title>
</head>


<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落</p>
    <ul>
        <li>这是列表的第一个项目</li>
        <li>这是列表的第二个项目</li>
    </ul>    
    <div>
        <p>这是在div标签中的一个段落</p>
    </div>
</body>

在上面的例子中:

<head> 标签中包含了文档的元信息,如<title>文档的标题。
<body> 标签中包含了用户可以看见的页面内容,它本身只起到记录,本身并没有在页面有任何显示
<h1> 到 <h6> 是标题标签,数字越小标题越大。
<p> 是段落标签,用于包含文本。
<ul> 定义无序列表,其内部的 <li> 定义了列表元素。
<div> 是区块元素,通常用于组合其他元素。

如果网页有多个<div>块,我们怎么区分不同大小,不同样式的<div>区块元素呢?

例如下面这个例子:

<head>
    <title>我的第一个网页</title>
</head>


<body>
    <h1 class="main-heading" >欢迎来到我的网页</h1>
    <p class="paragraph">这是一个段落</p>
    <ul class="my-list" id="list-container">
        <li class="list-item" id="item1">这是列表的第一个项目</li>
        <li class="list-item" id="item2">这是列表的第二个项目</li>
    </ul>
    <div class="content" id="content-container">
        <p>这是在 div 标签中的一个段落</p>
    </div>
</body>
</html>

我们观察到这一段HTML代码和刚才的有些许不一样,它添加了许多class和id,这就是我们所说的样式区分,每种class代表一种样式,同样的id也是标注当下标签的含义,这样各种各样形式的网页就被我们构建出来了。

XPath

XPath(XML Path Language)是一种在 XML 文档中查找信息的语言。由于HTML和XML都是标记语言,并且有类似的结构,所以XPath也可以用于定位HTML文档中的元素。它能在 HTML 文档中沿着某条路径寻找、选择元素或者属性。可以把 XPath 理解成一种导航工具,它提供了一种在数据结构中找寻方向的能力。

简单来说,XPath 就像是一个地图,指导我们如何在复杂的 HTML 结构中找到我们需要的信息。

比如,你在一本书中找寻特定章节的内容,如果你知道在哪一页,哪个段落,你就能很快的找到这段文字。XPath 就是用来找到这段文字在 HTML 中的对应位置的。

XPath 的表达式被用来在 HTML 文档中找到相关的部分。它的基本组成是由"/"分割,代表不同的层级,用[数字]表示序号

比如,/图书名/页码[55]/段落[2]  这个表达式会找到所有在《图书名》下的第55页第2段的文字。

接下来我们尝试用XPath表达一下,第二个<li>标签,"这是列表的第二个项目"

<ul>
        <li>这是列表的第一个项目</li>
        <li>这是列表的第二个项目</li>
</ul>  

和我们表达图书段落的格式一样,分别写出标签名,用"/"分隔,用"[ ]"表示序号

/ul/li[2]

"/" 表示选取匹配选择的当前节点选择文档中的节点,"ul" 是你想查询的元素,"li[2]" 则表示 "ul" 下的第二个 "li" 元素。

恭喜你成功的写出了第一条xpath,是不是非常简单,接下来我们加大难度,我们获取下面 “这是在div标签中的一个段落

<head>
    <title>我的第一个网页</title>
</head>


<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落</p>
    <ul>
        <li>这是列表的第一个项目</li>
        <li>这是列表的第二个项目</li>
    </ul>    
    <div>
        <p>这是在div标签中的一个段落</p>
    </div>
</body>

写这条xpath的时候需要注意嵌套关系,“这是在div标签中的一个段落” 段落<p>标签在<body>内,而非<head>内,我们直接从<body>开始写起

/body/div/p

由于我们只有一个<p>标签,所以可以不写序号,如果此时有多个<p>标签,这条xpath的含义则代表选取所有<p>标签

再看下面这个例子,我们怎么表示所有文章的作者信息呢?

<div class="article-list">
<div class="article">
     <h2 class="title">文章标题1</h2>
     <p class="author">作者1</p>
     <p class="date">发布日期1</p>
</div>
<div class="article">
    <h2 class="title">文章标题2</h2>
    <p class="author">作者2</p> 
    <p class="date">发布日期2</p>
</div>
<div class="article">
    <h2 class="title">文章标题3</h2>
    <p class="author">作者3</p>
    <p class="date">发布日期3</p>
</div>
当然我们可以逐个写,/div[1]/p[1]       /div[2]/p[1]        /div[3]/p[1]
但是这样我们只能得到三个xpath路径,并且每次都是重写编写,这样会非常麻烦。
还记得我们刚才在介绍HTML的时候用class来区分不同的段落和标题吗,那么xpath是否也有这样的一种方法,直接用class样式来索引到我们想要的所有作者信息呢?
 
没错,我们可以直接在xpath路径里面限制class,例如我们查找上述代码中所有的作者段落。
我们可以直接使用://p[@class = "author"]
 
其中//代表从任意层级开始选择节点,而不考虑它们的具体位置。
@符号用于引用节点的属性。具体而言,@后面跟着属性名,表示选择具有特定属性的元素。
这样一来我们就把所有的作者段落全部选中了,是不是非常方便。
 
到此为止,我们已经学会怎么看HTML源码和写简单的XPath路径,在下一篇《XPath获取方法》中,我们将详细讲述怎么在网页内去查看网页源码,和测试手写XPath路径。

 

 
上一个
为什么要用xpath?
下一个
xpath获取方法
最近修改: 2026-01-07