本文來源于公眾號【程序猿聲】，作者向柯瑋

前言

小瑋又來啦。這次給大家帶來的是爬蟲系列的第一課---HTML和爬蟲基礎。

在最開始的時候，我們需要先了解一下什么是爬蟲。簡單地來說呢，爬蟲就是一個可以自動登陸網頁獲取網頁信息的程序。

舉個例子來說，比如你想每天看到自己喜歡的新聞內容，而不是各類新聞平臺給你推送的各種各樣的信息，你就可以寫一個爬蟲去爬取這些關鍵詞的內容，使自己能夠按時獲得自己感興趣的內容，等等。

總的來說，爬蟲能用來進行數據監控，數據收集，信息整合，資源采集。

然后，我們一起來總結一下我們瀏覽網頁的過程。

1.輸入網址

2.瀏覽器向DNS服務商發送請求

3.找對相應服務器

4.服務器解析請求

5.服務器處理請求得到最終結果發出去

6.瀏覽器解析返回的數據

7.展示給用戶。

這些過程我們并不需要每個過程都十分了解，但是你需要知道在瀏覽服務器的過程之中，我們需要一個這樣的過程。下面給大家解釋一下每個步驟到底是干啥的。

第一步很容易，就不多說了。我們從第二步開始，因為我們是通過這個瀏覽器訪問這個網址，我們就需要向DNS服務商發送一個請求，簡單來說，當我們輸入一個域名的時候，我們需要一個中間的人幫我們去分析這個網址對應的是哪一個IP地址下的服務器，然后找到相應的服務器，當服務器接收到我們的請求時，服務器就會解析一下我們的請求，在解析了之后，會將最終的結果反饋給我們。

比如當我們點擊支付，服務器會解析我們這個過程，然后把最終支付成功的結果反饋我們的瀏覽器，瀏覽器把這個數據進行渲染之后，再展示給我們。

域名解析

下面我們再來分析一下域名的問題。讓我們來看看這個域名

http：//movie.douban.com/subject/4920389/?From=showing。

這是我們打開豆瓣電影的某個電影以后，出現的網址。在這個網址里面，我們可以看到一級域名。怎么找到一級域名呢？很簡單，.com,.cn……之前的第一串單詞或者第一個單詞，就是我們的一級域名，在這個網址中，一級域名就是douban，那么douban的左邊是什么呢？沒錯，就是二級域名。

只要你擁有了一個一級域名，那么二級域名是隨便你設置的，這里很多小伙伴就會提問了，怎么才能有一個一級域名呢？其實也很簡單，只需要前往阿里云等網站就可以購買一個域名了。

所以，在這個位置，你要尤為注意，一級域名是獨一無二的，但是二級域名是可以任意的，所以騙子通常會在二級域名上動手腳，大家一定要關注這一點，小心上當受騙。

那么后面的內容是什么呢。/subject/4920389/?，其實類似文件夾一樣的東西，就是在我們二級域名以下的一些網址，那么問號以后是什么呢？就是一個網址參數，如果我們前面的參數一樣，但是如果最后這個參數不一樣，有可能我們看到的網頁也不一樣。

介紹完了這個，我們來研究研究爬蟲的策略，主要分為兩個：

1. 從某個頁面開始不斷爬取頁面上的鏈接，主要分為深度優先搜索和廣度優先搜索兩種方法，這個不理解沒關系，在之后的數據結構篇中我會給大家一一介紹

2. 觀察網址的規律，這個很簡單，而且也是我們最常用的方法。我們在這里舉一個例子。

http://xiaohua.zol.com.cn/lengxiaohua/2.html

http://xiaohua.zol.com.cn/lengxiaohua/3.html

看到上面這兩個網址的差別了嗎？對，就只是lengxiaohua/后面的數字不一樣，那么如果我要實現一面一面的搜索網站內容，怎么辦？是不是直接更改/后面的數字就可以了？沒錯，就是這么簡單。

前端介紹

然后，給大家介紹一下什么是前端什么是后端。簡單來說前端就是展示給我們看的，后端就是我們看不到的。

舉個例子來說，你在論壇想發一個帖子，首先是把數據傳給后端，后端進行一些相應的判斷和處理，然后展示在前端給大家看，這就是前端和后端。

因為本篇推文我們的關注點是爬蟲，所以我們更多的是關注前端。

前端開發的工具，目前主流的是Chrome瀏覽器，當然不是說別的瀏覽器不行這樣，因為現在大部分瀏覽器基本上都是從Chrome改造過來的，把Chrome的一些東西去掉，加上一些自己的東西這樣子，所以盡量用Chrome瀏覽器。

然后前端主要有三個重要方面，HTML,CSS,Javascript，下面我們來分別了解一下這三個方面。

HTML

HTML的全稱是HyperText Markup Language，它是一個網頁的最基本要素，沒有HTML，整個網頁根本就沒有辦法展示，通過標記語言的方式來組織內容(文字，圖片，視頻)等等。

比方說我們要在某個位置插入一段文字，某個位置插入一段視頻這樣子，下面就是一個網頁的HTML，想要看一個網頁的HTML也很簡單，右鍵點擊頁面，選擇檢查或者檢查源代碼就可以看到了。

它一般分為head和body兩個部分，怎么分辨呢？也很簡單，，這些可以直接在網頁源代碼中看的見。一般來說head里面包括的內容是我這個網頁的一些聲明，適合用什么方式瀏覽等等。

當然了HTML里面最基本的段落，

這是一個段落這樣子，當然在開頭的

中還可以加一些屬性的東西，比如說

這樣子，這個位置就是我們在爬蟲中特別需要關注的地方，屬性可以有多種多樣的，這里列出來的是 類屬性。

這里列舉一些常用的HTML標簽讓大家了解。

標題：

一級標題

，

n級標簽

段落：

這是一個段落

無序列表:

• Python
• C/C++

有序列表：把ul改為ol即可

鏈接：名稱

既然介紹了這么多，大家其實可以自己嘗試著去寫一個網頁。下面給出一個例子。

小瑋的課堂

小瑋的課堂

歡迎來到小瑋的課堂

小瑋課堂的官網

先保存為index.html文件，然后再去寫即可。

CSS

然后就是下一個方面CSS，CSS就是指層疊樣式表(Cascading Style Sheets)，它定義了一個網頁該如何顯示里面的元素，比如這個段落該靠在瀏覽器的左邊還是右邊，這段文字的字體，顏色，大小該是什么，這些方面都是由CSS定義。

那么如何建立一個CSS文件呢？新建一個文件，寫入以下內容

p{

color:blue;

}

保存為index-style.css，和index.html保存在同一個目錄之下。當然并不是說放在一起他們就一塊兒運行了，我們還需要進行一些別的處理。

我們回到html文件，在link href的位置進行一些修改。

大家可以把加入CSS和沒有加入CSS的html文件進行對比就知道區別在哪里了。CSS內容里面的p其實是選擇器的意思，表示我們選擇了p標簽，我們在后面的操作是針對所有p標簽的，里面color是屬性，blue是屬性值。

當然你還可以加入font-family:KaiTi，把字體進行修改，還有很多很多方面，大家可以多看看別的網頁的源代碼進行研究一下，特別推薦大家看一看蘋果的網頁源代碼，可以學到相當多的東西。

然后我們再來看看id和class，這些都是屬性，id在每一個html文件中只能有一個，和身份證一樣，但是class可以有很多個。

那么基于這個我們就可以利用css進行各種各樣的個性操作啦。比如說#welcome-line{}，在選擇器前加上#表示這個選擇了一個id，.link{}，表示選擇了一個class。

然后就是這個盒子模型，這個其實很容易理解，大家把鼠標放在上面就可以知道這個是什么意思了，它表示的是邊界的意思。內容和盒子邊框中間是padding，即內邊距，邊框和邊框外其他元素之間是margin，即外邊距。

JavaScript

終于來到了最后的JavaScript，這個和Java可是沒有一點關系的啊，朋友們，這個是一款主要用于前端的一種編程語言，為網站提供動態，交互的效果。

給大家舉一個例子。把鼠標放在上面他會自動彈出一些東西，或者變顏色之類的都是JSP做的東西。

他和之前兩個方面的主要區別就是，他是一種嚴格意義上的編程語言。當然，隨著技術的發展，JSP現在也慢慢用于后端的編寫了。

那么我們怎么寫一個JSP文件呢？新建一個文件，寫入以下內容

var alertText='hello xiao wei'

alert(alertText)

保存為index.js，和index.html放在同一個目錄下面，這兩句話是什么意思呢？第一行，我們用var定義了一個字符串，后面的alert(alertText)是可以在網頁彈出一個提示框，大家經常進入一個網頁會彈出一個對話框，就是這個原理。

在JSP中大家可以使用if判斷語句，也可以定義函數等等，這里就不多介紹了。

到這里為止，差不多已經把前端的知識給大家都介紹了一下，如果大家自己對這部分內容感興趣，可以去深入的了解一下。

因為小瑋是個新手，這方面可能了解的不是很透徹，更加深入的就要看各位看客老爺自己了。那么了解完了這些知識，下一期我們就會正式進入爬蟲的實戰環節啦。期待下一次推文~

總結

以上是生活随笔為你收集整理的python后端和爬虫_10分钟教你Python爬虫（上）-- HTML和爬虫基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。