網頁如何呈現到用戶面前？
在我們瀏覽各種網站的時候，瀏覽器呈現的都是圖文並茂的頁面，其中不少還有動態的動畫效果。
那麼一個網頁是如何從服務器端傳輸到客戶端並展現在你的電腦上的呢？大致有如下幾步：
1. 用戶輸入一個 URL ，瀏覽器使用 DNS 協議查詢這個 URL 地址對應的 IP
2. 瀏覽器向這個 IP 對應的服務器發送 HTTP 請求，
3. 服務器返回 URL 對應的資源，通常是一個 HTML 文檔
4. 瀏覽器對這個文檔進行解析，文檔裏面有數據也有其他的鏈接（ URL ），其中 CSS，Javascript 和圖片的鏈接比較特殊，對於每一個這樣的鏈接，瀏覽器都會發起一個單獨的 HTTP 請求，獲得對應的資源。
5. 所以現在瀏覽器有了一個 HTML 文檔，很多的 CSS 和 Javascript 文檔，瀏覽器通過使用資源對頁面進行渲染，
最終一個網頁就呈現到了用戶面前
打開你的瀏覽器，進入控制檯，點開網絡一欄，隨便進入一個網站，就可以很清楚的看到瀏覽器獲取資源的情況。
從圖中可以看到瀏覽器最開始獲取了一個 HTML 文檔，然後獲取了很多 CSS 和圖片資源等。
HTML，CSS， JS 是如何構成一個網頁的？
這部分內容多而繁雜，這裏不展開說明，僅對每一個部分的功能進行簡單說明
HTML
它的全稱是超文本標記語言，實際上它不是一門編程語言，而是一門標記語言，它使用標籤來描述網頁，準確的來說是描述一個網頁的結構和內容。<html></html> 就是一對標籤。以下面的 HTML 段爲例，說明一下它的基本用法。
<html>
<h1 class='title-1' id='title'>Hello World</h1>
<p>Welcome</p>
<img src='http://img.hb.aicdn.com/62ddd968d3a4ca320fb0012ec906eb5d0d8b632c1cfb5-Od2H5K_fw658' alt='Watermelon'>
</html>- 標籤總是由一對開閉標籤組成，但是也有例外。
- 一對標籤之間的就是標籤的內容，它可以是單純的字符串，也可以是其他的標籤，例如上面的 html 標籤裏有 h1 標籤和 p 標籤。
- 標籤可以有屬性，例如上面的 h1 標籤就有 class 屬性和 id 屬性，它們可以用來對標籤元素進行更細粒度的控制。
- 每個標籤有各自獨有的意義，這是一種約定，比如 h1 代表最大的標題，p 代表單獨的段落，而img 代表這裏有一張圖片。
上面的 HTML 在我的瀏覽器裏顯示就是這個樣子的，很醜，但是卻展示了 HTML 最基本的功能。當然這個文檔很不規範，不過也足夠簡單。
回到最開始， 前面說 HTML 文檔是描述一個網頁的結構和內容的，內容很好理解，那麼什麼是結構呢？實際上，每一個標籤就代表了在頁面上顯示的一個元素，比如你可以用 HTML 指明，這裏有一張圖片，然後有一段文字，然後還需要有一個表格。也就是描述一個網頁有什麼。而這些東西是如何佈局的是後面要說的內容。
以上就是對 HTML 的最簡單的介紹，除此之外進一步需要學習就是每一個標籤的含義，每一個標籤屬性的含義，以及熟練的運用，這些就是熟能生巧了。
CSS
說完了 HTML， 那麼 CSS 又是什麼呢？
CSS 全稱是層疊樣式表，如果說 HTML 用來表示網頁的結構，那麼 CSS 就是用來描述網頁的樣式。什麼叫樣式？樣式就是網頁裏有那麼多元素，但是每一個元素需要如何呈現，比如這張圖片是放在最開始還是最後面；放在左邊，還是放在中間；這個表格是豎着放還是橫着放等等。
實際上對於簡單的樣式，HTML 自身就在每個元素的屬性中提供了一定的支持，比如 align 屬性能夠設置元素的對齊方式，href 屬性能夠給元素一個超鏈接。但是由於現在的網頁加入了各種炫酷的特效，帶來了大量的樣式設置，而在 HTML 中爲每一個元素添加屬性既繁雜又難以維護，所以才需要將這兩部分內容分離開，將元素樣式的描述單獨放到 CSS 裏面，既易於維護又可以更好的複用，這其實和我們將程序抽象爲函數和類是一個道理。
.title-1 {
color: red;
}
#title {
text-align: center;
}CSS 的主要知識點有兩個：
1. 選擇器，這個用來定位 HTML 文檔中的元素，比如有類選擇器，基於元素的 class 屬性，用. 標明；id 選擇器，基於元素的 id 屬性，用# 標明。上面的例子裏兩個選擇器用不同的方式選擇了 h1 這個標籤。可以看到兩個樣式都應用在了元素上，這就是所謂的層疊。當然還有很多更復雜選擇器，可以保證對元素精確的選擇。
2. 對元素屬性的設置，這一部分就是實際的每一個元素的屬性設置。
3*. 盒子模型，這個實際上不能算做單獨的一點，但是這在 CSS 當中是十分重要的內容，就是描述每一個元素的大小和邊框的界定。
CSS 簡單說起來就這麼多，但是和 HTML 一樣，也有大量學習和熟練的成本。
Javascript
Javascript，實際上這是一門編程語言，有了它理論上我們可以在瀏覽器裏做一切編程語言能做到的事。它通常爲網頁添加一些動態的效果，增強網頁的交互性。js 的部分可以從三個方面來說，
1. 語法，js 是一門類 C 語言，語法和 C語言很像，所以學習成本會低一些。
2. DOM，這是 js 所獨有的，每一個 js 解釋器都會有這個對象，也就是網頁對象，通過它我們可以對網頁的內容進行任何我們所希望的改造。
3. Ajax，嚴格來說這不算是 js 的內容，但是對爬蟲來說這很重要。Ajax 全稱是異步JavaScript和XML。簡單的來說就是通過不刷新網頁的方式在後臺像服務器請求數據，實際的數據格式是 XML。
說回到爬蟲
那麼這樣的一些東西在爬蟲裏有什麼用呢？
在爬蟲裏最重要的就是 HTML，大部分我們所需要捕獲的信息就是 HTML 裏，所以需要對 HTML 文檔進行分析，提取感興趣的信息。而 CSS 實際上用得比較少，如果你喜歡，在爬蟲裏可以用 CSS 的選擇器對 HTML 的元素進行定位。而在現在有很多網頁有很多動態效果，簡單的例如下拉菜單啊，彈窗啊，或者使用 Ajax 加載網頁，實在是數不勝數；這一部分比較難，我也不是特別熟悉，但是據我所知，一個常用場景就是對 Ajax 的請求進行分析；有些大型網站的登錄會對密碼進行加密，這時就需要對 js 進行分析才能正確獲取登錄數據；當然這一部分有一個簡單省事的辦法，只是速度上慢了很多，這個留到以後再說。