小白學 Python 爬蟲（8）：網頁基礎

時間 2019-12-02

標籤白學 python 爬蟲網頁基礎欄目 Python 简体版

原文原文鏈接

人生苦短，我用 Pythoncss

前文傳送門：html

小白學 Python 爬蟲（1）：開篇node

小白學 Python 爬蟲（2）：前置準備（一）基本類庫的安裝數據庫

小白學 Python 爬蟲（3）：前置準備（二）Linux基礎入門瀏覽器

小白學 Python 爬蟲（4）：前置準備（三）Docker基礎入門app

小白學 Python 爬蟲（5）：前置準備（四）數據庫基礎框架

小白學 Python 爬蟲（6）：前置準備（五）爬蟲框架的安裝dom

小白學 Python 爬蟲（7）：HTTP 基礎ide

先贊後看是個好習慣工具

網頁的組成

咱們的數據來源是網頁，那麼咱們在真正抓取數據以前，有必要先了解一下一個網頁的組成。

網頁是由 HTML 、 CSS 、JavaScript 組成的。

HTML 是用來搭建整個網頁的骨架，而 CSS 是爲了讓整個頁面更好看，包括咱們看到的顏色，每一個模塊的大小、位置等都是由 CSS 來控制的， JavaScript 是用來讓整個網頁「動起來」，這個動起來有兩層意思，一層是網頁的數據動態交互，還有一層是真正的動，好比咱們都見過一些網頁上的動畫，通常都是由 JavaScript 配合 CSS 來完成的。

咱們打開 Chrome 瀏覽器，訪問博客站的首頁，打開 F12 開發者工具，能夠看到：

在選項 Elements 中能夠看到網頁的源代碼，這裏展現的就是 HTML 代碼。

不一樣類型的文字經過不一樣類型的標籤來表示，如圖片用 <img> 標籤表示，視頻用 <video> 標籤表示，段落用 <p> 標籤表示，它們之間的佈局又常經過佈局標籤 <div> 嵌套組合而成，各類標籤經過不一樣的排列和嵌套才造成了網頁的框架。

在右邊 Style 標籤頁中，顯示的就是當前選中的 HTML 代碼標籤的 CSS 層疊樣式，「層疊」是指當在HTML中引用了數個樣式文件，而且樣式發生衝突時，瀏覽器能依據層疊順序處理。「樣式」指網頁中文字大小、顏色、元素間距、排列等格式。

而 JavaScript 就厲害了，它在 HTML 代碼中一般使用 <script> 進行包裹，能夠直接書寫在 HTML 頁面中，也能夠以文件的形式引入。

網頁結構

咱們來手寫一個簡單 HTML 頁面來感覺下。

首先建立一個文本文件，將後綴名改成 .html ，名字能夠自取，寫入以下內容：

<!DOCTYPE  html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <h1>Hello World</h1>
                <div>Hello Python.</div>
            </div>
        </div>
    </body>
</html>

首先，整個文檔是以 DOCTYPE 來開頭的，這裏定義了文檔類型是 html ，整個文檔最外層的標籤是 <html> ，而且結尾還以 </html> 來表示閉和。

這裏簡單講一下，瀏覽器解析 HTML 的時候，並不強制須要每一個標籤都必定要有閉和標籤，可是爲了語義明確，最好每一個標籤都跟上對應的閉和標籤。各位同窗能夠嘗試刪除其中的閉和標籤進行嘗試，並不會影響瀏覽器的解析。

整個 HTML 文檔通常分爲 head 和 body 兩個部分，在 head 頭中，咱們通常會指定當前的編碼格式爲 UTF-8 ，而且使用 title 來定義網頁的標題，這個會顯示在瀏覽器的標籤上面。

body 中的內容通常爲整個 html 文檔的正文，這裏小編簡單寫了幾個 div 的嵌套。

這個頁面的顯示以下：

HTML DOM

在 HTML 中，全部標籤訂義的內容都是節點，它們構成了一個 HTML DOM 樹。

根據 W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點：

整個文檔是一個文檔節點
每一個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每一個 HTML 屬性是屬性節點
註釋是註釋節點

HTML DOM 將 HTML 文檔視做樹結構。這種結構被稱爲節點樹：

經過 HTML DOM，樹中的全部節點都可經過 JavaScript 進行訪問。全部 HTML 元素（節點）都可被修改，也能夠建立或刪除節點。

節點樹中的節點彼此擁有層級關係。

父（parent）、子（child）和同胞（sibling）等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱爲根（root）
每一個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點

下面的圖片展現了節點樹的一部分，以及節點之間的關係：

CSS

前面咱們介紹到 CSS 能夠用來美化網頁，那麼咱們簡單加一點 CSS 修改下頁面的顯示效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style type="text/css">
            .wrapper {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <h1>Hello World</h1>
                <div>Hello Python.</div>
            </div>
        </div>
    </body>
</html>

咱們在 head 中添加了 style 標籤，並註明其中的內容解析方式爲 CSS 。其中的內容的含義是讓文本居中顯示，先看下增長 CSS 後的頁面效果吧：

能夠看到，原來居左的文字已經居中顯示了。

那麼，CSS 是如何表示它要修飾的文檔結構的呢？這就要說到 CSS 選擇器了。

在CSS中，咱們使用CSS選擇器來定位節點。例如，上例中 div 節點的 id 爲 container ，那麼就能夠表示爲 #container ，其中 # 開頭表明選擇 id ，其後緊跟 id 的名稱。另外，若是咱們想選擇 class 爲 wrapper 的節點，即可以使用 .wrapper ，這裏以點 . 開頭表明選擇 class ，其後緊跟 class 的名稱。

另外， CSS 選擇器還支持嵌套選擇，各個選擇器之間加上空格分隔開即可以表明嵌套關係，如 #container .wrapper p 則表明先選擇 id 爲 container 的節點，而後選中其內部的 class 爲 wrapper 的節點，而後再進一步選中其內部的 p 節點。另外，若是不加空格，則表明並列關係，如 div#container .wrapper p.text 表明先選擇 id 爲 container 的 div 節點，而後選中其內部的 class 爲 wrapper 的節點，再進一步選中其內部的 class 爲 text 的 p 節點。這就是 CSS 選擇器，其篩選功能仍是很是強大的。