“互聯網中有50%以上的流量是爬蟲”，那這麼多的爬蟲它們在互聯網上做什麼呢？答案當然是：孜孜不倦的爬取爬取網頁信息。今天我們就來講講組成互聯網的重要部分之一：HTML網頁。
一、起源與發展
萬維網的發明者，互聯網之父計算機科學家蒂姆·伯納斯·李，在他最初的構想組成中就有：提出使用HTML超文本標記語言(Hypertext Markup Language)作爲創建網頁的標準。
大家千萬記住HTML並不是一種編程語言，而是一種標記語言 (markup language)，由W3C（萬維網聯盟）制定標準，然後由個大瀏覽器廠商自己去實現支持！
下面我們來看看HTML標準的發展歷史：
二、組成部分
我們常說的網頁就是HTML頁面，而構成HTML頁面的東西有很多，如：html標籤、數據、css樣式、js等，那我們就簡單的講講以下這幾個組成部分。
1.HTML標籤
HTML標籤是構成HTML頁面的主要組成部分，我們來看一個HTML實際例子：
<!--網頁頭-->
<head>
<meta charset="utf-8" />
<title>註冊頁</title>
</head>
<!--網頁體-->
<body>
<!--表單標籤-->
<form action="/register" method="post">
<div>用戶名：<input type="text" name="username"/></div>
<div>性 別：<input name="sex" type="radio" checked="checked"/>男 <input name="sex" type="radio" />女 </div>
<div>密 碼：<input type="text" name="password"/></div>
<br/>
<input type="submit" value="註冊" style="width:150px;" />
</form>
</body></html>
上面是一個非常簡陋的用戶註冊頁面（用於教學），用戶可以輸入用戶名性別和密碼然後點註冊就提交到服務器，下面我們來稍微講解以下這個頁面。
html標籤對限定了文檔的開始點和結束點，所有的元素和標籤都應該放在他們之間。
head標籤對表示網頁頭部信息，其中包含了網頁標題、網頁編碼、網站ico、網站引入的一些靜態資源（css、js）以及網站關鍵字SEO相關信息等。
body標籤對表示網頁體，幾乎所有的網頁內容都在這裏展現。
form標籤對表示創建表單，表單用於向服務器傳輸數據，能夠包含 input 元素，比如文本字段、複選框、單選框、提交按鈕等等。
div標籤對是目前網頁中比較流行的標籤，在七八年年流行使用table來構思一個網頁，把一個網頁想象成多少行多少列，這種構思靈活性和維護性極差，並且Table標籤構思的網頁對google爬蟲和百度等這種搜索引擎收錄性很差，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。
所以目前前端流行使用div+css來構思網頁，這樣的優點是代碼精簡、有很好的靈活性和可維護性。
input標籤用於蒐集用戶信息，它可以根據不同的 type 屬性值，輸入字段擁有很多種形式。
輸入字段可以是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。
其他的HTML標籤就不多講，希望大家自己去網上學習。
在有些初級web工程師面試中，面試過程中可能會讓你手寫一個用戶註冊功能，這裏給大家講講大概的流程：
1、用戶點擊註冊連接（一般是get請求/register），然後服務器響應此請求返回一個註冊頁面
2、用戶輸入用戶名密碼、圖形驗證碼等信息，提交註冊信息（一般是post請求/register）
3、服務端收到信息後對信息做校驗（一般是前後端雙校驗），然後存入數據庫，返回註冊成功提示
2.數據
網頁作爲主要的信息交換載體，標籤的主要作用就是包裹數據，讓數據能夠以人類可視的方式展現。尤其是一些新聞網站，他們主要以展示新聞信息爲主，我們以頭條網頁來講講：
在紅色框中圈出來的這些新聞，他們是把數據包裹在html標籤中，然後以列表的形式展示給用戶，接着我們來看看網頁代碼：
我們可以看到新聞標題被a標籤包圍，還有一些如縮略圖、評論數、時間等信息構成了一條新聞簡述，然後多個新聞（il標籤）構成了一個列表（ul）。
那服務器是如何將數據與封裝到頁面中去的呢？
1、前後端未分離：
前後端沒有分離的公司，一般是先由前端工程師寫好頁面（數據寫死），然後由後端程序員合頁面（就是將寫死的數據去掉，然後加上數據字段）。
2、前後端分離：
前後端沒分離最大的問題就是同一個頁面可能前後端開發同學都會去修改，修改的人少還行，但是如果開發人員一多，大家改來改去全亂了，而且發佈也會有一定的限制，所以目前流行前後端分離，後端同學只需要提供數據，前端同學搭一個nodejs後臺自己渲染頁面。
拿上面我們的簡陋的註冊頁面來講講前後端未分離時具體返回頁面步驟，假設我們用戶註冊成功然後登錄，登錄成功我們直接跳轉用戶主頁展示用戶名和性別，頁面如上圖，步驟如下：
1、用戶登錄成功，在數據庫中讀取用戶信息。
2、讀取到用戶數據後進行頁面渲染
3、返回渲染後的頁面給瀏覽器
3.CSS樣式
html標籤+數據構成了整個網頁的骨架，但是隻有數據和html標籤的網頁是奇醜無比的
層疊樣式表(英文全稱：Cascading Style Sheets 簡稱CSS)是一種用來表現HTML等文件樣式的計算機語言。css可以定義html現實的樣式，可以實現很多不同的效果、排版等等，html中所有的元素幾乎都需要css來管理樣式，而且現在越來越流行div+css搭配控制頁面排版和樣式，css主要通過三大選擇器來修飾html標籤。
沒有css的頁面將會是雜亂無章或缺少美感的頁面，我們以上面簡單的用戶主頁爲例子演示如何使用css以及css的功能。
效果：
代碼：
css：
4.js
css使頁面有了很好看的樣式，但是卻沒有很好的交互性，何爲交互性？就是用戶在使用產品時的瀏覽、點擊、切換使之方便、快捷、平滑都很合理，很友好。
而js（JavaScript）則是增加網頁的動態功能，它定義了網頁的行爲，提高用戶體驗。比如js可以監控到用戶的點擊，滑動等動作，然後根據用戶的這些動作來做一些操作。
我們還是以上面簡單的用戶主頁爲例子，用js（或jquery）來實現用戶修改用戶名或者性別信息。
代碼：
效果：
一個大概的修改用戶信息流程：
1、點擊修改後通過js現實出輸入框
2、在用戶輸入的時候用js監聽輸入框內容，及時提醒用戶新的用戶名是否可用
3、再用戶點擊提交後，用ajax提交，並且做防止重複提交的操作
4、服務端反饋後用js做提示即可
上面只是做了一個非常簡單的js效果，給零基礎的朋友演示js是什麼，有什麼功能，但是js的功能遠不止這些，現在的js已經在前端、後端以及app中佔據着重要的地位，當然還有使用在反爬蟲的js混淆。
三、總結
由於篇幅原因，這裏只演示一些非常基礎非常簡單的功能，想學習網頁的製作同學們可以自己去網上學習，這裏推薦一個學習網站：菜鳥教程。希望大家都學習一些前端知識，因爲爬蟲的第一步就是分析網頁，然後再根據網頁數據是內嵌在html標籤中，還是js動態加載，或者網站使用加密或混淆的反扒技術。當遇到反扒高手時，我們就需要去仔仔細細的分析js，這也被稱爲解毒的過程（反扒工程師在代碼裏投毒）。所以爬蟲與反扒的鬥爭可謂其樂無窮！
原文鏈接：https://mp.weixin.qq.com/s/e6WfBefLujuvZWZBXkSF2Q
公衆號：裸睡的豬