快捷導(dǎo)航

Python網(wǎng)絡(luò)爬蟲(chóng)之Web網(wǎng)頁(yè)基礎(chǔ)

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

我們?cè)趯W(xué)習(xí)爬蟲(chóng)之前，要先了解網(wǎng)頁(yè)的組成，只有我們了解其組成嗎，才可以方能百戰(zhàn)百勝，文章中有詳細(xì)的代碼示例，需要的朋友可以參考一下

??Web網(wǎng)頁(yè)基礎(chǔ)

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

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

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

?HTML

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

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

HTML的根標(biāo)簽是文檔的開(kāi)始標(biāo)簽，它包含文檔的標(biāo)題和其他基本信息，如文檔類(lèi)型、語(yǔ)言、日期、版本等。

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

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

?CSS

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

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

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

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

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

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

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

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

這些屬性的含義如下：

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

?JavaScript

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

JavaScript 的語(yǔ)法基于原型編程、多范式的動(dòng)態(tài)腳本語(yǔ)言，并且支持面向?qū)ο蟆⒚钍?、聲明式、函?shù)式編程范式。它的標(biāo)準(zhǔn)是ECMAScript，截至 2012 年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3 標(biāo)準(zhǔn)。

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

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

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

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

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

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

下面我們看一個(gè)示例代碼。

<!DOCTYPE html>  
<html>  
<head>  
<title>網(wǎng)頁(yè)標(biāo)題</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" >導(dǎo)航鏈接1</a></li>  
<li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >導(dǎo)航鏈接2</a></li>  
<li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >導(dǎo)航鏈接3</a></li>  
</ul>  
</nav>  
</header>  
<main>  
<h1>網(wǎng)頁(yè)標(biāo)題</h1>  
<p>這是一個(gè)段落。</p>  
<ul>  
<li>列表項(xiàng)1</li>  
<li>列表項(xiàng)2</li>  
<li>列表項(xiàng)3</li>  
</ul>  
</main>  
<footer>  
<p>版權(quán)信息</p>  
</footer>  
</body>  
</html>

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

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

??3.節(jié)點(diǎn)樹(shù)和節(jié)點(diǎn)間的關(guān)系

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

節(jié)點(diǎn)間的關(guān)系通常通過(guò)以下方式表示：

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

下面我們一個(gè)示意圖，一目了然。

??4.選擇器

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

在 Css 中，我們使用 CSS 選擇器來(lái)定位節(jié)點(diǎn)。

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

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

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

CSS選擇器還可以使用偽類(lèi)來(lái)創(chuàng)建更復(fù)雜的選擇器。例如，:hover偽類(lèi)用于在鼠標(biāo)懸停在元素上時(shí)應(yīng)用樣式，:focus偽類(lèi)用于在元素上聚焦時(shí)應(yīng)用樣式等。

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

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

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

??5.總結(jié)

本節(jié)介紹了網(wǎng)頁(yè)的基本結(jié)構(gòu)和節(jié)點(diǎn)間的關(guān)系，了解了這些內(nèi)容，我們才有更加清晰的思路去解析和提取網(wǎng)頁(yè)內(nèi)容。

到此這篇關(guān)于Python網(wǎng)絡(luò)爬蟲(chóng)之Web網(wǎng)頁(yè)基礎(chǔ)的文章就介紹到這了,更多相關(guān)Python Web網(wǎng)頁(yè)基礎(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: