1 概述
在上一篇文章中我們知道了，爬蟲可以代替人工模擬瀏覽器進行網(wǎng)頁操作。那我們當然需要具備一定的前端基礎，只有這樣我們才能面對各類網(wǎng)站進行數(shù)據(jù)的精準采集。
2 網(wǎng)頁的基本構成
一個網(wǎng)頁主要的框架如下所示，框架的基礎是 HTML，它是用來描述網(wǎng)頁的一種語言。常見的網(wǎng)頁源碼文件后綴為 .html，可以利用瀏覽器打開，瀏覽器能夠解析文件內(nèi)容樣式呈現(xiàn)網(wǎng)頁。
<!doctype html>
<html>
<head>
<meta charset="utf-8"> 這里是聲明一個字符編碼，utf-8國際上最通用的字符編碼
<title>無標題文檔</title> 網(wǎng)頁的頁面標題，顯示在窗口欄
</head>
<head>與</head> 之間是不可見的，是給瀏覽器做信息配置用的
<body>
這里是我們這個網(wǎng)頁的主體部分，內(nèi)容就寫在這里
</body>
</html> html元素是文檔開始和結尾的元素，它是一個雙標簽
結合上述網(wǎng)頁的基本結構，我們不難知道我們所需網(wǎng)頁頁面數(shù)據(jù)一般都來自網(wǎng)頁的主體部分。
DOCTYPE 是 Document Type 簡寫，中文翻譯為文檔類型。在網(wǎng)頁中通過在首行代碼中定義文檔類型，用來指定頁面所使用的 HTML 的版本類型。構建符合標注的網(wǎng)頁中，只有確定正確的 DOCTYPE（文檔類型），HTML 文檔的結構和樣式才能被正常解析和呈現(xiàn)。DOCTYPE 聲明必須放在 (X)HTML 文檔的頂部。
在網(wǎng)頁設計中，HTML、CSS、JavaScript 并列為網(wǎng)頁前端設計的 3 種基本語言。其中 HTML 負責構建網(wǎng)頁的基本結構，CSS 負責設計網(wǎng)頁的顯示效果，JavaScript 負責開發(fā)網(wǎng)頁的交互效果。
2.1 HTML
HTML(Hyper Text Markup Language)，超文本標記語言，通過的 <>...</> (一對尖括號) 標簽形式組織不同類型的信息。HTML 構成網(wǎng)頁的骨架，是網(wǎng)頁的基礎。
常用的 HTML 標簽：
1.文本格式標簽
<p> </p> 標識段落文本
<pre> </pre> 標識預定義文本
<blockquote> </blockquote> 標識引用文本
2.字符格式標簽
<b> </b> 標識強調(diào)文本，以加粗效果顯示
<i> </i> 標識引用文本，以斜體效果顯示
<blink> </blink> 標識文本，以閃爍效果顯示，IE瀏覽器不支持
<big> </big> 標識放大文本，以放大效果顯示
<small> </small> 標識縮小文本，以縮小效果顯示
<sup> </sup> 標識上標文本，以上標效果顯示
<sub> </sub> 標識下標文本，以下標效果顯示
<cite> </cite> 標識引用文本，以引用效果顯示
3.列表標簽
<ul><li> </li></ul> 標識無序列表
<li><li> </li></li> 標識有序列表
<dl><dt><dd> </dd></dt></dl> 標識定義列表
4.鏈接標簽
超鏈接:<a href=“http://www.baidu.com”>百度首頁</a>
錨鏈接:<a href=“#btm”>跳轉到底部</a>
<div id=“box” style=“height:2000px; border:solid 1px red;”>撐開瀏覽器滾動條</div>
<span id=“btm”>底部錨點位置</span>
6.多媒體標簽
<img />:嵌入圖像
利用 HTML 的相關標簽，我們可以進行簡單的網(wǎng)頁設計。但作為網(wǎng)絡爬蟲的開發(fā)者，我們只需要了解 HTML 的基本標簽，了解具體標簽的作用，在分析網(wǎng)頁時能夠認出即可。
2.2 CSS
如果說 HTML 是網(wǎng)頁內(nèi)容的載體，那么 CSS 樣式就是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
CSS(Cascading Style Sheets)，層疊樣式表，層疊就是對一個元素多次設置同一個樣式，這將使用最后一次設置的屬性值。CSS 是在 HTML 語言基礎上發(fā)展而來的，是為了克服 HTML 網(wǎng)頁布局所帶來的弊端。
樣式是 CSS 的最小、最基本單元。從本質上來看，CSS 樣式就是網(wǎng)頁格式化的規(guī)則列表。一個樣式單元必須包含兩部分組成：
1.樣式作用的對象：選擇器（Selector）。
2.作用對象的效果：聲明塊（Declaration Block）。
選擇器：定義樣式作用的對象。為了能準確選定頁面中特定對象，CSS 提供了很多類型的選擇器，這些選擇器功能各異，但是它們的共同目標就是幫助設計師精確選擇對象或對象范圍。
聲明塊：聲明塊必須緊跟在選擇器的后面。聲明塊由大括號包括，大括號內(nèi)列表顯示一個或無數(shù)個聲明。聲明之間必須使用分號進行分隔，最后一個聲明可以省略分號。
2.2.1 CSS的三種樣式：
行內(nèi)樣式，就是把 CSS 樣式直接放在代碼行內(nèi)的標簽中，一般都是放在標簽的 style 屬性中。
<p style="text-indent:2em; font-size:12px; line-height:1.6em; color:gray;">段落樣式</p>
內(nèi)部樣式：HTML 提供了一個 style 元素，使用該元素能夠在文檔內(nèi)定義僅供當前頁面內(nèi)使用的樣式，因此稱其為內(nèi)部樣式。style 元素必須位于頁面的頭部區(qū)域，即必須包含在 <head> 和 </head> 標簽之間。
<style type="text/css">
p {
text-indent:2em;
font-size:12px;
line-height:1.6em;
color:gray;
}
</style>
外部樣式，就是把樣式代碼存放在獨立的文件中，使用時再把這個獨立的文件導入或鏈接到 HTML 文檔中。這個樣式表文件就是我們常說的 CSS 文件，其擴展名為 .css。CSS 文件實際上就是一個文本文件，使用任何文本編輯器都可以打開并進行編輯。
<link href="images/6-6.css " type="text/css" rel="stylesheet" media="all" />
在網(wǎng)頁中，一般會統(tǒng)一定義整個網(wǎng)頁的樣式規(guī)則，并寫入 CSS 文件中。在 HTML 中，利用 link 標簽引入寫好的 CSS 文件。
也可以在內(nèi)部樣式表中使用 @import 命令導入外部樣式表。用法如下：
<style type="text/css" media="all">
<!--@import url("images/6-6.css");-->
</style>
2.2.2 CSS選擇器
| 選擇器 | 例子 | 例子描述 |
|---|---|---|
| .class | .instro | 選擇 class='intro' 的所有節(jié)點 |
| #id | #firstname | 選擇 id='firstname' 的所有節(jié)點 |
這里僅例舉幾個作為示例，更多選擇器可以自行搜索了解。
在爬蟲中后面會學習相關的網(wǎng)頁解析庫，其中需要定位標簽并提取內(nèi)容，我們可以利用CSS選擇器提取指定內(nèi)容。
2.2.3 CSS的繼承性
繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它所包含的后代。但需要注意的是并不是所有屬性都可以繼承。
2.3 JavaScript
JavaScript 簡稱 JS，是一種解釋型的腳本語言。JavaScript 是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標滑過彈出下拉菜單?？梢赃@么理解，有動畫的，有交互的一般都是用 JavaScript 來實現(xiàn)的。
<script> 和 </script> 標簽配合使用作為腳本語言的標識符來分隔其他源代碼。在解析網(wǎng)頁源代碼時，瀏覽器檢索到它們時就知道其中包含的字符信息是腳本，而不是 HTML 源代碼或者 CSS 樣式碼。
一般來說，這些 JavaScript 代碼可以被嵌入到網(wǎng)頁中任何位置，如 <head> 標簽的頂部、<head> 和 </head> 標簽之間、<body> 標簽內(nèi)部，甚至可以被放在 <html> 或 </html> 標簽的外部。
與其它計算機語言的作用域類似，JavaScript 也有作用范圍。
一般來說，我們習慣于把通用功能模塊都寫在獨立的外部文件中，然后在需要的頁面中引入該文件即可。JavaScript 文件實際上也是一個文本類型的文件，JavaScript 文件的擴展名為 js。<script> 元素既可包含腳本語句，也可以通過 "src" 屬性指向外部腳本文件。
<script src="file.js"></script>
以上便是Python爬蟲所需要了解的一些前端知識，大家不必過分在意是否完全理解(當然能夠理解最好)，只要在Python爬蟲開發(fā)過程中能夠靈活運用就行。
歡迎大家關注點贊，作者會持續(xù)更新專題文章。
