[Python3網絡爬蟲開發實戰] 2.2-網頁基礎

時間 2019-11-30

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

原文原文鏈接

用瀏覽器訪問網站時，頁面各不相同，你有沒有想過它爲什麼會呈現這個樣子呢？本節中，咱們就來了解一下網頁的基本組成、結構和節點等內容。css

1. 網頁的組成

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

(1) HTML

HTML是用來描述網頁的一種語言，其全稱叫做Hyper Text Markup Language，即超文本標記語言。網頁包括文字、按鈕、圖片和視頻等各類複雜的元素，其基礎架構就是HTML。不一樣類型的文字經過不一樣類型的標籤來表示，如圖片用img標籤表示，視頻用video標籤表示，段落用p標籤表示，它們之間的佈局又常經過佈局標籤div嵌套組合而成，各類標籤經過不一樣的排列和嵌套才造成了網頁的框架。node

在Chrome瀏覽器中打開百度，右擊並選擇「檢查」項（或按F12鍵），打開開發者模式，這時在Elements選項卡中便可看到網頁的源代碼，如圖2-9所示。jquery

圖2-9 源代碼git

這就是HTML，整個網頁就是由各類標籤嵌套組合而成的。這些標籤訂義的節點元素相互嵌套和組合造成了複雜的層次關係，就造成了網頁的架構。github

(2) CSS

HTML定義了網頁的結構，可是隻有HTML頁面的佈局並不美觀，可能只是簡單的節點元素的排列，爲了讓網頁看起來更好看一些，這裏藉助了CSS。瀏覽器

CSS，全稱叫做Cascading Style Sheets，即層疊樣式表。「層疊」是指當在HTML中引用了數個樣式文件，而且樣式發生衝突時，瀏覽器能依據層疊順序處理。「樣式」指網頁中文字大小、顏色、元素間距、排列等格式。markdown

CSS是目前惟一的網頁頁面排版樣式標準，有了它的幫助，頁面纔會變得更爲美觀。架構

圖2-9的右側即爲CSS，例如：app

#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文件，這樣整個頁面就會變得美觀、優雅。

(3) JavaScript

JavaScript，簡稱JS，是一種腳本語言。HTML和CSS配合使用，提供給用戶的只是一種靜態信息，缺少交互性。咱們在網頁裏可能會看到一些交互和動畫效果，以下載進度條、提示框、輪播圖等，這一般就是JavaScript的功勞。它的出現使得用戶與信息之間不僅是一種瀏覽與顯示的關係，而是實現了一種實時、動態、交互的頁面功能。

JavaScript一般也是以單獨的文件形式加載的，後綴爲js，在HTML中經過script標籤便可引入，例如：

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

綜上所述，HTML定義了網頁的內容和結構，CSS描述了網頁的佈局，JavaScript定義了網頁的行爲。

2. 網頁的結構

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2 class="title">Hello World</h2>

<p class="text">Hello, this is a paragraph.</p>

</div>

</body>

</html>

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

1	<meta charset="UTF-8">

它指定了網頁的編碼爲UTF-8。

title標籤則定義了網頁的標題，會顯示在網頁的選項卡中，不會顯示在正文中。body標籤內則是在網頁正文中顯示的內容。div標籤訂義了網頁中的區塊，它的id是container，這是一個很是經常使用的屬性，且id的內容在網頁中是惟一的，咱們能夠經過它來獲取這個區塊。而後在此區塊內又有一個div標籤，它的class爲wrapper，這也是一個很是經常使用的屬性，常常與CSS配合使用來設定樣式。而後此區塊內部又有一個h2標籤，這表明一個二級標題。另外，還有一個p標籤，這表明一個段落。在這二者中直接寫入相應的內容便可在網頁中呈現出來，它們也有各自的class屬性。

將代碼保存後，在瀏覽器中打開該文件，能夠看到如圖2-10所示的內容。

圖2-10 運行結果

能夠看到，在選項卡上顯示了This is a Demo字樣，這是咱們在head中的title裏定義的文字。而網頁正文是body標籤內部定義的各個元素生成的，能夠看到這裏顯示了二級標題和段落。

這個實例即是網頁的通常結構。一個網頁的標準形式是html標籤內嵌套head和body標籤，head內定義網頁的配置和引用，body內定義網頁的正文。

3. 節點樹及節點間的關係

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

咱們先看下什麼是DOM，DOM是W3C（萬維網聯盟）的標準，其英文全稱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-11所示。

圖2-11 節點樹

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

節點樹中的節點彼此擁有層級關係。咱們經常使用父（parent）、子（child）和兄弟（sibling）等術語描述這些關係。父節點擁有子節點，同級的子節點被稱爲兄弟節點。

在節點樹中，頂端節點稱爲根（root）。除了根節點以外，每一個節點都有父節點，同時可擁有任意數量的子節點或兄弟節點。圖2-12展現了節點樹以及節點之間的關係。

圖2-12 節點樹及節點間的關係

本段參考W3SCHOOL，連接：http://www.w3school.com.cn/htmldom/dom_nodes.asp。

4. 選擇器

咱們知道網頁由一個個節點組成，CSS選擇器會根據不一樣的節點設置不一樣的樣式規則，那麼怎樣來定位節點呢？

在CSS中，咱們使用CSS選擇器來定位節點。例如，上例中div節點的id爲container，那麼就能夠表示爲#container，其中#開頭表明選擇id，其後緊跟id的名稱。另外，若是咱們想選擇class爲wrapper的節點，即可以使用.wrapper，這裏以點（.）開頭表明選擇class，其後緊跟class的名稱。另外，還有一種選擇方式，那就是根據標籤名篩選，例如想選擇二級標題，直接用h2便可。這是最經常使用的3種表示，分別是根據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選擇器還有一些其餘語法規則，具體如表2-4所示。

表2-4 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)`	`:not`	選擇非`p`節點的全部節點
`::selection`	`::selection`	選擇被用戶選取的節點部分