Python3網絡爬蟲實戰---1六、Web網頁基礎

時間 2019-12-13

標籤 python3 python 網絡爬蟲實戰 web 網頁基礎欄目 Python 简体版

原文原文鏈接

上一篇文章： Python3網絡爬蟲實戰---1五、爬蟲基礎：HTTP基本原理
下一篇文章： Python3網絡爬蟲實戰---1七、爬蟲基本原理

咱們平時用瀏覽器訪問網站的時候，一個個站點形形色色，頁面也各不相同，但有沒有想過它是爲什麼才能呈現出這個樣子的？
那麼本節咱們就來了解一下網頁的基本組成、結構、節點等內容。css

1. 網頁的組成

網頁能夠分爲三大部分，HTML、CSS、JavaScript，咱們把網頁比做一我的的話，HTML 至關於骨架，JavaScript 則至關於肌肉，CSS 則至關於皮膚，三者結合起來才能造成一個完善的網頁，下面咱們分別來介紹一下三部分的功能。html

HTML

HTML 是用來描述網頁的一種語言，其全稱叫作 Hyper Text Markup Language，即超文本標記語言。網頁包括文字、按鈕、圖片、視頻等各類複雜的元素，其基礎架構就是 HTML。不一樣類型的文字經過不一樣類型的標籤來表示，如圖片用 img 標籤表示，視頻用 video 標籤來表示，段落用 p 標籤來表示，它們之間的佈局又常經過佈局標籤 div 嵌套組合而成，各類標籤經過不一樣的排列和嵌套才造成了網頁的框架。
咱們在 Chrome 瀏覽器中打開百度，右鍵單擊審查元素或按 F12 打開開發者模式，切換到 Elements 選項卡便可看到網頁的源代碼，如圖 2-10 所示：node

圖 2-10 源代碼
這就是 HTML，整個網頁就是由各類不一樣的標籤嵌套組合而成的，這些不一樣標籤訂義的節點元素相互嵌套和組合造成了複雜的層次關係，就造成了網頁的架構。jquery

CSS

HTML 定義了網頁的結構，可是隻有 HTML 頁面的佈局會不美觀，可能只是簡單的節點元素的排列，那麼爲了讓網頁看起來更好看一點，在這裏就藉助於 CSS。
CSS，全稱叫作 Cascading Style Sheets，即層疊樣式表。「層疊」是指當在 HTML 中引用了數個樣式文件，而且樣式發生衝突時，瀏覽器能依據層疊順序處理。「樣式」指網頁中文字大小、顏色、元素間距、排列等格式。
CSS是目前惟一的網頁頁面排版樣式標準，有了它的幫助，頁面纔會變得更爲美觀。
在上圖的右側即爲 CSS，例如：segmentfault

#head_wrapper.s-ps-islite .s-p-top {
    position: absolute;
    bottom: 40px;
    width: 100%;
    height: 181px;
}

這就是一個 CSS 樣式，在大括號前面是一個 CSS 選擇器，此選擇器的意思是選中 id 爲 head_wrapper 且 class 爲 s-ps-islite 內部的 class 爲 s-p-top 的元素。大括號內部寫的就是一條條樣式規則，例如 position 指定了這個元素的佈局方式爲絕對佈局，bottom 指定元素的下邊距爲 40 像素，width 指定了寬度爲 100% 佔滿父元素，height 則指定了元素的高度。也就是說咱們將一些位置、寬度、高度等樣式配置統一寫成這樣的形式，大括號括起來，而後開頭再加上一個 CSS 選擇器，就表明這一個樣式對 CSS 選擇器選中的元素生效，這樣元素就會根據此樣式來展現了。
因此在網頁中，通常會統必定義整個網頁的樣式規則，寫入到 CSS 文件，其後綴名爲 css，在 HTML 中只須要用 link 標籤便可引入寫好的 CSS 文件，這樣整個頁面就會變得美觀優雅。瀏覽器

JavaScript

JavaScript，簡稱爲 JS，是一種腳本語言，HTML 和 CSS 配合使用，提供給用戶的只是一種靜態的信息，缺乏交互性。咱們在網頁裏可能會看到一些交互和動畫效果，以下載進度條、提示框、輪播圖等，這一般就是 JavaScript 的功勞。它的出現使得用戶與信息之間不僅是一種瀏覽與顯示的關係，而是實現了一種實時、動態、交互的頁面功能。
JavaScript 一般也是以單獨的文件形式加載的，後綴名爲 js，在 HTML 中經過 script 標籤便可引入。
例如：網絡

<script src="jquery-2.1.0.js"></script>

所以綜上所屬，HTML 定義了網頁的內容和結構，CSS 描述了網頁的佈局，JavaScript 定義了網頁的行爲。
這就是網頁的三大基本組成。架構

2. 網頁的結構

咱們首先用一個例子來感覺一下 HTML 的基本結構。新建一個文本文件，名稱能夠自取，後綴名爲 html，內容以下：app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>This is a Demo</title>
    </head>
    <body>
        <div id="container">
            <div class="wrapper">
                <h2 class="title">Hello World</h2>
                <p class="text">Hello, this is a paragraph.</p>
            </div>
        </div>
    </body>
</html>

這就是一個最簡單的 HTML 實例，開頭是 DOCTYPE 定義了文檔類型，其次最外層是 html 標籤，最後還有對應的結尾表明標籤閉合，其內部是 head 標籤和 body 標籤，分別表明網頁頭和網頁體，它們也分別須要尾標籤表示閉合。head 標籤內定義了一些頁面的配置和引用，如：框架

<meta charset="UTF-8">

它指定了網頁的編碼爲 UTF-8。
title 標籤則定義了網頁的標題，會顯示在網頁的選項卡中，不會顯示在網頁的正文中。body 標籤內則是在網頁正文中顯示的內容，div 標籤訂義了網頁中的區塊，它的 id 是 container，這是一個很是經常使用的屬性，且 id 的內容在網頁中是惟一的，咱們能夠經過 id 來取到這個區塊。而後在此區塊內又有一個 div 標籤，它的 class 爲 wrapper，這也是一個很是經常使用的屬性，常常與 CSS 配合使用來設定樣式。而後此區塊內部又有一個 h2 標籤，這表明一個二級標題，另外還有一個 p 標籤，這表明一個段落，它們兩者內部直接寫入相應的內容便可在網頁重呈現出來，它們也有各自的 class 屬性。
咱們將代碼保存以後在瀏覽器中打開該文件，能夠看到以下內容，如圖 2-11 所示：

圖 2-11 運行結果
能夠看到在選項卡上顯示了 This is a Demo 字樣，這是咱們在 head 裏面的 title 裏定義的文字，它顯示在了網頁選項卡里。而網頁正文是 body 標籤內部定義的各個元素生成的，圖中能夠看到網頁中顯示了二級標題和段落。
如上實例即是網頁的通常結構，一個網頁標準形式都是 html 標籤內嵌套 head 和 body 標籤，head 內定義網頁的配置和引用，body 內定義網頁的正文。

3. 節點及節點關係

在 HTML 中，全部標籤訂義的內容都是節點，它們構成了一個 HTML DOM 樹。
咱們先看下什麼是 DOM，DOM 是 W3C（萬維網聯盟）的標準。
DOM，英文全稱 Document Object Model，即文檔對象模型。它定義了訪問 HTML 和 XML 文檔的標準：

W3C 文檔對象模型（DOM）是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。

W3C DOM 標準被分爲 3 個不一樣的部分：

核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

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

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

DOM 將 HTML 文檔視做樹結構，這種結構被稱爲節點樹，如圖 2-12 所示：

圖 2-12 節點樹
經過 HTML DOM，樹中的全部節點都可經過 JavaScript 進行訪問，全部 HTML 節點元素都可被修改，也能夠被建立或刪除。
節點樹中的節點彼此擁有層級關係。咱們經常使用 parent（父）、child（子）和 sibling（兄弟）等術語用於描述這些關係。父節點擁有子節點，同級的子節點被稱爲兄弟節點。
在節點樹中，頂端節點被稱爲根（root），除了根節點以外每一個節點都有父節點，同時可擁有任意數量的子節點或兄弟節點。
圖 2-13 展現了節點樹以及節點之間的關係：

圖 2-13 節點樹及節點關係
本段參考 W3SCHOOL，連接：http://www.w3school.com.cn/ht...。

4. 選擇器

咱們知道網頁由一個個節點組成，CSS 選擇器會根據不一樣的節點設置不一樣的樣式規則，那麼咱們怎樣來定義是哪些節點呢？
在 CSS 中是使用了 CSS 選擇器來定位節點的，例如上例中有個 div 節點的 id 爲 container，那麼咱們就能夠用 CSS 選擇器表示爲 #container，# 開頭表明選擇 id，其後緊跟 id 的名稱。另外若是咱們想選擇 class 爲 wrapper 的節點，即可以使用 .wrapper，. 開頭表明選擇 class，其後緊跟 class 的名稱。另外還有一種選擇方式是根據標籤名篩選，例如咱們想選擇二級標題，直接用 h2 便可選擇。如上是最經常使用的三種選擇表示，分別是根據 id、class、標籤名篩選，請牢記它們的寫法。
另外 CSS 選擇器還支持嵌套選擇，各個選擇器之間加上空格分隔開即可以表明嵌套關係，如 #container .wrapper p 則表明選擇 id 爲 container 內部的 class 爲 wrapper 內部的 p 節點。另外若是不加空格則表明並列關係，如 div#container .wrapper p.text 表明選擇 id 爲 container 的 div 節點內部的 class 爲 wrapper 節點內部的 class 爲 text 的 p 節點。這就是 CSS 選擇器，其篩選功能仍是很是強大的。
另外 CSS 選擇器還有一些其餘的語法規則，在這裏整理以下：

選擇器	例子	例子描述
.class	.intro	選擇 class="intro" 的全部節點。
#id	#firstname	選擇 id="firstname" 的全部節點。
*	*	選擇全部節點。
element	p	選擇全部 p 節點。
element,element	div,p	選擇全部 div 節點和全部 p 節點。
element element	div p	選擇 div 節點內部的全部 p 節點。
element>element	div>p	選擇父節點爲 div 節點的全部 p 節點。
element+element	div+p	選擇緊接在 div 節點以後的全部 p 節點。
[attribute]	[target]	選擇帶有 target 屬性全部節點。
[attribute=value]	[target=blank]	選擇 target="blank" 的全部節點。
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的全部節點。
:link	a:link	選擇全部未被訪問的連接。
:visited	a:visited	選擇全部已被訪問的連接。
:active	a:active	選擇活動連接。
:hover	a:hover	選擇鼠標指針位於其上的連接。
:focus	input:focus	選擇得到焦點的 input 節點。
:first-letter	p:first-letter	選擇每一個 p 節點的首字母。
:first-line	p:first-line	選擇每一個 p 節點的首行。
:first-child	p:first-child	選擇屬於父節點的第一個子節點的每一個 p 節點。
:before	p:before	在每一個 p 節點的內容以前插入內容。
:after	p:after	在每一個 p 節點的內容以後插入內容。
:lang(language)	p:lang	選擇帶有以 "it" 開頭的 lang 屬性值的每一個 p 節點。
element1~element2	p~ul	選擇前面有 p 節點的每一個 ul 節點。
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每一個 a 節點。
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的全部 a 節點。
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每一個 a 節點。
:first-of-type	p:first-of-type	選擇屬於其父節點的首個 p 節點的每一個 p 節點。
:last-of-type	p:last-of-type	選擇屬於其父節點的最後 p 節點的每一個 p 節點。
:only-of-type	p:only-of-type	選擇屬於其父節點惟一的 p 節點的每一個 p 節點。
:only-child	p:only-child	選擇屬於其父節點的惟一子節點的每一個 p 節點。
:nth-child(n)	p:nth-child	選擇屬於其父節點的第二個子節點的每一個 p 節點。
:nth-last-child(n)	p:nth-last-child	同上，從最後一個子節點開始計數。
:nth-of-type(n)	p:nth-of-type	選擇屬於其父節點第二個 p 節點的每一個 p 節點。
:nth-last-of-type(n)	p:nth-last-of-type	同上，可是從最後一個子節點開始計數。
:last-child	p:last-child	選擇屬於其父節點最後一個子節點每一個 p 節點。
:root	:root	選擇文檔的根節點。
:empty	p:empty	選擇沒有子節點的每一個 p 節點（包括文本節點）。
:target	#news:target	選擇當前活動的 #news 節點。
:enabled	input:enabled	選擇每一個啓用的 input 節點。
:disabled	input:disabled	選擇每一個禁用的 input 節點
:checked	input:checked	選擇每一個被選中的 input 節點。
:not(selector)	p:not	選擇非 p 節點的每一個節點。
::selection	::selection	選擇被用戶選取的節點部分。