標籤：

XML/HTML/JSON——數據抓取過程中不得不知的幾個概念

01-26

之前寫了很多網路數據數據抓取的案例，無論是關於R語言還是Python的，裡面大量使用xmlhtmlcssajaxjson等這些概念，可是一直沒有對這些概念做詳細的梳理，導致很多小夥伴兒看的摸不著頭腦。

近期基礎的網抓教程告一段落，從今天起，給大家梳理一些常用的web概念（當然是一個外行小白的視角來進行講解，如有不當之處，還請見諒）。概念的梳理對於整體網抓思路的開拓至關重要。

幾天主要圍繞三個核心概念來進行介紹：

  • xml
  • html
  • json

xml的官方解釋是可擴展標記語言，主要用於數據傳輸，而HTML則是超文本標記語言，主要用於網頁顯示。

從語法上來講，xml和html可以被歸為一類，他們遵循的語法一致，只是在web中充當的角色和標籤名稱上有差異。

<?xml version="1.0" encoding="ISO-8859-1"?><note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don"t forget the meeting!</body></note>

一個典型的xml文檔如上所示，第一行是xml的文檔頭聲明，主要包含xml的版本、字元編碼信息。之後的幾行時xml文檔的主題內容。該xml文件包含的內容信息均以標籤對進行封裝，每一個值都包括在起始標籤（<label>）和閉合標籤（<label/>）之間，標籤層級間允許嵌套。

所以上面文檔的內容邏輯是:

note--to =George--from =John--heading=Reminder--body =Don"t forget the meeting!

你也可以把它理解成鍵值對形式：（key-value），只是鍵名都是頭尾對稱的。所有的<label>都被稱為標籤，或者元素，而對應的<label>text<label/>中間包括的內容即為標籤的內容或者值。在xml文檔中，沒有預定義的固定標籤，label命名是很自由的。使用者要根據自己業務或者工程項目的需要自己定義,只要不涉及保留字，並且文檔格式無誤就可以。

而html與xml的主要區別是，它有約定俗成的固定文檔結構，有預定義的一系列固定標籤。

<!DOCTYPE html><html> <head> <title>我的第一個 HTML 頁面</title> </head> <body> <p>body 元素的內容會顯示在瀏覽器中。</p> <p>title 元素的內容會顯示在瀏覽器的標題欄中。</p></body>

一個典型的html文檔如上所示，第一句同xml，仍然是html文檔的頭部聲明，告知html的版本信息。html的固定格式體現在，每一個html的內容構成，都要包含head和body，head用於解釋該html的標題、編碼方式以及引用的外部文檔信息，body則用於存放將呈現在瀏覽器中的內容信息。不僅如此，因為html文檔最終是要通過瀏覽器渲染後，呈現給人們友好的閱覽體驗，html文檔內部預定義了大量的固定標籤，如各種表單、列表、區塊、交互菜單等內容。詳細的html內部標籤關鍵詞可以參閱w3c的參考手冊。

w3school.com.cn/html/in

單純的html僅僅是靜態文本，瀏覽器的渲染是基於html文檔中各級標籤內所定義的屬性（<label stylex="fashion">）以及外部css樣式表來完成的。css樣式表相當於一個構建複雜網頁的美容寶典，裡面規定了html文檔內部的所有字體、線條、區塊、表單、控制項、菜單以及背景等所有元素對象的外觀、粗細、顏色、背景色、間距等。css通常以外部獨立文件的形式嵌入在html頭部標籤（<head>）的script標籤中。

<link media="all" type="text/css" rel="stylesheet" href="https://edu.hellobi.com/libs/formvalidation/css/formValidation.min.css">

瀏覽器在調用html文檔並同時按照所載入的css樣式表對整個頁面完成渲染，所以才有了看上去非常漂亮的網頁。

可以看到html雖然與xml的語法一脈相承，但是html因為承擔的角色比較特殊，它的結構體系有固定的模板，有大量常用的預定義標籤，內部還需要嵌入css樣式表，引用js動態腳本，看起來整個結構非常龐大。而xml則相當精簡，適合用於單純的數據存儲與傳輸。

以上是關於xml與html的大致差異（想要了解一些深入的差異或概念，仍然需要去w3c深挖教程）。

json

JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。它起源於JavaScript的數據對象，之後獨立成為一種web較為流行的數據交換標準。

json的語法，是非常明顯的鍵值對結構，比較利於理解：

以上xml文檔如果使用json來寫，應該是這樣的。

{ "note":{ "to":"George", "from":"John", "heading":"Reminder", "body":"Don"t forget the meeting!" }}

json的語法，是非常明顯的鍵值對(key-value)，key不允許重複，且需以雙引號包括，鍵值對中允許嵌套，值可以為字元(使用雙引號或者單引號包括)、數值、布爾型(truefalse)、數組（[1,2,3,5]）或者null。同級元素間以「,」隔開，花括弧包含的的內容被稱為對象，鍵值對中值也允許為對象。

json在某種程度上跟xml有點像，json也是只有一套語法標準，不存在固定的文檔模板或者預定義標籤（或者說鍵名），這樣xml和json都可以用於書寫自定義的數據對象。

講到這裡已經可以大概看出來xml與json的區別了。兩者都可以作為數據存儲對象，有著類似鍵值對的語法結構。但是xml由於是對稱標籤結構，而json僅適用「{」，「[」，「<」,「>」等標點符號來作為層級和標籤起始點結構，所以json省去了大量冗餘字元信息，這也是網路上爭吵不斷的關於xml和json孰優孰略的焦點之一。

接下來從應用角度來審視一下xml和json在桌面環境中的實際應用。

在當前桌面端以及web端應用中，xml主要用於書寫配置文件，json則用在web場景下的http請求參數提交或者數據返回。當然以上強調了主要，json也可以用於桌面軟體配置文件，xml也可以用於網路文件傳輸和數據交換。

我們熟知的office平台，所有的模板文件、配色文件均以xml書寫的。

<?xml version="1.0" encoding="utf-8"?><a:clrScheme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Aspect"> <a:dk1> <a:sysClr val="windowText" lastClr="000000"/> </a:dk1> <a:lt1> <a:sysClr val="window" lastClr="FFFFFF"/> </a:lt1> <a:dk2> <a:srgbClr val="323232"/> </a:dk2> <a:lt2> <a:srgbClr val="E3DED1"/> </a:lt2> <a:accent1> <a:srgbClr val="F07F09"/> </a:accent1> <a:accent2> <a:srgbClr val="9F2936"/> </a:accent2> <a:accent3> <a:srgbClr val="1B587C"/> </a:accent3> <a:accent4> <a:srgbClr val="4E8542"/> </a:accent4> <a:accent5> <a:srgbClr val="604878"/> </a:accent5> <a:accent6> <a:srgbClr val="C19859"/> </a:accent6> <a:hlink> <a:srgbClr val="6B9F25"/> </a:hlink> <a:folHlink> <a:srgbClr val="B26B02"/> </a:folHlink></a:clrScheme>

這是一個典型的office配色文檔。（注意office平台的諸多配置文件都是多程序共享的，配色文件在Word、excel、ppt中是共享的）。

但是在微軟的新版BI工具中，PowerBI的配色文件已經開始使用json語法來書寫了。

{ "name": "Economists", "dataColors": [ "#D5695D", "#C6332C", "#5D8CA8", "#016392", "#65A479", "#098154", "#e9f3ea", "#f8f2e4" ], "background": "#e9f3ea", "foreground": "#f8f2e4", "tableAccent": "#568410"}

這是一個PowerBI的配色模板文件，使用json書寫的，json文件僅適用後綴名（.json）標識，沒有文檔頭（這一點與xml有區別）。可以很明顯的看到，該文件定義了五個鍵值對，該份配色表的名稱，以及一個包含8個顏色色值的數組，背景色、前景色、表格底色。

在商務可視化場景中非常出色的BI工具Tabeau，也使用了xml作為配色模板的書寫語言：

<?xml version="1.0" encoding="utf-8"?><workbook> <preferences> <color-palette name="ECO-01" type="regular"> <color>#00516C</color> <color>#5D91A7</color> <color>#00A4DC</color> <color>#6BCFF6</color> <color>#008982</color> <color>#6DBBBF</color> <color>#7A250F</color> <color>#EA8F74</color> <color>#A8A9AD</color> </color-palette> <color-palette name="ECO-02" type="regular"> <color>#adadad</color> <color>#7bd3f6</color> <color>#7c260b</color> <color>#ee8f71</color> <color>#76c0c1</color> <color>#a18376</color> <color>#c3d6df</color> <color>#c9c9c9</color> <color>#c9c9c9</color> </color-palette> </preferences></workbook>

這一份配色表，定義了兩套色板，主體是xml語法，但是格式化之後，非常簡單易懂。

隨便挑了三個軟體的配置文件，結果有兩個時xml寫的，一個是json的。從目前的發展趨勢來看，xml定義的標準比較早，屬於先發優勢，json則因為輕量級，冗餘信息少，應用場景在逐步擴展。

以上三個場景均是在桌面端，接下來讓我們從web端場景下來看一看：

網易雲課堂的課程內容信息是非同步載入，它的請求提交參數和相應數據格式均為json格式的。

知乎live的課程信息，參數提交和相應也是首選json。

B站的視頻信息列表，相應數據格式josn格式的的。

豆瓣電影短評的數據請求數據返回是html格式的（可以歸為xml類，因為語法和解析工具都是一致的）。

可以看到，主流網站涉及非同步載入的內容，大多都選擇了json作為數據交換格式，而靜態網站或者不願意開放api的網站，仍然使用html/xml較多。但是隨著今後web端ajax技術擴散程度的加深，相信json標準會有更廣泛的應用。

以上我列舉了xml/html和json在桌面端和web的應用案例（非隨機抽的，沒有任何代表性）。

說了這麼多，xml和json與我們想要深入學習的網路數據抓取之間，到底什麼關係呢。

xml和json在某種程度上幾乎決定了你在寫數據抓取程序時所使用的技術方案和處理流程。

我們知道在抓取數據的流程中，成功構造請求是第一步，涉及請求構造的篇章，我已經在之前講過很多，無論是GET請求還是POST請求，無論是傳遞參數，還是傳遞表單。

xml/html和json則涉及到網路數據抓取的第二步——網頁與數據解析。

因為xml/html是標記語言，雖然在某種程度上具有key-value的形式，但是因為標籤對這種形式，無論是R語言還是Python都沒法直接將它轉化為關係表。所以請求到的xml/html需要使用Xpath或者css表達式進行提取，關於這兩種技術，前面有專門的篇章講解。

左手用R右手Python系列16——XPath與網頁解析庫

左手用R右手Python系列17——CSS表達式與網頁解析

R語言數據抓取實戰——RCurl+XML組合與XPath解析

左手用R右手Python系列——模擬登陸教務系統

Python網路數據抓取實戰——Xpath解析豆瓣書評

左手用R右手Python——CSS網頁解析實戰

左手用R右手Python系列——模擬登陸教務系統

xml和html語法一致，所以使用的解析工具也一致。

json本身就是半結構化數據，作為流行且通用的數據交換格式，R語言和Python都有現成的介面工具可以調用，以及半結構化工具的對標容器。json還有一種應用場景即是noSQL資料庫的存儲結構，典型如mongoDB,不過在mongodb中，將json標準擴展為bson，增加了其作為容器的性能和兼容性。mongoDB和R與Python都有結構工具可以連接。

R語言中的jsonlite包，有現成的fromJSON()函數，可以直接將json返回值轉換為list或者data.frame(是否可以取決於json內部結構是否符合關係型標準)。Python中的json包，提供了json.loads()用於載入並轉換json數據為dict。

網易雲課堂Excel課程爬蟲思路

左手用R右手Pyhon系列——趣直播課程抓取實戰

Python數據抓取與可視化實戰——網易雲課堂人工智慧與大數據板塊課程實戰

R語言網路數據抓取的又一個難題，終於攻破了！

R語言爬蟲實戰——網易雲課堂數據分析課程板塊數據爬取

R語言爬蟲實戰——知乎live課程數據爬取實戰

本文內容比較散，簡要介紹了xml和json的概念、語法、應用場景以及與R語言和Python的常用介面轉換函數。對xml及其解析工具的的掌握決定著html網頁解析效率，對json的掌握則決定著調用伺服器api並處理返回值的效率，所以xml和json相關內容在網路數據獲取中至關重要。

好在這兩種技術涉及到的技術工具，之前陸陸續續都有過簡要講解，當然這些內容每一塊單列出來都足夠龐大，想要深入了解需要參考專業技術書籍或者W3C的在線文檔，但是因為都有現成的函數封裝，我們幾乎不用理解底層就可以輕鬆完成網頁解析和數據整理。

常用xml/json/html格式化工具：

tool.oschina.net/codefo

json.cn/

bejson.com/

tool.chinaz.com/Tools/U

tool.oschina.net/encode

在線課程請點擊文末原文鏈接：

Hellobi Live | 9月12日 R語言可視化在商務場景中的應用

往期案例數據請移步本人GitHub：

github.com/ljtyduyu/Dat

推薦閱讀：

※一捅到底的架構
※Bumpover.js - 牢固而趁手的數據校驗轉換庫

TAG:XML | JSON | HTML |