> ## Documentation Index
> Fetch the complete documentation index at: https://www.bazhuayu.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 什么是html和xpath？

> 介绍 HTML 的基本结构和常用标签，以及 XPath 的概念与表达式写法，帮助初学者理解网页源码与定位方式。

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

## HTML

HTML（HyperText Markup Language）是"超文本标记语言"的缩写，被用于创建网页中的内容，构成网页的基础。

它主要有以下特点：

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

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

举个例子，如果你有一段文本想让它在网页内显示成标题，你可以将它放在一个 `<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></body>
```

我们观察到这一段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>`标签

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

<a href="/docs/zh/academy/xpath/getting-started/get-xpath" target="_blank" rel="noopener noreferrer">《XPath获取方法》</a>
