本節書摘來自華章計算機《python爬蟲開發與項目實戰》一書中的第2章，第2.1節，作者：範傳輝著，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視
爬蟲主要是和網頁打交道，了解web前端的知識是非常重要的。web前端的知識範圍非常廣泛，不可能面面俱到和深入講解，本章主要是抽取web前端中和爬蟲相關的知識點進行講解，幫助讀者了解這些必備的知識，為之後的python爬蟲開發打下基礎。
如果說你隻知道web前端的一個标準，估計肯定是w3c标準了。w3c，即網際網路聯盟，是web技術領域最具權威和影響力的國際中立性技術标準機構。網際網路聯盟（w3c）标準不是某一個标準，而是一系列标準的集合。網頁主要由三部分組成：結構（structure）、表現（presentation）和行為（behavior）。對應的标準也分三方面：結構化标準語言主要包括xhtml和xml，表現标準語言主要包括css，行為标準主要包括對象模型（如w3c dom）、ecmascript等。本節我們主要講解html、css、javascript、xpath和json等5個部分，基本上覆寫了爬蟲開發中需要了解的web前端基本知識。
2.1.1 html
什麼是html标記語言？html不是程式設計語言，是一種表示網頁資訊的符号标記語言。标記語言是一套标記，html使用标記來描述網頁。web浏覽器的作用是讀取html文檔，并以網頁的形式顯示出它們。浏覽器不會顯示html标記，而是使用标記來解釋頁面的内容。html語言的特點包括：
可以設定文本的格式，比如标題、字号、文本顔色、段落，等等。
可以建立清單。
可以插入圖像和媒體。
可以建立表格。
超連結，可以使用滑鼠點選超連結來實作頁面之間的跳轉。
下面從html的基本結構、文檔設定标記、圖像标記、表格和超連結五個方面講解。
1.?html的基本結構
首先在浏覽器上通路google網站（如圖2-1所示），右鍵檢視源代碼，如圖2-2所示。
從谷歌首頁的源代碼中可以分析出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>等等标記，正是由這些内容組成了我們所看見的網頁。
< meta>内容< /meta>：頁面的元資訊（meta-information）。提供有關頁面的元資訊，比如針對搜尋引擎和更新頻度的描述和關鍵詞。注意meta标記必須放在head元素裡面。
2.?文檔設定标記
文檔設定标記分為格式标記和文本标記。下面通過一個标準的html文檔對格式标記進行講解，文檔如下所示：
在浏覽器中打開運作，效果如圖2-3所示。
格式标記包括：
< br>：強制換行标記。讓後面的文字、圖檔、表格等等，顯示在下一行。
< p>：換段落标記。換段落，由于多個空格和回車在html中會被等效為一個空格，是以html中要換段落就要用< p>，< p>段落中也可以包含
段落。例如： < p>this is a paragraph.< /p>。
< center>：居中對齊标記。讓段落或者是文字相對于父标記居中顯示。
< pre>：預格式化标記。保留預先編排好的格式，常用來定義計算機源代碼。和< p>進行一下對比，就可以了解。
< li>：清單項目标記。每一個清單使用一個< li>标記，可用在有序清單(< ol>)和無序清單(< ul>)中。
< ul>：無序清單标記。< ul>聲明這個清單沒有序号。
< ol>：有序清單标記。可以顯示特定的一些順序。有序清單的type屬性值"1"表示阿拉伯數字1.2.3等等；預設type屬性值"a"表示大小字母a、b、c等等；上面的程式使用屬性"a"，這表示小寫字母a、b、c等等；"Ⅰ"表示大寫羅馬數字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等；"ⅰ"表示小寫羅馬數字ⅰ、ⅱ、ⅲ、ⅳ等等。注意：清單可以進行嵌套。
< dl>< dt>< dd>：定義型清單。對清單條目進行簡短說明。
< hr>：水準分割線标記。可以用作段落之間的分割線。
< div>：分區顯示标記，也稱為層标記。常用來編排一大段的html段落，也可以用于将表格式化，和
很相似，可以多層嵌套使用。
接下來通過一個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>：表示強調，通常顯示為斜體字。
< strong>：表示強調，通常顯示為粗體字。
< small>：小型字型标記。
< big>：大型字型标記。
< u>：下劃線字型标記。
3.?圖像标記
< img>稱為圖像标記，用來在網頁中顯示圖像。使用方法為：< img src="路徑/檔案名.圖檔格式"width="屬性值"height="屬性值"border="屬性值"alt="屬性值">。< img>标記主要包括以下屬性：
src屬性用來指定我們要加載的圖檔的路徑、圖檔的名稱以及圖檔格式。
width屬性用來指定圖檔的寬度，機關為px、em、cm、mm。
height屬性用來指定圖檔的高度，機關為px、em、cm、mm。
border屬性用來指定圖檔的邊框寬度，機關為px、em、cm、mm。
alt屬性有三個作用：1）當網頁上的圖檔被加載完成後，滑鼠移動到上面去，會顯示這個圖檔指定的屬性文字；2）如果圖像沒有下載下傳或者加載失敗，會用文字來代替圖像顯示；3）搜尋引擎可以通過這個屬性的文字來抓取圖檔。
我們可以在浏覽器上通路部落格園首頁，對部落格園首頁的圖檔進行審查，就可以看到的img标記的使用方法，如圖2-5所示。
4.?超連結的使用
爬蟲開發中經常需要抽取連結，連結的引用使用的是< a>标記。
< a>标記的基本文法：< a href="連結位址"target="打開方式"name="頁面錨點名稱">連結文字或者圖檔< /a>。< a>标記主要包括以下屬性：
href屬性值是連結的位址，連結的位址可以是一個網頁，也可以是一個視訊、圖檔、音樂等。
target屬性用來定義超連結的打開方式。當屬性值為_blank時，作用是在一個新的視窗中打開連結；當屬性值為_self（預設值）時，作用是在目前視窗中打開連結；當屬性值為_parent時，作用是在在父視窗中打開頁面；當屬性值為_top時，在頂層視窗中打開檔案。
name屬性用來指定頁面的錨點名稱。
5.?表格
表格的基本結構包括< table>、< caption>、< tr>、< td>和< th>等标記。
< table>标記的基本格式為< table屬性1="屬性值1"屬性2="屬性值2"......>表格内容< /table>。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表示僅有行分割線；clos表示僅有列分割線；groups表示僅在行組和列組之間有分割線。
< caption>标記用于在表格中使用标題。< caption>屬性的插入位置，直接位于< table>屬性之後，< tr>表格行之前。< caption>标記中align屬性可以取四個值：top表示标題放在表格的上部；bottom表示标題放在表格的下部；left表示标題放在表格的左部；right表示标題放在表格的右部。
< tr>标記用來定義表格的行，對于每一個表格行，都是由一對< tr>...< /tr>标記表示，每一行< tr>标記内可以嵌套多個< td>或者< th>标記。< tr>标記中的常見屬性包括：
bgcolor屬性用來設定背景顔色，格式為bgcolor="顔色值"。
align屬性用來設定垂直方向對齊方式，格式為align="值"。值為bottom時，表示靠頂端對齊；值為top時，表示靠底部對齊；值為middle時，表示居中對齊。
valign屬性用來設定水準方向對齊方式，格式為valign="值"。值為left時，表示靠左對齊；值為right時，表示靠右對齊；值為center時，表示居中對齊。
< td>和< th>都是單元格的标記，其必須嵌套在< tr>标記内，成對出現。< th>是表頭标記，通常位于首行或者首列，< th>中的文字預設會被加粗，而< td>不會。< td>是資料标記，表示該單元格的具體資料。< td>和< th>兩者的标記屬性都是一樣的，常用屬性如下：
bgcolor設定單元格背景。
align設定單元格對齊方式。
valign設定單元格垂直對齊方式。
width設定單元格寬度。
height設定單元格高度。
rowspan設定單元格所占行數。
colspan設定單元格所占列數。
下面通過一個html文檔來示範表格的使用，文檔如下：
在浏覽器中打開運作，效果如圖2-6所示。
2.1.2 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樣式檔案以“.css”為擴充名，在< head>内（不是在< style>标記内）使用< link>标記将css樣式檔案連結到html檔案内。例如，< link rel="stylesheet" type="text/css" href="style.css">。
css規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。選擇器通常是需要改變樣式的html元素。每條聲明由一個屬性和一個值組成。屬性（property）是希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值由冒号分開。例如：h1 { color : blue ; font-size : 12px}。其中h1為選擇器，color和font-size是屬性，blue和12px是屬性值，這句話的意思是将h1标記中的顔色設定為藍色，字型大小為12px。根據選擇器的定義方式，可以将樣式表的定義分成三種方式：
html标記定義：上面舉的例子就是使用的這種方式。假如想修改
...
的樣式，可以定義css：p{屬性：屬性值；屬性1：屬性值1}。p可以叫做選擇器，定義了标記中内容所執行的樣式。一個選擇器可以控制若幹個樣式屬性，他們之間需要用英語的“;”隔開，最後一個可以不加“;”。
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（更細）；一種是使用數字，如100、200、300～900，400=normal，而700=bold。
3.?背景屬性
可以用背景屬性定義背景顔色、背景圖檔、背景重複和背景的位置，内容如下：
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:#f60 url(images/bg、jpg) no-repeat top center。
4.?文本屬性
可以用文本屬性設定行高、縮進和字元間距，具體如下：
text-align設定文本對齊方式，屬性值可以取left、center、right。
line-height設定文本行高，屬性值可以取具體數值，來設定固定的行高值。也可以取百分比，是基于字型大小的百分比行高。
text-indent代表首行縮進，如text-indent:50px，意思是首行縮進50個像素。
letter-spacing用來設定字元間距。屬性值預設是normal，規定字元間沒有額外的空間；可以設定具體的數值（可以是負值），如letter-spacing: 3px；可以取inherit，從父元素繼承letter-spacing屬性的值。
5.?清單
在html中，有兩種類型的清單：無序和有序。其實使用css，可以列出進一步的樣式，并可用圖像作清單項标記。接下來主要講解以下幾種屬性：
list-style-type用來指明清單項标記的類型。常用的屬性值有：none（無标記）、disc（預設，标記是實心圓）、circle（标記是空心圓）、square（标記是實心方塊）、decimal（标記是數字）、decimal-leading-zero（0開頭的數字标記）、lower-roman（小寫羅馬數字i、ii、iii、iv、v等）、upper-roman（大寫羅馬數字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指的是清單項标記放置在文本以内，且環繞文本根據标記對齊。outside為預設值，保持标記位于文本的左側，清單項标記放置在文本以外，且環繞文本不根據标記對齊。inherit規定應該從父元素繼承list-style-position屬性的值。
list-style-image用來設定設定圖像清單标記。屬性值可以為url（圖像的路徑）、none（預設無圖形被顯示）、inherit （從父元素繼承list-style-image屬性的值）。例如，ul{list-style-image:url('image.gif');}，意思是給ul标記前面的标記設定為image.gif圖檔。
以上就将關于css的基本知識講解完成了，接下來通過一個綜合的例子将所有知識點進行融合，采用嵌入式樣式表的方式，html文檔如下：
在浏覽器中打開文檔，通過運作效果和之前的知識點進行對比，将更加容易了解。效果如圖2-7所示。
2.1.3 javascript
javascript是一種輕量級的腳本語言，和python語言是一樣的，隻不過javascript是由浏覽器進行解釋執行。javascript可以插入html頁面中，可由所有的現代浏覽器執行。由于javascript是一門新的程式設計語言，知識點很多，本節不進行深入講解，主要介紹一下javascript的用法和基本文法。大家如果想深入學習，需要額外看一些教程。
如何使用javascript呢？主要有直接插入代碼和外部引用js檔案兩種做法：
1）直接插入代碼。在< script>< /script>标記中編寫代碼。javascript代碼可以直接嵌在網頁的任何地方，不過通常我們都把javascript代碼放到< head>中，示例如下：
< script>标記中包含的就是javascript代碼，可以直接被浏覽器執行，彈出一個警告框。
2）外部引用js檔案。把javascript代碼放到一個單獨的.js檔案，然後在html中通過< script src='目标文檔的url'>< /script>的方式來引入js檔案，其中目标文檔的url即是連結外部的js檔案。示例如下：
這樣/static/js/jquery.js就會被浏覽器執行。把javascript代碼放入一個單獨的.js檔案中更利于維護代碼，并且多個頁面可以各自引用同一份.js檔案，減少程式員編碼量。在頁面中多次編寫javascript代碼，浏覽器按照順序依次執行。
一般在正常的開發中都是采用上述兩種做法結合的方式，之後在做python爬蟲開發時會經常見到。
為了能讓零基礎的讀者在讀完本節後能看懂簡單的javascript代碼，下面将從基本文法、資料類型和變量、運算符和操作符、條件判斷、循環和函數等六個方面介紹javascript基礎。
1.?javascript基本文法
javascript嚴格區分大小寫，javascript會忽略關鍵字、變量名、數字、函數名或其他各種元素之間的空格、制表符或換行符。我們可以使用縮進、換行來使代碼整齊，提高可讀性。一條完整的語句如下：
這條語句定義了一個x的變量。從這條語句中可以看到以分号“;”作為結束。一行可以定義多條語句，但不推薦這麼做。最後一個語句的分号可以省略，但盡量不要省略。示例語句如下：
語句塊是一組語句的集合，使用{...}形成一個塊block。例如，下面的代碼先做了一個判斷，如果判斷成立，将執行{...}中的所有語句：
{...}還可以嵌套，形成層級結構。将以上的代碼進行改造，程式如下：
注釋主要分為單行注釋和多行注釋。單行注釋使用//作為注釋符，多行注釋使用/ /來注釋内容。示例如下：
2.?資料類型和變量
和python一樣，javascript也有自己的資料類型。在javascript中定義了以下幾種資料類型：
number類型：javascript中不區分整數和浮點數，統一使用number表示。示例如下：100（整數）、0.45（浮點數）、1.234e3（科學計數法表示）、-10（負數）、nan（無法計算時候使用）、infinity（無限大）、0xff（十六進制）。
字元串類型：字元串是以單引号或雙引号括起來的任意文本，比如'abc'，"xyz"等。
布爾值類型：一個布爾值隻有true、false兩種值。
數組類型：數組是一組按順序排列的集合，集合的每個值稱為元素。javascript的數組可以包括任意資料類型，示例如下：var array = [1, 2, 3.14, 'hello', null, true]。上述數組包含6個元素。數組用[]表示，元素之間用“,”分隔。另一種建立數組的方法是通過array()函數實作，示例如下：var array = new array(1, 2, 3)。數組的元素可以通過索引來通路，索引的起始值為0。
對象類型：javascript的對象是一組由鍵-值組成的無序集合，類似python中的字典。示例如下：var person = {name: 'qiye',age: 24,tags: ['python', 'web', 'hacker'],city: 'beijing'，man:true}。javascript對象的鍵都是字元串類型，值可以是任意資料類型。要擷取一個對象的屬性，我們用“對象變量.屬性名”的方式，如person. name。
javascript是弱類型的程式設計語言，聲明變量的時候都是使用關鍵字var，沒有int、char之說，為變量指派時會自動判斷類型并進行轉換。變量名是大小寫英文、數字、“$”和“_”的組合，且不能用數字開頭。變量名也不能是javascript的關鍵字，如if、while等。申明一個變量用var語句，比如：var s_007 = '007'。
3. 運算符和操作符
javascript中的運算符和操作符，與python中的用法非常相似，表2-1總結了javascript常用的運算符和操作符。
4.?條件判斷
javascript使用if(){...}else{...}來進行條件判斷，和c語言的使用方法一樣。例如，根據年齡顯示不同内容，可以用if語句實作如下：
5.?循環
javascript的循環有兩種：一種是for循環，一種是while循環。
首先說一下for循環。舉個例子，計算1到100相加之和，程式如下：
for循環常用來周遊數組。另外for循環還有一個變體是for...in循環，它可以把一個對象的所有屬性依次循環出來，示例如下：
最後說一下while循環。使用方法和c語言一樣，分為while(){...}循環和do{...}while()，具體使用不再細說。
6.?函數
在javascript中，定義函數使用function關鍵字，使用方式如下：
上述add()函數的定義如下：
function指出這是一個函數定義；
add是函數的名稱。
(x,y)括号内列出函數的參數，多個參數以“,”分隔。
{...}之間的代碼是函數體，可以包含若幹語句，甚至可以沒有任何語句。
調用函數時，按順序傳入參數即可：add(10,9); //傳回19。
由于javascript允許傳入任意個參數而不影響調用，是以傳入的參數比定義的參數多也沒有問題，雖然函數内部并不需要這些參數：add(10, 9,'blablabla'); //傳回19。
傳入的參數比定義的少也沒有問題：add(); //傳回nan。此時add(x,y)函數的參數x和y收到的值為undefined，計算結果為nan。
2.1.4 xpath
xpath是一門在xml文檔中查找資訊的語言，被用于在xml文檔中通過元素和屬性進行導航。xpath雖然是被設計用來搜尋xml文檔，不過它也能很好地在html文檔中工作，并且大部分浏覽器也支援通過xpath來查詢節點。在python爬蟲開發中，經常使用xpath查找提取網頁中的資訊，是以xpath非常重要。
xpath既然叫path，就是以路徑表達式的形式來指定元素，這些路徑表達式和我們在正常的電腦檔案系統中看到的表達式非常相似。由于xpath一開始是被用來搜尋xml文檔的，是以接下來就以xml文檔為例子來講解xpath。接下來從節點、文法、軸和運算符等四個方面講解xpath的使用。
1.?xpath節點
在xpath中，xml文檔是被作為節點樹來對待的，有七種類型的節點：元素、屬性、文本、命名空間、處理指令、注釋以及文檔（根）節點。樹的根被稱為文檔節點或者根節點。以下面的xml文檔為例進行說明，文檔如下：
上面的xml文檔中的節點例子包括： < classroom>（文檔節點）、< id>1001< /id>（元素節點）、lang="en"（屬性節點）、marry（文本）。
接着說一下節點關系，包括父（parent）、子（children）、同胞（sibling）、先輩（ancestor）、後代（descendant）。在上面的文檔中：
student元素是id、name、age以及country元素的父。
id、name、age以及country元素都是student元素的子。
id、name、age以及country元素都是同胞節點，擁有相同的父節點。
name元素的先輩是student元素和classroom元素，也就是此節點的父、父的父等。
classroom的後代是id、name、age以及country元素，也就是此節點的子，子的子等。
2.?xpath文法
xpath使用路徑表達式來選取xml文檔中的節點或節點集。節點是沿着路徑(path)或者步(steps)來選取的。接下來的重點是如何選取節點，下面給出一個xml文檔進行分析：
首先列舉出一些常用的路徑表達式進行節點的選取，如表2-2所示。
通過表2-2中的路徑表達式，我們嘗試着對上面的文檔進行節點選取。以表格的形式進行說明，如表2-3所示。
上面選取的例子最後實作的效果都是選取了所有符合條件的節點，是否能選取某個特定的節點或者包含某一個指定的值的節點呢？這就需要用到謂語，謂語被嵌在方括号中，接下來通過表格2-4來解釋謂語的用法。
xpath在進行節點選取的時候可以使用通配符“*”比對未知的元素，同時使用操作符“|”一次選取多條路徑，還是通過一個表格進行示範，如表2-5所示。
3.?xpath軸
軸定義了所選節點與目前節點之間的樹關系。在python爬蟲開發中，提取網頁中的資訊會遇到這種情況：首先提取到一個節點的資訊，然後想在在這個節點的基礎上提取它的子節點或者父節點，這時候就會用到軸的概念。軸的存在會使提取變得更加靈活和準确。
在說軸的用法之前，需要了解位置路徑表達式中的相對位置路徑、絕對位置路徑和步的概念。位置路徑可以是絕對的，也可以是相對的。絕對路徑起始于正斜杠（/），而相對路徑不會這樣。在兩種情況中，位置路徑均包括一個或多個步，每個步均被斜杠分割：/step/step/...（絕對位置路徑），step/step/...（相對位置路徑）。
步（step）包括：軸（axis）、節點測試（node-test）、零個或者更多謂語（predicate），用來更深入地提煉所選的節點集。步的文法為：軸名稱::節點測試[謂語]，大家可能覺比較抽象，通過之後的示例分析，會明白如何使用它。
表2-6列舉了xpath軸中使用的節點集。
首先給出一個xml文檔，執行個體分析就按照這個文檔來進行，文檔如下：
針對上面的文檔進行示例示範，如表2-7所示。
4.?xpath運算符
xpath表達式可傳回節點集、字元串、邏輯值以及數字。表2-8列舉了可用在xpath表達式中的運算符。
2.1.5 json
json是javascript對象表示法（javascript object notation），用于存儲和交換文本資訊。json比xml更小、更快、更易解析，是以json在網絡傳輸中，尤其是web前端中運用非常廣泛。json使用javascript文法來描述資料對象，但是json仍然獨立于語言和平台。json解析器和json庫支援許多不同的程式設計語言，其中就包括python。
下面主要講解一下json的文法，具體的存儲解析放到第5章中進行講解。json文法非常簡單，主要包括以下幾個方面：
json名稱/值對。json資料的書寫格式是：名稱/值對。名稱/值對包括字段名稱（在雙引号中），緊接着是一個冒号，最後是值。例如，"name" : "qiye"，非常像python中字典。
json值。json值可以是：數字（整數或浮點數）、字元串（在雙引号中）、邏輯值（true或false）、數組（在方括号中）、對象（在花括号中）、null。
json對象。json對象在花括号中書寫，對象可以包含多個名稱/值對。例如：{ "name":"qiye" , "age":"20" }，其實就是python中的字典。
json數組。json數組在方括号中書寫，數組可包含多個對象。例如：{"reader": [{ "name":"qiye" , "age":"20"},{ "name":"marry" , "age":"21" }]}，這裡對象" reader "是包含兩個對象的數組。