ss3炫酷動效傾斜翻頁效果

可以自己設置倒計時的數

css:

javascript：

是簡易數據分析系列的第 10 篇文章。

原文首發于博客園：簡易數據分析 10。

友情提示：這一篇文章的內容較多，信息量比較大，希望大家學習的時候多看幾遍。

我們在刷朋友圈刷微博的時候，總會強調一個『刷』字，因為看動態的時候，當把內容拉到屏幕末尾的時候，APP 就會自動加載下一頁的數據，從體驗上來看，數據會源源不斷的加載出來，永遠沒有盡頭。

我們今天就是要講講，如何利用 Web Scraper 抓取滾動到底翻頁的網頁。

今天我們的練手網站是知乎數據分析模塊的精華帖，網址為：

https://www.zhihu.com/topic/19559424/top-answers

這次要抓取的內容是精華帖的標題、答題人和贊同數。下面是今天的教程。

1.制作 Sitemap

剛開始我們要先創建一個 container，包含要抓取的三類數據，為了實現滾動到底加載數據的功能，我們把 container 的 Type 選為 Element scroll down，就是滾動到網頁底部加載數據的意思。

在這個案例里，選擇的元素名字為 div.List-item。

為了復習上一節通過數據編號控制條數的方法，我們在元素名后加個 nth-of-type(-n+100)，暫時只抓取前 100 條數據。

然后我們保存 container 這個節點，并在這個節點下選擇要抓取的三個數據類型。

首先是標題，我們取名為 title，選擇的元素名為 [itemprop='zhihu:question'] a：

然后是答題人名字 name 與 贊同數 like，選擇的元素名分別為 #Popover10-toggle a 和 button.VoteButton--up：

2.爬取數據，發現問題

元素都選擇好了，我們按 Sitemap zhihu_top_answers -> Scrape -> Start craping 的路徑進行數據抓取，等待十幾秒結果出來后，內容卻讓我們傻了眼：

數據呢？我要抓的數據呢？怎么全變成了 null？

在計算機領域里，null 一般表示空值，表示啥都沒有，放在 Web Scraper 里，就表示沒有抓取到數據。

我們可以回想一下，網頁上的的確確存在數據，我們在整個的操作過程中，唯一的變數就是選擇元素這個操作上。所以，肯定是我們選擇元素時出錯了，導致內容匹配上出了問題，無法正常抓取數據。要解決這個問題，我們就要查看一下網頁的構成。

3.分析問題

查看一下網頁的構成，就要用瀏覽器的另一個功能了，那就是選擇查看元素。

1.我們點擊控制面板左上角的箭頭，這時候箭頭顏色會變藍。

2.然后我們把鼠標移動到標題上，標題會被一個藍色的半透明遮罩蓋住。

3.我們再點擊一下標題，會發現我們會跳轉到 Elements 這個子面板，內容是一些花花綠綠看不大懂的代碼

做到這里心里別發怵，這些 HTML 代碼不涉及什么邏輯，在網頁里就是個骨架，提供一些排版的作用。如果你平常用 markdown 寫作，就可以把 HTML 理解為功能更復雜的 markdown。

結合 HTML 代碼，我們先看看 [itemprop='zhihu:question'] a 這個匹配規則是怎么回事。

首先這是個樹形的結構：

• 先是一個名字為 h2 的標簽 <h2>...</h2>，它有個 class='ContentItem-title' 的屬性；
• 里面又有個名為 div 的標簽 <div>...</div>，它有個 itemprop='zhihu:question' 的屬性；
• div 標簽里又有一個 名字為 a 的標簽 <a>...</a>；
• a 標簽里有一行字，就是我們要抓取的標題：如何快速成為數據分析師？
• 上句話從可視化的角度分析，其實就是一個嵌套的結構，我把關鍵內容抽離出來，內容結構是不是清晰了很多？

<h2 class='ContentItem-title'/>
 <div itemprop='zhihu:question'/>
 <a>如何快速成為數據分析師？</a>
 </div>
</h2>

我們再分析一個抓取標題為 null 的標題 HTML 代碼。

我們可以很清楚的觀察到，在這個標題的代碼里，少了名為 div 屬性為 itemprop='zhihu:question' 的標簽！這樣導致我們的匹配規則匹配時找不到對應標簽，Web Scraper 就會放棄匹配，認為找不到對應內容，所以就變成 null 了。

找到原因后我們就好解決問題了。

4.解決問題

我們發現，選擇標題時，無論標題的嵌套關系怎么變，總有一個標簽不變，那就是包裹在最外層的，屬性名為 class='ContentItem-title' 的 h2 標簽。我們如果能直接選擇 h2 標簽，不就可以完美匹配標題內容了嗎？

邏輯上理清了關系，我們如何用 Web Scraper 操作？這時我們就可以用上一篇文章介紹的內容，利用鍵盤 P 鍵選擇元素的父節點：

放在今天的課程里，我們點擊兩次 P 鍵，就可以匹配到標題的父標簽 h2 （或 h2.ContentItem-title）：

以此類推，因為答題人名字也出現了 null，我們分析了 HTML 結構后選擇名字的父標簽 span.AuthorInfo-name，具體的分析操作和上面差不多，大家可以嘗試一下。

我的三個子內容的選擇器如下，可以作為一個參考：

最后我們點擊 Scrape 爬取數據，檢查一下結果，沒有出現 null，完美！

5.吐槽時間

爬取知乎數據時，我們會發現滾動加載數據那一塊兒很快就做完了，在元素匹配那里卻花了很多時間。

這間接的說明，知乎這個網站從代碼角度上分析，寫的還是比較爛的。

如果你爬取的網站多了，就會發現大部分的網頁結構都是比較「隨心所欲」的。所以在正式抓取數據前，經常要先做小規模的嘗試，比如說先抓取 20 條，看看數據有沒有問題。沒問題后再加大規模正式抓取，這樣做一定程度上可以減少返工時間。

6.下期預告

這期內容比較多，大家可以多看幾遍消化一下，下期我們說些簡單的內容，講講如何抓取表格內容。

7.推薦閱讀

簡易數據分析 09 | Web Scraper 自動控制抓取數量 & Web Scraper 父子選擇器

簡易數據分析 08 | Web Scraper 翻頁——點擊「更多按鈕」翻頁

019年的你還認為HTML5只是平時在朋友圈刷到的H5鏈接嗎？要知道HTML5可以做的事情遠不止如此！

HTML5不僅擁有強大的應用功能和廣泛的使用范圍，而且它的學習門檻也比Java、C++、Javascript等語言低很多，可以說是非常適合作為零基礎小白打開IT世界大門的第一把鑰匙！

接下來，小編就和大家一起來了解一下，到底什么是HTML5？它究竟好在哪？

HTML5是什么

從技術層面來說，HTML5就是HTML5+CSS3+JS的合集。HTML5用于實現我們能夠看到的所有網站，是包含一定特效的移動端營銷網頁，簡單概括，就是用代碼實現一張由設計師設計好的網頁圖片。HTML5做出的作品也會被稱為場景應用，有些作品與移動端PPT類似。經常能見到的形式就是滑動翻頁。

HTML5的基本組成

HTML5=HTML+CSS+JavaScript

HTML指的是結構，使整個網頁中有標題，有列表，有圖片等。

CSS指樣式，也就是標題文字的字體大小、顏色、字體；圖片的大小；某個塊的背景色或背景圖等

JS即JavaScript，指的是行為，例如在網頁上四處飄動的廣告；圖片滾動；瀏覽淘寶時鼠標移動到商品時，放大商品的效果等。

如果說HTML是人體的骨架，CSS就好比人體的血肉架，JavaScript就好比人的各類動作，這些合在一起基本就是前端工程師的基本要求了。

HTML5未來發展前景

HTML5作為移動互聯網的行業新貴，它的快速發展撼動著Android和iOS在應用層面的地位。

由于HTML5的富媒體化與富應用化，目前還沒有一門前端的開發語言能取代HTML5的主流開發地位，無論做PC端網站還是App應用，前端樣式均由HTML5開發，毫無疑問，未來幾年，HTML5依然會是Web應用的最佳解決方案，就業前景十分廣闊。

HTML5就業薪資水平

目前，北京、上海、廣州、深圳等地Web前端工程師的平均薪資已經上漲至13萬元左右，可見，市場對于HTML5開發人才需求正在不斷增加。據國內權威數據統計，未來五年，我國信息化人才總需求量高達1500萬—2000萬人。其中“網絡工程”“UI設計”“Web前端”等人才的缺口最為突出。

說到HTML5前端的薪資之高，不得不提的就是，九月剛剛到來，我們便收到了振奮人心的好消息！云和數據HTML5全棧精英班的畢業學員由又雙叒叕送來了喜報！

云和數據的HTML5全棧精英班，由擁有多年企業真實開發經驗的大咖實戰授課，實行真實企業項目制分組現場教學，學員可以全程參與實際項目的真實開發，積累豐富的項目經驗。來云和數據學HTML5，下一個月薪萬元的就是你！