Python爬蟲開發與專案實戰（2）

_王泥煤發表於2020-10-21

Python爬蟲

第二章 Web前端基礎

2.1 W3C標準

W3C，即全球資訊網聯盟，是Web技術領域有最具權威和影響力的國際中立性技術標準機構
網頁主要由三部分組成：結構（structure）、表現（presentation）和行為（behavior）
對應的標準也分為三方面：
- 結構化標準語言主要包括XHTML和XML
- 表現標準語言主要包括CSS
- 行為標準主要包括物件模型（如W3C DOM）、ECMAScript等

2.1.1 HTML

HTML不是程式語言，是一種表示網頁資訊的符號標記語言
Web瀏覽器的作用是讀取HTML文件，並以網頁的形式顯示出他們
HTML語言的特點包括：
- 可以設定文字的格式，比如標題、字號、文字顏色、段落等
- 可以建立列表
- 可以插入影像和媒體
- 可以建立表格
- 超連結，可以使用滑鼠點選超連結來實現頁面之間的跳轉

HTML的基本結構

```
<html>
    內容
</html>
```
HTML文件由<html></html>包裹，這是HTML文件的文件標記也稱為HTML開始標記。這對標記分別位於網頁的最前端和最後端，分別表示網頁的開始和結束
```
<head>
    內容
</head>
```
HTML檔案頭標記，也稱為HTML頭資訊開始標記。用來包含檔案的基本資訊，比如網頁的標題、關鍵字。

在<head></head>內可以放<title></title>、<meta></meta>、<style></style>等標記

在<head></head>標記內的內容不會在瀏覽器中顯示
```
<title>內容</title>
```
HTML檔案標題標記，顯示在瀏覽器視窗的左上邊
```
<body>
    內容
</body>
```
<body></body>是網頁的主體部分，在此標記之間可以包含<p></p>、<h1></h1>、<br>、<hr>等標記

<body></body>之間的內容組成了我們看見的網頁
```
<meta>內容</meta>
```
頁面的元資訊。提供有關頁面的元資訊，比如這很對搜尋引擎和更新頻度的描述和關鍵詞

注意meta標記必須放在head元素裡面

文件設定標記

格式標記包括：

<br>：強制換行標記。將之後的內容顯示在下一行
<p>：換段落標記。由於多個空格和回車在HTML中等效於一個空格，所以要用<p>來實現換段落。<p>段落中也可以包括<p>段落
<center>：居中對齊標記。讓段落或者文字相對於父標記居中顯示
<pre>：預格式化標記。保留預先編排好的格式，常用來定義計算機原始碼。和<p>進行對比。
<li>：列表專案標記。每一個列表使用一個<li>標記，可用在有序列表（<ol>）和無序列表（<ul>）中
<ul>：無序列表標記
<ol>：有序列表標記。可以顯示特定的一些順序。
- 預設type屬性值“A”表示大寫字母“A,B,C”等
- 屬性值“1”表示阿拉伯數字
- 屬性值“a”表示小寫字母“a, b, c”等
- 屬性值”I“表示大寫羅馬數字I、II、III、IV等
- 屬性值”i“表示小寫羅馬數字i、ii、iii、iv等
<dl><dt><dd>：定義型列表。對列表條目進行簡短說明
<hr>：水平分割線標記。可以用作段落之間的分割線
<div>：分割槽顯示標記，也稱為層標記。可以用於將表格式化，與<p>相似，可以多層巢狀使用

樣例：

<html>
	<head>
		<title>Python爬蟲開發與專案實戰</title>
		<meta charset="UTF-8">
	</head>
	<body>
	文件設定標記<br>
	<p>這是段落。</p>
	<p>這是段落。</p>
	<p>這是段落。</p>
	<hr>
	<center>居中標記1</center>
	<center>居中標記2</center>
	<hr>
	<pre>
	[00:00](music)
	[00:28]你我皆凡人，生在人世間；
	[00:35]終日奔波苦，一刻不得閒；
	[00:43]既然不是仙，難免有雜念；
	</pre>
	<hr>
	<p>
	[00:00](music)
	[00:28]你我皆凡人，生在人世間；
	[00:35]終日奔波苦，一刻不得閒；
	[00:43]既然不是仙，難免有雜念；
	</p>
	<hr>
	<br>
	<ul>
	<li>Coffee</li>
	<li>Milk</li>
	</ul>
	<ol type="A">
	<li>Coffee</li>
	<li>Milk</li>
	</ol>
   <dl>
   <dt>計算機</dt>
   <dd>用來計算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示資訊的裝置 ... ...</dd>
   </dl>
   <div >
  	<h3>這是標題</h3>
  	<p>這是段落。</p>
	</div>
	</body>
</html>

文字標記包括：

<hn>：標題標記。總共有6個級別，<h1>最大，<h6>最小
<font>：字型設定標記。用來設定字型的格式，一般有三個常用屬性：
- size（字型大小），如：<font size=“14px”>
- color（字型顏色），如：<font color=“red”>
- face（字型），如：<font face=“微軟雅黑”>
<b>：粗字型標記
<i>：斜字型標記
<sub>：文字下標字型標記
<sup>：文字上標字型標記
<tt>：印表機字型標記
<cite>：引用方式的字型，通常是斜體
<em>：表示強調，通常顯示為斜體
<strong>：表示強調，通常顯示為粗體
<small>：小型字型標記，可以顯示小一號字型
<big>：大型字型標記，可以顯示大一號字型
<u>：下劃線字型標記

樣例：

<html>
	<head>
		<title>Python爬蟲開發與專案實戰</title>
		<meta charset="UTF-8">
	</head>
	<body>
	Hn標題標記---->>
	<br>
		<h1>Python爬蟲</h1>
		<h2>Python爬蟲</h2>
		<h3>Python爬蟲</h3>
		<h4>Python爬蟲</h4>
		<h5>Python爬蟲</h5>
		<h6>Python爬蟲</h6>
	font標記---->>
	<font size="1">Python爬蟲</font>
	<font size="3">Python爬蟲</font>
	<font size="7">Python爬蟲</font>
	<font size="7" color="red" face="微軟雅黑">Python爬蟲</font>
	<font size="7" color="red" face="宋體">Python爬蟲</font>
	<font size="7" color="red" face="新細明體">Python爬蟲</font>
	<br>
	B標記加粗---->>
	<b>Python爬蟲</b>
	<br>
	i標記斜體---->>
	<i>Python爬蟲</i>
	<br>
	sub下標標記---->>
	2<sub>2</sub>
	<br>
	sup上標標記---->>
	2<sup>2</sup>
	<br>
	引用標記---->>
	<cite>Python爬蟲</cite>
	<br>
	em標記表示強調，顯示為斜體---->>
	<em>Python爬蟲</em>
	<br>
	strong標記表示強調，加粗顯示---->>
	<strong>Python爬蟲</strong>
	<br>
	small標記，可以顯示小一號字型，可以巢狀使用---->>
	<small>Python爬蟲</small>
	<small><small>Python爬蟲</small></small>
	<small><small><small>Python爬蟲</small></small></small>
	<br>
	big標記，顯示大一號的字型---->>
	<big>Python爬蟲</big>
	<big><big>Python爬蟲</big></big>
	<br>
	u標記是顯示下劃線---->>
	<big><big><big><u>Python爬蟲</u></big></big></big>
	<br>
	</body>
</html>

影像標記

<img>稱為影像標記，使用方式為：
```
<img src="路徑/檔名.圖片格式" width="屬性值" height="屬性值" border="屬性值" alt="屬性值">
```
- src屬性用來指定要載入的圖片的路徑、名稱以及格式
- width屬性用來指定圖片的寬度，單位為px、em、cm、mm
- height屬性用來指定圖片的高度，單位為px、em、cm、mm
- border屬性用來指定圖片的邊框寬度，單位為px、em、cm、mm
- alt屬性有兩個作用：
  - 如果影像沒有下載或者載入失敗，會用文字來代替影像顯示
  - 搜尋引擎可以通過這個屬性的文字來抓取圖片

例如部落格園首頁圖片的img標記：

<img src="/images/logo_small.gif" alt="部落格園Logo" width="142" height="55">

超連結的的使用

連結的引用使用的是<a>標記，使用方式為：
```
<a href="連結地址" target=“開啟方式” name=“頁面錨點名稱”>連結文字或者圖片</a>
```
- href屬性值是連結的地址。可以是一個網頁，也可以是一個視訊、圖片、音樂等。
- target屬性用來定義超連結的開啟方式
  - 屬性值為_blank時，作用是在一個新的視窗中開啟連結
  - 屬性值為_self（預設值）時，作用是在當前視窗中開啟連結
  - 屬性值為_parent時，作用是在父視窗中開啟頁面
  - 屬性值為_top時，在頂層視窗中開啟檔案
- name屬性用來指定頁面的錨點名稱

表格

表格的基本結構包括<table>、<caption>、<tr>、<td>、<th>等標記
<table>標記有以下常見屬性
- width：表示表格的寬度。它的值可以是寬度(px)，也可以是父級元素的百分比(%)
- height：表示表格的高度。它的值可以是寬度(px)，也可以是父級元素的百分比(%)
- border：表示外邊框的寬度
- align：用來表示表格的顯示位置。left是左對齊，center是居中，right是右對齊
- cellspacing：單元格之間的間距。預設是2px，單位為畫素
- cellpadding：單元格內容與單元格邊框的顯示距離，單位為畫素
- frame：用來控制表格邊框最外層的四條線框
  - void：無邊框
  - above：僅有頂部邊框
  - below：僅有底部邊框
  - hsides：僅有頂部邊框和底部邊框
  - lhs：僅有左側邊框
  - rhs：僅有右側邊框
  - vsides：僅有左右側邊框
  - border：包含全部4個邊框
- rules：控制是否顯示及如何顯示單元格之間的分割線
  - none：無分割線
  - all：所有分割線
  - rows：僅有行分割線
  - cols：僅有列分割線
  - groups：僅在行組和列組之間有分割線
<caption>標記用於在表格張紅使用標題
<caption>屬性的位置位於<table>屬性之後，<tr>表格行之前
<caption>標記中align屬性可以取top、bottom、left、right四個值，分別表示標題顯示在上、下、左、右
<tr>標記用來定義表格的行，對於每一個表格行，都是由一對<tr>…</tr>標記表示，每一個<tr>標記內可以巢狀多個<td>或<th>標記
<tr>標記的常見屬性包括：
- bgcolor：設定背景顏色。格式為bgcolor=“顏色值”
- valign：用來設定垂直對齊方式。格式為valign=“值”
  - bottom：靠頂端對齊
  - top：靠底部對齊
  - middle：居中對齊
- align：用來設定水平方向對齊方式。格式為align=“值”
  - left：左對齊
  - right：右對齊
  - center：居中對齊
<td>和<th>都是單元格的標記，必須巢狀在<tr>標記內，成對出現
<th>是表頭標記，通常位於首行或首列，其中的文字預設會被加粗，而<td>不會
<td>是資料標記，表示該單元格的具體資料
<td>和<th>的常用資料是一致的，如下：
- bgcolor：設定單元格背景
- align：設定單元格水平對齊方式
- vlign：設定單元格垂直對齊方式
- width：設定單元格寬度
- height：設定單元格高度
- rowspan：設定單元格所佔行數
- colspan：設定單元格所佔列數

樣例：

<html>
<head>
	<title>學生資訊表</title>
	<meta charset="UTF-8">
</head>
	<body>
			<table width="960" align="center" border="1" rules="all" cellpadding="15">
				<tr>
					<th>學號</th>
                    <th>班級</th>
					<th>姓名</th>
					<th>年齡</th>
					<th>籍貫</th>

				</tr>
				<tr align="center">
					<td>1500001</td>
					<td>(1)班</td>
					<td>張三</td>
					<td>16</td>
                    <td>上海</td>
				</tr>
				<tr align="center">
                    <td>1500011</td>
					<td>(2)班</td>
					<td>李四</td>
					<td>15</td>
					<td bgcolor="#ccc">浙江</td>
				</tr>

			</table>

			<br/>
			<table width="960" align="center" border="1" rules="all" cellpadding="15">
                <tr bgcolor="#ccc">
                    <th>學號</th>
                    <th>班級</th>
                    <th>姓名</th>
                    <th>年齡</th>
                    <th>籍貫</th>

                </tr>
                <tr align="center">
                    <td>1500001</td>
                    <td>(1)班</td>
                    <td>張三</td>
                    <td>16</td>
                    <td bgcolor="red"><font color="white">上海</font></td>
                </tr>
                <tr align="center">
                    <td>1500011</td>
                    <td>(2)班</td>
                    <td>李四</td>
                    <td>15</td>
                    <td>浙江</td>
                </tr>
			</table>
	</body>
</html>

2.1.2 CSS

CSS的使用方式

CSS指層疊樣式表（Cascading Style Sheets），用來定義如何顯示HTML元素，一般和HTML配合使用
CSS樣式表的目的是為了解決內容與表現分離的問題，即同一個HTML文件也能有多種表現方式
在HTML中使用CSS的方式有：
- 內聯樣式表：CSS程式碼直接寫在現有的HTML標記中，直接使用style屬性改變樣式
```
<body style="background-color:green; margin:0; padding:0;"></body>
```
- 嵌入式樣式表：CSS樣式程式碼直接寫在<style type=“text/css”></style>標記之間，一般情況下嵌入式CSS樣式寫在<head></head>之間
- 外部樣式表：CSS程式碼寫在一個單獨的外部檔案中，以.css為副檔名，在<head>內使用<link>標記將CSS樣式檔案連結到HTML檔案內
```
<link rel="StyleSheet" type="text/css" href="style.css">
```
CSS規則由兩個主要的部分構成
- 選擇器：通常是需要改變樣式的HTML元素
- 一條或多條宣告：每條宣告由一個屬性和一個值組成。屬性是希望設定的樣式屬性，每個屬性有一個值，屬性和值由冒號分開
- ```
h1{color:blue;font-size:12px}
```
  - 將h1標記中的顏色設定為藍色，字型大小為12px
  - h1：選擇器
  - color和font-size：屬性
  - blue和12px：屬性值
根據選擇器的定義方式，可以將樣式表的定義分成三種方式：
- HTML標記定義：如果想修改<p>…</p>的樣式，可以定義CSS：p{屬性:屬性值}
- ID選擇器定義：可以為標有特定ID的HTML元素指定特定的樣式。HTML元素以ID屬性來設定ID選擇器，CSS中ID選擇器以#來定義，如：
```
/* 將HTML中ID為word的元素設定為居中，顏色為紅色 */
#word{text-align:center;color:red;}
```
- class選擇器定義：用於描述一組元素的樣式，可以在多個元素中使用。HTML元素以class屬性來設定class選擇器，CSS中以一個點“.”號顯示，如：
```
/* 將所有擁有center類的HTML元素設為居中 */
.center{text-align:center;}
/* 對所有p元素使用class="center"，讓該元素的文字居中 */
p.center{text-align:center;}
```

顏色屬性

顏色屬性用color來定義文字的顏色，可以使用以下方式：
- 顏色名稱：color:green
- 十六進位制：color:#ff6600
- 簡寫十六進位制：color:#f60
- RGB方式：color:rgb(255, 255, 255)
- RGBA方式：color:rgba(255, 255, 255, 1)

字型屬性

可以使用字型屬性定義文字形式：
- font-size定義字型大小。如：font-size:14px
- font-family定義字型。字型之間可以使用“，”隔開，以確保當字型不存在時直接使用下一個字型。如：font-family:微軟雅黑, serif
- font-weight定義字型加粗。取值有使用名稱和數字的兩種方式
  - normal（預設值）、bold（粗）、bolder（更粗）、lighter（更細）
  - 100、200、300~900（400=normal，700=bold）

背景屬性

可以使用背景屬性定義背景的顏色、圖片、重複和位置

background-color：定義背景的顏色，用法參考顏色屬性
background-image：定義背景圖片，如background-image:url（圖片路徑）或取值為none表示不使用圖片
background-repeat：定義背景重複方式
- repeat：表示整體重複平鋪
- repeat-x：只在水平方向平鋪
- repeat-y：只在垂直方向平鋪
- no-repeat：不重複
background-position：定義背景位置。在橫向可取值left、center、right；在縱向可取值top、center、bottom
簡寫方式可以簡化背景屬性的書寫，格式為background: 背景顏色圖片url 重複位置，如：
```
background:#f60 url(images/bg.jpg) no-repeat top center
```

文字屬性

可以用文字屬性設定行高、縮排和字元間距
- text-align：設定文字對齊方式，取值為left、center、right
- line-height：設定文字行高，取值可以取具體數值，也可以取基於字型大小的百分比行高
- text-indent：首行縮排，如text-indent:50px
- letter-spacing：設定字元間距，預設為normal（字元間沒有額外空間）；可以設定具體的數值（可以為負），如letter-spacing:3px；可以取inherit，從父元素繼承letter-spacing的值

列表

使用CSS對列表進行設定：
- list-style-type：指明列表項標記的型別
  - none：無標記
  - disc / circle：實心圓/空心圓
  - square：實心方塊
  - decimal / decimal-leading-zero：數字標記/0開頭的數字標記
  - lower-roman / upper-roman：小寫/大寫羅馬數字
  - lower-alpha / upper-alpha：小寫/大寫英文字母
  - 如：
```
/* 將class選擇器為a的ul標記設定為空心圓標記 */
ul.a{list-style-type: circle;}
```
- list-style-position：致命列表項中標記的位置
  - inside：列表項標記放在文字以內，且環繞文字根據標記對齊
  - outside（預設）：保持標記位於文字的左側，列表項標記放置在文字以外，且環繞文字不根據標記對齊
  - inherit：從父元素繼承list-style-position的值
- list-style-imgae：設定影像列表標記
  - URL：影像的路徑
  - none：預設無圖形被顯示
  - inherit：從父元素繼承list-style-image的值
  - 如：
```
/* 給ul標記前面的標記設定為image.gif圖片 */
ul{list-style-image:url('image.gif');}
```

例項

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Python爬蟲開發</title>
<style>
h1
{
	background-color:#6495ed;/*--背景顏色--*/
    color:red;/* 字型顏色 */
    text-align:center;/* 文字居中 */
    font-size:40px;/* 字型大小*/
}
p
{
    background-color:#e0ffff;
    text-indent:50px;/* 首行縮排 */
    font-family:"Times New Roman", Times, serif;/* 設定字型 */
}
p.ex {color:rgb(0,0,255);}
div
{
	background-color:#b0c4de;
}

ul.a {list-style-type:square;}
ol.b {list-style-type:upper-roman;}
ul.c{list-style-image:url('http://www.cnblogs.com/images/logo_small.gif');}
</style>
</head>

<body>
<h1>CSS background-color演示</h1>
<div>
該文字插入在 div 元素中。
<p>該段落有自己的背景顏色。</p>
<p class="ex">這是一個類為"ex"的段落。這個文字是藍色的。</p>
我們仍然在同一個 div 中。
</div>
<p>無序列表例項:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表例項:</p>
<ol class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<p>圖片列表示例</p>
<ul class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>
</html>

完整圖片資源：

2.1.3 JavaScript

JavaScript的基本用法

JavaScript是一種輕量級的指令碼語言，由瀏覽器進行解釋執行，可以插入在HTML頁面中

使用JavaScript有兩種做法：

直接插入程式碼：在<script></script>標記中編寫程式碼，可以直接嵌在網頁的任何地方，不過通常放在<head></head>中。如：

<html>
    <head>
        <script type='text/javascript'>
            alert('Hello, world');
        </script>
    </head>
    <body>
        python爬蟲
    </body>
</html>

外部引用js檔案：把JavaScript程式碼放到一個單獨的.js檔案，然後再HTML中通過<script src='目標文件的URL'></script>的方式來引入js檔案。如：

<html>
    <head>
        <script src = "/static/js/jquery.js"></script>
    </head>
    <body>
        python爬蟲
    </body>
</html>

JavaScript的基本語法

JavaScript嚴格區分大小寫
JavaScript會忽略各種元素之間的空格、製表符、換行符
每條語句以分號結尾，最後一個語句的分號可以省略
使用{…}包含多個語句可以形成一個語句塊，{…}還可以巢狀使用
JavaScript的兩種註釋形式為”//…“和”/*…*/“

資料型別和變數

在JavaScript中定義了一下幾種資料型別：
- Number型別：JavaScript中不區分整數和浮點數，統一使用Number表示，特殊的Number有：NaN（無法計算時使用）和Infinity（無限大）
- 字串型別：是以單引號或雙引號括起來的任意文字
- 布林值型別：true或false
- 陣列型別：陣列是一組按順序排列的集合，JavaScript的陣列可以包括任意資料型別，元素之間用“,”分隔，陣列的元素可以通過索引來訪問，索引的起始值為0。建立陣列的方法如下：
```
var array = [1, 2, 3.14, 'Hello', null, true];
var array = new Array(1, 2, 3);
```
- 物件型別：JavaScript的物件是一組由鍵-值組成的無序集合，其中，鍵都是字串型別，值可以是任意資料型別，要獲取一個物件的屬性，可以使用“物件變數.屬性名”的方式。一個示例如下：
```
var person = {name: 'qiye', age: 24, tags: ['python', 'web', 'hacker'], city: 'Beijing', man: true}
person.name // 獲取person物件的name屬性
```
JavaScript宣告變數時都使用關鍵字var，而不是int、char等資料型別，為變數賦值時會自動判斷型別並進行轉換
變數名是大小寫英文、數字、“$”和“_”的組合，且不能以數字開頭，也不能是JavaScript的關鍵字

運算子和操作符

類別	操作符	特殊示例
算數操作符	+、-、*、/、%	0 / 0; // NaN 2 / 0; //Infinity
字串操作符	+（字串連線）、+=（字串連線複合）
布林操作符	!、&&、\|\|
一元操作符	++、–、+（一元加）、-（一元減）
關係比較操作符	<、<=、>、>=、!=、==、===、!==	false == 0; // true false === 0; // false
按位操作符	~、&、\|、^、<<、>>（有符號右移）、>>>（無符號右移）
賦值操作符	=、+=、-=、*=、%=、~=、&=、\|=、^=、<<=、>>=、>>>=
物件操作符	.（屬性訪問）、[]（屬性或陣列訪問）、new（呼叫建構函式建立物件）、 delete（變數屬性刪除）、void（返回undefined）、in（判斷屬性）、instanceof（原型判斷）
其他操作符	?:（條件操作符）、,（逗號操作符）、()（分組操作、typeof（型別判斷符）	typeof true; // 返回字串“boolean”

條件判斷

JavaScript使用if() {…} else {…}來進行條件判斷，和C語言的使用方法一樣

var age = 20;
if (age > 18) {
    alert('adult');
}
else {
    alert('teenager');
}

迴圈

JavaScript的迴圈包括for迴圈和while迴圈兩種

for迴圈：

var x = 0;
var i;
for (i=1; i<=100; i++) {
    x = x + i;
}

var person = {
    name: 'qiye',
    age: 20,
    city: 'Beijing'
};
for (var key in person) {
    alert(key); // 'name', 'age', 'city'
}

while迴圈：和C語言一樣，分為while(){…}和do{…}while()，這裡不再舉例

函式

JavaScript函式舉例：
```
function add(x,y) {
    return x+y;
}
```
上述add()函式的定義如下：
- function指出這是一個函式定義
- add是函式的名稱
- (x,y)括號內列出函式的引數，多個引數以“,”分隔
- {…}之間的程式碼是函式體，可以包含0條或多條語句
呼叫函式時，按順序傳入引數即可，如add(10, 9);
JavaScript允許傳入任意個引數而不影響呼叫，傳入過多的引數只會使用到前幾個，而傳入過少的引數則會將少的引數定義為undefined，如：
- add(10, 9, ‘blablabla’); // 返回19
- add(); // 返回NaN

2.1.4 XPath

XPath是一門在XML文件中查詢資訊的語言，但也能很好的在HTML文件中工作
XPath通過路徑表示式的形式來指定元素

XPath節點

在XPath中，XML是被作為節點樹來對待的
有7種型別的節點：元素、屬性、文字、名稱空間、處理指令、註釋以及文件（根）節點
示例文件：
```
<?xml version="1.0" encoding="ISO-8859-1"?>
<classroom>
    <student>
      <id>1001</id>
      <name lang="en">marry</name>
      <age>20</age>
      <country>China</country>
    </student>
</classroom>
```
- 節點包括：<classroom>（文件節點）、<id>1001</id>（元素節點）、lang=“en”（屬性節點）、marry（文字）
- student是元素id、name、age以及country元素的父節點
- id、name、age以及country元素都是student元素的子節點
- id、name、age以及country元素都是兄弟節點，擁有相同的父節點
- name元素的祖先是student元素和classroom元素
- classroom的後代是id、name、age以及country元素

XPath語法

示例文件：

<?xml version="1.0" encoding="ISO-8859-1"?>
<classroom>
    <student>
      <id>1001</id>
      <name lang="en">marry</name>
      <age>20</age>
      <country>China</country>
    </student>
    <student>
      <id>1002</id>
      <name lang="en">jack</name>
      <age>25</age>
      <country>USA</country>
    </student>
</classroom>

XPath使用路徑表示式來選取XML文件中的節點或節點集
以下是常用的路徑表示式進行節點的選取：

表示式描述
nodename 選取此節點的所有子節點
/ 從根節點選取
// 選擇任意位置的某個節點
. 選取當前節點
… 選取當前節點的父節點
@ 選取屬性

表示式	描述
nodename	選取此節點的所有子節點
/	從根節點選取
//	選擇任意位置的某個節點
.	選取當前節點
…	選取當前節點的父節點
@	選取屬性

節點選取示例（根據上面的XML）：

表示式	實現效果
classroom	選取classroom元素的所有子節點
/classroom	選取根元素classroom
classroom/student	選取屬於classroom的子元素的所有student元素
//student	選取所有student子元素，而不管他們在文件中的位置
classroom//student	選取屬於classroom元素的後代的所有student元素，而不管他們位於classroom之下的什麼位置
/@lang	選取名為lang的所有屬性

通過謂語可以選取某個特定的節點或者包含某一個指定的值的節點

謂語被嵌在方括號中，示例如下：

表示式	實現效果
/classroom/student[1]	選取屬於classroom子元素的第一個student元素
/classroom/student[last()]	選取屬於classroom子元素的最後一個student元素
/classroom/student[last()-1]	選取屬於classroom子元素的倒數第二個student元素
/classroom/student[position() < 3]	選取最前面的兩個屬於classroom元素的子元素的student元素
//name[@lang]	選取所有擁有名為lang的屬性的name元素
//name[@lang=‘en’]	選取所有name元素，並且這些元素擁有值為en的lang屬性
/classroom/student[age>20]	選取屬於classroom子元素的所有student元素，且其中的age元素的值須大於20
/classroom/student[age>20]/name	選取屬於classroom子元素的student元素的所有name元素，且其中的age元素的值須大於20

XPath在進行節點選取的時候可以使用萬用字元“*”匹配未知的元素，同時使用操作符“|”一次選取多條路徑，示例如下：

表示式	實現效果
/classroom/*	選取classroom元素的所有子元素
//*	選取文件中的所有元素
//name[@*]	選取所有帶有屬性的name元素
//student/name \| //student/age	選取student元素的所有name和age元素
/classroom/student/name \| //age	選取屬於classroom元素的student元素的所有name元素，以及文件中所有的age元素

XPath軸

軸定義了所選節點與當前節點之間的樹關係，軸的存在會使提取變得更加靈活和準確

XPath軸中使用的節點集：

軸名稱	含義
child	選取當前節點的所有子元素
parent	選取當前節點的父節點
ancestor	選取當前節點的所有祖先
ancestor-or-self	選取當前節點的所有祖先以及當前節點本身
descendant	選取當前節點的所有後代
descendant-or-self	選取當前節點的所有後代以及當前節點本身
preceding	選取文件中當前節點的開始標記之前的所有節點
following	選取文件中當前節點的結束標記之後的所有節點
preceding-sibling	選取當前節點之前的所有兄弟節點
following-sibling	選取當前節點之後的所有兄弟節點
self	選取當前節點
attribute	選取當前節點的所有屬性
namespace	選取當前節點的所有名稱空間節點