如果把整個絢麗的網(wǎng)頁看成一個人的話，那么html就是這個人的骨肉，css則是好看的外表，JS則能讓這個人成長，移動，甚至是放大縮小。
所以這節(jié)讓我們一起探索這個“人”組成的奇妙之處。
我在網(wǎng)上找了個html網(wǎng)頁作為示范(這是個保留彩蛋)
看起來短短4行字符，但是它的源代碼卻遠超過顯示出來的字符：
<html>
<head>
<title>The Dormouse's story</title></head>
<meta charset="UTF-8">
<link rel="stylesheet" >
<script src="http://www.xxx.com/xxx.js"></script>
</head>
<body>
<p class="title"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a class="sister" id="link1">Elsie</a>,
<a class="sister" id="link2">Lacie</a> and
<a class="sister" id="link3">Tillie</a>
;and they lived at the bottom of a well.
</p>
<p class="story">...</p>
</body>
</html>
源代碼由最外層的<html>標簽包裹，<html>內(nèi)部是<head>、<body>。
head標簽：里面一般會存放這個網(wǎng)頁的一些設(shè)置、CSS 和 JS 文件，設(shè)置比如字符集<meta charset="UTF-8">是告訴瀏覽器，網(wǎng)頁的編碼按照UTF-8來解析，以免出現(xiàn)亂碼。
body就是我們看到的內(nèi)容了，一般在body的結(jié)尾或者</body>后面有一些js文件的引入或者代碼。
CSS文件引入代碼:
<link rel="stylesheet" >
JS文件引入代碼:
<script src="http://www.xxx.com/xxx.js"></script>
簡介完成，下面詳細介紹：
1. HTML
超文本標記語言，標準通用標記語言下的一個應(yīng)用。
超文本標記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。
我們看到的整個源代碼就是一個HTML文件，這個文件是我們發(fā)起請求，然后服務(wù)器返回給我們的響應(yīng)的一部分。
瀏覽器收到響應(yīng)后，開始解析html文件，采用從上到下的流程，逐步渲染頁面。把內(nèi)容顯示出來。所以加載網(wǎng)頁是有一個過程的，并不是迅速就能出現(xiàn)的。
html標簽由很多個節(jié)點(Tag、Node)組成。比如 head 、 body 、 p 、 a 。這些節(jié)點之間的關(guān)系有父子關(guān)系、兄弟關(guān)系。
父子關(guān)系：子節(jié)點被包括在父節(jié)點中。比如body內(nèi)的所有標簽，都是body的子節(jié)點。
兄弟關(guān)系：兩個節(jié)點位于同一層級，比如我們的所有的p標簽。他們的直接父節(jié)點都是body。
其中每個節(jié)點都可以有自己的一些屬性，比如：class、href，src，id。這些屬性決定了他們的特點：
class：通常情況下，我們用class為節(jié)點加上樣式。
href：這是一個錨點，如果href的值是一個互聯(lián)網(wǎng)地址，那么它就會呈現(xiàn)一個鏈接的樣式。
src：一般我們在 img 和 script 標簽中使用，用來引用圖片或者js文件，它的值就是文件的地址。
id：id 通常在一個網(wǎng)頁是唯一的，為了便于給它加上一個特別的樣式或者便于js找到它。
2. CSS
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應(yīng)用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。 [1]
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
?
css長這樣：
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.pull-right就是設(shè)置 class 為 pull-right 的節(jié)點的樣式。float: right則是設(shè)置樣式為向右浮動。CSS的作用是巨大的，我們看到的顏色、點擊效果、背景顏色等等，都是由CSS設(shè)置的。
但是呢，在寫爬蟲的時候，我們基本上不必管css。因為css里面只有外觀樣式，并沒有對我們有利的信息。
3. JS
JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
?
首先要聲明的一點：javascript 和 java 除了都是編程語言之外，沒有任何關(guān)系，沒有任何關(guān)系，沒有任何關(guān)系~！
JS是可以在瀏覽器里面運行的編程語言。它的特點：
① JS可以在瀏覽器端進行運算
??比如在你輸入密碼的時候，當(dāng)你密碼不合格，比如少于6位的時候，網(wǎng)頁會出現(xiàn)密碼過短的提示。這就是JS獲取到了你輸入的密碼，然后計算出位數(shù)過少，然后控制提示出現(xiàn)。
題外話：最近出現(xiàn)的JS挖礦程序也是屬于這個范圍。當(dāng)你打開某個網(wǎng)頁之后，發(fā)現(xiàn)突然電腦變卡了，那就打開資源管理器，看看是不是瀏覽器占用了你大量的CPU資源，如果是，那就可能遇到了讓你為別人挖礦的網(wǎng)頁了。
② JS可以發(fā)起請求并更新網(wǎng)頁 (敲黑板！劃重點！)
??JS可以在不刷新網(wǎng)頁的前提下，向后臺發(fā)起請求，然后單獨更新(增刪改)某一段網(wǎng)頁。我們稱之為 AJAX。我們常見的點擊加載更多、頁面劃到頁面底端自動加載更多、點擊刪除某個節(jié)點、點擊刷新，都屬于AJAX操作。這是爬蟲常見的障礙之一。
?
傳送門：
下一章:
爬蟲入門教程⑤— 安裝Python
所有的章節(jié):
