gg修改器

書名：網(wǎng)絡(luò)爬蟲原理與實(shí)踐：基于C#語(yǔ)言
作者名：李健種惠芳
本章字?jǐn)?shù)： 2175字
更新時(shí)間： 2023-02-23 16:13:14

1.2 網(wǎng)頁(yè)知識(shí)

網(wǎng)頁(yè)是萬(wàn)維網(wǎng)最基本的信息表達(dá)媒介，也是網(wǎng)絡(luò)爬蟲最主要的數(shù)據(jù)來源。網(wǎng)頁(yè)主要由HTML、CSS和JavaScript代碼組成，CSS和JavaScript代碼可以直接嵌入HTML文檔中，也可以作為外部文件被引用。HTML用于描述網(wǎng)頁(yè)內(nèi)容，CSS用于呈現(xiàn)外觀樣式，JavaScript用于定義頁(yè)面動(dòng)作。如果將網(wǎng)頁(yè)比喻成一個(gè)人，那么HTML、CSS和JavaScript分別相當(dāng)于人的骨架、皮膚和肌肉。三者結(jié)合起來才能構(gòu)成一個(gè)生動(dòng)的網(wǎng)頁(yè)。

1.2.1 HTML

HTML（HyperText Marked Language，超文本標(biāo)記語(yǔ)言）是制作網(wǎng)頁(yè)的標(biāo)準(zhǔn)語(yǔ)言。之所以稱為超文本（HyperText），一方面是因?yàn)榫W(wǎng)頁(yè)中包含超鏈接（HyperLink），另一方面是因?yàn)榫W(wǎng)頁(yè)是一種超媒體（HyperMedia）數(shù)據(jù)——能夠在文本中嵌入圖形、圖像、聲音、動(dòng)畫、視頻等其他形式的媒體資源。

HTML使用標(biāo)記標(biāo)簽（markup tag）描述網(wǎng)頁(yè)元素，標(biāo)簽用尖括號(hào)包圍起來（如<body>）。HTML文檔由標(biāo)簽和文本排列、嵌套而成，以下給出了一個(gè)示例文檔。

第1行<!DOCTYPE html>用于說明該文檔的類型；第2行“”之間為注釋文本，起解釋說明的作用；第3行<html>是HTML文檔的起始標(biāo)簽（與結(jié)束標(biāo)簽</html>相匹配），lang屬性說明該網(wǎng)頁(yè)的主要語(yǔ)言為中文；<head>標(biāo)簽和<body>標(biāo)簽包含在<html>中，它們都是成對(duì)出現(xiàn)的標(biāo)簽，分別代表網(wǎng)頁(yè)的“頭”和“體”。

網(wǎng)頁(yè)相關(guān)參數(shù)和引用資源通常在<head>中指定。本例中的<meta charset="UTF-8">說明該網(wǎng)頁(yè)編碼格式為UTF-8，并在<title>標(biāo)簽中指定網(wǎng)頁(yè)標(biāo)題；<body>是網(wǎng)頁(yè)的主體部分，可以嵌套多種標(biāo)簽以呈現(xiàn)網(wǎng)頁(yè)內(nèi)容。

在<body>中首先定義了1個(gè)區(qū)塊（<div>標(biāo)簽），其id屬性值“container”唯一標(biāo)識(shí)了該元素；區(qū)塊中包含1個(gè)標(biāo)題（<h1>標(biāo)簽）和3個(gè)段落（<p>標(biāo)簽）；區(qū)塊之后又添加了一個(gè)指向“網(wǎng)易首頁(yè)”的超鏈接（<a>標(biāo)簽）。網(wǎng)頁(yè)顯示效果如圖1-11所示。

HTML文檔中不僅可以包含文本數(shù)據(jù)和超鏈接對(duì)象，還可以包含圖像、聲音、視頻等多媒體數(shù)據(jù)。例如，我們可以使用<img>標(biāo)簽在網(wǎng)頁(yè)中插入一張圖片：

上述標(biāo)簽的width和height屬性定義了圖像的大小（300×400像素），src屬性指定了圖片原始數(shù)據(jù)的URL（"../pic/dog.png"）。注意：這是一個(gè)相對(duì)路徑，假設(shè)當(dāng)前網(wǎng)頁(yè)的URL為http://localhost/html/index.html，那么圖片的實(shí)際URL為http://localhost/pic/dog.png。

圖1-11 在瀏覽器中顯示HTML文檔

HTML提供了一系列具有特定含義的標(biāo)簽，可以表示標(biāo)題、段落、列表、表格、圖片、聲音、視頻等豐富的頁(yè)面元素。HTML標(biāo)簽一般成對(duì)出現(xiàn)，即同時(shí)包含起始標(biāo)簽和結(jié)束標(biāo)簽（如<p>和</p>）；也有少量標(biāo)簽可以獨(dú)立使用，即僅包含起始標(biāo)簽（如<br>）。常用的HTML標(biāo)簽如表1-10所示。

表1-10 常用的HTML標(biāo)簽

（續(xù)）

注意：

1）HTML文檔中的標(biāo)簽都是預(yù)定義標(biāo)簽，用戶不能隨意創(chuàng)造標(biāo)簽（瀏覽器將無法識(shí)別）。

2）成對(duì)標(biāo)簽中可以嵌套其他標(biāo)簽或文本，獨(dú)立標(biāo)簽則不能。

3）標(biāo)簽之間的嵌套不是任意的，需要符合一定的語(yǔ)義規(guī)則（如<tr>應(yīng)當(dāng)包含在<table>中）。

1.2.2 CSS

CSS（Cascading Style Sheet，層疊樣式表）是一套描述網(wǎng)頁(yè)元素樣式的規(guī)范。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合腳本語(yǔ)言實(shí)現(xiàn)豐富的動(dòng)態(tài)效果。“層疊”是指當(dāng)HTML引用多個(gè)樣式文件發(fā)生沖突時(shí)，瀏覽器將依據(jù)層疊順序進(jìn)行處理；“樣式”指網(wǎng)頁(yè)元素的大小、顏色、間距、排列方式等屬性。每條CSS規(guī)則由“選擇器”和“樣式列表”組成，其基本格式如圖1-12所示。

圖1-12 CSS規(guī)則示例

“選擇器”用于定位HTML元素，“樣式列表”用于描述具體樣式。樣式列表用“{}”括起來，其中可以包含多條樣式聲明，聲明之間以“;”分隔；每條聲明由“屬性名”和“值”組成，屬性名和值間以“:”連接。屬性名是CSS語(yǔ)法中規(guī)定的關(guān)鍵字，每個(gè)屬性規(guī)定了樣式修飾的一個(gè)方面。上述CSS規(guī)則表示：將所有段落（<p>標(biāo)簽）的文本顏色（color）設(shè)置為藍(lán)色（blue），字體大小（font-size）設(shè)為12px。表1-11給出了常見的樣式屬性。

表1-11 常見的C S S屬性

我們可以通過<style>標(biāo)簽將CSS代碼直接嵌入HTML文檔中，也可將其保存在獨(dú)立的CSS文件中。若網(wǎng)頁(yè)需要應(yīng)用某種樣式，可通過<link>標(biāo)簽引入相關(guān)CSS文件。

CSS選擇器用于選擇應(yīng)用樣式的網(wǎng)頁(yè)元素，語(yǔ)法簡(jiǎn)潔但功能強(qiáng)大。CSS選擇器的基本選擇條件包括id、class和標(biāo)簽名，常用的CSS選擇器語(yǔ)法如表1-12所示。

表1-12 CSS選擇器語(yǔ)法

（續(xù)）

CSS選擇器具有元素定位的功能，可以用于網(wǎng)絡(luò)爬蟲數(shù)據(jù)抽取。網(wǎng)頁(yè)中“置頂”的帖子、“聚焦”的新聞、“特價(jià)”的商品等，其顯示樣式往往與眾不同。例如，網(wǎng)易的新聞列表中有些標(biāo)題加粗顯示（如圖1-13所示），原因在于其class屬性被設(shè)為“cm_fb”。我們可以據(jù)此設(shè)置抽取條件，從而更精準(zhǔn)地抽取數(shù)據(jù)。

圖1-13 網(wǎng)頁(yè)中加粗的標(biāo)題

1.2.3 JavaScript

JavaScript（簡(jiǎn)稱“JS”）是一種輕量級(jí)的腳本語(yǔ)言，廣泛應(yīng)用于Web前端，能夠運(yùn)行在幾乎所有的瀏覽器上。JavaScript不僅能夠按照DOM標(biāo)準(zhǔn)訪問頁(yè)面元素，還可以通過AJAX技術(shù)實(shí)現(xiàn)對(duì)Web資源的異步加載。

說明：雖然JavaScript與Java在名稱上相近，但它們是兩種完全不同的編程語(yǔ)言。DOM（Document Object Model，文檔對(duì)象模型）是一種用于訪問HTML等文檔元素的W3C標(biāo)準(zhǔn)。AJAX（Asynchronous JavaScript and XML，異步JavaScript和XML）能夠在不刷新頁(yè)面的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交換。

JavaScript代碼既可以直接嵌入HTML文檔中，也可以寫成單獨(dú)的JS文件。若直接嵌入HTML文檔，JavaScript代碼必須包含在<script>與</script>標(biāo)簽之間，<script>標(biāo)簽可以嵌入網(wǎng)頁(yè)的任何位置，但通常放在<head>中。下面給出了一個(gè)示例：

上述文檔的JavaScript代碼位于<head>標(biāo)簽內(nèi)，代碼中定義了一個(gè)名為myFunction的函數(shù)；同時(shí)為<button>元素添加onclick事件，當(dāng)此按鈕被單擊時(shí)就會(huì)執(zhí)行myFunction函數(shù)。加載上述網(wǎng)頁(yè)，單擊按鈕前后的對(duì)比如圖1-14所示。

圖1-14 在網(wǎng)頁(yè)中執(zhí)行JavaScript代碼前后的對(duì)比

我們也可以將JavaScript代碼存放在單獨(dú)的JS文件中，在HTML文檔同目錄下新建一個(gè)名為“myScript.js”的文件，其代碼如下：

將HTML文檔內(nèi)容調(diào)整如下：

在HTML文檔中通過<script>標(biāo)簽的src屬性引入myScript.js文件，此時(shí)標(biāo)簽內(nèi)容為空即可。經(jīng)過上述調(diào)整，我們將1個(gè)HTML文檔拆分成兩個(gè)文件（HTML和JS），但運(yùn)行結(jié)果保持不變。將JavaScript代碼保存為單獨(dú)的文件，不僅有利于功能劃分，而且能夠提高代碼的復(fù)用率。這與單獨(dú)存放CSS文件具有類似的意義。

官术网_书友最值得收藏!

網(wǎng)絡(luò)爬蟲原理與實(shí)踐：基于C#語(yǔ)言

1.2 網(wǎng)頁(yè)知識(shí)

1.2.1 HTML

1.2.2 CSS

1.2.3 JavaScript