Python網(wǎng)絡爬蟲之Web網(wǎng)頁基礎

更新時間：2023年04月10日 10:58:49 作者：愛吃餅干的小白鼠

我們在學習爬蟲之前，要先了解網(wǎng)頁的組成，只有我們了解其組成嗎，才可以方能百戰(zhàn)百勝，文章中有詳細的代碼示例，需要的朋友可以參考一下

??Web網(wǎng)頁基礎

我們在學習爬蟲之前，要先了解網(wǎng)頁的組成，只有我們了解其組成嗎，才可以方能百戰(zhàn)百勝。我們用瀏覽器訪問不同的網(wǎng)站，呈現(xiàn)的頁面，各不一樣，是因為，其網(wǎng)頁結(jié)構(gòu)不一樣。

??1.網(wǎng)頁的組成

網(wǎng)頁主要是三大部分組成——HTML,CSS和JavaScript。如果把網(wǎng)頁比作人的臉，這三部分就好比人的眼睛，鼻子和嘴。下面我們介紹這三個功能。

?HTML

HTML（HyperText Markup Language）是用于構(gòu)建網(wǎng)頁的標記語言，它是一種基于標準通用標記語言的子集，它取代了HTML1.0作為網(wǎng)頁制作的標準，在HTML2.0中，新增了一些元素，增強了網(wǎng)頁的表現(xiàn)能力。

HTML的語法包括標簽和標簽語法，它們被用來定義網(wǎng)頁的結(jié)構(gòu)、內(nèi)容和樣式。一個HTML文檔通常包含一個根標簽和一個或多個標簽，每個標簽都有一個標題行，用于標記標簽的類型、屬性和值。

HTML的根標簽是文檔的開始標簽，它包含文檔的標題和其他基本信息，如文檔類型、語言、日期、版本等。

除此之外，HTML還有一些其他的元素和屬性，如標題、段落、表格、列表、圖像、鏈接等，這些元素和屬性可以用來定義網(wǎng)頁的外觀和行為。

HTML的優(yōu)點包括可移植性、跨平臺性和內(nèi)容豐富性等，它已經(jīng)成為網(wǎng)頁制作的標準語言，廣泛應用于網(wǎng)站、電子郵件、新聞文章、在線聊天等領域。

?CSS

HTML定義了網(wǎng)頁的結(jié)構(gòu)，但是只有HTML的頁面布局，網(wǎng)頁并不好看。為了使網(wǎng)頁更加好看一些，可以借助CSS來實現(xiàn)。

CSS（層疊樣式表）是一種用于定義網(wǎng)頁樣式的語言，它是HTML的超集。CSS提供了更多的樣式選擇和定義，使網(wǎng)頁設計更加靈活和易于維護。

CSS的語法包括選擇器、屬性、值和偽類選擇器等。選擇器是用來選擇要應用樣式的元素的，它可以基于類、ID、通配符等進行選擇。屬性是用來定義元素樣式的，它可以基于類、ID、通配符等進行定義。值可以是一個單獨的值，也可以是一個字符串、數(shù)字或其他類型的值。偽類選擇器是用來定義類選擇器和ID選擇器的，它可以用來定義偽類元素和偽類選擇器。

CSS的優(yōu)點包括可維護性、可擴展性和可定制性等，它使網(wǎng)頁設計更加靈活和易于維護。通過使用CSS，可以更好地控制網(wǎng)頁的布局、樣式和動畫效果，從而使網(wǎng)頁更加美觀和吸引人。

CSS3是CSS的最新版本，它增加了一些新的選擇器、屬性和值，使網(wǎng)頁設計更加靈活和豐富。例如，CSS3新增了偽類選擇器、動畫選擇器、過渡選擇器等，使網(wǎng)頁設計更加生動和有趣。

那么CSS什么樣子呢，我摘抄了一段。

#head {
    position: relative;
    height: 100%;
    width: 100%;
    min-height: 768px;
    cursor: default;
}

這段代碼定義了一個名為#head的元素，它的樣式屬性為position: relative; height: 100%; width: 100%; min-height: 768px; cursor: default;。

這些屬性的含義如下：

position: relative：表示元素的定位方式為相對定位，即元素相對于其父元素進行定位。
height: 100%：表示元素的高度為其父元素的高度的100%。
width: 100%：表示元素的寬度為其父元素的寬度的100%。
min-height: 768px：表示元素的最小高度為768像素，即其父元素的最小高度為768像素。
cursor: default：表示元素的光標樣式為默認值，即不設置光標樣式。
通過這些屬性的組合，可以定義一個具有相對定位、高度為100%、寬度為100%的元素，并且具有默認的光標樣式。

?JavaScript

JavaScript（簡稱“JS”）是一種具有函數(shù)優(yōu)先的輕量級，解釋型或即時編譯型的編程語言。它由Netscape公司的Brendan Eich在1995年首次設計實現(xiàn)，并被廣泛用于Web瀏覽器中。

JavaScript 的語法基于原型編程、多范式的動態(tài)腳本語言，并且支持面向?qū)ο?、命令式、聲明式、函?shù)式編程范式。它的標準是ECMAScript，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標準。

JavaScript 的基本語法包括變量、函數(shù)、對象、數(shù)組和閉包等。變量用于存儲數(shù)據(jù)，函數(shù)用于實現(xiàn)邏輯，對象用于封裝數(shù)據(jù)和方法，數(shù)組用于存儲數(shù)據(jù)或?qū)ο?，閉包用于重寫函數(shù)或方法并在其中使用變量。

JavaScript 的內(nèi)置對象包括函數(shù)、數(shù)組、對象、字符串、正則表達式和函數(shù)等。它還支持ES6中的class和const，以及新增的let和const`。ES7引入了let，const和rest/spread等語法。

JavaScript 的作用域鏈機制使代碼可以在不同的作用域中安全地執(zhí)行。它還支持事件處理、DOM操作、模塊化等功能。JavaScript 已經(jīng)廣泛應用于Web瀏覽器、移動應用、游戲開發(fā)等領域。

JavaScript通常是以單獨文件加載的，后綴是.js。

綜上所述，HTML定義了網(wǎng)頁的內(nèi)容和結(jié)構(gòu)，CSS描述了網(wǎng)頁的樣式，JavaScript定義了網(wǎng)頁的行為。

??2.網(wǎng)頁的結(jié)構(gòu)

下面我們看一個示例代碼。

<!DOCTYPE html>  
<html>  
<head>  
<title>網(wǎng)頁標題</title>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<link rel="stylesheet" href="styles.css" rel="external nofollow" >  
</head>  
<body>  
<header>  
<nav>  
<ul>  
<li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >導航鏈接1</a></li>  
<li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >導航鏈接2</a></li>  
<li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >導航鏈接3</a></li>  
</ul>  
</nav>  
</header>  
<main>  
<h1>網(wǎng)頁標題</h1>  
<p>這是一個段落。</p>  
<ul>  
<li>列表項1</li>  
<li>列表項2</li>  
<li>列表項3</li>  
</ul>  
</main>  
<footer>  
<p>版權(quán)信息</p>  
</footer>  
</body>  
</html>

這個示例中，<!DOCTYPE html> 聲明了這是一個 HTML5 文檔，<html> 標簽定義了文檔的根元素，<head> 標簽包含了文檔的元數(shù)據(jù)，如標題、字符集、視口等。<title> 標簽定義了文檔的標題，<meta charset="UTF-8"> 和 <meta name="viewport"> 標簽定義了文檔的字符集和視口。<link> 標簽定義了文檔的樣式表，<nav> 標簽定義了文檔的導航鏈接，<ul> 標簽定義了文檔的列表項，<li> 標簽定義了文檔的列表項。<h1> 標簽定義了文檔的標題，<p> 標簽定義了文檔的段落。<footer> 標簽定義了文檔的版權(quán)信息。

這只是一個簡單的示例，實際的HTML結(jié)構(gòu)可能更加復雜。在編寫網(wǎng)頁時，需要根據(jù)具體的需求和目標，選擇合適的HTML標簽和樣式表，并進行適當?shù)呐虐婧筒季帧?/p>

??3.節(jié)點樹和節(jié)點間的關系

節(jié)點樹（Node Tree）是一個樹形數(shù)據(jù)結(jié)構(gòu)，它通過節(jié)點的組合來表示數(shù)據(jù)，節(jié)點通過節(jié)點之間的關系來表示數(shù)據(jù)之間的層次結(jié)構(gòu)。節(jié)點樹可以用來實現(xiàn)各種數(shù)據(jù)的組織和管理，例如數(shù)據(jù)庫中的表，文件系統(tǒng)中的文件，以及各種應用程序中的數(shù)據(jù)模型。

節(jié)點間的關系通常通過以下方式表示：

樹形結(jié)構(gòu)：節(jié)點之間通過樹形結(jié)構(gòu)連接，節(jié)點的父節(jié)點通過右子節(jié)點連接，左子節(jié)點連接到根節(jié)點。
節(jié)點的層次結(jié)構(gòu)：節(jié)點根據(jù)其父節(jié)點的層次結(jié)構(gòu)來確定其位置。例如，一個節(jié)點的父節(jié)點是其子節(jié)點的父節(jié)點，其子節(jié)點是其左右子節(jié)點。
節(jié)點的繼承關系：節(jié)點之間存在繼承關系，即子節(jié)點繼承其父節(jié)點的屬性和關系。
節(jié)點的屬性和關系：節(jié)點可以有屬性和關系，屬性用于描述節(jié)點的基本信息，例如名稱、類型、值等。關系用于描述節(jié)點之間的關系，例如父子關系、層級關系等。
節(jié)點的遍歷：節(jié)點樹可以通過遍歷來訪問和修改節(jié)點的屬性和關系。例如，可以通過遞歸遍歷來查找節(jié)點的子節(jié)點和父節(jié)點，可以通過深度優(yōu)先搜索遍歷整個樹。

下面我們一個示意圖，一目了然。

??4.選擇器

我們知道網(wǎng)頁由一個個節(jié)點組成，CSs 選擇器會根據(jù)不同的節(jié)點設置不同的樣式規(guī)則，那么怎樣來定位節(jié)點呢？

在 Css 中，我們使用 CSS 選擇器來定位節(jié)點。

CSS選擇器是用于在HTML文檔中選擇元素的語言。CSS選擇器是一種用于選擇HTML元素的語言，它可以用于創(chuàng)建樣式表，并將樣式應用于HTML元素。

CSS選擇器通常由一個或多個關鍵字組成，這些關鍵字用于指定選擇器的類型。例如，div選擇器用于選擇所有具有div類的元素，a選擇器用于選擇所有具有a類的元素，img選擇器用于選擇所有具有img類的元素等。

CSS選擇器可以使用通配符來匹配多個類型的元素。例如，div, a, img可以匹配所有具有這些類型的元素。

CSS選擇器還可以使用偽類來創(chuàng)建更復雜的選擇器。例如，:hover偽類用于在鼠標懸停在元素上時應用樣式，:focus偽類用于在元素上聚焦時應用樣式等。

CSS選擇器可以嵌套使用，以創(chuàng)建更復雜的選擇器。例如，div:hover a可以選擇所有具有a類的元素，div:focus a可以選擇所有具有a類的元素，并在鼠標懸停和聚焦時應用樣式。

總之，CSS選擇器是一種用于在HTML文檔中選擇元素的語言，它可以用于創(chuàng)建樣式表，并將樣式應用于HTML元素。

另外，還有一種比較常用的選擇器是 XPath 選擇器，這種選擇方式后面會詳細介紹。