您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > Web前端基礎(W3C標準/html/CSS/JavaScript/XPath/JSON)

Web前端基礎(W3C標準/html/CSS/JavaScript/XPath/JSON)

文章來源：365jz.com 點擊數(shù)：345 更新時間：2018-01-19 11:07 參與評論

Web前端基礎

爬蟲主要是和網(wǎng)頁打交道，了解Web前端的知識是非常重要的。

Web前端的知識范圍非常廣泛，不可能面面俱到和深入講解，本章主要是抽取Web前端中和爬蟲相關的知識點進行講解，幫助讀者了解這些必備的知識，為之后的Python爬蟲開發(fā)打下基礎。

2.1　W3C標準

如果說你只知道Web前端的一個標準，估計肯定是W3C標準了。W3C，即萬維網(wǎng)聯(lián)盟，是Web技術領域最具權威和影響力的國際中立性技術標準機構。萬維網(wǎng)聯(lián)盟（W3C）標準不是某一個標準，而是一系列標準的集合。網(wǎng)頁主要由三部分組成：結(jié)構（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應的標準也分三方面：結(jié)構化標準語言主要包括XHTML和XML，表現(xiàn)標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。本節(jié)我們主要講解HTML、CSS、JavaScript、Xpath和JSON等5個部分，基本上覆蓋了爬蟲開發(fā)中需要了解的Web前端基本知識。

2.1.1　HTML

什么是HTML標記語言？HTML不是編程語言，是一種表示網(wǎng)頁信息的符號標記語言。標記語言是一套標記，HTML使用標記來描述網(wǎng)頁。Web瀏覽器的作用是讀取HTML文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示HTML標記，而是使用標記來解釋頁面的內(nèi)容。

HTML語言的特點包括：

·可以設置文本的格式，比如標題、字號、文本顏色、段落，等等。

·可以創(chuàng)建列表。

·可以插入圖像和媒體。

·可以建立表格。

·超鏈接，可以使用鼠標點擊超鏈接來實現(xiàn)頁面之間的跳轉(zhuǎn)。

下面從HTML的基本結(jié)構、文檔設置標記、圖像標記、表格和超鏈接五個方面講解。

1.HTML的基本結(jié)構

首先在瀏覽器上訪問google網(wǎng)站（如圖2-1所示），右鍵查看源代碼，如圖2-2所示。

圖2-1　谷歌網(wǎng)站首頁圖2-2　谷歌首頁源代碼

從谷歌首頁的源代碼中可以分析出HTML的基本結(jié)構：

·<html>內(nèi)容</html>：HTML文檔是由<html></html>包裹，這是HTML文檔的文檔標記，也稱為HTML開始標記。這對標記分別位于網(wǎng)頁的最前端和最后端，<html>在最前端表示網(wǎng)頁的開始，</html>在最后端表示網(wǎng)頁的結(jié)束。

·<head>內(nèi)容</head>：HTML文件頭標記，也稱為HTML頭信息開始標記。用來包含文件的基本信息，比如網(wǎng)頁的標題、關鍵字，在

<head></head>內(nèi)可以放<title></title>、<meta></meta>、<style></style>等標記。注意：在<head></head>標記內(nèi)的內(nèi)容不會在瀏覽器中顯示。

·<title>內(nèi)容</title>：HTML文件標題標記。網(wǎng)頁的“主題”，顯示在瀏覽器的窗口的左上邊。

·<body>內(nèi)容</body>：<body>...</body>是網(wǎng)頁的主體部分，在此標記之間可以包含如<p></p>、<h1></h1>、<br>、<hr>等等標記，正是由這些內(nèi)容組成了我們所看見的網(wǎng)頁。

·<meta>內(nèi)容</meta>：頁面的元信息（meta-information）。提供有關頁面的元信息，比如針對搜索引擎和更新頻度的描述和關鍵詞。

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

2.文檔設置標記

文檔設置標記分為格式標記和文本標記。下面通過一個標準的HTML文檔對格式標記進行講解，文檔如下所示：

<html>
<head>
<title>Python爬蟲開發(fā)與項目實戰(zhàn)</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>

在瀏覽器中打開運行，效果如圖2-3所示。

圖2-3　運行效果圖

格式標記包括：

·<br>：強制換行標記。讓后面的文字、圖片、表格等等，顯示在下一行。

·<p>：換段落標記。換段落，由于多個空格和回車在HTML中會被等效為一個空格，所以HTML中要換段落就要用<p>，<p>段落中也可以包含<p>段落。例如：<p>This is a paragraph.</p>。

·<center>：居中對齊標記。讓段落或者是文字相對于父標記居中顯示。

·<pre>：預格式化標記。保留預先編排好的格式，常用來定義計算機源代碼。和<p>進行一下對比，就可以理解。

·<li>：列表項目標記。每一個列表使用一個<li>標記，可用在有序列表（<ol>）和無序列表（<ul>）中。

·<ul>：無序列表標記。<ul>聲明這個列表沒有序號。

·<ol>：有序列表標記。可以顯示特定的一些順序。有序列表的type屬性值“1”表示阿拉伯數(shù)字1.2.3等等；默認type屬性值“A”表示大小字母A、B、C等等；上面的程序使用屬性“a”，這表示小寫字母a、b、c等等；“Ⅰ”表示大寫羅馬數(shù)字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等；“ⅰ”表示小寫羅馬數(shù)字ⅰ、ⅱ、ⅲ、ⅳ等等。注意：列表可以進行嵌套。

·<dl><dt><dd>：定義型列表。對列表條目進行簡短說明。

·<hr>：水平分割線標記?？梢杂米鞫温渲g的分割線。

·<div>：分區(qū)顯示標記，也稱為層標記。常用來編排一大段的

HTML段落，也可以用于將表格式化，和<p>很相似，可以多層嵌套使用。

接下來通過一個HTML文檔對文本標記進行講解，文檔如下所示：

<html> <head>

<title>Python爬蟲開發(fā)與項目實戰(zhàn)</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標記表示強調(diào)，顯示為斜體---->> <em>Python爬蟲</em> <br> strong標記表示強調(diào)，加粗顯示---->> <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>

在瀏覽器中打開運行，效果如圖2-4所示。

其中文本標記包括：

·<hn>：標題標記。共有6個級別，n的范圍為1～6，不同級別對應不同顯示大小的標題，h1最大，h6最小。

·<font>：字體設置標記。用來設置字體的格式，一般有三個常用屬性：size（字體大?。?，<font size=“14px”>；color（顏色），

<font color=“red”>；face（字體），<font face=“微軟雅黑”>。

·<b>：粗字體標記。

·<i>：斜字體標記。

·<sub>：文字下標字體標記。

·<sup>：文字上標字體標記。

·<tt>：打印機字體標記。

·<cite>：引用方式的字體，通常是斜體。

·<em>：表示強調(diào)，通常顯示為斜體字。

·<strong>：表示強調(diào)，通常顯示為粗體字。

·<small>：小型字體標記。

·<big>：大型字體標記。

·<u>：下劃線字體標記。

圖2-4　運行效果圖

3.圖像標記

<img>稱為圖像標記，用來在網(wǎng)頁中顯示圖像。使用方法為：

<img src=“路徑/文件名.圖片格式”width=“屬性值”height=“屬性值”border=“屬性值”alt=“屬性值”>。<img>標記主要包括以下屬性：

·src屬性用來指定我們要加載的圖片的路徑、圖片的名稱以及圖片格式。

·width屬性用來指定圖片的寬度，單位為px、em、cm、mm。

·height屬性用來指定圖片的高度，單位為px、em、cm、mm。

·border屬性用來指定圖片的邊框?qū)挾龋瑔挝粸閜x、em、cm、mm。

·alt屬性有三個作用：1）當網(wǎng)頁上的圖片被加載完成后，鼠標移動到上面去，會顯示這個圖片指定的屬性文字；2）如果圖像沒有下載或者加載失敗，會用文字來代替圖像顯示；3）搜索引擎可以通過這個屬性的文字來抓取圖片。

我們可以在瀏覽器上訪問博客園首頁，對博客園首頁的圖片進行審查，就可以看到的img標記的使用方法，如圖2-5所示。

圖2-5　img標記

注意　<img>為單標記，不需要使用</img>閉合。在加載圖像文件的時候，文件的路徑、文件名或者文件格式錯誤，將無法加載圖片。

4.超鏈接的使用

爬蟲開發(fā)中經(jīng)常需要抽取鏈接，鏈接的引用使用的是<a>標記。

<a>標記的基本語法：<a href=“鏈接地址”target=“打開方式”

name=“頁面錨點名稱”>鏈接文字或者圖片</a>。<a>標記主要包括以下屬性：

·href屬性值是鏈接的地址，鏈接的地址可以是一個網(wǎng)頁，也可以是一個視頻、圖片、音樂等。

·target屬性用來定義超鏈接的打開方式。當屬性值為_blank時，作用是在一個新的窗口中打開鏈接；當屬性值為_self（默認值）時，作用是在當前窗口中打開鏈接；當屬性值為_parent時，作用是在在父窗口中打開頁面；當屬性值為_top時，在頂層窗口中打開文件。

·name屬性用來指定頁面的錨點名稱。

5.表格

表格的基本結(jié)構包括<table>、<caption>、<tr>、<td>和<th>等標記。

<table>標記的基本格式為<table屬性1=“屬性值1”屬性2=“屬性值2”......>表格內(nèi)容</table>。table標記有以下常見屬性：

·width屬性：表示表格的寬度，它的值可以是像素（px）也可以是父級元素的百分比（%）。

·height屬性：表示表格的高度，它的值可以是像素（px）也可以是父級元素的百分比（%）。

·border屬性：表示表格外邊框的寬度。

·align屬性用來表示表格的顯示位置。left居左顯示，center居中顯示，right居右顯示。

·cellspacing屬性：單元格之間的間距，默認是2px，單位為像素。

·cellpadding屬性：單元格內(nèi)容與單元格邊框的顯示距離，單位為像素。

·frame屬性用來控制表格邊框最外層的四條線框。void（默認值）表示無邊框；above表示僅頂部有邊框；below表示僅有底部邊框；

hsides表示僅有頂部邊框和底部邊框；lhs表示僅有左側(cè)邊框；rhs表示僅有右側(cè)邊框；vsides表示僅有左右側(cè)邊框；border表示包含全部4個邊框。

·rules屬性用來控制是否顯示以及如何顯示單元格之間的分割線。屬性值none（默認值）表示無分割線；all表示包括所有分割線；rows表示僅有行分割線；clos表示僅有列分割線；groups表示僅在行組和列組之間有分割線。

<caption>標記用于在表格中使用標題。<caption>屬性的插入位置，直接位于<table>屬性之后，<tr>表格行之前。<caption>標記中

align屬性可以取四個值：top表示標題放在表格的上部；bottom表示標題放在表格的下部；left表示標題放在表格的左部；right表示標題放在表格的右部。

<tr>標記用來定義表格的行，對于每一個表格行，都是由一對

<tr>...</tr>標記表示，每一行<tr>標記內(nèi)可以嵌套多個<td>或者<th>標記。<tr>標記中的常見屬性包括：

·bgcolor屬性用來設置背景顏色，格式為bgcolor=“顏色值”。

·valign屬性用來設置垂直方向?qū)R方式，格式為valign=“值”。值為bottom時，表示靠頂端對齊；值為top時，表示靠底部對齊；值為middle時，表示居中對齊。

·align屬性用來設置水平方向?qū)R方式，格式為align=“值”。值為left時，表示靠左對齊；值為right時，表示靠右對齊；值為center時，表示居中對齊。

<td>和<th>都是單元格的標記，其必須嵌套在<tr>標記內(nèi)，成對出現(xiàn)。<th>是表頭標記，通常位于首行或者首列，<th>中的文字默認會被加粗，而<td>不會。<td>是數(shù)據(jù)標記，表示該單元格的具體數(shù)據(jù)。

<td>和<th>兩者的標記屬性都是一樣的，常用屬性如下：

·bgcolor設置單元格背景。

·align設置單元格水平對齊方式。

·valign設置單元格垂直對齊方式。

·width設置單元格寬度。

·height設置單元格高度。

·rowspan設置單元格所占行數(shù)。

·colspan設置單元格所占列數(shù)。

下面通過一個HTML文檔來演示表格的使用，文檔如下：

<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-6所示。

2.1.2　CSS

CSS指層疊樣式表（Cascading Style Sheets），用來定義如何顯示HTML元素，一般和HTML配合使用。CSS樣式表的目的是為了解決內(nèi)容與表現(xiàn)分離的問題，即使同一個HTML文檔也能表現(xiàn)出外觀的多樣化。在HTML中使用CSS樣式的方式，一般有三種做法：

·內(nèi)聯(lián)樣式表：CSS代碼直接寫在現(xiàn)有的HTML標記中，直接使用style屬性改變樣式。例如，<body style="background-color:green;margin:0; padding:0;"></body>。

·嵌入式樣式表：CSS樣式代碼寫在<style type="text/css"></style>標記之間，一般情況下嵌入式CSS樣式寫在<head></head>之間。

·外部樣式表：CSS代碼寫一個單獨的外部文件中，這個CSS樣式文件以“.css”為擴展名，在<head>內(nèi)（不是在<style>標記內(nèi)）使用<link>標記將CSS樣式文件鏈接到HTML文件內(nèi)。例如，<link rel="StyleSheet" type="text/css" href="style.css">。

CSS規(guī)則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

選擇器通常是需要改變樣式的HTML元素。每條聲明由一個屬性和一個值組成。屬性（property）是希望設置的樣式屬性（styleattribute）。每個屬性有一個值。屬性和值由冒號分開。例如：

h1{color：blue；font-size：12px}。其中h1為選擇器，color和font-size是屬性，blue和12px是屬性值，這句話的意思是將h1標記中的顏色設置為藍色，字體大小為12px。根據(jù)選擇器的定義方式，可以將樣式表的定義分成三種方式：

·HTML標記定義：上面舉的例子就是使用的這種方式。假如想修改<p>...</p>的樣式，可以定義CSS：p{屬性：屬性值；屬性1：屬性值1}。p可以叫做選擇器，定義了標記中內(nèi)容所執(zhí)行的樣式。一個選擇器可以控制若干個樣式屬性，他們之間需要用英語的“；”隔開，最后一個可以不加“；”。

·ID選擇器定義：ID選擇器可以為標有特定ID的HTML元素指定特定的樣式。HTML元素以ID屬性來設置ID選擇器，CSS中ID選擇器以“#”來定義。假如定義為#word{text-align：center；color：red；}，就將HTML中ID為word的元素設置為居中，顏色為紅色。

·class選擇器定義：class選擇器用于描述一組元素的樣式，class選擇器有別于ID選擇器，它可以在多個元素中使用。class選擇器在HTML中以class屬性表示，在CSS中，class選擇器以一個點“.”號顯示。例如，.center{text-align：center；}將所有擁有center類的HTML元素設為居中。當然也可以指定特定的HTML元素使用class，例如，p.center{text-align：center；}是對所有的p元素使用class=“center”，讓該元素的文本居中。

介紹完選擇器，接著說一下CSS中一些常見的屬性。常見屬性主要說明一下顏色屬性、字體屬性、背景屬性、文本屬性和列表屬性。

1.顏色屬性

顏色屬性color用來定義文本的顏色，可以使用以下方式定義顏色：

·顏色名稱，如color：green。

·十六進制，如color：#ff6600。

·簡寫方式，如color：#f60。

·RGB方式，如rgb（255，255，255），紅（R）、綠（G）、藍（B）的取值范圍均為0～255·RGBA方式，如color：rgba（255，255，255，1），RGBA表示

Red（紅色）、Green（綠色）、Blue（藍色）和Alpha的（色彩空間）透明度。

2.字體屬性

可以使用字體屬性定義文本形式，有如下方法：

·font-size定義字體大小，如font-size：14px。

·font-family定義字體，如font-family：微軟雅黑，serif。字體之間可以使用“，”隔開，以確保當字體不存在的時候直接使用下一個字體。

·font-weight定義字體加粗，取值有兩種方式。一種是使用名稱，如normal（默認值）、bold（粗）、bolder（更粗）、lighter（更細）；一種是使用數(shù)字，如100、200、300～900，400=normal，而700=bold。

3.背景屬性

可以用背景屬性定義背景顏色、背景圖片、背景重復和背景的位置，內(nèi)容如下：

·background-color用來定義背景的顏色，用法參考顏色屬性。

·background-image用來定義背景圖片，如background-image：

url（圖片路徑），也可以設置為background-image：none，表示不使用圖片。

·background-repeat用來定義背景重復方式。取值為repeat，表示整體重復平鋪；取值為repeat-x，表示只在水平方向平鋪；取值為

repeat-y，表示只在垂直方向平鋪；取值為no-repeat，表示不重復。

·background-position用來定義背景位置。在橫向上，可以取

left、center、right；在縱向上可以取top、center、bottom。

·簡寫方式可以簡化背景屬性的書寫，同時定義多個屬性，格式為background：背景顏色url（圖像）重復位置。如background：

#f60url（images/bg、jpg）no-repeat top center。

4.文本屬性

可以用文本屬性設置行高、縮進和字符間距，具體如下：

·text-align設置文本對齊方式，屬性值可以取left、center、right。

·line-height設置文本行高，屬性值可以取具體數(shù)值，來設置固定的行高值。也可以取百分比，是基于字體大小的百分比行高。

·text-indent代表首行縮進，如text-indent：50px，意思是首行縮進50個像素。

·letter-spacing用來設置字符間距。屬性值默認是normal，規(guī)定字符間沒有額外的空間；可以設置具體的數(shù)值（可以是負值），如letter-spacing：3px；可以取inherit，從父元素繼承l(wèi)etter-spacing屬性的值。

5.列表

在HTML中，有兩種類型的列表：無序和有序。其實使用CSS，可以列出進一步的樣式，并可用圖像作列表項標記。接下來主要講解以下幾種屬性：

·list-style-type用來指明列表項標記的類型。常用的屬性值有：

none（無標記）、disc（默認，標記是實心圓）、circle（標記是空心圓）、square（標記是實心方塊）、decimal（標記是數(shù)字）、

decimal-leading-zero（0開頭的數(shù)字標記）、lower-roman（小寫羅馬數(shù)字i、ii、iii、iv、v等）、upper-roman（大寫羅馬數(shù)字I、II、III、IV、V等）、lower-alpha（小寫英文字母a、b、c、d、e等）、upper-alpha（大寫英文字母A、B、C、D、E等）。例如，ul.a{list-style-type：circle；}是將class選擇器的值為a的ul標記設置為空心圓標記。

·list-style-position用來指明列表項中標記的位置。屬性值可以取inside、outside和inherit。inside指的是列表項標記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標記對齊。outside為默認值，保持標記位于文本的左側(cè)，列表項標記放置在文本以外，且環(huán)繞文本不根據(jù)標記對齊。

inherit規(guī)定應該從父元素繼承l(wèi)ist-style-position屬性的值。

·list-style-image用來設置設置圖像列表標記。屬性值可以為URL（圖像的路徑）、none（默認無圖形被顯示）、inherit（從父元素繼承l(wèi)ist-style-image屬性的值）。例如，ul{list-style-image：

url（‘image.gif’）；}，意思是給ul標記前面的標記設置為image.gif圖片。

2.1.3　JavaScript

JavaScript是一種輕量級的腳本語言，和Python語言是一樣的，只不過JavaScript是由瀏覽器進行解釋執(zhí)行。JavaScript可以插入HTML頁面中，可由所有的現(xiàn)代瀏覽器執(zhí)行。由于JavaScript是一門新的編程語言，知識點很多，本節(jié)不進行深入講解，主要介紹一下JavaScript的用法和基本語法。大家如果想深入學習，需要額外看一些教程。

如何使用JavaScript呢？主要有直接插入代碼和外部引用js文件兩種做法：

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

</body> </html>

這樣/static/js/jquery.js就會被瀏覽器執(zhí)行。把JavaScript代碼放入一個單獨的.js文件中更利于維護代碼，并且多個頁面可以各自引用同一份.js文件，減少程序員編碼量。在頁面中多次編寫JavaScript代碼，瀏覽器按照順序依次執(zhí)行。

一般在正常的開發(fā)中都是采用上述兩種做法結(jié)合的方式，之后在做Python爬蟲開發(fā)時會經(jīng)常見到。

2.1.4　XPath

XPath是一門在XML文檔中查找信息的語言，被用于在XML文檔中通過元素和屬性進行導航。XPath雖然是被設計用來搜尋XML文檔，不過它也能很好地在HTML文檔中工作，并且大部分瀏覽器也支持通過XPath來查詢節(jié)點。在Python爬蟲開發(fā)中，經(jīng)常使用XPath查找提取網(wǎng)頁中的信息，因此XPath非常重要。

XPath既然叫Path，就是以路徑表達式的形式來指定元素，這些路徑表達式和我們在常規(guī)的電腦文件系統(tǒng)中看到的表達式非常相似。

由于XPath一開始是被用來搜尋XML文檔的，所以接下來就以XML文檔為例子來講解XPath。接下來從節(jié)點、語法、軸和運算符等四個方面講解XPath的使用。

1.XPath節(jié)點

在XPath中，XML文檔是被作為節(jié)點樹來對待的，有七種類型的節(jié)點：元素、屬性、文本、命名空間、處理指令、注釋以及文檔（根）節(jié)點。樹的根被稱為文檔節(jié)點或者根節(jié)點。以下面的XML文檔為例進行說明，文檔如下：

<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>

上面的XML文檔中的節(jié)點例子包括：<classroom>（文檔節(jié)點）、<id>1001</id>（元素節(jié)點）、lang=“en”（屬性節(jié)點）、marry（文本）。

接著說一下節(jié)點關系，包括父（Parent）、子（Children）、同胞（Sibling）、先輩（Ancestor）、后代（Descendant）。在上面的文檔中：

·student元素是id、name、age以及country元素的父。

·id、name、age以及country元素都是student元素的子。

·id、name、age以及country元素都是同胞節(jié)點，擁有相同的父節(jié)點。

·name元素的先輩是student元素和classroom元素，也就是此節(jié)點的父、父的父等。

·classroom的后代是id、name、age以及country元素，也就是此節(jié)點的子，子的子等。

2.XPath語法

XPath使用路徑表達式來選取XML文檔中的節(jié)點或節(jié)點集。節(jié)點是沿著路徑（path）或者步（steps）來選取的。接下來的重點是如何選取節(jié)點，下面給出一個XML文檔進行分析：

<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>

首先列舉出一些常用的路徑表達式進行節(jié)點的選取，如表2-2所示。

表2-2　路徑表達式

通過表2-2中的路徑表達式，我們嘗試著對上面的文檔進行節(jié)點選取。以表格的形式進行說明，如表2-3所示。

表2-3　節(jié)點選取示例

上面選取的例子最后實現(xiàn)的效果都是選取了所有符合條件的節(jié)點，是否能選取某個特定的節(jié)點或者包含某一個指定的值的節(jié)點呢？這就需要用到謂語，謂語被嵌在方括號中，接下來通過表格2-4來解釋謂語的用法。

表2-4　謂語示例

XPath在進行節(jié)點選取的時候可以使用通配符“*”匹配未知的元素，同時使用操作符“|”一次選取多條路徑，還是通過一個表格進行演示，如表2-5所示。

表2-5　通配符“*”與“1”操作符

3.XPath軸

軸定義了所選節(jié)點與當前節(jié)點之間的樹關系。在Python爬蟲開發(fā)中，提取網(wǎng)頁中的信息會遇到這種情況：首先提取到一個節(jié)點的信息，然后想在在這個節(jié)點的基礎上提取它的子節(jié)點或者父節(jié)點，這時候就會用到軸的概念。軸的存在會使提取變得更加靈活和準確。

在說軸的用法之前，需要了解位置路徑表達式中的相對位置路徑、絕對位置路徑和步的概念。位置路徑可以是絕對的，也可以是相對的。絕對路徑起始于正斜杠（/），而相對路徑不會這樣。在兩種情況中，位置路徑均包括一個或多個步，每個步均被斜杠分割：/step/
step/...（絕對位置路徑），step/step/...（相對位置路徑）。

步（step）包括：軸（axis）、節(jié)點測試（node-test）、零個或者更多謂語（predicate），用來更深入地提煉所選的節(jié)點集。步的語法為：軸名稱：：節(jié)點測試[謂語]，大家可能覺比較抽象，通過之后的示例分析，會明白如何使用它。

表2-6列舉了XPath軸中使用的節(jié)點集。